Код jQuery не работает на Firefox

Question

, поэтому я получаю маржу слева от строки и добавляю ее в другую строку. Он отлично работает в Safari и Chrome. Это тоже не вызывает никаких ошибок.

Вот код JQuery:

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); 
    }); 

}); 

И HTML код:

<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: Я добавил HTML-код, как какой-нибудь пользователь сказал он WASN» t завершено. Что все это так должно быть достаточно. Благодарю.

EDIT 2: Если я установил конкретный маржу слева на mainrow через css (например, 100px или что-то еще), вместо «auto» он работает при загрузке. Но призыв состоял в том, чтобы динамически получить левый край центрированной строки из сетки (так что «margin: 0 auto»).

Answer 1

После некоторых исследований я обнаружил, что это Firefox ошибка не получает маржу от элемента «авто» доступ к его css через .css(). Поэтому я использовал .offset(). Оставил доступ к нему, и теперь он работает.

Так это выглядит, как это сейчас:

// 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); 
}); 

Answer 2

Возможно, это из-за вашего noConflict, потому что у меня была проблема с функцией, работающей с включенным noConflict.

Он работает нормально без noConflict, смотрите пример ниже:

$(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>