PDA

View Full Version : Need a Mozilla behavior explanation

Graeme Hackston
03-14-2003, 12:47 AM
If I change the div below from its current state to this


<div id="btn-text" style="display: none">
new</div>


It doesn't work in Mozilla 1.0.2. What's it doing that other browsers aren't?


<html>
<head>
<title></title>
<script>
onload = function() {
document.getElementById('btn').value = document.getElementById('btn-text').innerHTML
}
</script>
</head>
<body>

<div id="btn-text" style="display: none">new</div>

<input id="btn" type="button" value="old" onclick="alert(this.value)">

</body>
</html>


<edit> is this a JS question ? </edit>
jkd
03-14-2003, 01:26 AM
I don't think using hyphens in id names are valid... just a hunch.
joh6nn
03-14-2003, 01:31 AM
my guess is that the dash messes it up somehow. try it with an underscore instead
Tommi
03-14-2003, 01:32 AM
In my experience, display:none is the same as if the layer which isn't displayed even does not exist.
You need to use style="position:absolute; visibility:hidden" instead
Graeme Hackston
03-14-2003, 01:41 AM
Tommi I agree with you but I've only seen problems in IE with images.

I'm using win98, does anyone else get no value in Mozilla?


<html>
<head>
<title></title>
<script>
onload = function() {
document.getElementById('btn').value = document.getElementById('btntext').innerHTML
}
</script>
</head>
<body>

<div id="btntext" style="visibility: hidden">
new</div>

<input id="btn" type="button" value="old" onclick="alert(this.value)">

</body>
</html>
Tommi
03-14-2003, 01:44 AM
Try to put the images into a div tag with z-index:1 and the other layer which is accessed by your script z-index:0
Maybe that works...
Graeme Hackston
03-14-2003, 01:50 AM
Sorry by image problems I ment IE6- doesn't get size attributes of an image set to display none. It doesn't get sizes when an image is in a table either but that's another story :)
Graeme Hackston
03-14-2003, 01:53 AM
Just to simultaneously clarify and complicate. Try this in IE


<html>
<head>
<title></title>
</head>
<body>
<table>
<tr>
<td>
<img src="an_image.jpg" alt="alt info" width="50" height="50" id="img-1">
<script type='text/javascript'>
alert('From within a table:\nHeight = '+document.images['img-1'].height+'\nWidth = '+
document.images['img-1'].width+'\nAlt = '+
document.images['img-1'].alt+'\nSource = '+
document.images['img-1'].src)
</script>
</td>
</tr>
</table>
<script type='text/javascript'>
alert('From outside of a table:\nHeight = '+document.images['img-1'].height+'\nWidth = '+
document.images['img-1'].width+'\nAlt = '+
document.images['img-1'].alt+'\nSource = '+
document.images['img-1'].src)
</script>
</body>
</html>


<edit> replaced missing head tags, FP removes head tags when there's no title text or scripts etc.. I should stop using it to test IE</edit>
Graeme Hackston
03-14-2003, 01:57 AM
Sorry about more hypens guys. ASAIK they work
joh6nn
03-14-2003, 01:58 AM
it's working fine for me in phoenix. it even works with the hyphen/dash ( which surprises me )

edit: the first one works for me in phoenix; give me a moment and i'll try the new one.

edit 2: phoenix doesn't seem to get the width and height of the image, inside the table either. very odd. anyway, things seem to be working fine for me, so there's gotta be something else going on.
cheesebagpipe
03-14-2003, 01:59 AM
Just a guess: using new anywhere (except to get a new object) is often the kiss of death....:eek:
Graeme Hackston
03-14-2003, 02:07 AM
Good guess cheesebagpipe but still the same. This is for an HTML illiterate person with lots of common button values. I started with something like this :)



<div id="btn1">

<!-- Change remove button text here -->

remove

</div>

I'm sure they can figure it out as Mozilla needs it. I'm just curious.
Graeme Hackston
03-14-2003, 02:16 AM
Interesting John. I first tested that image page in NN6 and it alerted sizes. Opera 7 gets them to.
Graeme Hackston
03-14-2003, 02:50 AM
John, sorry but could you retry the image page in phoenix. I replaced missing head tags.
joh6nn
03-14-2003, 03:35 AM
phoenix is still throwing up 0's on the attempt in the table.

have you gotten the problem with the button and alert working?
Graeme Hackston
03-14-2003, 03:49 AM
No, not in Mozilla, but I think I'm getting warm. This alert 4 for the 1st div and 6 for the 2nd (in Moz).

4 and 4 in Opera 7

5 and 5 in IE?


<html>
<head>
<title></title>
<script>
onload = function() {
alert(document.getElementById('text1').innerHTML.length+
'\n'+document.getElementById('text2').innerHTML.length)
}
</script>
</head>
<body>

<div id="text1">text</div>

<div id="text2">
text</div>

</body>
</html>
Graeme Hackston
03-14-2003, 03:57 AM
The problem looks like white space. Maybe a line break is 2 spaces in Mozilla. I'm still not sure why that completely affects placing the string in a button value.
Graeme Hackston
03-14-2003, 05:49 AM
Got it


<html>
<head>
<title></title>
<script>
onload = function() {
document.getElementById('btn').value = document.getElementById('btn-text').innerHTML.replace(/\s+/g,"")
}
</script>
</head>
<body>

<div id="btn-text" style="display: none">
new</div>

<input id="btn" type="button" value="old" onclick="alert(this.value)">

</body>
</html>
Graeme Hackston
03-14-2003, 10:12 PM
Just an update, this version is probably better. It allows multiple words with spaces between.


<html>
<head>
<title></title>
<script>
onload = function() {
document.getElementById('btn').value = document.getElementById('btn-text').innerHTML.replace(/^\s+/,"").replace(/\s+$/,"")
}
</script>
</head>
<body>

<div id="btn-text" style="display: none">
button text</div>

<input id="btn" type="button" value="old" onclick="alert(this.value)">

</body>
</html>