Not working in FF :(

**AlwaysCk** · 04-30-2012 11:45 AM

Hey guys.
I'm a noob in Javascript so please forgive me if its a stupid fault.
My Script works fine in GoogleChrome but not in Firefox.
And I can't figure out what the problem is.
What i want:
When i'm clicking on "1" "2" "3" or "4" I want the element changing there classes from "notCurrent" to "current".
Where is the fault?

Javscript:

HTML Code:

function clicked(dot)
{
  dot.className='current';
}

html:

HTML Code:

<div id = "slideshow_controls">
<a href="#" id="dot_01" class="notCurrent" onClick = "javascript: image_01(); clicked(dot_01)"><span>1</span></a> 
<a href="#" id="dot_02" class="notCurrent" onClick = "javascript: image_02(); clicked(dot_02)"><span>2</span></a> 
<a href="#" id="dot_03" class="notCurrent" onClick = "javascript: image_03(); clicked(dot_03)"><span>3</span></a> 
<a href="#" id="dot_04" class="notCurrent" onClick = "javascript: image_04(); clicked(dot_04)" ><span>4</span></a> 
</div>

Thanks in advance!!

**Padonak** · 04-30-2012 06:05 PM

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>...</title>
<head>
<style type="text/css">
.notCurrent{color:#000; text-decoration:none;}
.current{color:Crimson; text-decoration:underline;}
</style>
<script type="text/javascript">
function clicked(obj){obj.className='current';}
</script>
</head>
<body>
<center>
<div id="slideshow_controls">
<a href="#" id="dot_01" class="notCurrent" onclick="clicked(this)"><span>1</span></a> 
<a href="#" id="dot_02" class="notCurrent" onclick="clicked(this)"><span>2</span></a> 
<a href="#" id="dot_03" class="notCurrent" onclick="clicked(this)"><span>3</span></a> 
<a href="#" id="dot_04" class="notCurrent" onclick="clicked(this)" ><span>4</span></a> 
</div>
</center>
</body>
</html>

**AlwaysCk** · 05-01-2012 10:53 AM

Padonak thank you a lot for your answer!

But i forget to add something to my Javascript and this will change the situation i think:

Javascript:

HTML Code:

function clicked(dot)
{
  dot.className='current';

    if(dot==dot_01)
    {
      dot_02.className='notCurrent';
      dot_03.className='notCurrent';
      dot_04.className='notCurrent';
    }

    if(dot==dot_02)
    {
      dot_01.className='notCurrent';
      dot_03.className='notCurrent';
      dot_04.className='notCurrent';
    }

    if(dot==dot_03)
    {
      dot_01.className='notCurrent';
      dot_02.className='notCurrent';
      dot_04.className='notCurrent';
    }

    if(dot==dot_04)
    {
      dot_01.className='notCurrent';
      dot_02.className='notCurrent';
      dot_03.className='notCurrent';
    }
}

what do you think???

html:

HTML Code:

<div id = "slideshow_controls">
<a href="#" id="dot_01" class="notCurrent" onClick = "javascript: image_01(); clicked(dot_01)"><span>1</span></a> 
<a href="#" id="dot_02" class="notCurrent" onClick = "javascript: image_02(); clicked(dot_02)"><span>2</span></a> 
<a href="#" id="dot_03" class="notCurrent" onClick = "javascript: image_03(); clicked(dot_03)"><span>3</span></a> 
<a href="#" id="dot_04" class="notCurrent" onClick = "javascript: image_04(); clicked(dot_04)" ><span>4</span></a> 
</div>

css

HTML Code:

.current
{
  display:block;
  width: 20px;
  height: 20px;
  background:url(../_img/dot_selected.png) no-repeat 0 0;
}

.notCurrent
{
  display:block;
  width: 20px;
  height: 20px;
  background:url(../_img/dot_01.png) no-repeat 0 0;
}

.current span
{
  position: absolute;
  top: -999em;
}

.notCurrent span
{
  position: absolute;
  top: -999em;
}

Thread: Not working in FF :(

Thread Tools

Display

Not working in FF :(

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions