Jquery CSS Rendering - Works in Firefox, Not in Chrome

jQuery CSS rendering - works in Firefox, not in Chrome

I know there are ways to force (or trick) Chrome to
refresh/redraw/recalcuate the page elements, but don't know how to do
it. Any ideas?

Taken from here: How can I force WebKit to redraw/repaint to propagate style changes?

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

I quickly applied it here, but you should make it into a function: http://jsfiddle.net/thirtydot/ms3Jd/5/

Elements rendering in Chrome but not Firefox?

This is not the issue, however it is a good practice to set a DOCTYPE, without it the browser renders the webpage in quirks mode, also setting a charset is a good practice as well.

To fix your problem try this: (first erase the stray center tag after your stripes wrapper container)

HTML:

<div id="stripes_wrapper">
        <div class="box red"></div>
        <div class="box white"></div>
        <div class="box red"></div>
        <div class="box white"></div>
        <div class="box red"></div>
        <div class="box white"></div>
        <div class="box red"></div>
        <div class="box white liner"></div>
        <div class="box red liner"></div>
        <div class="box white liner"></div>
        <div class="box red liner"></div>
        <div class="box white liner"></div> 
        <div class="box red liner"></div>           
        </div>
        </div>

<!-- ERASE THIS CENTER TAG -->
        <center>

CSS:

Add this to your css:

html {
    height: 100%;
}

Add 100% height to the body wrapper:

body {
    position: relative;
    background: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #fff;
    margin: 0;  
    height: 100%;
} 

Add height 100% to stripes wrapper:

#stripes_wrapper {
    width: 100%;   
    height: 100%;
} 

This should work

jQuery on() not working in Chrome, Safari. Works in Firefox

Since you are generating the html dynamically, you need to delegate the click event on the document.

html+= "<div class='timeSpan' data-classdate='" + class_date + class_date_endTime + "' data-date='" + class_date2 + "' data-eventid='" + eventid + "'>" + the_date + ",<br>" + start_time + " to " + end_time + "</div><br>";

$(document).on("click", ".timeSpan", function(event) { // delegates the click event on the dom and during event invocation checks class timespan 

});

Javascript works in Firefox and IE, but not Chrome

This has to do with the fact that you are animating a span element - don't ask me why. But if you are using semantic markup you should really be using a div to hold your images. I re-factored your code as well, so now you need only 1 link.

$('#show').toggle(function(){
    $('#Screenies').show('slow');
    $('#show').text('Hide');
}, function(){
    $('#Screenies').hide('slow');
    $('#show').text('Show');
});

If you don't know about the jQuery toggle function read this article, the rest of the code simply animates the element in and then changes the link text based on the current state.

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

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!

CSS rendering in same browsers in different OS

Each browser has a set of inbuilt CSS rules it follows; things like the amount of padding by default on a h1 element etc.

You can use a 'normalising' stylesheet (aka (CSS reset'), such as this, to reset every browser to the same point so your CSS will look the same in all of them.

---

Related Topics