View Full Version : body onload
chechu
08-31-2008, 03:21 PM
There are two body onloads needed on my page. How can I mix them ?
Here they are:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'inline';">
<div id="loading">
<img src="images/header.jpg" style="border: 0px; text-align:center; margin-top:1px;">
<p align=center><b>TITLE</b>
<p align=center>subtitle
<p align=center><br> <br><img src="images/loader.gif" style="border: 0px;">
</div>
<div id='content' style='display:none;'>
and
onload="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit')"
This should do it:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'inline';initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit');">
<div id="loading">
<img src="images/header.jpg" style="border: 0px; text-align:center; margin-top:1px;">
<p align=center><b>TITLE</b>
<p align=center>subtitle
<p align=center><br> <br><img src="images/loader.gif" style="border: 0px;">
</div>
<div id='content' style='display:none;'>
chechu
08-31-2008, 08:44 PM
No, doesn't work. The first one comes up (with the divs), the other doesn't.
The second one is the dropdown select (four).
You can see it here (http://www.hetbestevoordeel.be/andermenutest.html)
mburt
08-31-2008, 08:53 PM
Change that "inline" to block. Then set the float to left (use clear:both on a following element).
Try:
<script type="text/javascript">
var onLoadfunc = function(){
document.getElementById('loading').style.display = 'none';
document.getElementById('content').style.display = 'inline';
initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit');
}
</script>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="onLoadfunc();">
<div id="loading">
<img src="images/header.jpg" style="border: 0px; text-align:center; margin-top:1px;">
<p align=center><b>TITLE</b>
<p align=center>subtitle
<p align=center><br> <br><img src="images/loader.gif" style="border: 0px;">
</div>
<div id='content' style='display:none;'>
chechu
08-31-2008, 09:05 PM
Nile, yours still doesn't work.
Mburt, I do not understand you very well.
mburt
09-01-2008, 03:19 AM
Using Nile's script...
<script type="text/javascript">
var onLoadfunc = function(){
document.getElementById('loading').style.display = 'none';
document.getElementById('content').style.display = 'block';
document.getElementById('content').style.float = 'left';
initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit');
}
</script>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="onLoadfunc();">
<div id="loading">
<img src="images/header.jpg" style="border: 0px; text-align:center; margin-top:1px;">
<p align=center><b>TITLE</b>
<p align=center>subtitle
<p align=center><br> <br><img src="images/loader.gif" style="border: 0px;">
</div>
<div id='content' style='display:none;'>
Now this is only assuming... I haven't looked deeply into the matter.
codeexploiter
09-01-2008, 04:06 AM
You can have a new onload event of window object which triggers both the operations you've mentioned in your code. Insert the following code in your script element and remove the "onload" event from the body element, both ones should be removed. If you have multiple onload events on "window" object only one will be executed. So if you have more than one scripts that needs to be executed as a part of the onload event of "window", we used to club them together the way I've done below:
window.onload = function(){
document.getElementById('loading').style.display = 'none';
document.getElementById('content').style.display = 'inline';
initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit')
}
Before doing so make sure that the 'initListGroup' function call is meaningful and work with the mentioned parameters.
It would be better if you post a link of your page so that everyone can have a look at it.
Hope this helps.
mburt
09-01-2008, 04:13 AM
I actually think it has to do with the inline style property. It doesn't always work cross-browser.
codeexploiter
09-01-2008, 04:46 AM
Mike, Actually it works but the fourth select list will be enabled only a number of occassions.
If you load the following values in the respective select list then the fourth select list will be enabled
select1 -> Vakantiepark
select2 -> CenterParcs
Select3 -> Belgie or Select3 -> Nederland
But I don't think the script's function is correct seems to be somewhat inconsistent though...
Chechu plz post a link to the menu script you use.
@Chechu, correction to codeexploiter's code
window.onload = function(){
document.getElementById('loading').style.display = 'none';
document.getElementById('content').style.display = 'inline'";
initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit')
}
Remove the highlighted.
chechu
09-01-2008, 06:29 AM
You can find the script here (http://www.hetbestevoordeel.be/andermenutest.html). Thanks for your efforts, but none of the proposed scripts work. Is that because the chained menu script is referring to two .js files ?
Can you explain what:
initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit')
Does?
chechu
09-01-2008, 06:43 AM
http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm
That's where the script comes from. The onload has to with: if the first selction is made, then you can go to the next, and the next...
chechu
09-01-2008, 05:20 PM
Anyone please ?
molendijk
09-01-2008, 07:34 PM
Chechu, see this (http://simonwillison.net/2004/May/26/addLoadEvent/).
===
Arie.
chechu
09-01-2008, 08:33 PM
Thanks, Arie, but I do not find the answer in the comments.
chechu
09-02-2008, 08:21 AM
really need help here
codeexploiter
09-02-2008, 09:37 AM
1. Use the attached config.js file in your page(take a backup of the original one):
2. In your HTML page where the chained select list comes, remove the inline 'onload' attribute from the body element and insert the following into any of your script block:
window.onload = function(){
if(document.getElementById('loading') && document.getElementById('content')){
document.getElementById('loading').style.display = 'none';
document.getElementById('content').style.display = 'inline';
}
aaddListGroupOnDomReady(); //This calls the function available in the config.js
initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit');
}
Make sure that the elements with ids 'loading' and 'content' available in your page otherwise the first part of the above mentioned event handler will be proceed further.
3. Modify the CSS (the highlighted lines)
#loading{
position: absolute;
position: middle; //There is no such property value in CSS Remove this line
margin-left: auto;
margin-right: auto;
padding-left: auto;
padding-right: auto;
color: grey;
background: #ffffff;
font-family: tahoma;
font-size: 11px;
color: 456a96; //You need to put a # before the color number.
}
The above CSS rule contains two 'color' properties one I've highlighted and there is one more with a value of 'grey' remove one and use a meaningful value.
Hopefully if you do these changes the things will work as you want.
chechu
09-02-2008, 10:03 AM
I downloaded the config.js, and adapted the following:
<head>
<style type="text/css">
#loading{
position: absolute;
margin-left: auto;
margin-right: auto;
padding-left: auto;
padding-right: 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 = 'inline';
}
aaddListGroupOnDomReady(); //This calls the function available in the config.js
initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel, 'saveit');
}
</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>title</b>
<p align=center>subtitle
<p align=center><br> <br><img src="images/loader.gif" style="border: 0px;">
</center>
</div>
<div id='content' style='display:none;'>
The onload image and text appear, but at the very right of the screen (I need to scroll to see it), and the select functions are disabled.
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:
#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:
<div id="loading"> <!-- Removed the 'display:none;' from here -->
<div id="content" style="display: none;"> <!-- changed 'inline' to 'none' here -->
3. Change the window's onload event handler to the following manner:
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
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
<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> <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:
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'
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
<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
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
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.
chechu
09-03-2008, 06:18 AM
It works indeed wonderfully !!!!
Thank you so much.
codeexploiter
09-03-2008, 07:05 AM
Glad that it finally worked :)
chechu
09-05-2008, 12:58 PM
Another question about the listing of the options in the config.js
How can I add a list item without having it linked to a site, f.ex:
Coast (not linked)
- NY => url
- LA => url
Interior (not linked)
- SD=> url
- SA => url
other (not linked)
- BA => url
This is the original code:
addOption("coast", "make your choice", "", 1);
addOption("coast", "LA", "http://www...");
addOption("coast", "NY", "http://www...");
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.