ansaurus

Question

JQuery not working in Firefox, does in Safari

Answer 1

+2 A:

The problem you are having is because Firefox isn't animating the "margin-left" property on your objects. If you change them to left it works as expected.

Re-factoring tip:

You can get rid of all your bind('mouse... calls with this one line:

$("#print, #radio, #tv, #comedy, #about").hover(navHover, navStby);

Ideally you should do that part in pure CSS, with this code as a fallback for IE6 only. (:hover on a div works in IE7+, Firefox, and Safari)

Further Refactoring:

Take it or leave it, but here is a refactored version that uses all the same CSS as your original. Your site is coming along nicely. I really like the tab and title thing you have going!

Refactored javascript.js file: https://gist.github.com/471ab8a968b1394a359e

Doug Neiner 2009-12-07 02:17:47

Halfway there! Okay so I changed all "margin-left" to "left". Now the tabs on the left side are animated, but the title (#titleContainer) still isn't sliding in from the right. Any ideas?

Travmatron86 2009-12-07 02:25:06

(from the left, sorry)

Travmatron86 2009-12-07 02:29:40

Yes, you still have the negative `margin-left` set in your stylesheet. Change that from `margin-left: -450px` to `left: -450px` and you will be golden.

Doug Neiner 2009-12-07 02:44:26

Golden indeed! Thank you sir, you have been of tremendous help. I'll take a look at your tip as well, see if I can get that working. Thanks again!

Travmatron86 2009-12-07 02:51:50

Answer 2

+2 A:

You are repeating way way to much code.

First thing first add class="nav-button" to all your nav buttons.

Rather then repeating code multiple times to do almost the same thing create function that are smart enough to know what to do in all states.

$(document).ready(initialize);
var currentSelection = null;
var previousSelection = null;
function initialize(){
    $('.nav-button').hover(navHover, navStby)
    .bind("click", selectArea);
}
function navHover(){
    $(this).addClass('hover');
}
function navStby(){
    $(this).removeClass('hover');
}
function selectArea(){
    if(!currentSelection){
     $(this).animate({"left":"-40px"}, 500, loadArea);
    } else {
     $("#titleContainer").animate({"left":"-450"}, 1000);
     currentSelection.animate({"left":"0px"}, 500);
     $(this).animate({"left":"-40px"}, 500, loadArea);
    }
}
function loadArea(){
    var class = this.id;
    currentSelection = $(this);
    $("#titleContainer").removeClass('print radio tv comedy about')
    .addClass(class)
    .animate({'left':'0'}, 1000);
}

This code makes it so that you use css for the things that css does best, styling. Make this your css

html, body
{
    width:100%;
    height:100%;
    background-color:#372D23;
    margin:0;
    padding:0;
    position:absolute;
    font-family:"Lucida Grande";
    overflow:hidden;
}

#titleContainer{
    background-repeat: no-repeat;
}


#logo
{
    background:url("img/logo.png");
    position:relative;
    margin-top:0;
    float:right;
    width:440px;
    height:240px;
}
#comedy
{
    height:124px;
    width:45px;
    background:url("img/comedyBtn.png");
    position:relative;
    left:0;
    margin-top:-5px;
    overflow:hidden;
    cursor:pointer;

}

#tv
{
    height:124px;
    width:45px;
    background:url("img/tvBtn.png");
    position:relative;
    left:0;
    margin-top:-5px;
    overflow:hidden;
    cursor:pointer;

}

#about
{
    height:124px;
    width:45px;
    background:url("img/aboutBtn.png");
    position:relative;
    left:0;
    margin-top:-5px;
    overflow:hidden;
    cursor:pointer;

}
#print
{
    height:124px;
    width:45px;
    background:url("img/printBtn.png");
    position:relative;
    left:0;
    margin-top:0px;
    overflow:hidden;
    cursor:pointer;

}
#radio
{
    height:124px;
    width:45px;
    background:url("img/radioBtn.png");
    position:relative;
    left:0;
    margin-top:-5px;
    overflow:hidden;
    cursor:pointer;

}

#titleStrip
{
    background:url("img/titleBackground.png");
    width:100%;
    height:80px;
    left:0px;
}

#titleContainer
{
    width:450px;
    height:80px;
    position:absolute;
    left:-450px;
    margin-top:0px;
}

.nav-button.hover{
    background-position: 0px 124px !important;
}
.print{
    background-image: url('img/printTitle.png');
}
.radio{
    background-image: url('img/radioTitle.png');
}
.tv{
    background-image: url('img/tvTitle.png');
}
.comedy{
    background-image: url('img/comedyTitle.png');
}
.about{
    background-image: url('img/aboutTitle.png');
}

PetersenDidIt 2009-12-07 02:18:05

Tried this, the result is still the same, though with less code. Still having [lack of] animation issues. Also, the hover states are now broken. I tried changing all the print, radio, tv, comedy and about classes back to ids (assuming that's what you meant), but no dice. Thoughts?

Travmatron86 2009-12-07 02:40:47

Just updated my answer with better working code

PetersenDidIt 2009-12-07 02:45:52

Nice example code! I would do one more step and change `bind('mouseover')` and `bind('mouseout')` to `.hover(navHover, navStby)`

Doug Neiner 2009-12-07 02:49:42

@dcneiner good point, updated my answer

PetersenDidIt 2009-12-07 03:13:12

ansaurus

tags:

views:

answers:

JQuery not working in Firefox, does in Safari

related questions