www.webdeveloper.com
Results 1 to 3 of 3

Thread: Not working in FF :(

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    2

    Not working in FF :(

    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!!

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    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>

  3. #3
    Join Date
    Apr 2012
    Posts
    2
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles