Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Firefox Javascript Href issue

Posted on 2009-07-09
3
605 Views
Last Modified: 2012-05-07
The attached code works fine in all browsers besides Firefox 3.

The idea behind the code is that when a user hovers over the any links in the cateogry_id div, then instead of seeing the full link say ( http://www.google.com/search?q=question1  ) for question 1, they would see , http://www.google.com.

Can anyone noticed why this does not work in FF? I have tested in IE/Chrome/Safari and they all work correctly.

Any assistance would be greatly appreciated.
<script>
	function attach(o, evt, fnc)
	{ 
		 var xMoz= (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined');
		 var xSaf= navigator.userAgent.toLowerCase().indexOf("safari") != -1;
		 var fIE = !xMoz && !xSaf;
		 if (!fIE)
		 { if (evt.substr(0,2).toLowerCase() == "on") evt = evt.substr(2);
		  o.addEventListener(evt, fnc, false); // Hook the actual event  
		 }
		 else o.attachEvent(evt, fnc);
	}
	function hidehref(ul) {
	   	var li_arr = ul.getElementsByTagName('li'); 
	   	var a_arr = ul.getElementsByTagName('a'); 
	       
	       function hide(e) {  
			var el = (window.event) ? event.srcElement : e.target; 
	        while (el.tagName.toLowerCase() != 'a') { el = el.parentNode;}
	        el.href = "http://www.google.com"; 
	       	return false;
	       }
	       
	       function restore(e) {
	           var el = (window.event) ? event.srcElement : e.target; while (el.tagName.toLowerCase() != 'a') { el = el.parentNode; }
	           var input = el.parentNode.getElementsByTagName('input')[0]; el.href = input.getAttribute('href');
	   	}
	   	
	    for (var i = 0; i < li_arr.length; i++) {
	        if (a_arr[i]) {
	            var input = document.createElement('input');
	            input.type = 'hidden';
	            input.setAttribute('href', a_arr[i].href);
	            li_arr[i].appendChild(input);
	            attach(a_arr[i], "onmouseover", hide);
	            attach(a_arr[i], "onmouseout", restore);
	            attach(a_arr[i], "onclick", restore);
	            attach(a_arr[i], "oncontextmenu", restore);
	        } 
	    }
	}
</script>
 
<div id="category_id">
	<div class="headerimage"><div class="headertitle">Quiz</div></div>
	<ul>
		<li class="lvl1"><a href="http://www.google.com/search?q=question1" >Question 1</a></li>
		<li class="lvl1"><a href="http://www.google.com/search?q=question2" >Question 2</a></li>
		<li class="lvl1"><a href="http://www.google.com/search?q=question3" >Question 3</a></li>		
	</ul>
</div>
 
<script type="text/javascript">	
	hidehref(document.getElementById('category_id').getElementsByTagName('ul')[0]); 
</script>

Open in new window

0
Comment
Question by:sydron
3 Comments
 
LVL 2

Expert Comment

by:JohnBobH
ID: 24819507
hey,

try something like the code below.
I think you can't do document.getelementbyid from a function call in firefox?

i think this should work.

Let me know.

JohnBob



<script>
        function attach(o, evt, fnc)
        { 
                 var xMoz= (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined');
                 var xSaf= navigator.userAgent.toLowerCase().indexOf("safari") != -1;
                 var fIE = !xMoz && !xSaf;
                 if (!fIE)
                 { if (evt.substr(0,2).toLowerCase() == "on") evt = evt.substr(2);
                  o.addEventListener(evt, fnc, false); // Hook the actual event  
                 }
                 else o.attachEvent(evt, fnc);
        }
        function hidehref(element) {
                var ul = document.getElementById(element).getElementsByTagName('ul')[0];
                var li_arr = ul.getElementsByTagName('li'); 
                var a_arr = ul.getElementsByTagName('a'); 
               
               function hide(e) {  
                        var el = (window.event) ? event.srcElement : e.target; 
                while (el.tagName.toLowerCase() != 'a') { el = el.parentNode;}
                el.href = "http://www.google.com"; 
                return false;
               }
               
               function restore(e) {
                   var el = (window.event) ? event.srcElement : e.target; while (el.tagName.toLowerCase() != 'a') { el = el.parentNode; }
                   var input = el.parentNode.getElementsByTagName('input')[0]; el.href = input.getAttribute('href');
                }
                
            for (var i = 0; i < li_arr.length; i++) {
                if (a_arr[i]) {
                    var input = document.createElement('input');
                    input.type = 'hidden';
                    input.setAttribute('href', a_arr[i].href);
                    li_arr[i].appendChild(input);
                    attach(a_arr[i], "onmouseover", hide);
                    attach(a_arr[i], "onmouseout", restore);
                    attach(a_arr[i], "onclick", restore);
                    attach(a_arr[i], "oncontextmenu", restore);
                } 
            }
        }
</script>
 
<div id="category_id">
        <div class="headerimage"><div class="headertitle">Quiz</div></div>
        <ul>
                <li class="lvl1"><a href="http://www.google.com/search?q=question1" >Question 1</a></li>
                <li class="lvl1"><a href="http://www.google.com/search?q=question2" >Question 2</a></li>
                <li class="lvl1"><a href="http://www.google.com/search?q=question3" >Question 3</a></li>                
        </ul>
</div>
 
<script type="text/javascript"> 
        hidehref('category_id'); 
</script>

Open in new window

0
 

Author Comment

by:sydron
ID: 24819577
Hi JohnBobH,

That did not work. It still results in the same issue only in FF.

Any other ideas?

Cheers.
0
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 300 total points
ID: 24822429
Problem seems to be like that Firefox fetch the url to be displayed in status bar before you alter it at onmouseover event.

I found a similar solution what work on FF on http://roshanbh.com.np/2008/08/different-status-bar-text-hyperlink-mouseover.html, But in there we can't have the actual url on href which is not seo friendly.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question