Solved

Firefox Javascript Href issue

Posted on 2009-07-09
3
603 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

920 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now