This JQuery snip doesn't work in Firefox

Question

I don't know why but the code belows doesn't work in Firefox. It goes perfect in Chrome.

// Buttons marker
$( "#second button" ).click(function() {
    $( this ).toggleClass('selected');
    $( this ).toggleClass('unselected');
    $( this ).toggleClass('btn-warning');
    $( this ).toggleClass('btn-default');
});

// Ads switcher
$( "#second button" ).click(function() {
    var category = $( this ).attr( "name");
    $( ".ad[data-category="+category+"]" ).toggle( "slow" );
});

// Hide all categories but newmotos when load website
$( document ).ready(function() {
    $( ".ad[data-category=usedmotos" ).hide();
    $( ".ad[data-category=spares" ).hide();
    $( ".ad[data-category=accessories" ).hide();
});

Any suggestion? I thought that JQuery were multiplatform :/

EDIT: The code should hide some divs with the selected data-category and provide the power to show them with some buttons on the top. I'm using other JS codes in the same webpage and these ones are working, I think this is important, because it's not crashing all the Javascript. And Firebug dosen't say me nothing :(

EDIT 2: Adding my html. The code is the main of body only, I guess other isn't necessary.

 <div id="main" role="main">

            <!-- Section #1 / Cover -->
            <section id="first" class="story" data-speed="8" data-type="background" data-offSetY="-432">        
                <article>
                    <h2>Tienda</h2>
                </article>
            </section>

            <!-- Section #2 / Keycloud -->
            <section id="second" class="point heads">
                <article>
                    <div class="text">
                        <h5>Nube de palabras. Aquí van las palabras, selecciónalas. Y tal y eso y se marcarán, ya tu sabeh.</h5>
                        <h6>Básicamente es cómo funciona este sistema para ver tus peaso motos.</h6>
                    </div>
                    <div class="btn-group-vertical">
                        <div><span>CATEGOR&Iacute;AS:</span></div>
                         <button type="button" class="selected btn btn-warning" name="newmotos">Motos nuevas</button>
                         <button type="button" class="selected btn btn-warning" name="usedmotos">Motos de ocasión</button>
                         <button type="button" class="selected btn btn-warning" name="spares">Recambios</button>
                         <button type="button" class="selected btn btn-warning" name="accessories">Accesorios</button>
                    </div>

                </article>
            </section>

            <!-- Section #3 / Bulletin -->
            <section id="third" class="point heads">
                <h4 class="line-divider">ANUNCIOS</h4>
                <article>

                    <div class="ad" data-category="newmotos">
                        <a href="images/ads/ad01/1.jpg" rel="lightbox-ad01"><img src="images/ads/ad01/1.jpg" /></a>
                        <a href="images/ads/ad01/2.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/3.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/4.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/5.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/6.jpg" rel="lightbox-ad01"></a>

                        <div>
                            <h6>Piaggio Liberty 49cc</h6>
                            <p>Se vende motor en muy buen estado, procendete de un golpe tambien todo el despiece de esta moto y el de una 49! saludos! motores desde 250 euros! </p>
                            <fieldset>
                                <span class="label label-success">250€</span>
                                <span class="label label-default">49cc</span>
                                <span class="label label-info">5.000km</span>
                                <span class="label label-warning">Blanca</span>
                            </fieldset>
                        </div>
                    </div>

                    <div class="ad" data-category="usedmotos">
                        <img src="images/ads/aprilia.jpg" />
                        <div>
                            <h6>Aprilia RS 49cc</h6>
                            <p>Vendo moto varata de serie solo pasarle la itv y yasta 550€ negociables interesados Atiendo wasap.. Color negro  </p>
                            <fieldset>
                                <span class="label label-info">550€</span>
                                <span class="label label-info">49cc</span>
                                <span class="label label-default">15.000km</span>
                                <span class="label label-default">Negra</span>
                            </fieldset>
                        </div>
                    </div>

                    <div class="ad" data-category="spares">
                        <img src="images/ads/puente.jpg" />
                        <div>
                            <h6>Puente culata Kawasaki 450 </h6>
                            <p>Vendo puentes de los arboles de lebas de culata de KAWASAKI KXF valido para KXF 450 del 2006 al 2008 </p>
                            <fieldset>
                                <span class="label label-default">150€</span>
                                <span class="label label-default">Modelo 450</span>
                                <span class="label label-default">2006</span>
                            </fieldset>
                        </div>
                    </div>

                </article>
            </section>

EDIT 3: The web it's not loading the 'ads-controller.js' the file where the code is. The code belows is how I insert the JS files.

    </div> <!-- // End of #main -->      

    <!-- Our Javascript, starting with jQuery -->
    <script src='js/libs/jquery-1.6.1.min.js'></script>
    <script src="js/libs/slimbox/slimbox2.js"></script>
    <script src="js/ads-controller.js"></script>
    <script src="js/scroller.js"></script>
    <script src="js/parallax.js"></script>

SOLVED: It was the extension 'Ad Blocker'. Because the 'ads' in the file name. I just renamed as 'controller.js' and works perfectly. Thanks everybody!

please provide a jsfiddle.net , and what doesn't work? Does nothing work or just some things? — CRABOLO, Jan 13 '14 at 01:53
you need to provide your entire page of javascript code, more than likely unrelated code is causing an error and affecting other code downstream. Chrome does a really "good" job of ignoring coding mistakes where other browsers not so much. — erikrunia, Jan 13 '14 at 01:55
You're right, but the jsfiddle it's a bad idea. It's a hughe code working with PHP and a fiddle wouldn't help to explain it better. I updated the OC ;) thanks — sospedra, Jan 13 '14 at 01:58
How is the script included in the page? Why is installing the click handlers not part of `document.ready` handler? — Bergi, Jan 13 '14 at 02:09
I've discovered new interesenting info. The web it's not loading the file 'ads-controller.js' with this code. — sospedra, Jan 13 '14 at 02:14
I checked the name, then I create a new one because of the possibility of data corruption. Then I change all the file's permissions to 777 (I'm working local now). But nothing works — sospedra, Jan 13 '14 at 02:20

Khamidulla · Answer 1 · 2014-01-13T02:20:49.497

1

Correct you code here:

Before:

$( ".ad[data-category=usedmotos" ).hide();
$( ".ad[data-category=spares" ).hide();
$( ".ad[data-category=accessories" ).hide();

After:

$( ".ad[data-category='usedmotos']" ).hide();
$( ".ad[data-category='spares']" ).hide();
$( ".ad[data-category='accessories']" ).hide();

Also enclose your code into DOM ready as following:

// Hide all categories but newmotos when load website
$( document ).ready(function() {
    $( ".ad[data-category='usedmotos']" ).hide();
    $( ".ad[data-category='spares']" ).hide();
    $( ".ad[data-category='accessories']" ).hide();

    // Buttons marker
    $( "#second button" ).click(function() {
        $( this ).toggleClass('selected');
        $( this ).toggleClass('unselected');
        $( this ).toggleClass('btn-warning');
        $( this ).toggleClass('btn-default');
    });

    // Ads switcher
    $( "#second button" ).click(function() {
        var category = $( this ).attr( "name");
        $( ".ad[data-category="+category+"]" ).toggle( "slow" );
    });

});

edited Jan 13 '14 at 02:20

answered Jan 13 '14 at 01:55

Khamidulla

2,927
6
35
59

Put your HTML code here. With out it, it will be a lot of guess work. – Khamidulla Jan 13 '14 at 02:02
I've just added the html – sospedra Jan 13 '14 at 02:08
@Phoenix I was just about to make one exactly like yours. Mine works on Firefox 26. I think something else is messing things up for Bursos. – knrz Jan 13 '14 at 02:15
@Phoenix still dosen't working :( I'm pretty sure that not loading the file is the mistake, and I don't guess If the contents of it affects to this. The web dosen't load 'ads-controller.js' and I don't know why – sospedra Jan 13 '14 at 02:27
Try to use `debugger;` in your code and debug in your envronment – Khamidulla Jan 13 '14 at 02:31
@Phoenix Men! I got it! I don't know why, but the extension 'Ad Blocker' was stopping my script, I guess cause the keyword 'ads' in 'ads-controller.js'!! – sospedra Jan 13 '14 at 03:33

knrz · Answer 2 · 2014-01-13T02:15:21.170

To make your code more DRY, chain and use CSS selectors:

// Buttons marker
$( "#second button" ).click(function() {
    $( this )
         .toggleClass('selected')
         .toggleClass('unselected')
         .toggleClass('btn-warning')
         .toggleClass('btn-defualt');
});

// Ads switcher
$( "#second button" ).click(function() {
    var category = $( this ).attr( "name");
    $( ".ad[data-category="+category+"]" ).toggle( "slow" );
});

// Hide all categories but newmotos when load website
$( document ).ready(function() {
    $( ".ad[data-category='usedmotos'], .ad[data-category='spares'], .ad[data-category='accessories']" ).hide();
});

Here's a fiddle.

score 0 · Accepted Answer · answered Jul 19 '15 at 23:09

0

It was the AdBlock extension catching the ad term.

answered Jul 19 '15 at 23:09

sospedra

14,238
3
21
32

This JQuery snip doesn't work in Firefox

3 Answers3