CODEWITHSUNDEEP
jquerycsscross-browsershow-hide
Romainpetit
Romainpetit

Reputation: 906

Simple jQuery working on Chrome, not on Firefox & other browsers

I wrote those simple lines in order to show an .elemproduct div only if it has a background-image set.

I developed under Chrome and just realised that this code is only working under Webkit browsers. When failing, it shows up every .elemproduct as if the if statement was not recognized.

function hideBox() {
  var $bg = $('.elemproduct');

  $bg.each(function() { 
     if ($(this).css("background-image") === "url(####)") {   
        return true; 
     }
     else {
        $(this).show();
     }
  });

  return true;
};

Any ideas ?

Upvotes: 1

Views: 200

Answers (1)

David Thomas
David Thomas

Reputation: 253318

I'd suggest that it might be because the background-image is never going to be exactly equal (===) to the path of the (presumably) image directory http://www.infiniscale.com/beta/.

If you want to simply hide those .elemproduct elements without a background-image it seems a little easier to use:

function hideBox() {
    var $eP = $('.elemproduct');
    $eP.each(

    function() {
        if (!$(this).css('background-image') || $(this).css('background-image') == 'none') {
            $(this).hide();
        }
    });
}

hideBox();

JS Fiddle demo.

Edited to compensate with the problem that an empty url() in the background (or background-image) property is filled with the URL of the current page. This makes for quite a bulky if statement, but it does at least work reliably (so far as I can currently tell), which is an improvement on the above. Latest iteration:

function hideBox() {
    var href = document.location;
    var $eP = $('.elemproduct');
    $eP.each(

        function() {
        var imgString = $(this).css('background-image');
        var srcString = imgString.replace('url(','').replace(')','');
            if (!imgString || imgString == 'none' || srcString == href) {
                $(this).hide();
            }
        });
}
hideBox();

JS Fiddle demo.

Edited and amended the above, to remove the unnecessary variable (srcString) and its multiple calls to .replcace():

function hideBox() {
    var href = document.location;
    var $eP = $('.elemproduct');
    $eP.each(

        function() {
        var imgString = $(this).css('background-image');
            if (!imgString || imgString == 'none' || imgString.indexOf(href) > -1) {
                $(this).hide();
            }
        });
}
hideBox();

JS Fiddle demo.

Edited in response to comment from OP:

I'm trying to get it working but under chrome everything is shown, IE everything is hidden. Even if I see that your code works under jsfiddle ... I'm not understanding everything, i.e imgString.indexOf(href) > -1.

The if tests for three conditions:

  1. !imgString, if there's no string returned from the background-image property of the .css() method.
  2. imgString == 'none', because jQuery (sometimes, or possibly always) returns 'none' if there is no defined background-image.

  3. imgString.indexOf(href) > -1. This looks at the imgString variable to see if it contains the string contained by the variable href. If the string is found it returns the position at which it was found; if it was not found it returns -1.

    var string = "abcdef";
alert(string.indexOf('a')); // alerts: 0

JS Fiddle demo.

    alert(string.indexOf('bc')); // alerts: 1

JS Fiddle demo.

    alert(string.indexOf('ef')); // alerts: 4

JS Fiddle demo.

    alert(string.indexOf('x')); // alerts: -1

JS Fiddle demo.

This is to check that the empty url() in CSS isn't simply being filled automatically by the browser.

Edited after being pointed at the URL for the page and finding that the use of PHP and GET made things a tad more awkward than I'd imagined.

Using the following in the console (certainly in Chromium) worked:

$('.elemproduct').each(
    function() {
        if ($(this).css('background-image') == 'url(' + document.location.toString().substring(0, document.location.href.toString().indexOf('index')) + ')') {
            $(this).hide();
        }
    });

The above, working in JS Fiddle and implemented into the hideBox() function:

// in real life use:
// var urlString = document.location.href;
var urlString = 'http://www.infiniscale.com/beta/index.php?id=48';


function hideBox() {
    var href = document.location;
    var $eP = $('.elemproduct');
    $eP.each(
        function(){
            if ($(this).css('background-image') == 'url(' + urlString.substring(0,urlString.indexOf('index')) + ')'){
                $(this).hide();
            }
        });
}
hideBox();

A demonstration of the above is available at JS Fiddle!

Upvotes: 3

Related Questions