How do I make a jQuery animation work across major browsers?


Tags: javascript,jquery,html,css,internet-explorer

Problem :

I have a bit of code that works in all major browsers save internet explorer and a animation effect that works only in Firefox. I am not real sure on how to even begin fixing this problem as it is fairly basic code. I will post the code snippets, first the html in the original rendering and then the jquery code used to modify the html dynamically.

The html on load starts with visibility hidden.

<h3 class="infobox" name="infobox"><p>text</p><p>text</p></h3>

These next 2 pieces of jquery from hover (enter and leave) for mouse related behavior.

Enter:

$(".infobox").css("visibility", "initial");
$(".infobox").html("<p>Location: " + 
        "<span style=\"color: " + (possiblemove[x] ? "green" : "red") +     "\">" + indexcoords[x] + "</span></p>" + 
        "<p>Number of possible moves: " + possiblemoves + "&nbsp;&nbsp;&nbsp;Move count: " + nummoves + "</p>");

Leave:

$(".infobox").html("<p>text</p><p>text</p>");
$(".infobox").css("visibility", "hidden");

Animate:

for (var x = 0; x < 8; x++)
    if (x % 2 == 0)
        $(square).animate({backgroundColor: color}, 50);
    else
        $(square).animate({backgroundColor: 'red'}, 50);

$(square).animate({backgroundColor: color}, 50);

The web page with the questionable behavior:

http://freethecube.com/kt/

As you can see the highlighting effect of the board bits works in all major browsers. The info box at the top works in all but internet explorer. And the animate flashing for bad moves only works in firefox (have not tested this specifically in safari).

The general thing in common between these elements are the css modifications explicitly. The full css and jquery being used can be easily viewed by viewing the source of the page and clicking on the css file at the top and the js file at the bottom.

So what do I need to do to get these seemingly small css issues to work across all major browsers?

p.s. I wrote this specifically simple in html for 2 reasons:

It is trust worthy code that anyone can see. It is actually a game and nothing else.
And easy portability into my wordpress site.

Jquery files being used:

jquery.js

jquery-animate.js

If there is a newer version of the animate, please let me know.

Thx


Addendum

The problems that I was having above did not stem from the CSS manipulation as I originally thought. It was indeed the CSS hook I was using. It was an older hack to fix the various versions of backgroundcolor there were. Such as: var bg = elem.currentStyle["backgroundColor"]; and var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color");. My whole issue was simply the difference in different browsers handly of RGB and RGBA color formats. My function would have been fine before RGBA, but not after.

The full css hook function I was using:

$.cssHooks.backgroundColor = 
{
    get: function(elem) 
    {
        if (elem.currentStyle)
            var bg = elem.currentStyle["backgroundColor"];        
        else if (window.getComputedStyle)
            var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color");

        if (bg.search("rgb") === -1)
            return bg;
        else 
        {
            bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

            function hex(x) 
            {
                return ("0" + parseInt(x).toString(16)).slice(-2);
            }
            return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
        }
    }
};

The new and improved version: May still not be perfect but it is a lot closer.

$.cssHooks.backgroundColor = 
{
    get: function(elem) 
    {
        if (elem.currentStyle)
            var bg = elem.currentStyle["backgroundColor"];        
        else if (window.getComputedStyle)
            var bg = document.defaultView.getComputedStyle(elem, null).getPropertyValue("background-color");

        if (bg.search("rgb") === -1)
            return bg;
        else 
        {
            bg = bg.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);

            return (bg && bg.length === 4) ? "#" +
                ("0" + parseInt(bg[1],10).toString(16)).slice(-2) +
                ("0" + parseInt(bg[2],10).toString(16)).slice(-2) +
                ("0" + parseInt(bg[3],10).toString(16)).slice(-2) : '';
        }
    }
};

Please up vote Strelok's answer because he hit the nail on the head. :)



Solution :

A couple of things:

  1. include jQuery before bootstrap
  2. IE (any version) does not support initial value for the visibility css property. Just use visible.
  3. At least in Chrome you have a problem in line 209 of game.js where the regex doesn't match anything and bg is null, so you need to handle this case and return the color or handle the case properly. It happens when the property value is rgba(0, 0, 0, 0) you need to handle rgba.

    CSS Howto..

    how change all fonts of a telerik control by one shot

    How to override the color defined in css?

    How to overlay shadow with bootstrap?

    How to add a mobile optimised external CSS to a Shopify site

    How can I make html table columns (only the ones with text) evenly spaced

    How to use different kind of Google Font types?

    Css how to create navigation bar

    Symfony2: How to link CSS to HTML part?

    How to adjust the width of a DIV per height using CSS

    How to achieve CSS transitions with delay timers but without any easing function?

    How do I hide the div if the Var is empty?

    How to target all elements, except last one with css?

    jQuery: How to animate height change without known heights?

    How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text

    How to copy external CSS and JavaScript in XSLT

    How do I properly use display:block on this menu?

    How can I get this css to display correctly in Chrome?

    How to CSS Display:table grow right

    how to position divs within another div

    how to add css padding for button such that it is consistent with column width?

    Drupal 7.x: how to apply styles to RSS feed in node?

    how to use css align control one row

    How to make specific checkbox items bold (not all) via CSS?

    How do I make the child-div to have a fixed position?

    CSS height as a variable and how to calculate 60% of total screen size

    SMACSS and BEM: How to position Module inside of a Module?

    How to preload style image to use it when server is down?

    How to create fixed sidebar with Skeleton CSS?

    How to add/remove class to parent div according to input radio selection using jQuery?

    How to select two different elements with an XPath query