onload problem

Forum Moderators: open

Message Too Old, No Replies

onload problem

Can't get style to be written in div

mr_nabo

11:18 pm on Jul 31, 2008 (gmt 0)

I hope you can help me on why this isn't working, I've been banging my head against a wall all night.

I've included a function.js file in the [head] of my index.php file with this in it:


function hideDiv() {
documentGetElementById("cms").style="overflow:visible; display:none;";
}

Then I have this for my body tag so that it is meant to hide the div with id 'cms' when the page loads:


<body onload="hideDiv()">

But it doesn't concatenate the style to the div with id 'cms'!

Can anyone see the problem? Ideally I want to hide a few ids/divs on the same page when it loads so is there also a better way of doing this?

Thanks in advance

DrDoc

11:26 pm on Jul 31, 2008 (gmt 0)

First of all, you need to separate

document

and

getElementById

in your code. Secondly, the two properties need to be set separately.

function hideDiv() {  
  document.getElementById("cms").style.display  = "none";  
  document.getElementById("cms").style.overflow = "visible";  
}

mr_nabo

12:37 pm on Aug 1, 2008 (gmt 0)

DrDoc, you're a dude, thanks you for that - obviously I was up a little too late last night and not thinking straight.

Is there actually a way of inserting a bit of javascript, say, just above the div I want to hide with something like the following code rather than having to specify each div id in the function itself?

<script type="javascript">hideDiv('cms');</script>
<div id="cms">
Content
</div>

and then later on in the page

<script type="javascript">hideDiv('other');</script>
<div id="other">
Content
</div>

I assume I'd need to place something like this in the function and place it in the head of the page right?

function hideDiv(id) {
document.getElementById(id).style.display = "none";
document.getElementById(id).style.overflow = "visible";
}

Cheers

Fotiman

2:41 pm on Aug 1, 2008 (gmt 0)

1. Mixing JavaScript inline in your HTML markup is bad practice. It's obtrusive. If you ever want to modify which items are shown, you need to dig through the HTML markup to find all of the cases that set it vs. going to just one place where all of the ids are defined. It's messy. I would not do it that way.
2. If you call your hideDiv method before the div has been declared on the page, then getElementById will not find it and will error. You could instead have the hideDiv method fire when the DOM element is ready. Requires more coding or a library to handle.
3. You should place your scripts in external JavaScript files, and then they should be included as the last item before your closing </body> tag. When a browser is downloading a script, it will block, meaning it won't download images or other items in the page until it finishes processing the script. By including scripts at the end, you give a better perceived performance, as other elements in your page will be able to load in the mean time.

mr_nabo

4:54 pm on Aug 1, 2008 (gmt 0)

Thanks for the advice Fotiman - I'm new to javascript so tips like not mixing inline js code with HTML is invaluable.

A quick few questions about what you said:

1. I read on Tizag.com the following:

The location choice of head or body is very simple. If you want to have a script run on some event, such as when a user clicks somewhere, then you will place that script in the head. If you want the script to run when the page loads, like our "Hello World!" example in the previous lesson, then you will want to place the script within the body tag.

I've included my js in the head as an include - are you saying I should include it at the very end (before the end body tag)?

2. How would I load hideDiv when the DOM is ready? I'm using the scriptaculous library for a few basic effects (which has already massively slowed down my site btw - is that normal?), so can I use that library for this purpose?

Thanks once again

Fotiman

7:40 pm on Aug 1, 2008 (gmt 0)

1. That article is probably out dated or poorly written (or both). In the past, it was common practice to put scripts in the head. However, newer "best practices" encourage placing it at the very end of your document because, as mentioned, it will block the rest of your page from loading. Here's a template you might use:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > 
<!-- Styles --> 
<link rel="stylesheet" type="text/css" href="yourfile.css"> 
<title>Untitled</title> 
</head> 
<body> 
... 
<!-- Scripts --> 
<script type="text/javascript" src="yourscript.js"></script> 
</body> 
</html>

2. Scriptaculous doesn't, but scriptaculous uses Prototype which does. This example, will trigger on the window.onload event, but the documentation for Prototype's Observe method includes a link to an article about firing when the DOM is ready:


Event.observe(window, 'load', function() { 
  hideDiv('cms'); 
  hideDiv('foo'); 
});

onload problem

Can't get style to be written in div

mr_nabo

DrDoc

mr_nabo

Fotiman

mr_nabo

Fotiman

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week