PDA

View Full Version : 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:
<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;
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)
<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


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


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/Around_Bodmin/VIC/Copy_of_Product_Page_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



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



<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.:confused:

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


<link rel=blah blah> in the <head> to get the new external .js to load.

nor do I know how to call them both with the



<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:


<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:


<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/Around_Bodmin/VIC/Copy_of_Product_Page_Template.html

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



/*************************************************************************
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:


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

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:


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