views:

268

answers:

3

I have this piece of code that reveals a couple of divs when it is clicked and then they are hidden once another link is clicked. I'm trying to get this to show in Firefox and it may not be a problem in the js but all help is greatly appreciated.

<script type="text/javascript">
    $(document).ready(function(){
            $('.fadein').click(function(){
                    // Make the id overview show
                    $('#header-contact').hide('slow'); 
                    $('#header-portfolio').show('slow');
                    $('#content-portfolio').show('slow');
                    // override default a behavior
                    return false;
            });
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){
            $('.fadein2').click(function(){
                    // Make the id overview show
                    $('#header-portfolio').hide('slow');                       
                    $('#header-contact').show('slow');
                    $('#content-portfolio').hide('slow');
                    // override default a behavior
                    return false;
            });
    });

</script>
<script type="text/javascript">
    $(document).ready(function(){
            $('.fadein3').click(function(){
                    // Make the id overview show
                    $('#header-portfolio').hide('slow');                       
                    $('#header-contact').hide('slow');
                    $('#content-portfolio').hide('slow');
                    // override default a behavior
                    return false;
            });
    });

+2  A: 

Try passing the event to each of the click handlers and before you return false, call preventDefault() on the passed-in event object.

example:

$(document).ready(function(){
        $('.fadeinX').click(function(e){
                // Make the id overview show
                $('#header-portfolio').hide('slow');                       
                $('#header-contact').hide('slow');
                $('#content-portfolio').hide('slow');
                // override default a behavior
                e.preventDefault();
                return false;
        });
});
Jacob Relkin
+1  A: 

Use Web Developer by Chris Pederic to clear the cache. I had exactly the same problem with Firefox and using the web developer to clear the cache solved it. Simple but you never know, and I had been pulling my hair out.

Gazzer
I downloaded the web developer but then I checked the problem on 2 other computers. All of them are running the script fine in both Chrome and IE (not sure about safari) but not in Firefox. Thanks for your help though.
Finn
+1  A: 

You actually don't need to return false at all if you preventDefault();

 $(document).ready(function(){
   $('.fadein').click(function(e){
     // Make the id overview show
     $('#header-portfolio').hide('slow');                       
     $('#header-contact').hide('slow');
     $('#content-portfolio').hide('slow');
     // override default a behavior
     e.preventDefault();
   });
 });

Also move your JS into it's own file and only have one $(document).ready(function() {...}) function and you can put all three of your events in there.

Joseph Silvashy