Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    176
    Thanks
    14
    Thanked 1 Time in 1 Post

    variable not recognized in IE

    Hi,

    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.

    Thanks,

    Andy

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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;
    	}
    }
    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";
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jul 2006
    Posts
    176
    Thanks
    14
    Thanked 1 Time in 1 Post
    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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    Code:
    document.getElementById("workshops").style.backgroundColor="yellow";
    alert(document.getElementById("workshops").style.backgroundColor);
    But there is no such problem for
    Code:
    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
    Code:
    <h2 onmouseover="this.style.backgroundColor='yellow'">Workshops for Advocacy Groups</h2>
    Last edited by abduraooft; 08-24-2007 at 04:58 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Jul 2006
    Posts
    176
    Thanks
    14
    Thanked 1 Time in 1 Post
    Thanks for the input. I can't figure out why IE won't play nice.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    abduraooft (08-25-2007)

  • #7
    Regular Coder
    Join Date
    Jul 2006
    Posts
    176
    Thanks
    14
    Thanked 1 Time in 1 Post
    Hi Steve,

    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'.

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

    Thanks,

    Andy

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    It worked well for me in both IE&FF for the hash value #workshops for a piece of code which you originally posted like
    Code:
    <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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder
    Join Date
    Jul 2006
    Posts
    176
    Thanks
    14
    Thanked 1 Time in 1 Post
    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

  • #10
    Regular Coder
    Join Date
    Jul 2006
    Posts
    176
    Thanks
    14
    Thanked 1 Time in 1 Post
    I identified a difference between ff and IE6.

    Code:
    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

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Stick to getElementById and set the heading id with a pattern like corresponding_anchor_name_heading.

    Code:
    <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>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #12
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    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.

  • #13
    Regular Coder
    Join Date
    Jul 2006
    Posts
    176
    Thanks
    14
    Thanked 1 Time in 1 Post
    Wow!

    Thank you both for your trouble and the explanation.

    Your work is much appreciated.

    Andy

  • #14
    Regular Coder
    Join Date
    Jul 2006
    Posts
    176
    Thanks
    14
    Thanked 1 Time in 1 Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •