Цикл jQuery, кажется, регулирует высоту моего элемента - PullRequest
Новая
       7

Цикл jQuery, кажется, регулирует высоту моего элемента

6 голосов
/ 25 апреля 2011

У меня есть страница с запущенным циклом jQuery от malsup.Я использую последнюю версию (2.99) и Safari 5.0.5.Ранее я не сталкивался со следующей проблемой, и она кажется немного странной.

Проблема

Иногда при загрузке страницы элемент .slides имеет значение только654 пикселей в ширину.У меня есть 960px в файле CSS.Но когда я использую JavaScript, чтобы получить ширину элемента .slides, он говорит, что он имеет ширину 1271 пикселей.А?Эта проблема иногда возникает и в Firefox (3.6.16), но далеко не так, как в Safari.Как ни странно, я не могу воспроизвести эту ошибку в IE8.

Мой код весь W3C действителен (кроме 3-х вызовов к border-radius).Возможно, есть ограничение на использование элемента формы в качестве контейнера цикла?Является ли Safari неправильным поведением?

JS: 

$(document).ready(function(){
  var sw = $('.slides').width();
  $('.slides').cycle({
    fx: 'scrollHorz',
    nowrap: 0,
    fit: 1,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    speed: 250
  });
  if (sw != 960){
    $('.slides').css('width','960px');//to set the width to 960, so it doesn't clip the form
    $('.slides').css('background-color','#ff00ff');//so i know when the problem is occuring
  }
});

CSS: 

#content{
    float:left;
    width:100%;
}

    .wrapme{
        width:960px;
        height:auto;
        margin:0 auto;
    }

    .slides{
        float:left;
        width:960px;
        height:auto;
        overflow:auto;
    }

Выможно (надеюсь) увидеть «ошибку» в действии здесь .Я хотел бы знать, если это не происходит для кого-то еще (возможно, придется нажать F5 несколько раз).

Я хотел бы исправить эту досадную небольшую ошибку.Обходной путь установки ширины контейнера после цикла настроил его (на неправильную ширину, без сомнения) только устраняет половину проблемы.После перехода к следующему слайду ширина уменьшается вдвое.Следующий слайд снова наполовину.Таким образом, после слайда 3 он сокращает весь контент до ширины 240 пикселей.

Я думаю, что решение этой проблемы - заставить всех использовать Firefox / IE (он будет находиться в корпоративной сети).

Спасибо за любую помощь и понимание заранее!

Дан

РЕДАКТИРОВАТЬ обновленная ссылка: https://necms.com.au/cycle_oddities.php

Ответы [ 4 ]

5 голосов
/ 26 апреля 2012

Есть ошибка в плагине Jquery Cycle ... Решение, которое я нашел для этого, состоит в том, чтобы установить after функцию обратного вызова и установить высоту вручную. 

$('.slides').cycle({
    fx: 'scrollHorz',
    nowrap: 0,
    fit: 1,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    speed: 250,
    after: function (){
        $(this).parent().css("height", $(this).height());
     },   
  });
1 голос
/ 21 марта 2012

Это похоже на ошибку в цикле jQuery.Я не могу сказать, происходит ли это из-за плавающих дочерних элементов или из-за того факта, что на этой странице обычно есть несколько экземпляров jQuery Cycle.Мне нужно копать глубже.

Один из обходных путей, который мне помог, состоял в том, чтобы установить height и width контейнера в параметрах cycle, а затем указать, что слайды должны fitконтейнер вроде так: 

 $('#myCycle').cycle({
      fx: 'scrollHorz',
      width: 430,
      height: 100,
      fit: 1
 });
0 голосов
/ 30 июля 2013

Я использовал это, и это сработало. цикл пытается получить свойства размера и отправляет их обратно неверно. 

                after: function (){
                $(this).css("height", "");
                $(this).css("width", "");
0 голосов
/ 13 февраля 2013

Попробуйте установить следующее:

containerResize: 0, slideResize: 0

Сработало для меня.

$('.slides').cycle({
   fx: 'scrollHorz',
   nowrap: 0,
   fit: 1,
   timeout: 0,
   next: '.next',
   prev: '.prev',
   speed: 250,
   containerResize: 0,
   slideResize: 0
});
...