variable not recognized in IE

1andyw

08-24-2007, 09:39 AM

Hi,

I am trying to set the background color of a heading element according the the url hash.

html:
<head>
<script type="text/javascript" src="highlight.js"> </script>
</head>
<body onload="highlight()">
<div class="art"><a name="workshops"></a><h2 id="workshops">Workshops for Advocacy Groups</h2>
<p>The Disability Advocacy Support Hub is providing no-cost workshops</p>
</div>

js:
function highlight(){
if(document.location.hash){
var hasher = ((document.location.hash).slice(1));
alert("The Value of hasher is " + hasher);
var elname = document.getElementById(hasher);
alert("The Value of elname is " + elname);
elname.style.backgroundColor="yellow";
}
else{
return true;
}
}

The process will not work in IE and doesn't throw an error. The value of elname returns nothing.

Thanks,

Andy

abduraooft

08-24-2007, 10:10 AM

js:
function highlight(){
if(document.location.hash){
var hasher = ((document.location.hash).slice(1));
alert("The Value of hasher is " + hasher);
var elname = document.getElementById(hasher);
alert("The Value of elname is " + elname);
elname.style.backgroundColor="yellow";
}
else{
return true;
}
}

if(document.location.hash){
var hasher = ((document.location.hash).slice(1));
alert("The Value of hasher is " + hasher);
hasher=hasher.toString();
document.getElementById(hasher).style.backgroundColor="yellow";

1andyw

08-24-2007, 11:51 AM

Still returns:

Value of hasher is workshops

and also

Value of elname is

but only in IE6. In FF, runs correctly.(?)

No errors are thrown in IE.

Thanks for your time.

Andy

abduraooft

08-24-2007, 03:14 PM

Hmm.. looking strange, works perfectly in FF, and theres is nothing to do with the hash-value variable.

The output of a piece of code like below in IE6 is funny.
document.getElementById("workshops").style.backgroundColor="yellow";
alert(document.getElementById("workshops").style.backgroundColor);

But there is no such problem for document.body.style.backgroundColor="yellow";
I can't see any related documents on web, let's hope some expert's comments .

Edit: Stupid IE6 can understand <h2 onmouseover="this.style.backgroundColor='yellow'">Workshops for Advocacy Groups</h2>:eek:

1andyw

08-24-2007, 09:44 PM

Thanks for the input. I can't figure out why IE won't play nice.

felgall

08-25-2007, 04:58 AM

You have one tag with a name attribute and another with an id that has the same value. In IE names and ids share the same storage area and so one overwrites the other.

1andyw

08-25-2007, 12:51 PM

Hi Steve,

I changed the html to remove the conflicting ID and name:

<button onclick="highlight()">Change Bg</button>
<div class="art"><h2 name="accomodations">What are Reasonable Accommodations?</h2><p>Boston University has reasearched.</p></div>

I changed the js to use 'getElementsByName()' :

function highlight(){
if(document.location.hash){
var hasher = ((document.location.hash).slice(1));
alert("The Value of hasher is " + hasher);
var elname = document.getElementsByName(hasher);
alert("The Value of elname is " + elname[0]);
elname[0].style.backgroundColor="yellow";
}
else{
return true;
}
}

With FF, the output is as desired except the page opens at the top and not at the anchor.

With IE6, the alert 'Value of hasher' returns:'accomodations', which is correct.

However, it then returns the alert 'Value of elname is 'undefined' and thows an error: '0.style is null or not an object'.

Can you recommend a work-a-round for this?

Thanks,

Andy

abduraooft

08-25-2007, 01:09 PM

It worked well for me in both IE&FF for the hash value #workshops for a piece of code which you originally posted like
<body onload="highlight()">
<div class="art"><a name="workshops1"></a><h2 id="workshops">Workshops for Advocacy Groups</h2>
<p>The Disability Advocacy Support Hub is providing no-cost workshops</p>
</div>
<script type="text/javascript" >
function highlight(){
if(document.location.hash){
var hasher = ((document.location.hash).slice(1));
hasher=hasher.toString();
alert("The Value of hasher is " + hasher);
var elname = document.getElementById(hasher);
alert("The Content of elname is " + elname.innerHTML);
elname.style.backgroundColor="yellow";
}
else{
return true;
}
}

</script>
I'm not sure about your current requirement.

1andyw

08-25-2007, 01:46 PM

Hi,

Adding 'innerHTML' changes the alert output but not the results.

It continues to work in FF but not in IE.

I am still at square one.

Andy

1andyw

08-25-2007, 08:52 PM

I identified a difference between ff and IE6.

function highlight()
{
if(document.location.hash)
{
var hasher = ((document.location.hash).slice(1));
alert("The Value of hasher is " + hasher);
}
if(document.getElementsByName)
{
alert("Good with get by name");
var elname=document.getElementsByName(hasher);
alert("The length of elname is " + elname.length);
}
else
{
return true;
}
}

The alert for length returns 2 in ff but only 1 in IE6

Can anyone help me understand this difference?

Andy

glenngv

08-25-2007, 11:48 PM

Stick to getElementById and set the heading id with a pattern like corresponding_anchor_name_heading.

<body onload="highlight()">
<div class="art"><a name="workshops"></a><h2 id="workshops_heading">Workshops for Advocacy Groups</h2>
<p>The Disability Advocacy Support Hub is providing no-cost workshops</p>
</div>
<script type="text/javascript">
function highlight(){
var hasher, elname;
if (location.hash){
hasher = location.hash.slice(1));
alert("The Value of hasher is " + hasher);
elname = document.getElementById(hasher + "_heading");
alert("The Content of elname is " + elname.innerHTML);
elname.style.backgroundColor="yellow";
}

}
</script>

rwedge

08-26-2007, 03:47 AM

This may help demonstrate the browser behavior in IE and FF<script type="text/javascript">
function getByNames(){
var i = 0, targetNames = document.getElementsByName("theName");
while (i<targetNames.length) {
targetNames[i].style.backgroundColor = '#FF0000';
i++;
}
}
</script>

<h1 name="theName">Name in Heading</h1>
<h1 id="theName">Id in Heading</h1>

<form name="myform" action="">
<input type="text" id="theName" value="id in form">
<input type="text" name="theName" value="name in form">
<input type="button" value="Get Names" onclick="getByNames()">
</form>

<p name="theName">Name in Paragraph</p>
<p id="theName">Id in Paragraph</p>
<p name="theName" id="theName">Name and Id in Paragraph</p>

IE will only see 'name' in the form, while seeing all the elements with an id.
FF will only get the elements with the target name as you would expect.

1andyw

08-26-2007, 04:17 PM

Wow!

Thank you both for your trouble and the explanation.

Your work is much appreciated.

Andy

1andyw

08-28-2007, 02:53 PM

Hi,

A little quirk in this matter: the first time I click a url within the email notice, the page loads and the element highlights, as desired. On subsequent clicks, the anchor is moved to the top of the page but the page doesn't reload hence the script doesn't run.

How can I force a reload on subsequent clicks on the email list?

Thanks,

Andy