11548 sujets

JavaScript, DOM et API Web HTML5

Salut c'est ma première participation dans ce forrum et j'espèce trouver une solution Smiley smile
Bon voici mon prob:
le script si-dessous fonctionne parfaitement sur firefox, cependant il ne fonctionne pas comme je le souhaite sur Opera et parfois sur IE.

$(document).ready(function(){

var hash = window.location.hash.substr(1);   
var href = $('#nav li a').each(function(){   
    var href = $(this).attr('href');   
    if(hash==href.substr(0-5,href.length-5)){   
        var toLoad = hash+'mean-div';   
        $('#contenu').load(toLoad)   
    }   
});
  $('#loader').hide();
  $('#nav li a').click(function(){
     
    var toLoad = $(this).attr('href') +' #mean-div';
	$('#contenu').hide('normal', loadContent);
	$('#loader').fadeIn('normal');
	 window.location.hash = $(this).attr('href').substr(5,$(this).attr('href').length-5); 
	function loadContent(){
	$('#contenu').load(toLoad, showNewContent());
	}
	function showNewContent(){
	$("#contenu").css('height','auto');
	$("#contenu").removeClass("height");
	$('#contenu').show('normal', hideLoader());
	}
	function hideLoader(){
	$('#loader').fadeOut('normal');
    
	}
	return false;
  });
});


le code de la page index et le suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" >
@import url(css/css.css);
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<head/>
<body> 

<img id="waiting-img" src="images/loading.gif">


 <div id="content">
 
   <img src="images/slogon.jpg" id="bandeau" />
   <img src="images/loader.gif" id="loader" />
     <ul id="nav">
	   <li class="s_menu"> <a href="html/acceuil.html"> Acceuil </a> <img src="images/nav_bar.jpg" class="nav_bar" /></li>
	   <li class="s_menu"> <a href="#"> Suggested Videos </a> <img src="images/nav_bar.jpg" class="nav_bar" /></li>
	   <li class="s_menu"> <a href="#">  Articles </a> <img src="images/nav_bar.jpg" class="nav_bar" /></li>
	   <li class="s_menu"> <a href="#"> Galeries </a> <img src="images/nav_bar.jpg" class="nav_bar" /></li>
	   <li class="s_menu"> <a href="#"> Liens utiles </a> <img src="images/nav_bar.jpg" class="nav_bar" /></li>
	   </ul>

	  <div id="contenu"> 

	  <div id="mean-div"><img src="images/welcome.png" id="welcome_pic" /> </div> 
	  </div>
	  <div id="foot"> <img src="images/footer.png" id="footer_pic"/></div>
  </div>
  
</body>
</html>
Euh fonctionne sur FF cool, mais qu'est ce qui ne marche pas sur Opera/IE.
Qu'est ce qu'est sensé faire ce script etc.

Précise un peu ton soucis.
Donc ce que je veux est de faire en sorte que quand un utilisateur clique sur un lien dans le menu de navigation sur notre page du navigateur n'accepte pas naviguer vers la page correspondante, mais les charges au lieu du contenu de cette page dans la page courante.

tout ceci en obtenant le hrf menant vers la page désirée. Bien sur comme le script l'indique au moment de loading y a une certaine animation qui se passe en avant et après la function load à savoir: ( hiding le contenu actuel de la page courante et faire apparaitre par la suite une imgae gif indiquante que le la page volue est en cours de chargement et en fin faire un FadeIn the nouveau contenu

j'espère que je m'étais un peu claire et Merci à tous ceux qui essayent de m'aider Smiley confused