Accueil > Forum > > > > menu select + scroll animé
 menu select + scroll animé
dimanche 25 octobre 2009 à 21:12:07 |
menu select + scroll animé
ethos20
|
Bonjour,
Pour la réalisation d'un nouveau site je souhaiterai utiliser une navigation par ancres avec menu de type form select couplée à un effet de scroll animé de type smoothscroll ou autre...Seulement j'ai déjà testé pas mal de librairies (jquery, mootools,etc...), et pas moyen de coupler ce satané menu avec un script (généralement s'occupe des liens "ahref" pas des balises options avec sélecteur "value"...).
Si quelqun a une idée pour le réaliser cela m'aiderait grandement !
merci d'avance ! |
|
lundi 26 octobre 2009 à 09:58:44 |
Re : menu select + scroll animé
|
lundi 26 octobre 2009 à 10:40:03 |
Re : menu select + scroll animé
ethos20
|
Re,
Le problème est aussi sans conteste que je ne suis pas non plus un vrai développeur spécialiste du javascript...Même si ça fait maintenant plusieurs jours que je suis penché sur ce pb...et que pour apprendre c'est pas mal non plus !
Avec ce code je parviens bien à récup le "value" et il me renvoie effectivement sur les ancres correspondantes...
Code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!-- DEBUT ENTÊTE -->
<head>
<!-- META -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- FIN META -->
<!-- DEBUT JAVASCRIPT -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.localscroll-min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/init.js'></script>
<!-- FIN JAVASCRIPT -->
<!-- TITRE -->
<title>test</title>
<!-- FIN TITRE -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<!-- FIN CSS -->
</head>
<!-- FIN ENTÊTE -->
<!-- DEBUT CORPS -->
<body>
<!-- CONTENU -->
<div id="menu">
<select id="select" onchange="location.href=this.options[this.selectedIndex].value">
<option value="#monId">menu</option>
<optgroup label=",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"> </optgroup>
<option value="#monId1">lien1</option>
<option value="#monId2">lien2</option>
<option value="#monId3">lien3</option>
<optgroup label=",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"> </optgroup>
<option value="#monId4">lien4</option>
<option value="#monId5">lien5</option>
</select></div>
<div id="containerGlobal">
<div style="height: 0px; width: 1px;"><a id="lien1" class="scrollLink"> </a></div>
<div id="container1">
blablabla bla bla.
</div>
<div style="clear-both"></div>
<div style="height: 0px; width: 1px;"><a id="lien2" class="scrollLink"> </a></div>
<div id="container2">
blablabla bla bla.
</div>
<div style="clear-both"></div>
<div style="height: 0px; width: 1px;"><a id="lien3" class="scrollLink"> </a></div>
<div id="container3">
blablabla bla bla.
</div>
<div style="clear-both"></div>
<div style="height: 0px; width: 1px;"><a id="lien4" class="scrollLink"> </a></div>
<div id="container4">
blablabla bla bla.
</div>
<div style="clear-both"></div>
<div style="height: 0px; width: 1px;"><a id="lien5" class="scrollLink"> </a></div>
<div id="container5">
blablabla bla bla.
</div>
<div style="clear-both"></div>
</div><!-- FIN CONTENU -->
</body>
<!-- FIN CORPS -->
</html> Code :
/* CSS
----------------------------------------------------------------------------------------------------*/
html{
overflow:hidden;
}
body {
background-color:#ffffff;
}
#containerGlobal{
position:absolute;
background:none;
width:745px;
height:100%;
padding-left:220px;
padding-top:60px;
color:white;
font-family:Arial;
font-size:9em;
font-weight:bold;
z-index:-1;
}
#container1, #container2, #container3, #container4, #container5{
margin-top:0.5em;
margin-bottom:3em;
position:relative;
}
.scrollLink {
padding-top: 67px;
}
#menu{
position:fixed;
margin-left:30px;
margin-top:20px;
}
Mais sans le smooth...arghhhh !
Bref...ça me dépasse...de toute manière.
|
|
lundi 26 octobre 2009 à 11:03:04 |
Re : menu select + scroll animé
|
lundi 26 octobre 2009 à 11:16:11 |
Re : menu select + scroll animé
ethos20
|
Effectivement, j'inclus aussi tout ça...
Code Javascript : jQuery(function( $ ){
/**
* Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
* @see http://flesler.demos.com/jquery/scrollTo/
* You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.LocalScroll.
*/
// The default axis is 'y', but in this demo, I want to scroll both
// You can modify any default like this
$.localScroll.defaults.axis = 'xy';
// Scroll initially if there's a hash (#something) in the url
$.localScroll.hash({
// Could be a selector or a jQuery object too.
duration:1500
});
/**
* NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I
* also affect the >> and << links. I want every link in the page to scroll.
*/
$.localScroll({
// could be a selector or a jQuery object too.
duration:1500,
hash:true,
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object, can be modified
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
}
});
});1 = initialiser le script.
Code Javascript : /**
* jQuery.LocalScroll - Animated scrolling navigation, using anchors.
* Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* Date: 3/11/2009
* @author Ariel Flesler
* @version 1.2.7
**/
;(function($){var l=location.href.replace(/#.*/,'');var g=$.localScroll=function(a){$('body').localScroll(a)};g.defaults={duration:1e3,axis:'y',event:'click',stop:true,target:window,reset:true};g.hash=function(a){if(location.hash){a=$.extend({},g.defaults,a);a.hash=false;if(a.reset){var e=a.duration;delete a.duration;$(a.target).scrollTo(0,a);a.duration=e}i(0,location,a)}};$.fn.localScroll=function(b){b=$.extend({},g.defaults,b);return b.lazy?this.bind(b.event,function(a){var e=$([a.target,a.target.parentNode]).filter(d)[0];if(e)i(a,e,b)}):this.find('a,area').filter(d).bind(b.event,function(a){i(a,this,b)}).end().end();function d(){return!!this.href&&!!this.hash&&this.href.replace(this.hash,'')==l&&(!b.filter||$(this).is(b.filter))}};function i(a,e,b){var d=e.hash.slice(1),f=document.getElementById(d)||document.getElementsByName(d)[0];if(!f)return;if(a)a.preventDefault();var h=$(b.target);if(b.lock&&h.is(':animated')||b.onBefore&&b.onBefore.call(b,a,f,h)===false)return;if(b.stop)h.stop(true);if(b.hash){var j=f.id==d?'id':'name',k=$('<a> </a>').attr(j,d).css({position:'absolute',top:$(window).scrollTop(),left:$(window).scrollLeft()});f[j]='';$('body').prepend(k);location=e.hash;k.remove();f[j]=d}h.scrollTo(f,b).trigger('notify.serialScroll',[f])}})(jQuery);2 = localScroll d'Ariel Flesher
Code Javascript : /**
* jQuery.ScrollTo - Easy element scrolling using jQuery.
* Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* Date: 5/25/2009
* @author Ariel Flesler
* @version 1.4.2
*
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
*/
;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);3 = scrollTo
4 = api google link pour jquery 1.3.2min.
Et c'est pas évident.
...
J'ai posé la question sur le blog du dévelopeur directement, mais je m'attends pas trop à avoir de réponse...
normal(?).
Le défi tient tjrs...
|
|
mercredi 28 octobre 2009 à 09:51:30 |
Re : menu select + scroll animé
ethos20
|
Je viens de trouver !!! Ahhhh ça fait du bien !
Solution : ici.
Avec jquery (google api), bookmarks.js et je link directement vers l'ancre.
Code HTML : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bookmarkscroll.js">
/***********************************************
* Scrolling HTML bookmarks- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
</script> Code HTML : <div id="menu">
<select id="select" onchange="window.location.href=this.options[this.selectedIndex].value">
<option value="lienSimple.html">menu</option>
<optgroup label=",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"> </optgroup>
<option value="javascript:bookmarkscroll.scrollTo('c1')" >lien1</option>
<option value="javascript:bookmarkscroll.scrollTo('c2')" >lien2</option>
<option value="javascript:bookmarkscroll.scrollTo('c3')" >lien3</option>
<optgroup label=",,,,,,,,,,,,,,,,,,,,,,,,,,,,,,"> </optgroup>
<option value="javascript:bookmarkscroll.scrollTo('c4')" >lien4</option>
<option value="javascript:bookmarkscroll.scrollTo('c5')" >lien5</option>
</select>
</div>Il suffit d'ajouter des lien normaux "a id" Et le tour est joué !!!
 Ca a été dur mais j'y suis arrivé ! et bien heureux ! héhé.
Ouf ! |
|
Cette discussion est classée dans : menu, type, select, animé, scroll
 Répondre à ce message
 Sujets en rapport avec ce message
le type "select" devient un "text" [ par enis ]
J'ai une liste déroulante contenant différents métier : ---------- ElectronicienInformaticien</optio
Manipuler un Menu Select (combo.) [ par syndrael ]
Bonjour,Je cherche un moyen pour effacer la premièer ligne d'un Menu Select (ou combo). Voici mon code mais j'ai une erreurfor (i=1;i{ ZeSelect.option
Frames et scroll [ par thetruche ]
Bonjour,Voici mon problème:J'ai un site ou il y a un haut de page, un gros menu à gauche avec des layers et un le contenu à sa droite.le soucis est qu
pb avec le menu animé [ par JuntaMonari ]
Bonsoir a tous voilà je n'arrive pas a changer les noms des titres du menu animé quelqu'un pourrai m'aider ? et j'utilise dreamweaver 2 et claris home
retour chariot dans un menu select option [ par sbertrand ]
bonjour, peut-on, et si oui comment faire passer a la ligne un texte de balise option dans un menu select ?j'ai un texte de 2 km qui agrandie mon menu
Menu type mac [ par kk8ete ]
Bonjour j'ai trouvé cette source : http://www.javascriptfr.com/code.aspx?ID=26334 et je voudrais faire exactement le meme type de menu mais en chang
Positionner la scroll bar dans un select multiple [ par RoroLaDechire ]
Bonjour,je souhaiterais que la première option sélectionnée dans un select multiple, lors d'un rechargement de la page, soit au milieu du select, et n
select menu [ par fred0076464 ]
salut, voila j'ai un menu deroulant qui se charge avec un champs 'res-nom' de ma table mysql 'reservation ' dont voici le code : Nom:onchange="submode
recherche multi critere avec resultats issue d'une BBD SQL [ par cartman171283 ]
bonjour a tous, g un trés gros probleme et j'espere que kelkun pourra m'aider. je doit developper une appli et avec un formulaire de recherche multi c
Aide select qui passe apr dessus mon menu déroulant [ par Neuronix ]
Bonjour à tous, j'ai fait un menu déroulant avec un "div" mais lorsque que celui ci passe par dessus un "select" le select le traverse et arrive au pr
 Livres en rapport
|
Derniers Blogs
 POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|