Pb jquery.scrollTo

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
Configuration: Mac OS X
Firefox 3.6

5 réponses

  1. <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. merci avion pour ta réponse, mais je ne comprends pas comment faire fonctionner correctement
      1. j'ai essayé mais ça pète la navigation. le pb doit venir d'ailleurs ....
        1. C'est bon, tes nuages tournent ^^ ?

          Plus d'infos ici :

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