Renvoyer à un id situé sur une page quand effet parallax

Question

sylvaine

20 Oct 2014 à 11:57

Bonjour!!
j'ai eu l'idée de faire un parallaxe sur un site, mais malheureusement, lorsqu'on arrive sur la page, on ne voit pas le haut de la page (du genre le menu avec la première div)... je n'y connais rien en Js, mais je pense que ce doit être dû au parallaxe??

Si oui, ou même si je me trompe, quelqu'un aurait-il la solution??

Merci beaucoup!

 <!--effet parallaxe-->
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#nav').localScroll(800);
	
	//.parallax(xPosition, speedFactor, outerHeight) options:
	//xPosition - Horizontal position of the element
	//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
	//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
	$('#slideactu').parallax("50%", 0.1);
	$('#slidedates').parallax("50%", 0.2);
	$('#slidebio').parallax("50%", 0.3);
	$('#slidedisco').parallax("50%", 0.4);
	$('#slidevideo').parallax("50%", 0.5);
	$('#slidephotos').parallax("50%", 0.6);
	$('#slidecontact').parallax("50%", 0.7);

})
</script>

<!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>Mart officiel</title>

<!--police!-->
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/>

<link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'/>

<link rel="stylesheet" href="css/style.css" />



<!--effet parallaxe-->
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#nav').localScroll(800);
	
	//.parallax(xPosition, speedFactor, outerHeight) options:
	//xPosition - Horizontal position of the element
	//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
	//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
	$('#slideactu').parallax("50%", 0.1);
	$('#slidedates').parallax("50%", 0.2);
	$('#slidebio').parallax("50%", 0.3);
	$('#slidedisco').parallax("50%", 0.4);
	$('#slidevideo').parallax("50%", 0.5);
	$('#slidephotos').parallax("50%", 0.6);
	$('#slidecontact').parallax("50%", 0.7);

})
</script>




<!--effet slider vidéo-->

<!--likebox facebook-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

</head>




<body>

<!--MENU-->

<div id="nav">

<div id="menu">
	<ul >
 <li>   <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FMART-officiel%2F226009630919742%3Ffref%3Dts&amp;width=200&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;header=true&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:50px;" allowTransparency="true"></iframe></li>
    	<li alt="Link"> <a href="#slideactu"> Actualités</a></li>
        <li alt="Link"> <a href="#slidedates">Dates</a></li>
        <li alt="Link"> <a href="#slidebio">Biographie</a></li>
        <li alt="Link"> <a href="#slidedisco">Discographie</a></li>
        <li alt="Link"> <a href="#slidevideo">Vidéos</a></li>
        <li alt="Link"> <a href="#slidephotos">Photos</a></li>
        <li alt="Link"> <a href="#slidecontact">Contact</a></li>
        <li alt="Link"><a href="http://www.topchretien.com/topmusic/view/mp3/artiste/50584/mart.html">Topchrétien.com </a></li>
        <li alt="Link"><a href="https://itunes.apple.com/fr/album/le-chant-des-rachetes/id815440078"><img src="images/logoitunes.png" alt="" /></a></li>
    <li alt="Link"> <a href="http://www.youtube.com/channel/UC4JIGBg3-VBQZYf-u8GS8og" target="_blank"><img src="images/logoyoutube.png" alt="Mart on youtube" height="37" /></a></li>
         <li alt="Link"> <a href="http://www.amazon.fr/dp/B00IB6KC80?ie=UTF8&tag=musique006-21&linkCode=as2&camp=1642&creative=6746&creativeASIN=B00IB6KC80" target="_blank"><img src="images/logoamazon.png" alt="Mart on Amazon" height="37"/></a></li>
         <li alt="Link"><a href="http://www.deezer.com/search/Le%20chant%20des%20rachetes" target="_blank"><img src="images/logodeezer.jpg" alt="écouter Mart sur Deezer" height="37"/></a></li>
    
    

    </ul>

<div class="clear"></div>

</div>

	
</div>


<!--slide1-->
<div id="slideactu">
		<div class="slideinside">
        
        </div>




</div>


<!--slide2-->
<div id="slidedates">

		<div class="slideinside" >
        
        </div>

</div>

<!--slide3-->
<div id="slidebio">

		<div class="slideinside">
        <div id="textbio">
        
        	<p> Dans les années 90 alors qu'il participait au projet de plusieurs groupes <em>de rap </em>, de <em>soul </em>et de <em>Rnb</em>, <em>Mart</em> ne connaissait<em> Dieu</em> que comme la plupart des chrétiens (de façon floue), se questionnant sur la personne de Dieu et celle de Jésus.</p>
 
<p>En 1998 alors qu'il pratiquait toutes sortes de péchés, <em>Mart </em> une personne qui lui a parlé de Dieu comme il n'en avait jamais entendu parler. Elle l'initia à la lecture de la parole de Dieu, à la découverte de la personne du Saint Esprit et à la confiance en Jésus Christ.</p>
 
<p>Le groupe de jeunesse dans lequel cette personne servait, a paraphé sa conversion par des chants, des danses et du théâtre en honneur de Jésus. Il a pu développer une relation particulière avec le Saint Esprit qui lui a révélé la personne de Jésus.</p>
 
<p>Car pour lui, avant cela, Jésus était peut-être un prophète, un des éminents serviteurs de Dieu et même un fils de Dieu mais le Saint Esprit l’a convaincu que Jésus est Dieu. Après son baptême par immersion, il a reçu la révélation de sa vocation et le but de son appel, qualifié par des épreuves de la vie, le secours de l'Amour de Jésus, le rend reconnaissant à Dieu de l’avoir sauvé.</p>
 
<p> <em>Aujourd'hui Mart témoigne</em> partout<em> à tous les jeunes </em>et aux moins jeunes les<em> bienfaits de Dieu </em> en sa faveur, faveurs réservées à tous les hommes."</p>
 </div> 
 
 <img src="images/imageexemple.jpg" alt="Portrait de Mart" width="380" height="520"/>
 <div class="clear"></div>       
        </div>

</div>
<div class="clear"></div>
<!--slide4-->
<div id="slidedisco">

		<div class="slideinside">
       <iframe scrolling="no" frameborder="0" allowTransparency="true" src="http://www.deezer.com/plugins/player?autoplay=false&playlist=true&width=980&height=500&cover=true&type=album&id=7409756&title=&app_id=undefined" width="980" height="500"></iframe>
        </div>

</div>

<!--slide5-->
<div id="slidevideo">

		<div class="slideinside">
        
        			<object width="545" height="300"><param name="movie" value="http://www.youtube.com/v/f4JZ2GEf_YA?hl=en_US&amp;version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/f4JZ2GEf_YA?hl=en_US&amp;version=3" type="application/x-shockwave-flash" width="545" height="300" allowscriptaccess="always" allowfullscreen="true"></embed></object>
        
        			<object width="545" height="300"><param name="movie" value="http://www.youtube.com/v/d-H8kjn0ffM?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/d-H8kjn0ffM?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="545" height="300" allowscriptaccess="always" allowfullscreen="true"></embed></object>
                    
                    
                    <object width="545" height="300"><param name="movie" value="http://www.youtube.com/v/RH7haJHxR0w?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RH7haJHxR0w?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="300" allowscriptaccess="always" allowfullscreen="true"></embed></object>
                    
                  <div class="more"> <a href="pages/martvideos.html"><img src="" alt="" />More </a> </div>
      
        
     
   </div>     
    
    
 <div class="clear"></div>   
    </div>
  <div class="clear"></div>  

<!--slide6-->

<div id="slidephotos">

<div class="more"> <a href="pages/martpictures.html">More </a></div>
<div class="slideinside">




<img src="images/imagesmart170/page2.jpg" alt="Mart"/>
<img src="images/imagesmart170/page6.jpg" alt="Mart"/>
<img src="images/imagesmart170/page2.jpg" alt="Mart"/>
<img src="images/imagesmart170/page6.jpg" alt="Mart"/>


<img src="images/imagesmart170/page7.jpg" alt="Mart"/>
<img src="images/imagesmart170/page8.jpg" alt="Mart"/>
<img src="images/imagesmart170/page8.jpg" alt="Mart"/>
<div class="clear"></div>
</div>










<div class="clear"></div>

<!--slide7-->
<div id="slidecontact">

		<div class="slideinside">
                 
<form method="post" action="../css/cible.php">

<label for="nom">Nom*</label>
<input type="text" name="nom" id="nom" size="40" autofocus required />

<label for="prenom">Votre Prénom</label>
<input type="text" name="prenom" id="prenom" size="40" />

<label for="email">Votre E-mail*</label>
<input type="email" name="email" id="email" size="40" required />

<label for="comment">Votre commentaire</label>
<textarea name="comment" id="comment" rows="10" cols="30" required> </textarea>
<p>*Champs obligatoires </p>

<input type="submit" value="Envoyer" />
<div class="clear"></div> 
</form>
<img src="images/imageexemple.jpg" alt="" width="450"/>							
  <div class="clear"></div>      
        </div>

 <div class="clear"></div> 
</div>

<div id="footer">
<p> Proudly powered by <a href="http://www.eden-com.fr"> Eden Com </a></p>


 </div>
 
 
</body>
</html>

sylvaine

20 Oct 2014 à 13:23

Mea culpa!!!!

En enlevant tous les effets (slider, javascripts etc), je me suis rendue compte que ce n'est pas dû à l'effet parallaxe.Mais le problème persiste avec simplement le code html!

Donc je réitère ma question:

Pourquoi une page d'accueil afficherait la fin de la page au lieu du début alors qu'il n'y a ni CSS ni feuille javascript lié??

Merci de me répondre! Smiley smile

(je suis dessus de puis toute la matinée sans succès....

mathieu1004

20 Oct 2014 à 15:44

Salut,
c'est juste parce que tu as mis un "autofocus" sur un des inputs en bas :

<input type="text" name="nom" id="nom" size="40" autofocus required />

Le focus va donc automatiquement dans ce champs, et du coup ca fait descendre la page..
Modifié par mathieu1004 (20 Oct 2014 - 15:45)

sylvaine

20 Oct 2014 à 16:12

waaaaoooowwww! ça marche!! merci beaucoup beaucoup!!!!!! Smiley biggrin

Sujet clos

Questions générales et questions de débutants

Renvoyer à un id situé sur une page quand effet parallax