Problème défilement des ancre avec script jquery sous Safari

Y

Ynk9

Membre enregistré
24 Août 2010
3
0
38
Bonjour à tous !

Je suis graphiste webdesigner et je suis en train de réaliser mon nouveau site web.
Je bloque sur un problème que je retrouve seulement sous Safari et Chrome (!)
en effet mes ancres nommées ne fonctionnent pas avec mon script jquery pour adoucir le défilement mais fonctionne sous IE9 et Mozilla, j'ai beau retourner le problème dans tout les sens je ne parviens pas à trouver d'où provient le problème... MEs compétences en intégration trouvent leurs limites...

http://youneverknow.fr/

Bloc de code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YNK - Home</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen">
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/scroll.js"></script>
<script type="text/javascript" src="script/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="script/fancybox.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js" ></script>
</head>


<body>

<div id="sidebar">
	<h1><a href="http://youneverknow.fr" target="_self"></a></h1>

  <div id="menu">
  	<div id="btn">
<ul>
        <li><a href="#top">Home</a></li>
        <li><a href="#porfolio1">Porfolio</a></li>
        <li><a href="#about1">About</a></li>
   		<li><a href="#contact1">Contact</a></li>
</ul>
	</div>
  </div>

	<div id="icones">
<a id="facebook" title="On Facebook" href="http://www.facebook.fr"></a>
<a id="google" title="On Google+" href="http://www.plus.google.com"></a>
<a id="viadeo" title="On Viadeo" href="http://www.viadeo.fr"></a>
	</div>
</div>



<a name="top"></a>
<div id="home">
	<div id="logo_home"><img src="images/fond_home.png" width="598" height="213" alt="logo"></div>
</div>
<div class="bandeau1">
  <div class="bloc_infos"><div class="titre"><img src="images/infos.png" width="142" height="49" alt="infos"></div>
  <div class="infos_texte">Le 08-07-11 :: à la recherche d'un nouveau contrat pour septembre 2011.</div></div>

</div>
<a name="porfolio1"></a>
<div id="porfolio">
<div id="ensemble">
  <div class="ligne"><br>
	<img src="images/identite.png" width="24" height="92" alt="identité">
<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" width="141" height="102"></a><a rel="example_group" href="./example/10_b.jpg" title=""></a>
<a rel="example_group" href="./example/11_b.jpg" title=""></a>
<a rel="example_group" href="./example/12_b.jpg" title=""></a> 
&nbsp;&nbsp;&nbsp;

		<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" width="141" height="102"></a><a rel="example_group" href="./example/10_b.jpg" title=""></a>
<a rel="example_group" href="./example/11_b.jpg" title=""></a>
<a rel="example_group" href="./example/12_b.jpg" title=""></a> 
&nbsp;&nbsp;&nbsp;

		<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" width="141" height="102"></a><a rel="example_group" href="./example/10_b.jpg" title=""></a>
<a rel="example_group" href="./example/11_b.jpg" title=""></a>
<a rel="example_group" href="./example/12_b.jpg" title=""></a> 
&nbsp;&nbsp;&nbsp;
		<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" width="141" height="102"></a><a rel="example_group" href="./example/10_b.jpg" title=""></a>
<a rel="example_group" href="./example/11_b.jpg" title=""></a>
<a rel="example_group" href="./example/12_b.jpg" title=""></a> 
&nbsp;&nbsp;&nbsp;
		<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" width="141" height="102"></a><a rel="example_group" href="./example/10_b.jpg" title=""></a>
<a rel="example_group" href="./example/11_b.jpg" title=""></a>
<a rel="example_group" href="./example/12_b.jpg" title=""></a> 
&nbsp;&nbsp;&nbsp;
		<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" width="141" height="102"></a><a rel="example_group" href="./example/10_b.jpg" title=""></a>
<a rel="example_group" href="./example/11_b.jpg" title=""></a>
<a rel="example_group" href="./example/12_b.jpg" title=""></a> 

  </div>
  <div class="ligne"><br>
    <img src="images/edition.png" width="24" height="92" alt="édition"><img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	<img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	<img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	<img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	<img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	<img src="images/cases_porfolio.png" width="141" height="102" alt="">
  </div>
  <div class="ligne"><br>
	  <img src="images/web.png" width="24" height="92" alt="web"><img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	  <img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	  <img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	  <img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	  <img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	  <img src="images/cases_porfolio.png" width="141" height="102" alt="">
  </div>
  <div class="ligne"><br>
	  <img src="images/3D.png" width="24" height="92" alt="3D"><img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	  <img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	  <img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	  <img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	  <img src="images/cases_porfolio.png" width="141" height="102" alt="">
&nbsp;&nbsp;&nbsp;
	  <img src="images/cases_porfolio.png" width="141" height="102" alt="">
  </div>
  </div>
    
</div>
<div class="bandeau1">
	<div class="bloc_infos">
	<div class="titre"><img src="images/yeah.png" width="142" height="60" alt="infos">	</div>
	<div class="infos_texte_yeah">M.A.J : le 08-07-11 :: Quleques travaux que j'ai réalisé durant mes différentes expériences.<br>
	  &nbsp;</div>
</div>
</div>
<a name="about1"></a>
<div id="about">
<div id="presentation">

</div>

</div>
<div class="bandeau1">
<div class="bloc_infos">
  <div class="titre"><img src="images/!.png" width="142" height="52" alt="infos"></div>
  <div class="infos_texte">:: Besoin d'en savoir d'avantage à mon sujet ?</div></div>
</div>

<a name="contact1"></a>
<div id="contact">
<div id="formulaire">
<form action="envoyer.php" method="POST" name="fdele" id="formulaire1" target="_blank" onSubmit="return verif(this.mail.value)">
    <div id="form">
  <table width="353" border="0">
    <tr>
      <td width="81" align="left">Nom :</td>
      <td width="262" style="text-align: left"><span id="sprytextfield2">
        <label>
          <input type="text" name="nom" id="nom" tabindex="1" value="votre nom..." onFocus="javascript:this.value=''">
          </label>
        <span class="textfieldRequiredMsg"></span></span></td>
      </tr>
    <tr>
     <td>Prénom :</td>
      <td style="text-align: left"><label>
        <input type="text" name="prenom" id="prenom" tabindex="2" value="votre prénom..." onFocus="javascript:this.value=''">
        </label></td>
      </tr>
    <tr>
      <td>Société :</td>
      <td style="text-align: left"><span id="sprytextfield3">
        <label>
          <input type="text" name="societe" id="societee" tabindex="3" value="votre société..." onFocus="javascript:this.value=''" >
        </label>
        <span class="textfieldRequiredMsg"></span></span></td>
      </tr>
    <tr>
      <td>Téléphone :</td>
      <td style="text-align: left"><span id="sprytextfield1">
        <label>
          <input type="text" name="telephone" id="telephone" tabindex="4" value="votre téléphone..." onFocus="javascript:this.value=''">
          </label>
        <span class="textfieldRequiredMsg"></span></span></td>
      </tr>
    <tr>
      <td>Email :</td>
      <td style="text-align: left"><span id="sprytextfield4">
        <label>
          <input type="text" name="email" id="email" tabindex="4" value="votre email..." onFocus="javascript:this.value=''">
          </label>
        <span class="textfieldRequiredMsg"></span></span></td>
      </tr>
    <tr>
      <td>Objet :</td>
      <td><p>
        <label>
          <span style="text-align: left">
          <input type="checkbox" name="objet" value="Demande d'info" id="Objet_0">
          Demande d'info</span></label>
        <span style="text-align: left"><br>
        <label>
          <input type="checkbox" name="objet" value="Proposition" id="Objet_1">
          Proposition</label>
        <br>
        </span>
        </p></td>
      </tr>
    <tr>
      <td valign="top">Message :</td>
      <td>
        <label>
          <span style="text-align: left">
          <textarea name="message" id="message" cols="20" rows="5" tabindex="5" onFocus="javascript:this.value=''">votre message...</textarea>
          </span></label>
        <span class="textareaRequiredMsg" style="text-align: left"></span></td>
      </tr>
    <tr>
      <td>&nbsp;</td>
      <td><label>
        <input type="submit" name="Envoyer" id="Envoyer" value="Envoyer">
        <span style="text-align: left"></span></label></td>
    </tr>
  </table>
  </div>
  </form>
  

</div>

</div>
<div id="bandeau4">
<div class="bloc_infos">
  <div class="titre"><img src="images/news.png" width="142" height="38" alt="infos"></div>
  <div class="infos_texte">:: Besoin / Envie de me contacter ?</div></div>
</div>

</body>
</html>

Mes CSS :

Bloc de code: 
@charset "utf-8";

/* General */

*{
	outline:none;
	}

html, body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	text-align:left;
	color:#FFF;
	overflow-y:auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	}

html.scroll{
	overflow-y:scroll;
	padding:0;
	}

body#body-welcome {
	background:#ffffff;
	}

div{ 
	margin:0;
	padding:0;
	text-align:left;
	}

h1{
	margin:0;
	padding:0;
	background-image: url(../images/logo.jpg);
	}

h2{
	margin:0;
	padding:0;
	}

h3{
	margin:0;
	padding:0;
	}

h4{
	margin:0;
	padding:0;
	}

h5{
	margin:0;
	padding:0;
	}

h6{
	margin:0;
	padding:0;
	}

p{
	margin:0;
	padding:0;
	}

a, a:link, a:visited, a:active{
	text-decoration:none;
	}

ul{
	margin:0;
	padding:0;
	}

ul li{
	margin:0;
	padding:0;
	list-style-type:none;
	}

table{
	margin:0;
	padding:0;
	}

table tr{
	margin:0;
	padding:0;
	}

table tr td{
	margin:0;
	padding:0;
	text-align:left;
	}

img{
	margin:0;
	padding:0;
	border:none;
	}
	
	
	
	
	
	

/*Barre de Menu*/

#btn{
	display:block;
	width:173px;
	height:27px;
	}

#sidebar{
	position:fixed;
	display:block;
	z-index:777;
	overflow:hidden;
	float:left;
	width:184px;
	height:110%;
	min-height:600px;
	background-image: url(../images/bg_sidebar_02.png);
	background-repeat: repeat-y;
	background-position: left top;
	margin-top: -10px;
}

#sidebar h1{
	position:relative;
	width:184px;
	height:200px;
	background:url(../images/logo.jpg) no-repeat left top;
	margin-top: 30px;

}

#sidebar h1 a{
	position:relative;
	display:block;
	overflow:hidden;
	width:184px;
	height:130px;
	margin-top: 30px;
	}

#sidebar #-menu{
	display:none;
	position:absolute;
	z-index:888;
	left:0;
	top:368px;
	width:200px;
	height:100%;
	padding:0;
	background-color: #FFF;
	background-image: url(../images/bg-gallery-menu.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}

#sidebar #menu ul{
	overflow:hidden;
	width:200px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	}

#sidebar #menu ul li{
	float:left;
	display:block;
	width:200px;
	}

#sidebar #menu ul li a{
	float:right;
	display:block;
	width:166px;
	padding:2px 5px 4px 15px;
	text-align:left;
	text-transform:uppercase;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	line-height:20px;
	color:#F90;
	}

#btn a:hover, a:active{
	background:url(../images/hover.png);
	background-repeat:no-repeat;
	}

#btn ul li.selected a{
	cursor:default;
	background:#FFF;
	color:#000000;
	}
	
#icones {
	position:relative;
	display: inline-block;
	height: 40px;
	width: 150px;
	text-align: center;
	z-index: 999;
	padding-left: 33px;
	position:fixed;
	top: 100%;
	margin-top: -50px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
 }


#facebook {
	display:block;
	width:35px;
	height:35px;
	background:url(../images/btn_facebook.png) no-repeat 0 0;
	float:left;
	padding-right: 5px;
	}
	
#facebook:hover {
	background:url(../images/btn_facebook.png) no-repeat 0 -34px;
	}
	
#google {
	display:block;
	width:35px;
	height:35px;
	background:url(../images/btn_google.png) no-repeat 0 0;
	float:left;
	padding-right: 5px;
	}
	
#google:hover {
	background:url(../images/btn_google.png) no-repeat 0 -34px;
	}
	
#viadeo {
	display:block;
	width:35px;
	height:35px;
	background:url(../images/btn_viadeo.png) no-repeat 0 0;
	float:left;
	}
	
#viadeo:hover {
	background:url(../images/btn_viadeo.png) no-repeat 0 -34px;
	}
	
	
	
	
/*home*/


#content {
	position: relative;
	visibility: hidden;
}

#home {
	position:relative;
	background-image: url(../images/bg_04.jpg);
	background-repeat: repeat;
	height: 70%;
	width: 100%;
	display: block;
	}
	
#logo_home {
	position: relative;
	text-align: center;
	height: 50%;
	width: 90%;
	padding-top: 10%;
	float: right;
	}
	
.bandeau1 {
	position:relative;
	background-image: url(../images/bg_container.gif);
	background-repeat: repeat;
	height: 20%;
	width: 100%;
	z-index: 0;
	display: block;
	margin-top: 5px;
	margin-bottom: 5px;
	}
	
.bloc_infos {
	position:relative;
	display: block;
	height: 20%;
	width: 100%;
	z-index: 1;
	}

	
.titre {
	position: relative;
	display: inline-block;
	margin-right: 25px;
	height: 50px;
	width: 150px;
	z-index: 1;
	padding-top: 20px;
	padding-left: 250px;
	}

	
.infos_texte {
	position:relative;
	display: inline-block;
	z-index: 1;
	height: 20px;
	padding-top: 20px;
	text-align: center;
	font-size: 16px;
	}
	
.infos_texte_yeah {
	position:relative;
	display: inline-block;
	z-index: 2;
	height: 20px;
	text-align: center;
	font-size: 16px;
	}
	
#porfolio {
	position:relative;
	background-image: url(../images/bg_04.jpg);
	background-repeat: repeat;
	height: 70%;
	width: 100%;
	display: block;
	z-index: 5;
	}

#ensemble {
	margin: auto;
	height: 100%;
	width: 100%;
	padding-top: 2%;
	padding-bottom: 5%;
	}
	
.ligne {
	position:relative;
	display: block;
	margin-bottom: 2%;
	height: 90px;
	width: 90%;
	z-index: 10;
	text-align: center;
	float: right;
	}

#about {
	position:relative;
	background-image: url(../images/bg_04.jpg);
	background-repeat: repeat;
	height: 70%;
	width: 100%;
	display: block;
	}
	
#presentation {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	position:relative;
	display: inline-block;
	height: 70%;
	width: 60%;
	z-index: 10;
	background-color: #FFF;
	margin-top: 5%;
	margin-left: 15%;
	color: #F60;
	padding: 10px;
	}

#contact {
	position:relative;
	background-image: url(../images/bg_04.jpg);
	background-repeat: repeat;
	height: 70%;
	width: 100%;
	display: block;
	}
	
#formulaire {
	position: relative;
	display: inline-block;
	height: 500px;
	width: 300px;
	z-index: 1;
	padding-top: 15px;
	padding-right: 30px;
	float: right;
	}

#formulaire input[type=text]{
	border:0;
	height:16px;
	width:240px;
	background:url(../images/cellule.png) no-repeat 0 0;
	color: #888;
	padding: 0 0 0 10px;
	float:left;
	}
	
#formulaire input[type=text]:hover {
	background:url(../images/cellule.png) no-repeat 0 -17px;
	}
	
#formulaire textarea{
	color: #888;
	padding: 10px 0 0 10px;
	height:200px;
	width:240px;
	}
	
#bandeau4 {
	position:relative;
	background-image: url(../images/bg_container.gif);
	background-repeat: repeat;
	height: 20%;
	width: 100%;
	z-index: 0;
	display: block;
	margin-top: 5px;
	margin-bottom: 5px;
	}



Merci à tous pour votre aide car la je commence à désespérer... :(
 
problème dans le javascript sûrement

vérifie quand même que les ancres fonctionnent sous safari sans l'appel au script

une fois ok il faut voir en intégrant le script, si ça ne marche pas : revoir le script

tu pourrais essayer ce script de htmlzengarden qui marche sur safari aussi

Bloc de code: 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            var scrolling = function(){
                var speed     = 2000;
                jQuery('a[href^="#"]').bind('click',function(){
                    var id = jQuery(this).attr('href');
                    if(id == '#')
                        goTo('body');
                    else
                        goTo(id);
                    return(false);
                 void(0);
                });
                function goTo(ancre){jQuery('html,body').animate({scrollTop:jQuery(ancre).offset().top},speed,'swing',function(){
                      if(ancre != 'body')
                            window.location.hash = ancre;
                      else
                          window.location.hash = '#';
                      jQuery(ancre).attr('tabindex','-1');
                      jQuery(ancre).focus();
                      jQuery(ancre).removeAttr('tabindex');
                  });
                }
            };
            jQuery(function(){
                scrolling();
            });
        </script>
 
Merci Johannès pour ton aide.

J'ai testé sans JS tout fonctionne mais dés que j'intègre un script pour le défilement des ancres, ça ne fonctionne pas sous Chrome et Safari...
Donc je pense plutot à un pb au niveau des CSS que du JS lui même... Mais je trouve rien :confused:

Merci en tout cas !
 
Crock-Man a dit:
Bonjour

Chez moi tout fonctionne, Safari, Chrome, Firefox...
Cliquez pour agrandir...


Oui je viens de solutionner le problème !

En fait Chrome et Safari ne prennent pas en compte un Height du body en % pour les ancres alors que mozilla et IE ne s'en préoccupent pas.

J'ai du passer la taille du body en px pour que tout fonctionne tout simplement.

Merci pour votre aide et à bientôt !
 

Sujets similaires

Morebany
[HTML5]jouer/stopper/rejouer... sa webcam
Réponses
1
Affichages
1K
Développement web
Morebany
Morebany
phcm64100
Faire un trait vertical en HTML
Réponses
6
Affichages
6K
Développement web
phcm64100
phcm64100
benG
Mail : signature HTML
Réponses
1
Affichages
1K
Web et e-mail
julienboost
J
balance
code CSS
Réponses
1
Affichages
3K
Développement web
momo-fr
momo-fr
phcm64100
Signature HTML pour mail
Réponses
2
Affichages
1K
Web et e-mail
phcm64100
phcm64100
Haut Bas
Back