Problème d'utilisation de Jquery Scroll To
Résolu
videology
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
videology Messages postés 5 Date d'inscription Statut Membre Dernière intervention -
videology Messages postés 5 Date d'inscription Statut Membre Dernière intervention -
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.
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:
- Problème d'utilisation de Jquery Scroll To
- Utilisation chromecast - Guide
- Télécharger gratuitement notice d'utilisation - Guide
- Qwerty to azerty - Guide
- Wfp to mp4 - Forum Accessoires & objets connectés
- Touche scroll lock ✓ - Forum Excel
2 réponses
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.
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.