11548 sujets

JavaScript, DOM et API Web HTML5

Jquery scroll to, navigation horizontale

Bonjour,

je viens vers vous car un petit (voir gros) blocage au niveau de la mise en place d'une navigation horizontale avec le langage jquery!
Je suis assez nulle donc c'est peut être pas grand chose ma question, ou peut être que j'ai codé n'importe comment.... Bref, j'ai telechargé 'jquery scroll to', easing, localscroll, enfin la panoplie, fais les appels aux javascripts dans les <scriptes> comme ceci : 

	<script type ="text/javascript" src="jquery/jquery.localscroll.js"></script>
	<script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>
	<script type="text/javascript">
			$(document).ready(function(){
				$('#horiz_container_outer').horizontalScroll();
	            $('#liens').localScroll(); 
				$.localScroll.defaults.axis = 'x'; 
	    });

	</script>


Après avoir créer mes pages HTML indépendamment, je les ai donc rassembler sur une page, les ai placé dans une div "container" tel que :

<div id="conteneur">
	<div id="page1">
			<div id="tonprofil">
				<img src="images/tonprofil.png"/>
			</div>
			<div id="boutonprofil"><A HREF="ton_cocktail_profil.html" border=0><img src="images/bouton_profil.png"/></a>
			</div>
	</div>
	<div id="page2">
			<div id="carre_createur">
					<img src="images/les_createurs_carre.png" border=0/>
			</div>
			<div id="contenucocktails">
				<ul id="horiz_container_outer">
					<li id="horiz_container_inner">
						<ul id="horiz_container">
							<li><a href="#" class="info"><img src="images/cocktails/cocktail_macelhone.png" width="260px" height="515px" alt=""/><span><img src="images/cocktails/recette_side_car.png" alt=""/></span></a></li>
							<li><a href="#" class="info"><img src="images/cocktails/cocktail_summit.png" width="260px" height="515px" alt=""/><span><img src="images/cocktails/recette_summit.png" alt=""/></span></a></li>
							<li><a href="#" class="info"><img src="images/cocktails/cocktail_malhone.png" width="260px" height="515px" alt=""/><span><img src="images/cocktails/recette_pick_me_up.png" alt=""/></span></a></li>
							<li><a href="#" class="info"><img src="images/cocktails/cocktail_filed.png" width="260px" height="515px" alt=""/><span><img src="images/cocktails/recette_1715.png" alt=""/></span></a></li>
							<li><a href="#" class="info"><img src="images/cocktails/amour_sanglant.png" width="260px" height="515px" alt=""/><span><img src="images/cocktails/recette_amour_sanglant.png" alt=""/></span></a></li>
							<li><a href="#" class="info"><img src="images/cocktails/banana_bliss.png" width="260px" height="515px" alt=""/><span><img src="images/cocktails/recette_banana_bliss.png" alt=""/></span></a></li>
							<li><a href="#" class="info"><img src="images/cocktails/smooth_temptation.png" width="260px" height="515px" alt=""/><span><img src="images/cocktails/recette_smooth_tentation.png" alt=""/></span></a></li>
							<li><a href="#" class="info"><img src="images/cocktails/sunshine.png" width="260px" height="515px" alt=""/><span><img src="images/cocktails/recette_sunshine.png" alt=""/></span></a></li>
						</ul>
					</li>	
				</ul>
			<div id="scrollbar">
				<div id="track">
						<div id="dragBar"></div>
				</div>
			</div>	
	</div>
</div>


puis ai indiqué dans le css :

#conteneur{
	position:absolute;
	overflow:hidden;
	top: 120px;
	width: 8000px;
}

#page1{
	position:absolute;
	width:2000px;
}
#page2{
	position:absolute;
	width:2000px;
	left:2000px;
}


Donc logiquement mes "pages" sont censées se décaler de 2000px (taille d'une page) dès lors qu'on clique sur les liens (j'appelle les #pages dans mes liens)

Mais.... Il ne se passe rien, et je suis plutôt bloquée Smiley scared
C'est peut être rien mais ça serait merveilleux si quelqu'un puisse m'aider Smiley lol


MERCI D'avance !
Bonjour Gothor,

merci de ta réponse, je viens d'essayer mais hélas pas de changement...
Merci d'avoir pris la peine de faire un essai!
Bonjour,
Où as-tu eu ce code, stp ?
Trax_smurfin a écrit :
$(document).ready(function(){
    $('#horiz_container_outer').horizontalScroll();
    $('#liens').localScroll(); 
    $.localScroll.defaults.axis = 'x'; 
});
Sais-tu ce qu'il signifie ?
Je n'ai jamais vraiment utilisé JQuery, mais en regardant un peu l'utilisation de localScroll, je ne vois pas tout ça Oo
$.localScroll.defaults.axis = 'x';
est en effet utile pour définir que l'axe de scrolling est celui horizontal.
Les deux autres lignes, je ne vois...
Après ça, tu n'as qu'à appeler la fonction
$.localScroll();
puis tout se gère automatiquement en faisant des liens classiques vers des ancres de ta page...
<a href="#ancre1">Lien 1</a><br />
<a href="#ancre2">Lien 2</a>
<div id="ancre1" style="height : 5000px"></div>
<div id="ancre2" style="height : 5000px"></div>

Modifié par Gothor (04 Apr 2012 - 23:20)
Salut salut,

et bien le 'horizontalScroll' me sert pour une autre fonction (une sorte de scroll contenant des images horizontalement), donc en gros j'utilise le jquery deux fois dans ma page.

Bon je vais revoir toute la structure de mon code, merci quand même ! Smiley cligne
Peut-être pas besoin de tout revoir, juste modifie tes liens pour que le localScroll les détecte =)
salut,

bon ben je n'arrive toujours pas à effectuer ce scroll Smiley ohwell 

<div id="liens">
			<ul>
				<li><a href="#page1" class="bouton_cocktail"></a></li>
				<li><a href="#page2" class="bouton_createurs"></a></li>
				<li><a href="ton_cocktail.html" class="bouton_gamme"></a></li>
				<li><a href="ton_cocktail.html" class="bouton_soiree"></a></li>
			</ul>
		</div>


voilà pour mes liens

après pour le script :

	<link href='http://fonts.googleapis.com/css?family=Dancing+Script:regular,bold&v1' rel='stylesheet' type='text/css'>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script src="jquery.horizontal.scroll.js" type="text/javascript"></script>
	<script type ="text/javascript" src="jquery/jquery.localscroll.js"></script>
	<script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>
	<script type="text/javascript">
			$(document).ready(function(){
				$('#horiz_container_outer').horizontalScroll();
				$('#contenu').localScroll();
	            $.localScroll.defaults.axis = 'x'; 				
	    });
	</script>


et le css:

#contenu{
	position:absolute;
	overflow:hidden;
	top: 120px;
	width: 8000px;
}

#page1{
	float:left;
	height:2000px;
}
#page2{
	float:left;
	height:2000px;
	left:2000px;


comprend pas le bug Smiley bawling Smiley fache

merci à tous!!
Ce qui m'aiderais bien pour pouvoir t'aider c'est un lien vers ton site ou les sources complètes a télécharger en zip.

a+
Charly
Salut salut!

Merci d'avoir répondu, au final le scroll To marche mais j'ai encore un problème (et oui sinon ça ne serait pas drôle!)
Voilà mon scroll marche de page en page, super, mais je n'arrive pas à le faire s'adapter à tous formats d'écran. A l'heure actuelle il 'fonctionne' que sur un 24", plus petit ça déforme tout !

Je vous met le css de mes #pages :

#contenu{
	position:relative;
	/*overflow:hidden;*/
	top:270px;
	width: 5760px;
}

#page1{
	float:left;
	position:relative;
	width:1920px;
}

#page2{
	float:left;
	position:relative;
	width:1920px;	
}

#page3{
	float:left;
	position:relative;
	width:1920px;
}


Pour l'instant je n'ai mis que 3 pages. Et Chum je n'ai pas de liens vers ce site, c'est pour une épreuve en cours dans 2 semaines! Smiley smile
Après oui je peux te faire un zip mais maintenant que le scroll marche je ne vais pas t'embêter!

Merci Smiley smile
Trax_smurfin a écrit :
Après oui je peux te faire un zip mais maintenant que le scroll marche je ne vais pas t'embêter!

Merci Smiley smile


Moi oui, j'aimerai bien l'avoir ce petit zip avec les explications qui vont avec s'il te plait :-p Ça fait deux heures que je cherche sur le net ce genre de script Smiley ohwell
Bonsoir à toutes et à tous,

@ Trax_smurfin : j'ai pas tout compris de ce que tu veux faire.

J'imagine que tu as découpé ta page principale en sous page comme si tu avais un tableau disons de trois lignes et trois colonnes. L'usage du scrolling horizontal ou vertical te permet de te positionner sur la sous-page que tu désires.

Je crois que cette technique se nomme les pages glissantes ou coulissantes.
Est-ce de cela dont tu parles ?

@+
Est-ce primordial pour toi d'utiliser le scroll ?

Si non, tu peux fonctionner comme un slider en manipulant la position d'un "wrapper" contenant tes différentes <div>.

Si oui, tu peux p-e voir du coté de cette solution (scroll vertical) :

jQuery.fn.extend({
	scrollToMe : function(){
    	var x = jQuery(this).offset().top - 100;
    	jQuery('html, body').animate({scrollTop: x}, 500);
	}
});
// $('#element').scrollToMe();


Je pense que tu sauras y faire les adaptations nécessaire ! Smiley cligne

Bon courage ! Smiley smile
Salut !

bon au final ça marche pas mal avec le scroll to

voilà le résultat : (pour les petits écrans ça s'adapte pas trop, j'ai pas encore fait le code, pas le temps!)

www.karelesamalens.com/aedor

@Dimitri : tu veux quel zip ?
Y faut juste que tu telecharges jquery scroll to, jquery local scroll..

Au niveau du script ça donne ça :


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery/jquery.horizontal.scroll.js" type="text/javascript"></script>
<script type="text/javascript" src="scrollto/localscroll/jquery.localscroll.js"></script>
<script type="text/javascript" src="scrollto/localscroll/jquery.scrollTo.js"></script>
<script type="text/javascript" src="scrollto/lancement.js"></script><!-- permet le lancement de la fonction de scroll -->
<script type="text/javascript">
	$(document).ready(function(){
		$('#horiz_container_outer').horizontalScroll();	
	});
</script>
<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script language="javascript">
	resolution = screen.width;
	if (resolution<=1600) {
	 document.write('<link href="style2.css" rel="stylesheet" type="text/css" />');
	}
	else if (resolution>1600)   {
	 document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
	}
</script>
Sujet clos
Aller à