Jquery code doesn't work well on firefox/ie

Question

I have the following code (on jsfiddle here)

$(function(){

    var $container = $('#gallery');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    var $optionSets = $('ul.nav'),
        $optionLinks = $optionSets.find('a');

    $optionLinks.click(function () {
        var $this = $(this);
        if ($this.hasClass('selected')) {
            return false;
        }
        var $optionSet = $this.parents('ul.nav');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
    });


    // HASH HISTORY WITH JQUERY BBQ

    $('ul.nav a').click(function () {
        // get href attr, remove leading #
        var href = $(this).attr('href').replace(/^#/, ''),
            // convert href into object
            // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
            option = $.deparam(href, true);
        // set hash, triggers hashchange on window
        $.bbq.pushState(option);
        return false;
    });

    //just a function to quickly add and remove .selected
    function changeSelectedLink($elem) {


        $elem.addClass('selected');
    }

    $(window).bind('hashchange', function (event) {
        //checks if there is a hash in the url and puts hashes in hashOptions
                            $(".selected").removeClass("selected");

        var hashOptions = window.location.hash ? $.deparam.fragment(window.location.hash, true) : {}, options = $.extend({}, hashOptions);
        $('#gallery').isotope(options);
        var hrefObj, hrefValue, $selectedLink;
        //go over each hashOption and convert it to a variable 

        for (var key in options) {
            hrefObj = {};
            hrefObj[key] = options[key];
            hrefValue = $.param(hrefObj);
            $selectedLink = $('ul.nav').find('a[href="#' + hrefValue + '"]');
            changeSelectedLink($selectedLink);
        }
    }).trigger('hashchange'); //this continues the hashchange event
});

This code works well on chrome. But in firefox 22 and ie 10 it behaves strange

When clicking on colors it all works. When going back, the code should behave in such a way that .selected is cleared and only added to the correct node. The result is that the .selected is cleared in the DOM (if I inspect the element) but on screen it doesn't. The class is removed once I click anywhere on the screen.

Furthermore, if I debug with firebug,etc this doesn't happen!

Am I missing anything in the code?

I can't understand which part is not working, on clicking the color names corresponding boxes appear(nice transition effect btw), the rest vanish, Is this the desired effect? working fine in mine firefox 22.0! — , Jul 30 '13 at 06:50
when clicking the colors it works fine. The problem occurs when clicking the back button. You should go back to the previous color. But 2 colors are marked with `.selected`. — Nick Ginanto, Jul 30 '13 at 06:52
I am sorry if I am missing the _obvious_ in that fiddle, but I don't see any _back button_ — , Jul 30 '13 at 06:58

score 1 · Accepted Answer · 2013-07-30T07:20:17.373

1

remove a:focus in css or add blur to $('.selected').removeClass('selected').blur(); in hashchange

http://jsfiddle.net/Q6SbU/7/

there is only one .selected

edited Jul 30 '13 at 07:20

answered Jul 30 '13 at 07:11

Jquery code doesn't work well on firefox/ie

1 Answers1