body onload event handler conflicts with styleswitcher script

**Jeremy** · 02-05-2008, 01:01 PM

Hello again DD forum,

I would be very grateful for some help in conncection with two JavaScript features on my web page that appear to be in conflict.

I had been wanting to find a JavaScript which could show/hide div layers but in addition, displayed the first layer when the page loaded. I found such a script and have successfully installed it. However, whilst this works, I can no longer use my styleswitcher which I was using to enlarged text on the page.

The styleswitcher JavaScript is an external file. The show/hide div layer script is on the page itself.

I noticed that the show/hide div layer script uses:

HTML Code:

<body onload="swapLayers('lyr1')">

to ensure the first layer shows when the page is loaded. This is interesting since in my external style sheets I use the body tag to change the text sizes, eg;

HTML Code:

body { font-size: 62.5%;}

Is there any way to reconcile the two scripts or to change the way the body tag is used or should I be looking to find another JavaScript for the show/hide div layer function?

Please bear in mind I am new to all this stuff and would appreciate an answer that doesn't assume I know too much! Many thanks indeed.

**codeexploiter** · 02-05-2008, 01:45 PM

If you are looking for a method for executing multiple JavaScript function as a part of the onload event of the body section of your page. You can follow any of the following methods:

(1)

Code:

<body onclick="fun1();fun2();fun3();">

In this case all the mentioned functions will be executed in a one by one manner.

(2) This is a JavaScript based method in which you'll add the following code in your <script> section

Code:

window.onload = function(){
		your_first_function();
		your_second_function();
		your_third_function();
	}

(3) Another JavaScript based method, you can insert the following code in your <script> section

Code:

var call_load_functions = function(){
		your_first_function();
		your_second_function();
		your_third_function();
	}
	
	window.onload = call_load_functions;

You'll find a number of DOM based method using which you can achieve this one but I feel that you can do what you want using any of the above mentioned item(s).

Please note that the function names used in this code is just for example you can use own function names.

Regarding the loading of the CSS file it won't create any problem as normally the style sheets are included inside your <head> section and will be loaded initially itself.

Hope this helps.

**Jeremy** · 02-05-2008, 03:30 PM

Hello - thank you for being so prompt in responding to my request!

Unfortunately, I seem to be doing something wrong and I cannot make things work, having played around with your suggestions (I don't think I fully understand).

Perhaps if you would look at the page I am working on, it may help you to assist me further. You can reach it here:

http://www.bodmin.gov.uk/newsitetest..._Template.html

You will notice on the page that there are some numbers which you can click on to bring up different hidden div layers. These work okay at the moment.

The style switcher which normally changes all the text and div sizes on the page can be found at the top right - there are four white buttons ('normal'; 'size 1'; 'size 2' and 'contrast').

Your continued assistance would be greately appreciated - many thanks!

Please note: if you do get the style switcher to work as well as the hide/div layer with the first layer present upon page load, then the larger styles won't show the various hidden div layers perfectly positioned - that is because I have not finished writing the 'top' and 'left' styles for them yet in the alternative style sheets).

**BLiZZaRD** · 02-05-2008, 04:26 PM

I would stick with Tech's option one. Don't worry about the

Code:

body { font-size: 62.5%;}

That is just CSS styling and won't effect the scripts. Instead you should take BOTH scripts and make them external .js files. Call them both with the

Code:

<body onclick="fun1();fun2();">

Method, and use the <link rel=blah blah> in the <head> to get the .js to load.

**Jeremy** · 02-06-2008, 09:06 AM

Hello Blizzard - thanks for getting back to me.

Once again, I am very sorry but I just don't understand how to do this.

I have made both scripts external .js files but don't get how to use the

nor do I know how to call them both with the

Code:

<body onclick="fun1();fun2();">

I just don't know what to put for "fun1(); fun2();".

Also, I am concerned about my need to get the first div layer to show up when the page loads, not when a person first clicks on the page.

Please don't give up on a newbie! Could you give me some more clues?

(I have not done anything new to the online example page)

**codeexploiter** · 02-06-2008, 09:51 AM

hi Jeremy,

You can't include a JavaScript file using <link> tag. Link is a tag using which you can include an external stylesheet in your web page. No JavaScript code will be inside a proper stylesheet. Normally the inclusion of an external stylesheet will be inside the header section of your page (within <head></head>). Have a look at an example of the stylesheet inclusion below:

Code:

<link href="your_external_stylesheet.css" rel="stylesheet" type="text/css" />

The stylesheet is something which deals with the look and feel of your page like the color of the fonts, background color of an area, layout of the page, etc.

If you want to include an external JavaScript page in your web page then you have to use <script> section which meant only for including an external JavaScript page. An example:

Code:

<script type="text/javascript" src="your_file_location/your_js_page.js"></script>

About executing multiple items while loading the page.

Now consider your page has a <script> section and you have some code in it as well as you need to include an external JavaScript page for some other functionality. The external JavaScript page has a function call needs to be done on the onload event your page's <body> section and the internal JavaScript code you've furnished directly inside your page has got a function call which also needs to be invoked as a part of the 'onload' event of the <body>. So the problem is you have two JavaScript function needs to be executed as a part of the 'onload' event of the <body>.

As I had mentioned in my first reply you can do this in a number of manner. Please have a look at it. If you have a link of your page which we can access I think the troubleshooting would be most faster or you can provide the source code so that we can edit that in a manner it fits for your purposes.

**Jeremy** · 02-06-2008, 11:01 AM

Okay, thanks - as requested, I provide below a link to the page currently online:

http://www.bodmin.gov.uk/newsitetest..._Template.html

Next - below is the javascript for the show/hide feature (currently inside the html head section of the page):

Code:

/*************************************************************************
  This code is from Dynamic Web Coding at http://www.dyn-web.com/
  Copyright 2001-3 by Sharon Paine 
  See Terms of Use at http://www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

// onresize for ns4



var origWidth, origHeight;
if (document.layers) {
	origWidth = window.innerWidth; origHeight = window.innerHeight;
	window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}

var cur_lyr;	// holds id of currently visible layer
function swapLayers(id) {
  if (cur_lyr) hideLayer(cur_lyr);
  showLayer(id);
  cur_lyr = id;
}

function showLayer(id) {
  var lyr = getElemRefs(id);
  if (lyr && lyr.css) lyr.css.visibility = "visible";
}

function hideLayer(id) {
  var lyr = getElemRefs(id);
  if (lyr && lyr.css) lyr.css.visibility = "hidden";
}

function getElemRefs(id) {
	var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
	if (el) el.css = (el.style)? el.style: el;
	return el;
}

Thirdly, the external javascript file for the styleswitcher is presented here for you to look at:

Code:

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Thanks for your patience on this. I hope I have included all you need. Many thanks!

**codeexploiter** · 02-06-2008, 11:46 AM

1. Go to javastyleswitcher.js and comment the line that contains the following code. The first line in that JS file I think

Code:

window.onload = initStyle;

2. Go to your web page whose <body> tag has an 'onload' attribute and remove that onload attribute completely. We don't need that.

3. In yuor web page insert the following JS code in any of the <script> section (excluding the ones used for loading the external JS files) and put the following code in it. You can even create a new <script> section for the code if you prefer. The only thing is that you need to keep this code lower than any other <script> sections in your page:

Code:

window.onload = function(){
	swapLayers('lyr1');
	initStyle();
}

4. Save both pages 'javastyleswitcher.js' and your web page and load the web page.

Now both functions will be executed properly.

**Jeremy** · 02-06-2008, 01:13 PM

Amazing!

You guys are sooooooooooooo patient with people like me and you go to a lot of trouble to ensure that in the end it works. I commend you!

The page now works just as I hoped - thanks to you.

'Well done' just doesn't do you justice! Thanks again!

Kind regards

Jeremy

**Aminiasi Tikoi Navunitale** · 02-27-2008, 03:43 PM

hey I have an idea. this is for PHP users only. why not u just copy the script(yeah m one of the JavaScript cut-and-pasters) onto a new text file, name the file with a .php n then on the main page just put "<?php include 'filename.php ?>". but make sure the main page must have a .php extension too otherwise it will be recognised as a normal html page. I did this for "side menu"........yeah had been using too many scripts.

don't worry will recomend your website.....thanx

Thread: body onload event handler conflicts with styleswitcher script

Thread Tools

Search Thread

body onload event handler conflicts with styleswitcher script

Bookmarks

Bookmarks

Posting Permissions