Forum CMS Made Simple FR

Version complète : [Résolu]Scrolling animé jQuery
Vous consultez actuellement la version basse qualité d’un document. Voir la version complète avec le bon formatage.
Pages : 1 2

SamLi

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: !1.9.4.2
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~ Cms Version: 1.9.4.2
#~ Installed Modules:
#~ CMSMailer: 2.0.1
#~ FileManager: 1.1.0
#~ MenuManager: 1.7.6
#~ ModuleManager: 1.4.2
#~ News: 2.11.3
#~ nuSOAP: 1.0.2
#~ Printing: 1.1.2
#~ Search: 1.6.10
#~ ThemeManager: 1.1.4
#~ TinyMCE: 2.8.4
#~ CGExtensions: 1.25.4
#~ CGFeedMaker: 1.0.14
#~ CGSimpleSmarty: 1.4.8
#~ Comments: 1.9.2
#~ Captcha: 0.4.3
#~ SiteMapMadeSimple: 1.2.2
#~ Guestbook: 1.3.2
#~ Gallery: 1.4.4
#~ TemplateExternalizer: 1.3
#~ FormBuilder: 0.7
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template: false
#~ output_compression: false
#~ max_upload_size: 2000000
#~ default_upload_permission: 664
#~ 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.3.6
#~ md5_function: On (True)
#~ gd_version: 2
#~ tempnam_function: On (True)
#~ magic_quotes_runtime: Off (False)
#~ E_STRICT: 2048
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 30
#~ output_buffering: 4096
#~ safe_mode: Off (False)
#~ file_uploads: On (True)
#~ post_max_size: 8M
#~ upload_max_filesize: 2M
#~ session_save_path: C:\Users\Samy\AppData\Local\Temp (0777)
#~ session_use_cookies: On (True)
#~ xml_function: On (True)
#~ Server Information:
#~ Server Api: apache2handler
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.5.10
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~


Bonjour,

J'aimerais ajouter un mon site un défilement fluide avec jQuery,
j'ai tenté de suivre le tutoriel vidéo suivant :

http://www.grafikart.fr/tutoriels/jquery...g-anime-44

qui fournit le code suivant

Code :
$(document).ready(fuction(){
    $('a[href^=#]').click(fuction(){
        cible=$(this).attr('href');
        if($(cible).length>=1){}
            hauteur=$(cible).offset().top;
        }
        else{
            hauteur=$("a[name="+cible.substr(1,cible.lenght-1)+"]).offset().top;
        }
        $('html,body').animate({scrollTop:hauteur},1000,'easeOutQuint);
        return false;
        
    });
    
});

J'ai essayé d'adapter le tutoriel aux ancres cmsms du type "page#ancre" au lieu de "#ancre",
j'ai plus ou moins réussi à ce niveau là
Code :
$('a[href^=#]').click(fuction(){
en adaptant le selecteur via l'aide en ligne de jQuery
mais je finis quand même pas être bloqué dans la suite du tutoriel particulièrement à cette étape
Code :
hauteur=$("a[name="+cible.substr(1,cible.lenght-1)+"]).offset().top;

Est-ce qu'une âme charitable pourraît m'aider à adapter ce morceau de code pour que ce scrolling animé marche
sur cmsms?

Merci d'avance, Samy

PS: J'ai vu le message de mise à jour de la version quand j'ai crée le sujet, mon site est encore en développement local, je vais le faire avant la mise en ligne.
bonjour,
le tuto jquery concerne les ancres internes et CMSMS doit fonctionné normalement sans rien modifier:
Tiny MCE génère
Code :
<a name="toto"> et <a href="#toto">
Dans le cas que tu sites, page#ancre il s'agit d'un lien externe : tu vas sur une ancre d'une autre page et là le script n'est effectivement pas adapté.

SamLi

Salut,

C'est marrant en regardant le code source, je constate que

Code :
{anchor anchor='header' title='Remonter' text='Haut de page'}

donne

Code :
<a href="/dossier/index.php?page=cv#header" title="Remonter">Haut de page</a>

C'est pas un peu bizarre ça?


C'est marrant ce que tu me dis là, parce que rien qu'au niveau de la selection des ancres

Code :
$('a[href^=#]').click(fuction(){

alert("coucou");

}

Ca ne vas pas, j'ai du utiliser le selecteur du genre (de mémoire)

Code :
$('a[href*="#"]').click(fuction(){

Merci à toi
RE:
oui, Tiny MCE génère le lien d'une manière et anchor d'une autre...désolé Wink

Alors donc, il faut rechercher la position du # dans la chaine.
Je pense que ton selecteur avec * est bon : recherche des balises a contenant #.
Ensuite, il faut repérer avec strpos('#', cible) genre :
Code :
hauteur=$("a[name="+cible.substr(strpos('#', cible),cible.lenght-1)+"]).offset().top;

Attention, de tête sans aucune garantie et peut-être à 1 caractère près car strpos retourne la position et non l'offset...

Bon, ceci dit, on est loin de CMSMS...

SamLi

Ok merci, je vais essayer. J'y connais rien au javascript.. C'est pour ça j'espère que ta solution fonctionne :-P

Tu as raison on est loin de CMSMS, mais je vois pas meilleur endroit pour demander de l'aide pour adapter appliquer ce type de scrolling avec CMSMS

SamLi

Bon j'ai testé, je suis bloqué à ce niveau :

Code :
$(document).ready(function(){
    $('a[href*=#]').click(function(){
            cible=$(this).attr('href');
            if($(cible).length>=1){
                hauteur=$(cible).offset().top;
            }        
        alert(hauteur);
    });
    
});

Il doit y a un problème avec cette partie du code

Code :
cible=$(this).attr('href');
            if($(cible).length>=1){
                hauteur=$(cible).offset().top;
            }        
        alert(hauteur);

car le reste fonctionne. Pour l'instant j'ai donc pas pu essayer ton code pour repérer la position du #.
Salut,
tu ne décris pas ce qui se passe, difficile de t'aider.

Ce que je suppose, c'est que alert renvoie 'undefined'.
La cible est-elle comme ça : <a name=toto> ou comme ça : <a href=toto> ?
Si c'est le premier cas, tu ne passes pas dans le test, donc hauteur n'est pas initialié.
Si c'est le second cas, effectivement il y a un autre problème.
Essaie avec ça pour voir :
Code :
cible=$(this).attr('href');
hauteur="non trouvée";
            if($(cible).length>=1){
                hauteur=$(cible).offset().top;
            }        
        alert(hauteur);

SamLi

Merci, en effect avec ton code j'ai "hauteur non trouvée" donc c'est bien la hauteur qui n'est pas initialisée, je suis bête je voulais faire par étapes pour vérifier que tout fonctionne mais vu que cmsms génère du a href biensur ça ne colle pas avec le tuto ou il utilise du a name... et j'ai complètement zappé le else >.<
Je suis bête.

Bon je vais continuer à tatonner pour la suite, on verra ce que ca donne.

EDIT : Enfait si on utilise bien du href, ca veut dire qu'il y a un problème.
Oula je commence à m'embrouiller :S

EDIT2 : J'ai repris ça le cerveau un peu plus frais.

Ce qu'il se passait c'était rien : je n'avais même pas de boite de dialogue. J'avais un alert lorsque je mettais du texte à l'intérieur genre alert("alert");

En regardant le code source avec Chrome, CMSMS me génère des <a href=" "> pour mes ancres donc logiquement d'après ton dernier message je suis sensé passer dans le test donc il y a un autre problème.

J'ai continué un peu mes tests avec le code suivant

Code :
$(document).ready(function(){
    $('a[href*=#]').click(function(){
         cible=$(this).attr('href');
            if($(cible).length>=1){
                hauteur=$(cible).offset().top;
            }        
         else{
            alert(cible);
            alert(cible.substr(1,cible.lenght-1));
        }
    });
    
});

Le resultat qu'il donne est lorsque je clique sur mon lien, j'ai un premier alert avec cible qui fonctionne qui me donne toute la cible du lien dans la boite de dialogue puis le deuxième alert ne m'affiche rien.
non, ça veut dire que si on utilise du <a href...> on répond au if, sinon on répond au reste.
Dans le tuto c'était le cas d'une div et ici, pour toi, c'est le cas du <a name=...>.

Tu n'est pas bête, tu cherches à comprendre Smile

SamLi

J'ai édité presque au même moment que toi, on s'es croisé Big Grin
n'édite pas tes messages, fais-en de nouveaux...je m'y perds.
1-Peux-tu me donner le html généré de l'ancre et celui du lien.
2-comment créer-tu tes ancres.
3-comment créer-tu tes liens.

SamLi

Ok je vais essayer d'être clair.
Je teste le truc principalement sur une page où j'ai fait mon CV

Voici un extrait de code du contenu global que j'utilise pour cette page

Code :
<div class="cv_category" id="experience">
        <ul id="menu_cv">
            <li class="active"><span>Exp&eacute;rience professionnelle</span></li>
            <li><span>{anchor anchor='education' title='Aller &agrave; formation' text='Formation'}</span></li>
            <li><span>{anchor anchor='skills' title='Aller &agrave; comp&eacute;tences' text='Comp&eacute;tences'}</span></li>
            <li><span>{anchor anchor='activities' title='Aller &agrave; activit&eacute;s' text='Activit&eacute;s'}</span></li>
            <li><span>{anchor anchor='header' title='Remonter' text='Haut de page'}</span></li>
        </ul>

Voici ce que ça donne quand je regarde la source avec chrome

Code :
<div class="cv_category" id="experience">
        <ul id="menu_cv">
            <li class="active"><span>Exp&eacute;rience professionnelle</span></li>
            <li><span><a href="/whynotyou.fr_v3_dev/index.php?page=cv#education" title="Aller &agrave; formation">Formation</a></span></li>
            <li><span><a href="/whynotyou.fr_v3_dev/index.php?page=cv#skills" title="Aller &agrave; comp&eacute;tences">Comp&eacute;tences</a></span></li>
            <li><span><a href="/whynotyou.fr_v3_dev/index.php?page=cv#activities" title="Aller &agrave; activit&eacute;s">Activit&eacute;s</a></span></li>
            <li><span><a href="/whynotyou.fr_v3_dev/index.php?page=cv#header" title="Remonter">Haut de page</a></span></li>
        </ul>

....
</div>

J'ai la même liste que je répète pour chaque partie de mon CV ce qui permet avec les ancres de pouvoir naviguer rapidement entre ces différentes parties.

Je crée mes ancres avec un id, et après j'utilise la syntaxe cmsms {anchor anchor='id_element_cible' title=' ' text=' '} pour faire le lien.
donnes moi un exemple concret (html) d'ancre...

SamLi

Un exemple concret d'ancre Rolleyes

Voilà comment j'aurai fait sans cmsms
Code :
<div class="cv_category" id="experience">
        <ul id="menu_cv">
            <li class="active"><span>Exp&eacute;rience professionnelle</span></li>
            <li><span><a href="#education">Formation</a></span></li>
....                      
          <li><span><a href="#header">Haut de page</a></span></li>
        </ul>

C'est ça que tu me demandes? :/
non, mais c'est pas grave.
Je fais 3 trucs en même temps alors je me mélange un peu les pinceaux.
Il faut que je reproduise ton cas...
Je reviens dans la soirée avec la solution j'espère.

SamLi

Très gentil à toi :-)
me revoilà,
j'ai corrigé les fautes de saint taxe et ajuster ce que j'ai dit.
En fait strpos, c'est du php, ça ne risque pas de fonctionner!
En javascript c'est indexOf (quand je dis que je me mélange les pinceaux).
Donc, voici le code qui fonctionne chez moi :
Code :
$(document).ready(function(){
    $('a[href*=#]').click(function(){
        cible=$(this).attr('href');
        if($(cible).length>=1){
            hauteur=$(cible).offset().top;
            alert('cible'+hauteur);
        }
        else{
            cmscible=cible.indexOf('#')+1;
            alert(cible.substr(cmscible,cible.length-cmscible));
            hauteur=$("a[name="+cible.substr(cmscible,cible.length-cmscible)+"]").offset().top;
       }
        $('html,body').animate({scrollTop:hauteur},1000);
        return false;
        
    });
    
});
Je n'ai pas mis l'effet final easeOutQuint, rajoute-le.
Pfff j'aime pas le javascript...

SamLi

Hello,

Tout d'abord un grand merci de t'être penché sur mon problème.. Désolé pour le javascript :S

J'ai essayé de rajouter easyOutQuint, mais vu que ça prenait pas j'ai fait différents tests en changeant d'abord
1000 en 5000 par exemple sans répercussion.
Donc j'ai essayé de regarder si ça fonctionnait plus haut.

Je vois bien ton alert au niveau du

Code :
alert(cible.substr(cmscible,cible.length-cmscible));

J'ai essayé d'alerter la hauteur juste après

Code :
alert(cible.substr(cmscible,cible.length-cmscible));
hauteur=$("a[name="+cible.substr(cmscible,cible.length-cmscible)+"]").offset().top;
alert(hauteur);

et pour l'autre partie du test qui doit fonctionner dans mon cas j'ai bien vu dans le code ton alert

Code :
alert('cible'+hauteur);

Mais dans les deux cas du test, j'ai seulement le alert de la cible mais aucune boite de dialogue ou information pour la hauteur.
Ca m'énerve, si tu m'a donné ce code c'est que ça doit fonctionner chez toi...
salut,
effectivement, ça fonctionne bien chez moi.
Pour l'instant, oublie easyOutQuint, tu le rajouteras quand ça fonctionnera.

Voilà comment j'ai fait:
dans le gabarit de ma page j'ai mis dans le HEAD :
Code :
<script type="text/javascript" src="uploads/jquery-1.6.1.js"></script>
<script type="text/javascript" src="uploads/scroll.js"></script>
Mes fichiers js sont dans uploads et le fichier scroll.js contient le code donné plus haut.
L'ordre est important : scroll.js doit être après jquery...js.
Dans ma page (contenu>page), j'ai :
Code :
<p><strong><a name="top"></a>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu</p>
<p> </p>
<p><strong><a name="par1"></a>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu</p>
<p><strong><a name="par2"></a>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu.</p>
<p> </p>
<p>{anchor anchor='top' title='Remonter' text='Haut de page'}</p>
<p>{anchor anchor='par1' title='Remonter' text='Paragraphe 1'}</p>
<p>{anchor anchor='par2' title='Remonter' text='Paragraphe 2'}</p>

Voilà, donc si tu fais un copier-coller de tout ça, ça DOIT fonctionner.
Repars du code js de scroll.js tel que le l'ai mis dans mon post précédent.
Courage

SamLi

Exact, en copiant tout cela fonctione sur ma page de test...

Pourquoi celà ne fonctionne-t'il pas vers des id de div?
je regarderai plus tard pour div...je souffle un peu Big Grin

SamLi

Pas de problème.. Merci déjà pour le code.. une de ces joies de voir ça défiler déjà comme ça :-)
enfin si, j'ai bien une idée:
c'est parce que le lien "contient" # et ne "commence" pas par #.
Il faut reformater la cible avant de faire :
Code :
cible=$(this).attr('href');

Je vois ça ce soir et quand ça marchera, tu nous feras un petit tuto pour notre doc. Wink

SamLi

Tu veux dire il faut faire un manip pour avoir '#cible' plutôt qu'un lien contenant #cible? avant de la récupérer?
Voilà le code final à utiliser avec anchor ou sans anchor sur un élement HTML avec ID ou sur un lien ancre (<a name=...>) :
Code :
$(document).ready(function(){
    $('a[href*=#]').click(function(){
        href=$(this).attr('href');
        diese=href.indexOf('#');
        cible=href.substr(diese,href.length-diese)
        if($(cible).length>=1){
            hauteur=$(cible).offset().top;
        }
        else{
            hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
       }
        $('html,body').animate({scrollTop:hauteur},1000);
        return false;
        
    });
    
});

Ouf, j'espère que ça servira au plus grand nombre...
SamLi, j'attends ton tuto hein?
Pages : 1 2