How do I properly use (document).ready?

StackOverflow https://stackoverflow.com/questions/17133943

  •  31-05-2022
  •  | 
  •  

문제

See below for my page header...

When I call 

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

to the page without doc ready, the mega menues work fine. When I place the call in a doc ready function, the menues don't load.

Any ideas? (See 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>

and the 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>
도움이 되었습니까?

해결책

I would do a single document.ready() call at the end of the page like this:

<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>

With your current code, you are defining the menu on document.ready() so they will added when all the html has been loaded and added to the DOM. But you're calling slideJS as soon as #mainbanner is being loaded which is before document.ready(), that's why placing them in the same call and in the correct order should fix your problem.

다른 팁

Turns out I was loading the javascript before the styles. I swapped those and everything's peachy now :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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top