Est-il possible d'ajouté un bouton d'étirement de page vertical?

nicolas-d76 Posté à 31/10/2016 15:20

Bonjour,

Je rencontre actuellement un probléme dans ma création de mon site web.

Je voudrais ajouter un bouton qui étire ma page web et affiche le contenu qui était masqué.

J'ai déjà vu ce principe sur certain site internet, mais e n'arrive pas à ajouter cette fonction dans magix web designer 12.

Est-ce possible? Si oui, savez vous comment?

Cordialement

Commentaires

francois-bellanger Posté à 31/10/2016 17:36

Bonjour,

Vous voulez parler d'un lien vers point d'ancrage ?

Il suffit de nommer un objet (bouton ou autre) qui se trouve tout en bas de la page en cliquant droit dessus et sur Noms dans le menu qui s'affiche, puis vous nommez l'objet sans oublier d'appliquer..

Ensuite vous ajoutez un petit bouton en haut de la page et vous lui donnez un "lien vers point d'ancrage" vers ce nom que vous allez retrouver dans le menu déroulant des liens de point d'ancrage.

A noter que le retour vers le haut peut aussi se faire de cette façon, dans ce cas vous créez et nommez deux boutons qui auront chacun un lien l'un vers l'autre. Ainsi votre site affichera la partie cachée soit en haut, soit en bas.

J'ai un tuto qui explique comment faire un bouton Top ou Back

Cordialement

FB

nicolas-d76 Posté à 01/11/2016 11:49

Non ce n'est pas exactement un point d'ancrage que je voudrais faire, car cette solution a pour effet néfaste (avis perso) d'augmenter ma barre de défilement vertical de ma page web de manière définitive.

Mon but est d'avoir un contenu visible sur ma page web assez réduit afin d'avoir une barre de défilement vertical courte et d'offrir à l'internaute qui voudrais plus d'informations par exemple, de cliqué sur un boutton "Plus d'infos" qui à pour effet de grandir ma page et afficher le contenu précédement caché afin de ne pas polluer ma page d'informations inutile pour certains internautes.

Je ne sais pas si ma façon d'expliquer est très claire lol.

Je vais essayé de retrouver un lien vers un site web qui contient cette fonctionalité.

Merci quand même pour ta réponse FB ;)

 

francois-bellanger Posté à 01/11/2016 12:32

A coller dans le head de votre page :

<title>Formulaires</title>

A coller dans le Body de votre page :

<textarea rows="9" cols="70" id="a"style="resize: none;"></textarea>

Votre texte, vous le glissez :    none;">ici</textarea

Fb

 

nicolas-d76 Posté à 01/11/2016 13:10

Merci FB, mais je peux utiliser du texte HTML dans magix Web Designer 12 premium ?

J'ai trouvé sur le site rossignol cette fonctionnalité.

http://www.rossignol.com/FR/FR/hero-elite-all-turn-ca-konect--2016--RAFBW03--product--home-alpine.html

Quand ont déssend un peut la page, dans description il y a un bouton "Voir plus" qui étire la page et affiche le contenu caché.

C'est tout affait ce que je recherche à faire.

 

francois-bellanger Posté à 01/11/2016 13:27

Je vais étudier cette possibilité de chez Rossignol.

Autrement, il est tout à fait possible d'utiliser du texte html dans Designer 12

FB

awanderer Posté à 02/11/2016 13:26

Bonjour à tous,

C'est très facile à réaliser ce genre de bouton genre rossignol.

Il suffit de créer un bouton ( un simple carré de couleur avec une flèche par exemple) que l'on colle tout en bas de sa page. Ensuite on fait le lien en cliquant sur la petite chaine et qui affiche les propriétés web, dans le menu lien on coche lien vers point d'ancrage et un clic sur la petite flèche affiche tous les points d'ancrages existants,On choisi celui que l'on veux, on applique et l'on ferme.Pas besoin de créer un point d'ancrage supplémentaire haut ou bas

Pour que le bouton soit actif toujours en limite bas de l'écran faire ceci :Menu service / élèments flottants/étirés / Cocher flottant et ne pas étirer / fermer. Vous pouvez aussi ajouter une animation web.

Votre bouton ce comportera comme celui de rossignol et viendra ce placer en bas d'écran aussitot que la page s'affiche.

Coerdialement

aWanderer

francois-bellanger Posté à 02/11/2016 14:00

Bonjour Awanderer,

On ne doit pas voir la même chose :

Chez Rossignol :

Le bouton "Voir plus" libère le texte en entier.

Le bouton "voir moins" recache la fin du texte.

Le point d'encrage lui, emmène le lecteur à un point nommé de la page en la faisant descendre ou monter dans son intégralité, ce qui n'est pas le cas chez Rossignol, car la page ne bouge pas, seule la partie sous le texte change de place.

Cordialement

François

awanderer Posté à 02/11/2016 14:24

Bonjour François

Oups !!! Je n'avais pas trouvé le bouton ( peut être une lecture un peu vite ou la fatigue ) qui est de la même couleur que le restant du texte chez moi. Après ton message et deux recherches je l'ai trouvé.( Décidement aujourdhui c'est pas la forme ).

Amicalemet

aWanderer

 

francois-bellanger Posté à 02/11/2016 17:42

Bon,

On peut faire pareil avec les calques supplémentaires. Le seul problème, c'est la petite croix noire inévitable pour revenir au texte court. Donc un bouton "voir plus" ok, puis la croix noire qui remplace "voir moins"

FB

panagix Posté à 05/11/2016 00:12

Bonjour,

Code que j'ai trouvé sur le web  et que j'ai amélioré

Code a mettre dans le body

<div class="container">
    <a class="none" id="div1"></a>
le texte ici<br />
    <a href="#div1" class="plus">Voir plus</a>   
<div class="bloc-affiche">
le texte cacher apparait ici<br /> 
<a href="#" class="moins">Voir moins</a>
</div>

Code a mettre dans le head

<style type="text/css">
.bloc-affiche
{
    width:1000px;
    max-height: 0;
    min-height: 0;
    overflow: hidden;
}
.none:target ~ .bloc-affiche
{
    min-height: 1500px;
}
.none, .none:target ~ .plus
{
    display:none;
}
</style>

J'ai essayé ça fonctionne

panagix Posté à 09/11/2016 09:16

Cette solution vous convient-elle ?

Est-ce quelle fonctionne ?

Merci

francois-bellanger Posté à 10/11/2016 09:14

Bonjour Panagix,

J'ai testé ton script avec succès.

Si cette solution peut paraître intéressante, néanmoins le fait de faire apparaître ou disparaître le texte caché, ne fait pas glisser les objets qui se trouveraient sous le texte vers le bas ou vers le haut selon les boutons plus ou moins. Pour se rapprocher de l'exemple Rossignol où les objets suivent le texte selon sa taille, la méthode des calques me paraît la plus appropriée.

Bien amicalement

François.

panagix Posté à 10/11/2016 11:26

Bonjour François,

que veux tu dire par objets, des images ?

j'ai essayer avec des boutons et les boutons se déplace après le texte et remonte suivant la longueur du texte, bref les boutons colle au texte comme chez Rossignol.

J'ai pas essayer avec les calques puisque tu avait l'air de dire qu'il y avait un petit problème de croix, je vais essayer de mon coté avec les calques.

Bien amicalement

 

nicolas-d76 Posté à 10/11/2016 11:41

Bonjour,

J'ai testé la réponse de Panagix et je te remercie d'avoir cherché.
Cette méthode est très interessante et je compte bien l'adapter dans certaines parties de mon site web. Mais celle-ci est néanmoins très difficile à adapter à ma problématique (dans mon projet, cet onglet déroulant affiche des images contenant des liens et des effets mouse over et par la même occasion étent ma page). Il y a le problème de renvoie de texte que viens de souligner François.

François, je suis très interessé aussi par la méthode des calques supplémentaire, pourrais tu expliquer sucsintement cette méthode? J'ai reussi à crées des calques supplémentaires qui affichent mon contenu caché, avec la petite croix noir (celle-ci ne me dérange pas vraiment, ce n'est qu'un détail). Mais mon calque ne rallonge pas ma page web.

A tu la solution?

Amicalement

panagix Posté à 10/11/2016 18:20

Pour votre projet, a part faire du codage pur, je ne vois pas comment.

Avec les calques c'est peut être faisable mais bon je vois déjà le boulot en plus faire un lien sur une image qui est dans un calque je crois que ça marche pas car c'est le calque entier qui sera en lien.

francois-bellanger Posté à 11/11/2016 08:06

Bonjour,

Voir exemple ici :

http://aa7x2k.xara.hosting/essais/

Si cette solution vous satisfait, je vais préparer un Pdf d'explication que vous pourrez me demander sur mon site, mais pas avant la semaine prochaine (voir adresse du site dans mon profil). 

@ Panagix : Les objets sont en général, tous les éléments visibles sur une page web (objets : texte, image, forme, etc)

Un calque est transparent , seuls apparaissent les objets présents sur le calque il n'y a pas de fond et c'est pourquoi, sur ce calque supplémentaire j'ai mis un fond blanc seulement derrière la partie mobile pour cacher le contenu de la page Off. Pour la partie fixe de droite, elle n'est seulement présente que sur la page Off donc pas besoin de la mettre sur chaque calque.

 

Amicalement

François

awanderer Posté à 11/11/2016 08:48

Bonjour François,

Je vois que tu as le même résultat que moi avec les calques. Mais même problème, le bouton '' voir moins '' ne fonctionne pas.  En cliquant à n'importe quel endroit sur la partie calque, on revient à l'affichage d'origine, dans ce cas le bouton '' voir moins ''ne sert à rien . Si tu as une solution je serais heureux de la connaitre.

Amicalement

aWanderer

francois-bellanger Posté à 11/11/2016 09:48

Bonjour awanderer,

Parfois cela fonctionne, parfois pas du tout.

Le bouton voir moins est un leurre, c'est à dire qu'il n'a aucun lien. Je savais que le clic hors de la zone du calque ramène à la page initiale. Hors, dans ma démonstration, la zone hors calque (relativement étroite du fait qu'elle se situe entre 2 fonds blancs indispensables pour masquer les objets placés dans la page off (texte et image).

Je vais essayer de remplacer ce bouton voir moins par une croix personnelle, car si, dans les paramètres, on décoche "Fermer automatiquement le pop up, la croix noire Magix vient s'installer en haut à droite de la page, bien trop loin du texte pour que les internautes comprennent comment refermer le calque.

J'espère finir par trouver une solution...

Amicalement

François

francois-bellanger Posté à 11/11/2016 10:16

@ Awanderer,

J'ai peaufiné et cela a l'air de fonctionner.

A+

François

nicolas-d76 Posté à 11/11/2016 10:34

Bonjour François,

Je crois que je vais devoir apprendre le language HTML comme le dit Panagix.

Car la méthode du calque supplémentaire fonctionne très bien mais seulement lorsque l'on souhaite décaler ou masquer les éléments de la page sans modifier l'emplacement du pied de page.

Voici schématiquement ce que j'avais en tête :

Le codage que Panagix me semble le plus proche du coup mais va demander énormément de modifications difficiles car je ne maitrise pas vraiment le HTML et CSS.

Après il est peut-être envisageable de récupérer le code de tous mes éléments créé via magix (Afin de récupérer les emplacements, les formes, les effets, les liens, les images...) et de les insérer à mon codage pur, afin d'ajouter la fonction ralonge de ma page. Puis de les réinsérer dans magix. Plus qu'a testé

Enfin, je tiens tous à vous remercier de vous creuser la tête car toutes les informations que vous avez partagées sont très utile.

François je pense que l'ajout d'un fichier .PDF sur ton site pour expliquer les calques, serait une bonne idée car il pourrait en aider plus d'un.

Amicalement

 

panagix Posté à 11/11/2016 12:45

Bonjour,

La philosophie de Web Designer est de faire un site sans écrire une seule ligne de code

donc l'idéal c'est de faire ce que vous souhaitez avec ce logiciel, mais il n'est pas prévu pour faire des choses bien particulière à moins de trouver quelques widgets ou quelques ligne de code html ou autre.

Mais si nos exigences vont bien au delà alors ils faut se tourner vers d'autre logiciel ou plutôt savoir coder en html, CSS, PHP et JS.

Oui vous pouvez récupérez le code et de nouveau l'insérer dans le code html et comme vous dites plus qu'à tester et là certainement des surprises et il faut beaucoup de courage et de patiente, je sais de quoi je parle, bon en même temps c'est enrichissant...

Si nous nous creusons la tête c'est aussi pour relever un défit 

cordialement

francois-bellanger Posté à 11/11/2016 13:34

@ nicolas-d76

Il existe déjà des PDF pour expliquer l'utilisation des calques supplémentaires, à demander sur mon site.

@ panagix

Les premiers logiciels de Designer nécessitaient beaucoup plus de scripts que maintenant où tout s'achète clé en main. Je regrette que nous n'ayons plus à nous creuser la tête comme autrefois. Mais qui, aujourd'hui, voudrait se plonger dans le html ou le JavaScript ?

Amicalement

François