Sujet Précédent Sujet Suivant

Problème d'utilisation de Jquery Scroll To

Résolu/Fermé
videology Messages postés 5 Date d'inscription vendredi 4 septembre 2009 Statut Membre Dernière intervention 22 octobre 2009 - 16 oct. 2009 à 00:12
videology Messages postés 5 Date d'inscription vendredi 4 septembre 2009 Statut Membre Dernière intervention 22 octobre 2009 - 16 oct. 2009 à 13:51
Bonjour,

je développe un site internet en Html/CSS/Javascript, basé principalement sur un Script Jquery : Scroll To
( http://plugins.jquery.com/project/ScrollTo ).

Voici l'url du site en développement : http://www.videology.fr/v3/

Le but est de naviguer horizontalement sur le site, malheureusement, lorsque ma Div principale contient plus de 5 sous partie, la 6eme retourne à la ligne ( en cliquant sur l'onglet ABOUT vous verrez de quoi je veux parler )

Voyez plutôt ma structure pour comprendre :

HTML :

<body>

<div id="wrapper">

<div id="mask">

<div id="item1"><div class="content"></div></div>
<div id="item2"><div class="content"></div></div>
<div id="item3"><div class="content"></div></div>
<div id="item4"><div class="content"></div></div>
<div id="item5"><div class="content"></div></div>
<div id="item6"><div class="content"></div></div>

</div>

</div>

</body>


CSS :

body {
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
min-height:500px;
background:black repeat;
}


#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
overflow:scroll;
min-height:600px;
background:black url(../img/back.jpg) bottom center fixed no-repeat;
}

#mask {
width:500%;
height:100%;
}


.content {
width:890px;
height:320px;
margin:0 auto;
top:50%;
margin-top:-200px;
background:url(../img/opacity.png) repeat;
position:relative;
border:1px solid #666;
text-shadow: 0px 1px 2px #777;
color:#fff;
}

Lorsque j'ai ajouter un item6 ( About ), il revient à la ligne, ce qui peu paraitre normal vu que le Mask ne fait que 500% et que chaque item fait 100%. Logiquement, en passant mon Mask à 600%, mon item6 devrait rester sur la même ligne que les autres, mais ce n'est pas le cas, impossible d'empêcher le retour à la ligne du 6eme élément.

Aucune solution trouvé en manipulant le javascript, ni dans la documentation du Script.

Voilà, si quelqu'un a compris mon problème et a une éventuelle solution, merci d'avance.

A voir également:

2 réponses

Réponse 1 / 2
zoby44 Messages postés 818 Date d'inscription vendredi 3 novembre 2006 Statut Membre Dernière intervention 7 avril 2010 199
16 oct. 2009 à 13:36
Salut, c'est normal. Tes <div class="item"> font 20% de <div id="mask">, donc quand tu changes la valeur de mask, les items gardent la même proportion.
Passe le mask à 1000% et les items à 10%, ca devrais mieux passer et tu auras encore un peu de place pour en rajouter.
En tout cas, sympa le design.
0
Réponse 2 / 2
videology Messages postés 5 Date d'inscription vendredi 4 septembre 2009 Statut Membre Dernière intervention 22 octobre 2009
16 oct. 2009 à 13:51
Effectivement !

Un probleme qui n'avait pas lieu d'être !

Merci à toi.
0

Discussions similaires

A quoi sert la touche "scroll lock" ?
LAKESSE -
loutre -

5 réponses
Scroll Lock actif
Sylvie -
captainejojo -

17 réponses
Ressource demandée en cours d'utilisation
Taylow -
Elaura23 -

11 réponses
éteindre la touche scroll lock
twal -
depassage -

4 réponses
activer/désactivé touche scroll
GII -
pwei -

9 réponses