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 to create proportional image height/width

    How to get hoverover text to be at the same line-height as the triggering text

    JavaFx how to align only one column-header in tableview?

    How to force spaces between 2 elements when position:absolute with CSS only?

    I have a video background on my bootstrap page - how can I make it “fixed”?

    How to identify element using link name in a onclick html tag?

    How to place a div on right side of cascading tables - CSS

    how to make my horizontal css dock navigation to vertical

    How can I make this section of my webpage responsive? [closed]

    How to Prefix this Input element, using CSS

    How do I absolute position a div from left to the right using media queries?

    How to make div access the remaining space without using fixed height values?

    How to remove top / bottom margin from isotope masonry

    How do you add multile vendor prefixes to one css property?

    How to make CSS Animation reverse on hover-out?

    How do I set a block of text to drop to a new line all at once?

    How to make visual changes with dynamically generated HTML code?

    How to make Bootstrap sticky footer content go full page height?

    How to set this CSS arrow transparent?

    CSS Firefox - How to deactivate the dotted border ( firefox click indicator )?

    How to center the Nav-Bar

    How does css inheritance work exactly?

    How to get drop down menu sub lists to line up vertically

    How can I get a div just inside an input at 0% and 100%?

    How to solve css double hover issue? Making an image map

    How to rotate element to left and right based on mouse movement using jQuery & CSS

    How to make shapes with CSS which have borders?

    how to align a sidebar to the right with css?

    How to color portion of text using css or jquery

    How to change asp:DropDownList extended background color ? CSS class