IE 6 removing div on any javascript routine..

  • Thread starter Thread starter willwade
  • Start date Start date
W

willwade

Hi there,
Sorry for the perhaps undirected post - Ive struggled for the past few
hours and cant see the wood for the trees..

I have a page (infact a site but I will keep it simple) that is a
css/table mix. One of the images is sitting in a pretty straightforward
div:

<td valign="top" width="391" align="left">
<div id="bigimage"><img
src="/bits/images/photographers/michelle-hepburn/portrait4.jpg" alt=""
border="1" id="theimage"></div>
</td>


with the css:
div#bigimage
{
position: absolute;
width: 366px;
height: 366px;
padding: 50px 0 5px 0px;
border: 0;
text-align: center;
background: url('/bits/images/shared/loading.gif') 50% 50% no-repeat ;
}

#theimage {
}

the thing is - as soon as I rollover any image/link that invokes some
javascript the layer disseapears! vanishes! kapoof!
if I dont put the image in the div its fine.. anyone have any ideas??

you can see a demo at:
http://lizemerson.com/testing.html
and for the non-div'd version:
lizemerson.com/testing-nobigdiv.html

driving me nuts!
will
 
Hi there,
Sorry for the perhaps undirected post - Ive struggled for the past few
hours and cant see the wood for the trees.

I have a page (infact a site but I will keep it simple) that is a
css/table mix. One of the images is sitting in a pretty straightforward
div:

<td valign="top" width="391" align="left">
<div id="bigimage"><img
src="/bits/images/photographers/michelle-hepburn/portrait4.jpg" alt=""
border="1" id="theimage"></div>
</td>


with the css:
div#bigimage
{
position: absolute;
width: 366px;
height: 366px;
padding: 50px 0 5px 0px;
border: 0;
text-align: center;
background: url('/bits/images/shared/loading.gif') 50% 50% no-repeat ;
}

#theimage {
}

the thing is - as soon as I rollover any image/link that invokes some
javascript the layer disseapears! vanishes! kapoof!
if I dont put the image in the div its fine.. anyone have any ideas??
Click to expand...

The first thing to do is validate (and fix) your page, both HTML and CSS.

Your problem is most likely related to your script, you will probably
get a better answer in comp.lang.javascript. But before posting there,
reduce your example to a minimal test case (often you will discover the
reason why when doing that task). The easier you make it for others to
help, the quicker you'll get an answer.

You should spend a bit of time optimising your code. For example, you
pass 'this.name' to the imageSetOn() function, where it is stored in a
local variable 's'. You then use document.images to get back a
reference to the image.

If you just pass 'this', then 's' is a reference to the image element.
Setting oImages[a] to a local variable allows:

image_location = oImages[a].location;
document.images.src = image_location + oImages[a].on_prep +
oImages[a].names + oImages[a].on_ext + oImages[a].ext;


to become:

var x = oImages[a];
s.src = x.location + x.on_prep + x.names + x.on_ext + x.ext;


which is significantly shorter. Your use of image_location without the
'var' keyword makes it a global variable, which should generally be avoided.


You also have a preload function that attempts to preload all the
images, but since it doesn't keep references anywhere the image objects
you create are cleaned up by garbage collection when the function exits
- likely none of the images finish loading before that occurs.

Why not keep references to all the image objects created and swap them
in and out? Then you only need mess with the above once in the preload
function.


Your attempt to assign a value to the window.onload property fails:

document.onload = preloadImages();


will assign the value returned by the preload function (which is
nothing). What you want to do is assign a reference to the function:

document.onload = preloadImages;

you can see a demo at:
http://lizemerson.com/testing.html
and for the non-div'd version:
lizemerson.com/testing-nobigdiv.html

driving me nuts!
Click to expand...

Yeah. The "don't copy the images" alert triggered by right-clicking is
rather quaint. It is annoying and it doesn't stop the images being copied.
 
Thanks Rob - I have gone through the code and edited live - hey I live
dangerously. (Im on mac and testing this IE windows only bug is a
nightmare)

After a lot of nit-picking Ive discovered my problem is the css. Not
the javascript.

Everything is fine bar the word "absolute"

this makes the image disappear :

div#bigimage
{
position: absolute;
width: 366px;
height: 366px;
padding: 50px 0 5px 0px;
border: 0;
text-align: center;
background: url('/bits/images/shared/loading.gif') 50% 50% no-repeat ;
}

this makes the image stay there:

div#bigimage
{
width: 366px;
height: 366px;
padding: 50px 0 5px 0px;
border: 0;
text-align: center;
background: url('/bits/images/shared/loading.gif') 50% 50% no-repeat ;
}

what the heck?!
you can see the mess at something like:
http://lizemerson.com/liz-emerson/i/dberlin
Ive stripped the whole code down including removing all javascript and
a limited css - including taking out all the properties of bigimage and
it makes no difference - the position is the key. I dont get it - it
works in everything else.

any ideas? im desparate!

w

PS: the images being copied malarky - I know: I put it in my general.js
code ages ago but because I use a mac I never actually get the messages
so forgot all about it!
 
Thanks Rob - I have gone through the code and edited live - hey I live
dangerously. (Im on mac and testing this IE windows only bug is a
nightmare)

After a lot of nit-picking Ive discovered my problem is the css. Not
the javascript.

Everything is fine bar the word "absolute"

this makes the image disappear :

div#bigimage
{
position: absolute;
width: 366px;
height: 366px;
padding: 50px 0 5px 0px;
border: 0;
text-align: center;
background: url('/bits/images/shared/loading.gif') 50% 50% no-repeat ;
}

this makes the image stay there:

div#bigimage
{
width: 366px;
height: 366px;
padding: 50px 0 5px 0px;
border: 0;
text-align: center;
background: url('/bits/images/shared/loading.gif') 50% 50% no-repeat ;
}

what the heck?!
you can see the mess at something like:
http://lizemerson.com/liz-emerson/i/dberlin
Ive stripped the whole code down including removing all javascript and
a limited css - including taking out all the properties of bigimage and
it makes no difference - the position is the key. I dont get it - it
works in everything else.

any ideas? im desparate!

w

PS: the images being copied malarky - I know: I put it in my general.js
code ages ago but because I use a mac I never actually get the messages
so forgot all about it!
Click to expand...

Sorry, no excuse. Safari will show you errors too - how you turn it on
depends on the version. If you are developing a site, use Firefox and
the JavaScript console for all development then test on other browsers.

The idea is to get the content right, then the layout, then finally add
script. Test frequently and thoroughly in a wide range of browsers.


You call WriteLayer() with 'nav_info', there is no such ID. You have an
element with an ID of 'navinfo' though.

Your write layer function is not too hot. Test for getElementById
first, that will satisfy 95% of browsers without any further ado.
document.all might get used in 4.99%, and 0.01 might use layers:


function WriteLayer(ID, parentID, sText)
{
var el;
if (document.getElementById){
el = document.getElementById(ID);
} else if (document.all){
el = document.all(ID);
} else if (document.layers){
el = (parentID)?
document.layers[parentID].document.layers[ID].document :
document.layers[ID].document;
if (el){
el.open();
el.write(sText);
el.close();
el = null;
}
}
el && (el.innerHTML = sText);
}


More efficient and no errors, even if ID doesn't exist or none of the
methods attempted work.
 
Back
Top