Sujet Précédent Sujet Suivant

Pb jquery.scrollTo

Fermé
thethirdbuis Messages postés 3 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 29 janvier 2010 - 28 janv. 2010 à 14:09
 BigBoy - 3 mai 2011 à 17:14
Bonjour,

voilà le problème auquel je suis confronté. j'utilise la librairie Jquery scrollTo, je viens d'ajouter une nouvelle box, mais elle n'apparaît pas. je n'arrive pas à trouver la solution.

LE 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>

<!-- Css du site -->
<link rel="stylesheet" type="text/css" href="site.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css" />

<!-- Gestion de la librairie Jquery navigation -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>


<script type="text/javascript">
$(document).ready(function() {
$('a.link').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 800);
setPosition($(this).attr('href'), '0px', '400px', '800px', '1200px')
setPosition($(this).attr('href'), '0px', '800px', '1600px', '2400px')
$('a.link').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
function setPosition(check, div, p1, p2, p3, p4) {
if(check==='#box1')
{
$(div).scrollTo(p1, 800);
}
else if(check==='#box2')
{
$(div).scrollTo(p2, 800);
}
else if(check==='#box3')
{
$(div).scrollTo(p3, 800);
}
else
{
$(div).scrollTo(p4, 800);
}
};
</script>
<!-- Fin de la gestion de la librairie Jquery -->


</head>

<body>
<table>
<tr>
<td>
<div id="container">
<div id="header">
<div id="neant"></div>
<div id="neant2"></div>
<div id="neant3"></div>
<div id="logo"></div>
<div id="menu">
<ul>
<li><a id="menu1" href="#box1" class="link"></a></li>
<li><a id="menu2" href="#box2" class="link"></a></li>
<li><a id="menu3" href="#box3" class="link"></a></li>
<li><a id="menu4" href="#box4" class="link"></a></li>
<li><a id="menu5" href="#box5" class="link"></a></li>
<li><a id="menu6" href="#box6" class="link"></a></li>
<li><a id="menu7" href="#box6" class="link"></a></li>
</ul>
</div>
</div><!-- end header -->
<div id="wrapper">
<ul id="mask">
<li id="box1" class="box">
<a name="box1"></a>
<div class="content"><div class="inner">
<div class="content_left_top"></div>
<div class="content_right_top1"></div>
<div class="content_right_top2"></div>
<div class="content_left_bottom"></div>
<div class="content_right_bottom">
</div></div>
</li><!-- end box1 -->

<li id="box2" class="box">
<a name="box2"></a>
<div class="content"><div class="inner">
<div class="content_left_top"></div>
<div class="content_right_top1"></div>
<div class="content_right_top2"></div>
<div class="content_left_bottom"></div>
<div class="content_right_bottom">
<h1>Programme</h1>
</div>
</div></div>
</li><!-- end box2 -->

<li id="box3" class="box">
<a name="box3"></a>
<div class="content"><div class="inner">
<div class="content_left_top"></div>
<div class="content_right_top1"></div>
<div class="content_right_top2"></div>
<div class="content_left_bottom"></div>
<div class="content_right_bottom"></div>
</div></div>
</li><!-- end box3 -->

<li id="box4" class="box">
<a name="box4"></a>
<div class="content"><div class="inner">
<div class="content_left_top"></div>
<div class="content_right_top1"></div>
<div class="content_right_top2"></div>
<div class="content_left_bottom"></div>
<div class="content_right_bottom"></div>
</div></div>
</li><!-- end box4 -->

<li id="box5" class="box">
<a name="box5"></a>
<div class="content"><div class="inner">
<div class="content_left_top"></div>
<div class="content_right_top1"></div>
<div class="content_right_top2"></div>
<div class="content_left_bottom"></div>
<div class="content_right_bottom"></div>
</div></div>
</li><!-- end box5 -->

<li id="box6" class="box">
<a name="box6"></a>
<div class="content"><div class="inner">
<div class="content_left_top"></div>
<div class="content_right_top1"></div>
<div class="content_right_top2"></div>
<div class="content_left_bottom"></div>
<div class="content_right_bottom"></div>
<h1>Galerie</h1>
</div></div>
</li><!-- end box6 -->

<li id="box7" class="box">
<a name="box7"></a>
<div class="content"><div class="inner">
<div class="content_left_top"></div>
<div class="content_right_top1"></div>
<div class="content_right_top2"></div>
<div class="content_left_bottom"></div>
<div class="content_right_bottom"></div>
</div></div>
</li><!-- end box7 -->

</ul><!-- end mask -->
</div><!-- end wrapper -->
<div id="footer">
</div>
</div>
</td>
</tr>
</table>
</body>
</html>


CSS :

/* GENERIC TAGS ************************************************************************************/

html, body{
margin : 0;
padding : 0;
background : #333;
font-family : "Trebuchet MS", Helvetica, Verdana, Arial, sans-serif;
font-size : 10px;
height : 100%;
}

table{
height : 100%;
width : 100%;
}

td{
height : 100%;
width : 100%;
vertical-align : middle;
text-align : center;
}

#container{
border : solid 1px #444;
width : 1024px;
height : 693px;
margin : 0 auto;
text-align : left;
position : relative;
background : #fff;
}


/* HEADER ****************************************************************************************/

#neant{
height : 40px;
width : 150px;
float : left;
}

#neant2{
height : 5px;
width : 362px;
}

#neant3{
height : 12px;
width : 512px;
float : right;
}

#logo{
height : 79px;
width : 151px;
background : url("images/logo.gif") no-repeat;
float : left;
}


/* MENU ****************************************************************************************/

#menu{
list-style-type : none; /* supprimer les puces */
width : 512px;
height : 65px;
float : right;
font-size : 10px;
font-family : "Comic Sans MS", Helvetica, Verdana, Arial, sans-serif;
font-weight : bold;
}

.cache{
display : none;
}

#menu li{
float : right;
}

#menu1{
display : block;
background-image : url("images/menu/n1.gif");
width : 33px;
height : 61px;
position : absolute;
right : 479px;
z-index : 10;
}

#menu2{
display : block;
background-image : url("images/menu/n2.gif");
width : 64px;
height : 59px;
position : absolute;
right : 399px;
z-index : 10;
}

#menu3{
display : block;
background-image : url("images/menu/n3.gif");
width : 45px;
height : 60px;
position : absolute;
right : 338px;
z-index : 10;
}

#menu4{
display : block;
background-image : url("images/menu/n4.gif");
width : 68px;
height : 61px;
position : absolute;
right : 255px;
z-index : 10;
}

#menu5{
display : block;
background-image : url("images/menu/n5.gif");
width : 85px;
height : 61px;
position : absolute;
right : 154px;
z-index : 10;
}

#menu6{
display : block;
background-image : url("images/menu/n6.gif");
width : 61px;
height : 61px;
position : absolute;
right : 78px;
z-index : 10;
}

#menu7{
display : block;
background-image : url("images/menu/n7.gif");
width : 47px;
height : 61px;
position : absolute;
right : 15px;
z-index : 10;
}

#menu1:hover, #menu1:active{
background-image : url("images/menu/c1.gif");
}

#menu2:hover, #menu2:active{
background-image : url("images/menu/c2.gif");
}

#menu3:hover, #menu3:active{
background-image : url("images/menu/c3.gif");
}

#menu4:hover, #menu4:active{
background-image : url("images/menu/c4.gif");
}

#menu5:hover, #menu5:active{
background-image : url("images/menu/c5.gif");
}

#menu6:hover, #menu6:active{
background-image : url("images/menu/c6.gif");
}

#menu7:hover, #menu7:active{
background-image : url("images/menu/c7.gif");
}


/* CONTENT ****************************************************************************************/

#wrapper{
width : 100%;
height : 100%;
overflow : hidden;
float : left;
}

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

.box{
width : 25%;
height : 100%;
float : left;
list-style-type : none; /* supprimer les puces */
}

.content{
width : 1024px;
height : 485px;
top : 0%;
margin : 0 auto;
}

.content .content_left_top{
width : 512px;
height : 98px;
float : left;
}

.content .content_right_top1{
background : #fff;
width : 512px;
height : 20px;
float : right;
}

.content .content_right_top2{
width : 512px;
height : 78px;
float : right;
}

.content .content_left_bottom{
width : 512px;
height : 387px;
float : left;
}

.content .content_right_bottom{
width : 512px;
height : 387px;
float : right;
}

/* box1 ****************************************************************************************/

#box1 .content .content_left_top{
background : url("images/box/boxtop1.gif");
}

#box1 .content .content_right_top2{
background : #a1141d;
}

#box1 .content .content_left_bottom{
background : #a1141d;
}

#box1 .content .content_right_bottom{
background : #77161c;
}


/* box2 ****************************************************************************************/

#box2 .content .content_left_top{
background : url("images/box/boxtop2.gif");
}

#box2 .content .content_right_top2{
background : #423767;
}

#box2 .content .content_left_bottom{
background : #423767;
}

#box2 .content .content_right_bottom{
background : #2e254d;
}


/* box3 ****************************************************************************************/

#box3 .content .content_left_top{
background : url("images/box/boxtop3.gif");
}

#box3 .content .content_right_top2{
background : #8e1859;
}

#box3 .content .content_left_bottom{
background : #8e1859;
}

#box3 .content .content_right_bottom{
background : #681442;
}


/* box4 ****************************************************************************************/

#box4 .content .content_left_top{
background : url("images/box/boxtop4.gif");
}

#box4 .content .content_right_top2{
background : #1a5d73;
}

#box4 .content .content_left_bottom{
background : #1a5d73;
}

#box4 .content .content_right_bottom{
background : #153d4a;
}


/* box5 ****************************************************************************************/

#box5 .content .content_left_top{
background : url("images/box/boxtop5.gif");
}

#box5 .content .content_right_top2{
background : #8a7006;
}

#box5 .content .content_left_bottom{
background : #8a7006;
}

#box5 .content .content_right_bottom{
background : #5d580d;
}


/* box6 ****************************************************************************************/

/*border-radius :15px;
-moz-border-radius :15px;
-webkit-border-radius :15px; */

#box6 .content .content_left_top{
background : url("images/box/boxtop6.gif");
}

#box6 .content .content_right_top2{
background : #b03833;
}

#box6 .content .content_left_bottom{
background : #b03833;
}

#box6 .content .content_right_bottom{
background : #911823;
}


/* box7 ****************************************************************************************/

#box7 .content .content_left_top{
background : url("images/box/boxtop7.gif");
}

#box7 .content .content_right_top2{
background : #236851;
}

#box7 .content .content_left_bottom{
background : #236851;
}

#box7 .content .content_right_bottom{
background : #194335;
}


/* box textuel****************************************************************************************/

.box h1{
margin : 20px 20px 0px 20px !important;*/
font-weight : normal;
font-size : 18px;
color : #eee;
}

p.text{
margin : 20px 20px 0px 20px !important;
font-weight : normal;
font-size : 12px;
color : #eee;
line-height : 16px;
text-align : justify;
}

/*.thumbnail{
padding : 3px 3px 8px 3px;
background-color : #fff;
float : right;
margin-right : 10px;
}
*/

/* FOOTER **********************************************************************************************/

#footer{
height : 120px;
width : 1024px;
background : url("images/footer/footer.gif") top left no-repeat;
/*float : left;*/
position : absolute;
bottom : 0;
}



Merci de votre aide

5 réponses

Réponse 1 / 5
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
28 janv. 2010 à 18:56 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
1
Réponse 2 / 5
thethirdbuis Messages postés 3 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 29 janvier 2010
28 janv. 2010 à 21:40
merci avion pour ta réponse, mais je ne comprends pas comment faire fonctionner correctement
0
Réponse 3 / 5
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
28 janv. 2010 à 23:07
Remplace 1.4.2 par 1.3.2 dans l'url du plugin.
0
Réponse 4 / 5
thethirdbuis Messages postés 3 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 29 janvier 2010
29 janv. 2010 à 02:25
j'ai essayé mais ça pète la navigation. le pb doit venir d'ailleurs ....
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
BigBoy
3 mai 2011 à 17:14
C'est bon, tes nuages tournent ^^ ?

Plus d'infos ici :

http://blog.themeforest.net/...
0