Move to a div after page load. "onmouseover" works but "window.onload" does not
I have a page (and divs) that are being dynamically generated and what I need for this page to do is to scroll to a particular div immediately after the page loads. What is screwy about this code is this...
The "button" code below, when you run the mouse over it (or onclick), works perfectly. It executes the rolldownTo function perfectly. However when I try to specify to specify the same action using window.onload, nothing happens. I have included both the "button " code and the window.onload below.
<html>
<head>
<title>Help</title>
<script LANGUAGE="JavaScript1.2" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="usePlainJson : true, parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.window");
function rolldownTo(my_anchor){
dojo.window.scrollIntoView(my_anchor);
}
window.onload=rolldownTo('car_help');
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs /dojo/1.5/dijit/themes/claro/claro.css"/>
</head>
<body class="claro">
<div dojoTyp开发者_如何学Goe="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.TabContainer" region="center">
<div dojoType="dijit.layout.ContentPane" title="CAR HELP" selected=true>
<button type=button id=button1 onmouseover="rolldownTo('car_help');">
scroll to car_help
</button>
........
LOTS OF DIVS LIVE IN THIS DIV, INCLUDING MY TARGET "car_help"
........
</div>
<div dojoType="dijit.layout.ContentPane" title="BIKE HELP" selected=false>
........
........
</div>
</div>
</div>
<script language="JavaScript1.2" type="text/javascript">
.... LOTS OF CODE THAT GENERATES CONTENT FOR THE DIVS ABOVE
</script>
</body>
</html>
Does anyone have an idea why a Javascript event like onmouseover or onclick would work perfectly but window.onload will not?
Your problem is this line:
window.onload=rolldownTo('car_help');
You're not assigning the function rolldownTo to as the callback for the onload event, you're executing the function and assigning the return value, in this case undefined.
You need to wrap the call with an anonymous function in order to make it work:
window.onload = function(){ rolldownTo('car_help'); };
Now the anonymous function will get called by the onload event and then call rolldownTo.
So much for the problem, as NiL has halfway pointed out (onload fires after DOMLoaded) you can use dojo.addOnLoad instead of window.onload here, but you still have to use the anonymous function for the reasons stated above.
The page load doesn't mean the the DOM tree has been fully initialized which mean that your script cannot move the div unless the tree finish working, you must wait it until finished by using the javascript Event DOMContentLoaded.
In dojo, There is a function that can be called, it waits until the browser finish the DOM Tree, you can use it as :
dojo.addOnLoad(function(){rolldownTo('car_help');});
I hope this would work for you
Best Regards NiL
加载中,请稍侯......
精彩评论