homepage Welcome to WebmasterWorld Guest from 54.197.94.241
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

    
Javascript problems in Firefox: displays blank page
href javascript call prompts FF to display blank page with "true"
arachnoid




msg:3729058
 7:08 pm on Aug 22, 2008 (gmt 0)

I'm perplexed by this one.

I"m using the following code to call a simple expand/collapse toggle function.

<p><a href="javascript:toggleMe('divID')">Title</a></p>
<div id="divID" style="display:none">
<p>blah blah blah</p>
</div>

It works fine in Safari (haven't tested IE yet) but in Firefox, clicking on the link prompts it to display a blank page with the word "true". The function executes OK on the main page, but can anyone tell me why FF does this? And if I can stop it? I've tried adding the statement target="_self" to the link attributes, but it makes no difference.

The following modification works just fine

<p><a href="javascript://" onclick="return toggleMe('divID')">Title</a></p>
<div id="divID" style="display:none">
<p>blah blah blah</p>
</div>

but it seems a bit redundant to use onclick in a link when href does the same thing.

[edited by: arachnoid at 7:54 pm (utc) on Aug. 22, 2008]

 

arachnoid




msg:3729108
 7:54 pm on Aug 22, 2008 (gmt 0)

Sorry.

I should have included the Javascript. It's no doubt relevant.

function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}

rocknbil




msg:3729468
 4:19 pm on Aug 23, 2008 (gmt 0)

You're misunderstanding the effect of the return value here. When you add JS to alink, the return value determines whether or not the browser will follow the link. Since the value returns true, that means go ahead and follow the link - but the value of the link is not a location, it's "javascript", and that Javascript returns a single value . . . true. Hence when it follows the link, that's what displays.

So you'd want to always return false from this function - which would allow you to use the link for non-Javascript clients so they can still access the content.

Try this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
function toggleMe(a){
if (document.getElementById(a)) {
e=document.getElementById(a);
e.style.display=(e.style.display && (e.style.display=="none"))?"block":"none";
}
return false;
}
</script>
</head>
<body>
<p><a href="link-to-non-JS-support_page.html" onclick="return toggleMe('divID')">Title</a></p>
<p id="divID" style="display:none;">blah blah blah</p>
</body>
</html>


arachnoid




msg:3729532
 6:24 pm on Aug 23, 2008 (gmt 0)

So the error is in the js file? This is a script I sourced a couple of years back (Javascript is mostly beyond me) and implemented with button links elsewhere, which worked perfectly in all the major browsers I tested. I did wonder about that return true after this happened but didn't know enough to pursue it. I see now why it's having this effect here. Thanks for explaining it so comprehensively.

Thanks also for the "link-to-non-JS-support_page.html" suggestion. I assume then that onclick takes precedence over href?

Another quirk of this script is that if I use a CSS class to style the <div> that's expanded/collapsed, then initially it's necessary to click twice on the link to get the toggle to take effect. If I use an inline style declaration, the first click initiates the function so there's no need to click again. Do you know why using CSS should require a second click?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Firefox Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved