Forum Moderators: open
However, I am still really struggling to get this script to work and only receive constant JS errors that are mysterious to me. I do not know where the local variables: var VISIBLE: (isNE4)? "show" : "hidden";
var HIDDEN = (isNE4)? "hide" : "hidden"; should be placed. At the moment these cause an error. As an experiment, I have placed them globally, but that has not worked. Below is the script that I have tried to follow from the previous instruction.
I am also puzzled by the extra brace in the
else if (isNS4)
{
document.getElementById = function(id)
{
(etc)
I am new to JavaScript and very vague as to how to script correctly, expecially with this cross-browser scripting.
Could you please assist further.
Many thanks.
Robin.
New Zealand
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
#slide {position:relative; top:170px; left:600px; width:250px; border:2px blue solid; visibility:hidden}
-->
</style>
<script type="text/javascript">
<!--
var VISIBLE: (isNE4)? "show" : "hidden";
var HIDDEN = (isNE4)? "hide" : "hidden";
function Appear()
{
var slide = document.getElementById('slide')
var isIE4 = (document.all &&! document.getElementById)? 1 : 0
var isNS4 = document.layers? 1 : 0
var isDOM = document.getElementById? 0 : 1
if (isIE4)
document.getElementById = function(id)
{
return this.all[id]
}
else if (isNS4)
{
document.getElementById = function(id)
{
var elm = this.layers(id)
elm.style = elm
return elm
}
var slide = document.getElementById('slide') > 600
if (parseInt(slideStyle.left))
{
slideStyle.left = VISIBLE
}
}
}
// -->
</script>
<title>Layers</title>
</head>
<body>
<div id="slide">This is a test box
</div>
<form>
<input type="button" value="SHOW" onClick="Appear()">
</form>
<P></P>
</body>
</html>
Previous Post:
You won't be able to get element style values that have been set by a stylesheet. You need to either set them by script, or put the ones you want to get into an inline style:
<div style="left:200px....">
This script has a section at the top that will sort things out a bit for you. It can be developed to make general scripting easier. It does mean that you have to follow certain conventions, like using HIDDEN instead of "hidden". It doesn't use IE only things like pixelLeft.
notes
[1]
NS4 elements have no style object. My solution is to give the element a style property that points back to the element. It's a little inefficient to put it on the new 'get' method...but handy!
[2]
NS4 uses the values "show" and "hide" instead of "visible" and "hidden"
// =========================================================== //
var isIE4 = (document.all &&!document.getElementById)? 1:0
var isNS4 = document.layers? 1:0
var isDOM = document.getElementById? 1:0
// give browser a getElementById method
// Explorer 4 : general
// Netscape 4 : still won't get nested layers (can be improved)
if(isIE4)
document.getElementById = function(id){ return this.all[id] }
else if(isNS4)
{
document.getElementById = function(id)
{
var elm = this.layers(id)
elm.style = elm // note [1]
return elm
}
}
// sort out CSS values notes[2]
var VISIBLE: (isNS4)?"show":"visible",
var HIDDEN : (isNS4)?"hide":"hidden"
// =========================================================== //
function Appear()
{
// put element into local var
var slide = document.getElementById("slide")
// put elm.style into local too
varslideStyle = slide.style
if(parseInt(slideStyle.left) > 600)
slideStyle.visibility = VISIBLE
}
You don't have to use all that stuff. I just thought it would be a good place to start. We could have our appear function do lots of branching to take account of different browsers. Then we'd have to do it all over again for another function.
The main reason it doesn't work (assuming that mine does!) is that you have re-arranged it all.
I do not know where the local variables: var VISIBLE: (isNE4)? "show" : "hidden";
These must be global (hence capitals), and should be
// isNS4 must be defined before thisvar VISIBLE = (isNS4)?"show":"visible"
var HIDDEN = (isNS4)?"hide":"hidden"
Now I made a [b]mistake here (a leftover from another approach). I put a colon, instead of an equals, so it wouldn't work, even if you had kept your side of the deal.
In yours above, there is an error in one of the values, and more importantly, you have moved the block that assigns isNS4 etc to inside the appear function, so naturally variables like isNS4 are as yet undefined.
Moving the block (that assigns the vars isIE4 etc, and gives a getElementById method to browsers that don't have one) to inside a function kind of defeats the object of having it in the first place. It is meant to be placed at the top (or thereabouts) of the script, and can then make things easier to do in any function you choose. It has set some useful globals, and given a new method to the document.
Have a go again, with the script in the same order as I posted. See how it goes.
Many thanks for your guidance. I have certainly confused myself with all the code. I will now take a fresh look and let you know how I got on with it.
Regards,
Robin.
I am still having error problems with this code you gave to me. When I open the page I receive a JS error; Line 11: Char:1 'isNE4' is undefined.
I have studied the code with my limited knowledge, but am unable to understand why this should be.
Could I please ask you to assist here.
Many thanks,
Robin.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
#slide {position:relative; top:170px; left:600px; width:250px; border:2px blue solid; visibility:hidden}
-->
</style>
<script type="text/javascript">
<!--
var VISIBLE = (isNE4)? "show" : "visible";
var HIDDEN = (isNE4)? "hide" : "hidden";
function Appear()
{
var slide = document.getElementById('slide')
var isIE4 = (document.all &&! document.getElementById)? 1 : 0
var isNS4 = document.layers? 1 : 0
var isDOM = document.getElementById? 0 : 1
if (isIE4)
document.getElementById = function(id)
{
return this.all[id]
}
else if (isNS4)
{
document.getElementById = function(id)
{
var elm = this.layers(id)
elm.style = elm
return elm
}
var slide = document.getElementById('slide') > 600
if (parseInt(slideStyle.left))
{
slideStyle.left = VISIBLE
}
}
}
// -->
</script>
<title>Layers</title>
</head>
<body>
<div id="slide">This is a test box
</div>
<form>
<input type="button" value="SHOW" onClick="Appear()">
</form>
<P></P>
</body>
</html>
Don't mind him. In short, the boolean variables that hold the browser type still aren't defined early enough in the script.
The browser immediately executes any statements that aren't inside a function. The first statements are giving you the problem. You'll clearly see that isNS4 hasn't been defined yet.
...and the rest of the 'helper' block is still inside a function.
Move ALL of this below from the function, to the very top of the script block:
(*! added first line)
var isOpera = window.opera
var isIE4 = (!isOpera && document.all &&! document.getElementById)? 1 : 0
var isNS4 = document.layers? 1 : 0
var isDOM = document.getElementById? 0 : 1if (isIE4)
document.getElementById = function(id)
{
return this.all[id]
}
else if (isNS4)
{
document.getElementById = function(id)
{
var elm = this.layers(id)
elm.style = elm
return elm
}
note:I have added an extra line to detect Opera, on DrDoc's advice recently.
My code indentation keeps disappearing. Introduce some yourself to help clarity.
