Comment utiliser correctement (document) .ready?

Voir ci-dessous pour ma tête de page ...Comment utiliser correctement (document) .ready?

Quand j'appelle

jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover"); 
    jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover"); 
    jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover"); 
    jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover");

à la page sans doc prêt, les méga surplombantes fonctionnent très bien. Lorsque je place l'appel dans une fonction doc ready, les menus ne sont pas chargés.

Des idées? (Voir http://pushpinevents.com/alarm/index.php)

<!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>Alarm of America</title> 


<script type="text/javascript" src="java/jquery-1.10.1.min.js"></script> 

<script type="text/javascript" src="java/jkmegamenu.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

    jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover"); 
    jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover"); 
    jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover"); 
    jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover"); 

    }); 
</script> 




<script type="text/javascript" src="java/slides.js"></script> 


<script type="text/javascript" src="curvycorners.src.js"></script> 





<script type="text/javascript"> 
$('#mainbanner').ready(function() { 
     $("#slides").slidesjs({ 
     width: 842, 
     height: 325, 
    play: { 
     active: false, 
     // [boolean] Generate the play and stop buttons. 
     // You cannot use your own buttons. Sorry. 
     effect: "fade", 
     // [string] Can be either "slide" or "fade". 
     interval: 2000, 
     // [number] Time spent on each slide in milliseconds. 
     auto: true, 
     // [boolean] Start playing the slideshow on load. 

     pauseOnHover: true, 
     // [boolean] pause a playing slideshow on hover 
     restartDelay: 2500, 
     // [number] restart delay on inactive slideshow 

    }, 

    navigation: false 



     }); 
    }); 
    </script> 

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

</head>

et le code html ...

<li><a href="#" id='megaanchor0'>Residential</a></li> 

     <span id="megamenu0" class="megamenu"> 
     <div class="column"> 

     <ul> 

     <li><a href='#'>Home Security with Fire Protection</a></li> 
     <li><a href='#'>Video Surveillance</a></li> 
     <li><a href='#'>Phone, Cable, Office and Satellite Wiring &amp; Trim</a></li> 
     <li><a href='#'>TV Purchase &amp; Installation</a></li> 
     <li><a href='#'>No Phone Required Systems</a></li> 
     <li><a href='#'>Look-in Video Systems</a></li> 


     </ul> 
     </div> 


     <div class="column"> 

     <ul> 

     <li><a href='#'>Remote Access to Securty System</a></li> 
     <li><a href='#'>Computer and Smart Phone Apps</a></li> 
     <li><a href='#'>Blue Alert Home Healthcare System</a></li> 
     <li><a href='#'>Security Screens</a></li> 
     <li><a href='#'>Cell Back-up Systems using Tellular or Uplink</a></li> 
     <li><a href='#'>SAFEGUARD Inspection Service</a></li> 


     </ul> 
     </div> 



     </span>

Source

2013-06-16 Aaron Benjamin

Il n'y a rien de mal au format de $ (document) .ready() ... que dit votre console? – smerny

Je ferais un seul appel document.ready() à la fin de la page comme ceci:

<script type="text/javascript"> 
    $(document).ready(function() { 

    jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover"); 
    jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover"); 
    jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover"); 
    jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover"); 

    $("#slides").slidesjs({ 
     width: 842, 
     height: 325, 
     play: { 
      active: false, 
      // [boolean] Generate the play and stop buttons. 
      // You cannot use your own buttons. Sorry. 
      effect: "fade", 
      // [string] Can be either "slide" or "fade". 
      interval: 2000, 
      //[number] Time spent on each slide in milliseconds. 
      auto: true, 
      //[boolean] Start playing the slideshow on load. 

      pauseOnHover: true, 
      // [boolean] pause a playing slideshow on hover 
      restartDelay: 2500, 
      // [number] restart delay on inactive slideshow 
     }, 
     navigation: false 
    }); 
    }); 
</script>

Avec votre actuelle code, vous définissez le menu sur document.ready() de sorte qu'ils seront ajoutés lorsque tout le code HTML a été chargé et ajouté au DOM. Mais vous appelez slideJS dès que #mainbanner est chargé, ce qui est avant document.ready(), c'est pourquoi les placer dans le même appel et dans le bon ordre devrait résoudre votre problème.

Source

2013-06-16 13:52:59 Skatox

Avec $ (document) .ready() il n'a pas besoin d'être à la fin de la page. – smerny

Encore un non-go ... http://pushpinevents.com/alarm/index.php –

Pouvez-vous poster quelque part ma modification? Donc je peux le vérifier. – Skatox

Il s'avère que je chargeais le javascript avant les styles. J'ai échangé ceux-ci et tout est pêché maintenant: D.

<!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>Alarm of America</title> 

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


<script type="text/javascript" src="java/jquery-1.10.1.min.js"></script> 

<script type="text/javascript" src="java/jkmegamenu.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

    jkmegamenu.definemenu("megaanchor0", "megamenu0", "mouseover"); 
    jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover"); 
    jkmegamenu.definemenu("megaanchor3", "megamenu3", "mouseover"); 
    jkmegamenu.definemenu("megaanchor4", "megamenu4", "mouseover"); 

    }); 
</script> 




<script type="text/javascript" src="java/slides.js"></script> 


<script type="text/javascript" src="curvycorners.src.js"></script> 





<script type="text/javascript"> 
$('#mainbanner').ready(function() { 
     $("#slides").slidesjs({ 
     width: 842, 
     height: 325, 
    play: { 
     active: false, 
     // [boolean] Generate the play and stop buttons. 
     // You cannot use your own buttons. Sorry. 
     effect: "fade", 
     // [string] Can be either "slide" or "fade". 
     interval: 2000, 
     // [number] Time spent on each slide in milliseconds. 
     auto: true, 
     // [boolean] Start playing the slideshow on load. 

     pauseOnHover: true, 
     // [boolean] pause a playing slideshow on hover 
     restartDelay: 2500, 
     // [number] restart delay on inactive slideshow 

    }, 

    navigation: false 



     }); 
    }); 
    </script> 


</head>

Source

2013-06-17 01:45:44

Comment utiliser correctement (document) .ready?

Répondre

Questions connexes