Home/ Questions/Q 3673434
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T02:43:58+00:00

I have a page (and divs) that are being dynamically generated and what I

  • 0

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 dojoType="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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0