Forum Moderators: open

Message Too Old, No Replies

CSS/Javascript and their (annoying) tricks

         

dnimrodx

2:00 am on Jan 29, 2004 (gmt 0)

10+ Year Member



Hello!

In a Javascript Reference Manual I found the following:

(...)
From a scripting point of view, it is important to know that while a style object's property exhibits a default behaviour (a font size or alignment), the default value may not be reflected in the property unless the value has been explicitly set in the element tag's STYLE
(...)

So, admiting I use something like:

<style type="text/css">
#sample_id {
position:absolute;
left:167px;
top:373px;
width:144px;
height:61px;
}

</style>

</head>

<script type="text/javascript" language="javascript">

function onWindowResize()
{
// myValue will be set to zero because the property cannot be accessed as it was not initialized inside the style clause (?)
var myValue = document.all.sample_id.style.pixelTop
}

</script>

<div id="sample_id">
<img src="images/bkg_01.jpg" width="231" height="234"></div>

... this means I won't be able to access sample_id's property values in the script above because its properties were not initialized in the style clause, inside the <DIV> tag.

Does anyone know if there is a logical reason for this to work this way? I feel this is very annoying and somewhat illogic, does anyone feel the same way as me?

What I would like to know is if there is a way of accessing the tag's properties without having to initialize them in the style clause.

Any suggestions?
Thank you a lot for your time! 8 )

D#Nimrod

dnimrodx

2:37 pm on Jan 29, 2004 (gmt 0)

10+ Year Member




Does anyone know how to work this one out?
I would appreciate it a lot!

Thanks #

christodd

10:53 pm on Jan 31, 2004 (gmt 0)

10+ Year Member



There are really 2 phases to Javascript/DHTML. These are the pre-load and post-load phases. If you insert javascript into your code in the style above (BTW, your example doesn't actually create the error you're talking about), then it is executed before the page has completed loading. This means that that div isn't created.

The pre-load phase is useful for inserting dynamic content like cookie values or the user's ip address on the page. In this phase the document.write method is available. I also use this for creating dynamic style tags.

After the page has loaded, then you can manipulate the page using the DOM. I consider this Dynamic HTML (DHTML) - this is where you want to call your function. In order to make your functions happen after the page has loaded, they need to be called from events: onClick, onMouseOver, onLoad, etc. The OnLoad function is the one that is called after the page has been created, when the browser switches to post-load mode.

So, you want to call your onWindowResize function this way
<body onLoad="onWindowResize()">

If you want some good examples, I've got a Javascript Windows project at [bitesizeinc.net...] with source code you can download that demonstrates this.

dnimrodx

7:02 pm on Feb 1, 2004 (gmt 0)

10+ Year Member



Thanks alot for the input Christodd. I apreciate it, especially the descriptive content. But let me ask you something: is the 'preload' phase (event) you mention above also available in Netscape (and the other browsers) apart from IE?

Again thanks.

d#Nimrod

tedster

7:35 pm on Feb 1, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



As I understand it, preload is not a formal coding reference - it's a convenient label that refers to anything that occurs before the page is fully loaded. So yes, a preload period is available in all browsers. The onLoad event (that's a formal name in javascript) is universally available cross-browser, as it just means when all the HTML is loaded.

However, other events (such as onMouseover) are not uniformly available cross-browser for all page elements. Even in different versions of the same browser the support will vary.

dnimrodx

11:39 pm on Feb 1, 2004 (gmt 0)

10+ Year Member



As I understand it, preload is not a formal coding reference - it's a convenient label that refers to anything that occurs before the page is fully loaded.

So you mean there is no preload event or such. Instead we have to be happy to use OnLoad? What about if we want to do any kind of pre-load processing operations before the page is actually displayed? Is there any way to do this which is fully supported by all browsers?

david

Purple Martin

3:40 am on Feb 2, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What about if we want to do any kind of pre-load processing operations before the page is actually displayed? Is there any way to do this which is fully supported by all browsers?

Wrap your entire body in tin foil. No, that's not right. Wrap your entire body in a div with visibility="hidden". Aah much better.

Now, use the onLoad event to call a function that does all the size calculations. Once all the sizing is done, the function then sets visibility="visible" for the div.

This is a bit of a hack, but a hack is better than no solution at all. I know that IE re-renders the content (with new sizes!) when you set the visiblility property to visible. Test it in other browsers, I'm 99% sure it'll work in Netscape too.

dnimrodx

2:51 pm on Feb 2, 2004 (gmt 0)

10+ Year Member



I have been using that "trick" as I didn't know there was a 'pre-load' event available. I was right after all.

Thanks for the input, Purple Martin and also for letting me know it is compatible with Netscape - that is the bit I wasn't sure about.

d#Nimrod