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.