[Résolu]Scroll lien ancre - Version imprimable

[Résolu]Scroll lien ancre - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Général (https://forum.cmsmadesimple.fr/forum-10.html)
+--- Sujet : [Résolu]Scroll lien ancre (/thread-3596.html)

[Résolu]Scroll lien ancre - Joey0007 - 11/09/2015

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.12
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.12.1
#~ Installed Modules:
#~ CMSMailer: 5.2.2
#~ CMSPrinting: 1.0.5
#~ FileManager: 1.4.5
#~ MenuManager: 1.8.7
#~ MicroTiny: 1.2.9
#~ ModuleManager: 1.5.8
#~ News: 2.15.2
#~ Search: 1.7.13
#~ ThemeManager: 1.1.8
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 64000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.5.12
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 2048
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 3M
#~ upload_max_filesize: 64M
#~ session_save_path: D:/wamp/tmp (0777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: apache2handler
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.6.17
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ Server Time Diff: Aucune différence de date du système de fichiers trouvées
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour,

Je souhaiterais utiliser un effet de scrolling sur les différents points de menu de mon site. Quelle type de contenu (lien page interne ?) dois-je utiliser et où placer mon ancre ?

D'avance merci

[Résolu]Scroll lien ancre - Joey0007 - 11/09/2015

Je complète. J'ai utilisé le paramètre additionnel dans lequel j'ai mis l'ID de mon ancre. Donc quand je survole mon lien j'ai bien
#page-2.

Mais quand je clique dessus le scroll marche mais sans animation. Mon ancre marche donc bien, c'est déjà ça.

Je sais que mon code javascript marche étant donné que j'ai ajouté une partie html en dur dans le bas de mon template afin de le vérifier. Cela fonctionne bien.

Une petite idée ?

[Résolu]Scroll lien ancre - Joey0007 - 11/09/2015

Je viens d'essayer avec les Anchor tag mais ça ne marche pas.

Une petite idée ?

[Résolu]Scroll lien ancre - Joey0007 - 13/09/2015

Dois-je modifier mon template de navigation ? Si oui, j'avoue ne pas savoir comment m'y prendre.

[Résolu]Scroll lien ancre - Jean le Chauve - 13/09/2015

Bonsoir,
Les renseignements que tu nous donnes sont insuffisants.
Il nous faut un lien vers la page en question et le nom du plugin de scrolling utilisé (avec sa page de documentation ce serait même beaucoup mieux Wink

[Résolu]Scroll lien ancre - Joey0007 - 16/09/2015

Bonjour,

Je reviens donc avec du concret.

Voici le lien vers mon site : http://www.carryall.fr

Voici le lien vers le plugin javascript utilisé pour scroller : http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

Exemple sur lequel je me suis basé : http://tympanus.net/Tutorials/WebsiteScrolling/index_vertical.html

Je vous mets également le code de mon menu de navigation, sachant que j'utilise boostrap 3.3.5.

Code :
[== HTML ==]

{strip}

{if $count > 0}

    <ul class='nav navbar-nav navbar-right' role='menu'>

    {* if using cmsms lower then 1.11 change foreach below to {foreach from=$nodelist item='node'} *}

    {foreach $nodelist as $node} 

        {* if depth is greater then previous we need ul *}

        {if $node->depth > $node->prevdepth}

            {repeat string="<ul class='dropdown-menu' role='menu'>" times=$node->depth-$node->prevdepth}   

        {* if depth is lower then we have to close unordered list *}

        {elseif $node->depth < $node->prevdepth}

            {repeat string='</li></ul>' times=$node->prevdepth-$node->depth}

            </li>

        {elseif $node->index > 0}

            </li>

        {/if}

        {* is menu item current? *}

        {if $node->current == true}

            <li class='active{if $node->parent == true || $node->haschildren == true}{if $node->depth > 1} dropdown-submenu{else} dropdown{/if}{/if}'>

                <a href='{$node->url}' {if $node->parent == true || $node->haschildren == true}class='dropdown-toggle {$node->alias}' data-toggle='dropdown' data-target='#'{else}class='{$node->alias}'{/if}{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>        

        {* is menu item parent and not sectionheader? *}

        {elseif $node->parent == true && ($node->type != 'sectionheader' && $node->type != 'separator')}

            <li class='{if $node->parent == true || $node->haschildren == true} active{if $node->depth > 1} dropdown-submenu{else} dropdown{/if}{/if}'>

                <a href='{$node->url}' data-toggle='dropdown' data-target='#' class='dropdown-toggle active {$node->alias}'{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>        

        {* is menu item a sectionheader? *}

        {elseif $node->type == 'sectionheader' && ($node->parent == true || $node->haschildren == true)}

            <li class='sectionheader {if $node->depth > 1} dropdown-submenu{else} dropdown{/if}'>

                <a href='#' data-toggle='dropdown' class='dropdown-toggle {$node->alias}{if $node->current == true} active{/if}'>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>

        {* and sectionheader has no children? *}

        {elseif $node->type == 'sectionheader' && $node->haschildren == false}

            <li class='sectionheader nav-header'>

                {$node->menutext}             

        {* should a menu item be separated? *} 

        {elseif $node->type == 'separator'}

            <li class='divider'>

        {else}

            <li{if $node->parent == true || $node->haschildren == true} class='{if $node->depth > 1}dropdown-submenu{else}dropdown{/if}'{/if}>

                <a href='{$node->url}' {if $node->parent == true || $node->haschildren == true}class='dropdown {$node->alias}'{else}class='{$node->alias}'{/if}{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>

        {/if}

    {/foreach}

    {repeat string='</li></ul>' times=$node->depth-1}</li>

    </ul>

{/if}

{/strip}

Vous verrez donc que sur la gauche du site se trouve deux liens (page 2 et Scroll down) où le scroll fonctionne correctement.

J'espères que cela vous aidera à m'orienter vers une solution.

D'avance merci.

[Résolu]Scroll lien ancre - Jean le Chauve - 16/09/2015

Tu n'as pas attaché la classe scrollTo à ton lien.
Dans ta navigation, modifie cette ligne (il n'y a que {else}class='{$node->alias}' à transformer en {else}class='scrollTo')

Code :
{else}

            <li{if $node->parent == true || $node->haschildren == true} class='{if $node->depth > 1}dropdown-submenu{else}dropdown{/if}'{/if}>

                <a href='{$node->url}' {if $node->parent == true || $node->haschildren == true}class='dropdown {$node->alias}'{else}class='{$node->alias}'{/if}{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>

        {/if}

    {/foreach}

par celle-ci

Code :
{else}

            <li{if $node->parent == true || $node->haschildren == true} class='{if $node->depth > 1}dropdown-submenu{else}dropdown{/if}'{/if}>

                <a href='{$node->url}' {if $node->parent == true || $node->haschildren == true}class='dropdown {$node->alias}'{else}class='scrollTo'{/if}{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{if ($node->parent == true || $node->haschildren == true) && ($node->depth < 2)} <b class='caret'></b>{/if}</a>

        {/if}

    {/foreach}

[Résolu]Scroll lien ancre - Joey0007 - 16/09/2015

Je viens de faire la modification mais ça ne change rien.

Pourtant le html final produit ressemble bien à ceci :

Code :
[== HTML ==]

<a href="http://carryall.fr/#page-2" class="scrollTo">Ancre1</a>

Le résultat est en ligne

[Résolu]Scroll lien ancre - Jean le Chauve - 16/09/2015

Je crois avoir compris, voici ce que tu obtiens :

Code :
[== Indéfini ==]

<a class="scrollTo" href="http://www.carryall.fr/#page-2">Ancre1</a>

alors que tu devrais avoir

Code :
[== Indéfini ==]

<a class="scrollTo" href="#page-2">Ancre1</a>

Donc, en modifiant

Code :
[== Indéfini ==]

<a href='{$node->url}

par

Code :
[== Indéfini ==]

<a href='#{$node->alias}

ça devrait fonctionner.

[Résolu]Scroll lien ancre - Joey0007 - 16/09/2015

Ok, ça marche. Je vais faire quelques tests approfondis avant de fermer le sujet.

Merci bcp Smile

[Résolu]Scroll lien ancre - Jean le Chauve - 16/09/2015

J'ai remarqué que tu utilisais les blocs de contenu, je te conseille de regarder la video à ce sujet : https://www.youtube.com/watch?v=OmBKRL9caYc&list=PLXalhHHve-2T3aitq0UmSSv16SI1PXPSZ&index=9

[Résolu]Scroll lien ancre - Joey0007 - 16/09/2015

Oui je regarderai la vidéo que tu mentionnes. Merci pour la proactivité. Smile

[Résolu]Scroll lien ancre - Joey0007 - 16/09/2015

Je remarque un autre souci qui est probablement lié au menu template. Je ne parviens pas à aller plus loin qu'un niveau dans mon menu. J'ai donc

Navigation (OK)
ancre 1 (OK)
ancre 2 (OK)
sous rubrique (OK)
point de menu 1 (n'apparaît pas dans mon menu)
point de menu 2 (n'apparaît pas dans mon menu)

[Résolu]Scroll lien ancre - Jean le Chauve - 16/09/2015

Pour t'aider à ce sujet, j'ai besoin d'une page exemple "point de menu" avec les liens en dur.

Bien que la nouvelle version du cms soit encore très jeune, je te conseille de travailler avec elle dès à présent. Il y a des changements importants (en particulier les menus), donc autant apprendre directement les bonnes bases que des bases obsolètes.

[Résolu]Scroll lien ancre - Joey0007 - 17/09/2015

Je suis en 1.12, il existe une version plus récente ?

[Résolu]Scroll lien ancre - Joey0007 - 17/09/2015

Ah ouais la version 2.0. Je regarde ça.

[Résolu]Scroll lien ancre - Joey0007 - 17/09/2015

Ok j'ai passé mon site en 2.0. Mais au niveau du menu, comment dois-je procéder ? Où puis-je trouver de la documentation/tutoriel pour créer mon menu en utilisant Bootstrap 3.3.5.

[Résolu]Scroll lien ancre - Jean le Chauve - 17/09/2015

Tu dois te baser sur les exemples que tu trouveras dans gestion du design->gabarits du type navigator::

Étant donné que le problème de scroll semble résolu, je te propose d'ouvrir un nouveau post ayant pour titre "Menu bootstrap et cmsms 2.0" et clôturer celui-ci.

Si tu souhaites mon aide, j'aurai besoin du code en dur de pages de différents niveaux.

[Résolu]Scroll lien ancre - Joey0007 - 17/09/2015

Ok je vais créér un autre post.

Merci