I am trying to set the background color of a heading element according the the url hash.
html:
Code:
<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:
Code:
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.
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;
}
}
Code:
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";
__________________
Quote:
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
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.
I changed the html to remove the conflicting ID and name:
Code:
Code:
<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'.
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
This may help demonstrate the browser behavior in IE and FF
Code:
<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.
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?
Before you post, read our: 
