body onload

**codeexploiter** · 09-02-2008, 11:03 AM

@chechu, Two problems :

(1) Though you've used absolute positioning you haven't mentioned any values for 'top' and 'left', I wonder what is the purpose of using absolute positioning without using those two properties?

(2) The demo page you mentioned in your initial postings doesn't show any loading image for me. I think if you can attach your page with JS, images, CSS, etc it would be good for us to check. Because it seems that you are saying something we are experiencing something else and it is really difficult to achieve the result quickly.

**chechu** · 09-02-2008, 11:53 AM

http://www.hetbestevoordeel.be/andertest.html
Here's the result.

Though you've used absolute positioning you haven't mentioned any values for 'top' and 'left', I wonder what is the purpose of using absolute positioning without using those two properties?

I thought 'absolute' means that it is placed in the middle, and that 'margin-left' and '-right' placing 'auto' confirms this ...

**codeexploiter** · 09-02-2008, 12:23 PM

1. Insert the following CSS into the page. Comment the current definition:

Code:

#loading{
margin:0px auto;
background: #ffffff; 
font-family: tahoma;
font-size: 11px;
color: #456a96;
}

2. In your page change the following element 'display' property like the way I've done following:

Code:

<div id="loading"> <!-- Removed the 'display:none;' from here -->

Code:

<div id="content" style="display: none;">  <!-- changed 'inline' to 'none' here -->

3. Change the window's onload event handler to the following manner:

Code:

window.onload = function(){
	if(document.getElementById('loading') && document.getElementById('content')){
		document.getElementById('loading').style.display = 'none';
		document.getElementById('content').style.display = 'block';		
	}
	addListGroupOnDomReady(); //This calls the function available in the config.js	
}

4. Add the following line

Code:

initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit');

As the last line in 'config.js''s 'addListGroupOnDomReady' function.

5. Save all the files and reloads the page.

**chechu** · 09-02-2008, 12:34 PM

I adjusted the html of the page, and the .js

Code:

<style type="text/css">
#loading{
margin:0px auto;
background: #ffffff; 
font-family: tahoma;
font-size: 11px;
color: #456a96;
}
</style>
<script type="text/javascript">
window.onload = function(){
	if(document.getElementById('loading') && document.getElementById('content')){
		document.getElementById('loading').style.display = 'none';
		document.getElementById('content').style.display = 'block';		
	}
	addListGroupOnDomReady(); //This calls the function available in the config.js	
}
</script>
</head>
<center>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="loading">
<center>
<img src="images/header.jpg" style="border: 0px; text-align:center; margin-top:1px;">
<p align=center><b>HET BESTE VOORDEEL</b>
<p align=center>Win dagtickets in de Aqua Mundo in CenterParcs Erperheide
<p align=center><br>&nbsp;<br><img src="images/loader.gif" style="border: 0px;">
</center>
</div>
<div id="content" style="display: none;">

But I doubt abou the .js Is this correct:

Code:

function addListGroupOnDomReady() {
addListGroup("chainedmenu", "First-Select");
initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit');

**codeexploiter** · 09-02-2008, 12:36 PM

Chechu the following line should be the last line of 'addListGroupOnDomReady' function which is in 'config.js'

Code:

initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit');

**molendijk** · 09-02-2008, 12:39 PM

Chechu, the following works for me. This (and nothing else) in the head

Code:

<script language="javascript" src="chainedmenu.js">

/***********************************************
* Chained Select Menu- By Xin Yang (http://www.yxscripts.com/) & Dynamic Drive 

(http://dynamicdrive.com)
* Script featured on/available at http://www.dynamicdrive.com/
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for legal use!
***********************************************/

</script>
<script language="javascript" src="config.js"></script>

<script type="text/javascript">
function onloadLoading(){
document.getElementById('loading').style.display='none';
}

function onloadContent(){
document.getElementById('content').style.display='inline';
}

function onloadChained(){
initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, 'saveit');
}
</script>

<script type="text/javascript">
/*found at http://simonwillison.net/2004/May/26/addLoadEvent*/
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(function() {
    onloadLoading();onloadContent();onloadChained();})

</script>

After that, no onload in the body. Just <body>
===
Arie.

**chechu** · 09-02-2008, 12:52 PM

Codeexploiter: I changed the .js into this, and still doesn't work

Code:

var newwindow = 1 //Open links in new window or not? 1=yes, 0=no.
function addListGroupOnDomReady() {
initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit');

	addOption("First-Select", "Kies ...

The yellow error symbol comes up, and no select items

Molendijk: with your coding the yellow symbol does noit come up, but the select items don't show up either

**codeexploiter** · 09-03-2008, 03:24 AM

Chechu from the code you've provided in your last post it is clear that you haven't followed my instructions I've asked you to insert the 'initListGroup' function call as the last statement in 'addListGroupOnDomReady' function.

If you look the config.js file I've provided earlier it is clear that the 'addListGroupOnDomReady' is contains large number of programming statements in it. If you call 'initListGroup' function before executing the lines in the 'addListGroupOnDomReady' this script will not work as it should.

I've attached a new 'config.js' file so use that instead of my previous file. You can find the difference between those files easily.

Also you need to make a change in 'chainedmenu.js' like the following manner. I've highlighted the part that you need to add in the following function

Code:

function initListGroup(n) {
  var _content=cs_findContent(n), count=0;
  if (_content!=null) {
    var content=new cs_contentOBJ("cs_"+n,_content.menu);
    cs_content[cs_content.length]=content;

    for (var i=1; i<initListGroup.arguments.length; i++) {
      if (typeof(arguments[i])=="object" && arguments[i].tagName && arguments[i].tagName=="SELECT") {
        content.lists[count]=arguments[i];

        arguments[i].onchange=cs_updateList;
        arguments[i].content=content; arguments[i].idx=count++;
      }
      else if (typeof(arguments[i])=="string" && /^[a-zA-Z_]\w*$/.test(arguments[i])) {
        content.cookie=arguments[i];
      }
    }

    if (content.lists.length>0) {
      cs_initListGroup(content,content.cookie);
    }
  }
}

I've done these tests in a copy of your page and it works for me in both IE and FF.

Hope this helps.