jQuery code not working on Firefox

Question

so I'm getting the margin left of a row and adding it to another row. It works fine on Safari and Chrome. It doesn't throw any error either.

Here's the jQuery code:

var j = jQuery.noConflict();
j(document).ready(function($){

  // Slider margin left equal to grid on load
  var margLeft = $('#mainrow').css('margin-left');
  $('#cnn-slider').css('margin-left', margLeft);

  // Slider margin left equal to grid on resize window
  $(window).resize(function() {
    var margLeft = $('#mainrow').css('margin-left');
    $('#cnn-slider').css('margin-left', margLeft);
  });

});

And the HTML code:

<div id="main" role="main">
    <article>
        <div class="entry-content">
            <div class="row" id="mainrow">
                <div class="medium-12 columns">
                    <h1><?php the_title(); ?></h1>
                    <div class="row main-content">
                        <div class="medium-6 columns">
                            <?php the_field('history_text'); ?>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="cnn-slider" style="max-width: 100%;">
                <div class="columns">
                    <div class="slider-container">
                    <div class="slider-shadow"></div>
                        <?php echo do_shortcode("[metaslider id=40]");?>
                    </div>

                </div>
            </div>
            <?php the_content(); ?>
        </div><!-- .entry-content -->
    </article>
</div>

EDIT: I've added the HTML code as some user said it wasn't complete. That the whole thing so it should be enough. Thanks.

EDIT 2: If i set a specific margin-left on mainrow via css (like 100px or whatever) instead of "auto" it works on load. But the appeal was to dinamycally get the left margin of a centered row from a grid (so "margin: 0 auto").

Answer 1

I guess it might because of your noConflict because I had problem of the function working with noConflict enabled.

It runs ok without noConflict, please see example below:

 $(function() { $(window).on( 'resize', resetMargin ); resetMargin(); }); function resetMargin() { var margLeft = parseInt( $('#mainrow').css('margin-left') ); $('#cnn-slider').css('margin-left', margLeft); console.log( margLeft ); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="main" role="main"> <article> <div class="entry-content"> <div class="row" id="mainrow"> <div class="medium-12 columns"> <h1>test</h1> <div class="row main-content"> <div class="medium-6 columns"> blahblahblah </div> </div> </div> </div> <div class="row" id="cnn-slider" style="max-width: 100%;"> <div class="columns"> <div class="slider-container"> <div class="slider-shadow"></div> woohawoohawooha </div> </div> </div> <?php the_content(); ?> </div><!-- .entry-content --> </article> </div> 

Answer 2

After some research I found that it's a Firefox bug not getting the margin from an "auto" element accessing it's css via .css(). So I've used .offset().left to access it and it works now.

So it looks like this now:

// Slider margin left equal to grid on load
var margLeft = $('#mainrow').offset().left;
$('#cnn-slider').css('margin-left', margLeft);

// Slider margin left equal to grid on resize window
$(window).resize(function() {
    var margLeft = $('#mainrow').offset().left;
    $('#cnn-slider').css('margin-left', margLeft);
});