I have two seperate functions in a php page. Javascript function is loading correctly, but jQuery doesn't?
inside <head> tag i declare a jQuery function as follows (menu animation function) ;
<script type="text/javascript">
$(function() {
$("#top_menu").MenuBar({
fx: "backout",
speed: 700,
click: f开发者_开发百科unction(event, menuItem) {
return true;
}
});
});
</script>
and inside <body> tag i use javascript function as follows (slideshow function) ;
<script type="text/javascript" src="scripts/slideshow.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=10;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
the problem is only slideshow function excuting while loading not menu animation; if i remove the slideshow function, menu animation script is working!
kindly guide me to sort of the problem
Try to wrap your javascript code in $() in the body tag like this. Since this code inline in the markup it will be executed right away before even all the resources on the page are loaded. May its causing a js error on the page. You and check the console log if you find any js error on the page.
$(function(){
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
slideshow.auto=true;
slideshow.speed=10;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
$("#top_menu").MenuBar({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
After lot of days research I got a fix for the conflict with jquery;
I have replace all $$( with dbl( and $( with sgl( in the javascript file (slideshow.js).
then in the html file i have modified first two lines of my code, as follows;
sgl('slideshow').style.display='none';
sgl('wrapper').style.display='block';
Now both (javascript & jquery) working smoothly. Thank you so much @ShankarSangoli - for your effort.
加载中,请稍侯......
精彩评论