[Résolu]Scroll lien ancre

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
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
#1
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
#2
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 ?
#2
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 ?
#3
Je viens d'essayer avec les Anchor tag mais ça ne marche pas.

Une petite idée ?
#3
Je viens d'essayer avec les Anchor tag mais ça ne marche pas.

Une petite idée ?
#4
Dois-je modifier mon template de navigation ? Si oui, j'avoue ne pas savoir comment m'y prendre.
#4
Dois-je modifier mon template de navigation ? Si oui, j'avoue ne pas savoir comment m'y prendre.
#5
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).
#5
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).
#6
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/s...th-jquery/

Exemple sur lequel je me suis basé : http://tympanus.net/Tutorials/WebsiteScr...tical.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.
#6
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/s...th-jquery/

Exemple sur lequel je me suis basé : http://tympanus.net/Tutorials/WebsiteScr...tical.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.
#7
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}
#7
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}
#8
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
#8
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
#9
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.
#9
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.
#10
Ok, ça marche. Je vais faire quelques tests approfondis avant de fermer le sujet.

Merci bcp Smile
#10
Ok, ça marche. Je vais faire quelques tests approfondis avant de fermer le sujet.

Merci bcp Smile
#11
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=OmBKRL9c...SZ&index=9
#11
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=OmBKRL9c...SZ&index=9
#12
Oui je regarderai la vidéo que tu mentionnes. Merci pour la proactivité. Smile
#12
Oui je regarderai la vidéo que tu mentionnes. Merci pour la proactivité. Smile
#13
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)
#13
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)
#14
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.
#14
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.
#15
Je suis en 1.12, il existe une version plus récente ?
#15
Je suis en 1.12, il existe une version plus récente ?
#16
Ah ouais la version 2.0. Je regarde ça.
#16
Ah ouais la version 2.0. Je regarde ça.
#17
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.
#17
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.
#18
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.
#18
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.
#19
Ok je vais créér un autre post.

Merci
#19
Ok je vais créér un autre post.

Merci


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)