/    Sign up×
Community /Pin to ProfileBookmark

Mozilla + a href : javascript onclick event handler problem

Copy linkTweet thisAlerts:
Sep 05.2011

Hi,

I am designing a web site for a friend’s business (non professional – he is doing me a favour by giving me the chance to get experience) and I am having a problem with Mozilla.

Basically what I am trying to do is have a page wich calls 2 functions via the onLoad event hander in the body tag.

I have done this as follows:

in the <script> </script> tags I have two functions I want to run on body onLoad:

function 1:showimage() – this is a rotating slide show with a fade effect
function 2:showAddress 1 () – this displays the address of one brance on body onload. Branch 2 can be displayed by clicking on text surrounded by <a href>tags , code is further down as this is where I am having problems in Mozilla.

I have bundled these two function into one function to run when the page loads as follows:

function runFunctions(){
showimage();
showAddress1();
}

this is called by :

<body onLoad=”runFunctions()”>

Now this all works fine in IE, but in Mozilla, both functions are called, but then I have problems with the showAddress function

The show address functions are accessed as follows in the HTML:

<a href=”javascript:void(0)”onclick=”showAddress1()”> Main Branch </a>|
<a href=”javascript:void(0)”onclick=”showAddress2()”> Other Branch</a>

I.e. The main Branch address appears on the page straig away (I have used innerHTML to do this) and when the user clicks on “Other Branch” on the page, the second address replaces the first and vice-versa.

In IE everything works fine, but in Mozilla, when I click on the link text (i.e. Main Branch or Other Branch) nothing happens.

Can anybosy tell me why this is not working in Moz but it does in IE?

I have uploaded the page as a test and it can be viewed under the following URL:
[url]http://myweb.tiscali.co.uk/feelutinetchanel/index[/url]

many thanks in advance!
LF

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@Logic_AliSep 06.2011 — This is not a script isssue, the links themselves aren't operating.

Possibly they're being overlaid by a transparent element, or there's a markup error.

Start by validating the markup[B]: [/B][B][URL]http://validator.w3.org[/URL][/B]
Copy linkTweet thisAlerts:
@LutinFouauthorSep 06.2011 — Hi Logic Ali,

thanks for your tip - that solved it.

Looks like the links themselves were being overlaid by a transparent element.

Aftr some playing about I setthe z-index of the <div> containing the links to 100, as welle as the position to relative (see below) and that solved my problem in Firefox. Strange how it worked in IE though.

Thanks for your help.


And just in case anyone else with the same problem stubles across the site, here is how I got the links to work using css:

the css:

#branches{

position:relative;

text-align:center;

z-index:100;

}

the links themselves:

<div id="branches">

<a href="javascript:void(0)"onclick="showAddress1()">Bury Branch </a>|

<a href="javascript:void(0)"onclick="showAddress2()"> Other Branch</a>

</div>


many thanks again!

LF
×

Success!

Help @LutinFou spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...