jQuery и CSS конфликтуют с 'margin: 0 auto;' в Chrome и Safari - PullRequest
Новая
       43

jQuery и CSS конфликтуют с 'margin: 0 auto;' в Chrome и Safari

0 голосов
/ 26 августа 2011

Я добавил ползунок jquery на свою страницу, и после тестирования во всех браузерах изображение не меняется по клику в Chrome и Safari.В Firefox и IE он работает правильно.Я проанализировал код и понял ошибку, но не знаю, как ее исправить.Мой вызывает проблему с CSS слайдера.Для получения дополнительной информации проверьте http://jsfiddle.net/ryanabennett/vUvmA/1/

Если я уберу маржу: 0 авто;это работает отлично.Так есть ли способ исправить эту проблему с помощью ползунка или есть другой способ центрировать мою страницу?

Вот мой HTML: 

<div align="center" style="width: 1000px; margin: 0 auto;">
<div class="slideshow">
<!-- Slideshow HTML -->
    <div id="slideshow">
    <div id="slidesContainer">
        <div class="slide">
        <p>One</p>
        </div>
        <div class="slide">
        <p>Two</p>
        <div class="slide">
        <p>Three</p>
        </div>
        <div class="slide">
        <p>Four</p>
        </div>
    </div>
    </div>
    <!-- Slideshow HTML -->
</div></div>
</div>

Вот мой CSS: 

.slideshow{
border: 1px solid;
float: left;
height: 350px;
margin-left: 50px;
width: 500px;
}

#slideshow {
margin: 0 auto;
position: relative; 
}
#slideshow #slidesContainer {
height: 350px;
margin: 0 auto;
overflow: auto;
position: relative;
width: 400px;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}

Вот мой JS: 

$(document).ready(function(){
 var currentPosition = 0;
 var slideWidth = 400;
 var slides = $('.slide');
 var numberOfSlides = slides.length;

 // Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
  'float' : 'left',
  'width' : slideWidth
});

// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);

// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');

// Hide left arrow control on first load
manageControls(currentPosition);

// Create event listeners for .controls clicks
$('.control')
 .bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 :currentPosition-1;

// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
  'marginLeft' : slideWidth*(-currentPosition)
});
});

// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{        

$('#rightControl').show() }
}    
});

Возможно, будет проще посетить: http://jsfiddle.net/ryanabennett/vUvmA/1/

** Обновление - Несколько измы смотрели на это и до сих пор не можем исправить это.У кого-нибудь еще есть идеи.

Ответы [ 2 ]

3 голосов
/ 13 декабря 2012

Я знаю, что это старый, однако я заметил две вещи с вашим html (отредактировал вашу скрипку, и он работал нормально для меня, используя Safari).Первый в вашей разметке со вторым если вы пропустили закрывающий тег , а во-вторых, с вашим открывающим контейнером div, вы хотите центрировать, удалите align = "center" (как это теперь не рекомендуется в html5), назначьте ID или класс и используйте этот css:

#yourID { 
   position: relative; 
   margin: 0px auto; 
   width: 1000px; 
   text-align: center; 
}

Вам также необходимо удалить один из закрывающих тегов div в конце.

0 голосов
/ 26 августа 2011

Если вы измените строку, начинающуюся с: 

$('.control').bind('click', function(){});

для использования live вместо bind

$('.control').live('click', function(){});

это устраняет часть проблемы, но анимация в Chrome все равно не выглядит. Копать надо глубже. Кроме того, вам нужно добавить e.preventDefault(); в обработчик кликов. Теперь это позволит ему работать в Chrome / Safari.

И, да, было бы лучше использовать delegate вместо live, как заявлено @ AlienWebguy.

Редактировать: Этот ответ, очевидно, не работает, и мне интересно, действительно ли это дефект в jQuery.

...