Question

I’m building a site using Jquery for some basic animation. The javascript is here:

$(document).ready(initialize);
var currentSelection = null;
var previousSelection = null;
function initialize()
{

$("#print").bind("mouseover", navHover);
$("#print").bind("mouseout", navStby);
$("#print").bind("click", selectPrint);

$("#radio").bind("mouseover", navHover);
$("#radio").bind("mouseout", navStby);
$("#radio").bind("click", selectRadio);

$("#tv").bind("mouseover", navHover);
$("#tv").bind("mouseout", navStby);
$("#tv").bind("click", selectTV);

$("#comedy").bind("mouseover", navHover);
$("#comedy").bind("mouseout", navStby);
$("#comedy").bind("click", selectComedy);

$("#about").bind("mouseover", navHover);
$("#about").bind("mouseout", navStby);
$("#about").bind("click", selectAbout);
}

function navHover(){
    $(this).css({"background-position":"0px 124px"});
}

function navStby(){
    $(this).css({"background-position":"0px 0px"});
}

function selectPrint()
{
    if(currentSelection==null)
    {
        $("#print").animate({"margin-left":"-40px"}, 500, loadPrint);
}
else if(currentSelection!=null)
{
    $("#titleContainer").animate({"margin-left":"-450"}, 1000, loadPrint);
    currentSelection.animate({"margin-left":"0px"}, 500);
    $("#print").animate({"margin-left":"-40px"}, 500);
}

}

function loadPrint()
{
    currentSelection = $("#print");
    $("#titleContainer").css({"background":"url('img/printTitle.png')",         "background-repeat":"no-repeat"});
    $("#titleContainer").animate({"margin-left":"0px"}, 1000);
}



function selectRadio()
{
    if(currentSelection==null)
    {
        $("#radio").animate({"margin-left":"-40px"}, 500, loadRadio);
    }
    else if(currentSelection!=null)
    {
            $("#titleContainer").animate({"margin-left":"-450"}, 1000, loadRadio);
        currentSelection.animate({"margin-left":"0px"}, 500);
        $("#radio").animate({"margin-left":"-40px"}, 500);
    }

}

function loadRadio()
{
    currentSelection = $("#radio");
    $("#titleContainer").css({"background":"url('img/radioTitle.png')", "background-repeat":"no-repeat"});
    $("#titleContainer").animate({"margin-left":"0px"}, 1000);
}



function selectTV()
{
    if(currentSelection==null)
    {
        $("#tv").animate({"margin-left":"-40px"}, 500, loadTV);
    }
    else if(currentSelection!=null)
    {
        $("#titleContainer").animate({"margin-left":"-450"}, 1000, loadTV);
        currentSelection.animate({"margin-left":"0px"}, 500);
        $("#tv").animate({"margin-left":"-40px"}, 500);
    }

}

function loadTV()
{
    currentSelection = $("#tv");
    $("#titleContainer").css({"background":"url('img/tvTitle.png')", "background-repeat":"no-repeat"});
    $("#titleContainer").animate({"margin-left":"0px"}, 1000);
}


function selectComedy()
{
    if(currentSelection==null)
    {
        $("#comedy").animate({"margin-left":"-40px"}, 500, loadComedy);
    }
    else if(currentSelection!=null)
    {
        $("#titleContainer").animate({"margin-left":"-450"}, 1000, loadComedy);
        currentSelection.animate({"margin-left":"0px"}, 500);
        $("#comedy").animate({"margin-left":"-40px"}, 500);
    }

}

function loadComedy()
{
    currentSelection = $("#comedy");
    $("#titleContainer").css({"background":"url('img/comedyTitle.png')", "background-repeat":"no-repeat"});
    $("#titleContainer").animate({"margin-left":"0px"}, 1000);
}

function selectAbout()
{
    if(currentSelection==null)
    {
        $("#about").animate({"margin-left":"-40px"}, 500, loadAbout);
    }
    else if(currentSelection!=null)
    {
        $("#titleContainer").animate({"margin-left":"-450"}, 1000, loadAbout);
        currentSelection.animate({"margin-left":"0px"}, 500);
        $("#about").animate({"margin-left":"-40px"}, 500);
    }

}

function loadAbout()
{
    currentSelection = $("#about");
    $("#titleContainer").css({"background":"url('img/aboutTitle.png')", "background-repeat":"no-repeat"});
    $("#titleContainer").animate({"margin-left":"0px"}, 1000);
}

I know that’s a lot. Here’s the html too:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <script type="text/javascript" src="jquery-1.3.2.js"></script>
 <script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="logo">
</div>
<div id="titleStrip">
    <div id="titleContainer">
    </div>
</div>
<div id="print">
</div>
<div id="radio">
</div>
<div id="tv">
</div>
<div id="comedy">
</div>
<div id="about">
</div>

</body>
</html>

And finally, the CSS:

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

#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;
    margin-left:0;
    margin-top:-5px;
    overflow:hidden;
    cursor:pointer;

}

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

}

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

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

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

}

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

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

This works fine both locally and on the server in Safari 4, but neither locally or on server for Firefox 3.5.5. Actually let me be more specific. The Hover over sprites for #print, #radio, #tv, #comedy and #about work fine in Firefox, what doesn’t work is the click event which is supposed to initiate the animation. If any more explanation is necessary, I’d be glad to elaborate.

I’ve spent about an hour online looking for a solution and haven’t found one. Any ideas?

Thanks in advance guys!

Answer 1

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