автоматическая настройка фиксированной ширины coda-slider на гибком макете

Я изучал использование кодового слайдера на веб-странице с плавным макетом. Проблема в том, что коде-слайдеру нужна фиксированная ширина. Попытка использовать проценты приводит к тому, что текст исчезает за краем панели.

Я нашел образец javascript, который был написан для выбора jpg на основе фактической ширины контейнера, и попытался изменить его, чтобы изменить значения ширины css для панели ползунка, но безуспешно. .... хорошо, теперь я работаю над шириной.

Часть кодового слайдера css, которая управляет шириной панели:

.coda-slider, .coda-slider .panel { width: 650px; }

Сценарий, который я нашел и изменил:

 $(document).ready(function() { 

 function imageresize() {  
   var availwidth = $("#leftside").width(); 
   var codawidth = availwidth - 50; 
      $(".coda-slider .panel").css({"width": codawidth + "px"});
      $(".coda-slider").css({"width":codawidth + "px"});
}    

imageresize(); //Triggers when document first loads      

$(window).bind("resize", function(){ //Adjusts image when browser resized
    imageresize();  
 });  
 });

Я исправил проблему с размером, используя размер контейнера, а не размер страницы ... НО ... coda-slider использует исходную фиксированную ширину для расстояния слайда, поэтому, как только вы начинаете скользить, каждая панель заканчивается смещением, который увеличивается с каждым слайдом.

Любые предложения по изменению расстояния скольжения в зависимости от ширины?

ладно разобрались....

Пришлось изменить js-файл coda-slider, заменив:

var panelWidth = slider.find(".panel").width();

С той же формулой для ширины панели css:

var panelWidth = $("#leftside").width() - 50;

Это позаботилось о расстоянии скольжения.

Теперь мне просто нужно выяснить, как заставить coda-slider сбрасываться при изменении размера окна браузера. Он изменяет размер окна css, но не сбрасывает значение слайда. В долгосрочной перспективе изменение размера окна браузера не является большим требованием, но оно может пригодиться людям, меняющим ориентацию своего планшета во время просмотра веб-сайта.


jquery css fluid-layout coda-slider
person Tom    schedule 31.05.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это старо, но у меня была та же проблема, и оказалось, что разработчик создал новый кодовый слайдер, который может динамически подстраиваться под ширину.

здесь: LiquidSlider

person Federico    schedule 03.09.2012

arrow_upward
0
arrow_downward

Я столкнулся с похожей проблемой при попытке настроить слайд-шоу кода с помощью инструментов Flowplayer 'scrollable' — пиксельный слайдер — на мой сайт с гибкой компоновкой.

Я обошел эту проблему, изменив значения ползунка кода на %, а затем используя дополнительную строку jQuery, чтобы заставить панели элементов ползунка оставаться той же ширины, что и контейнер ползунка.

Вот настройка, которую я использую — % вместо пикселей для ширины. Я не устанавливаю ширину на панелях ползунка; вместо этого им присваиваются значения через jQuery:

<style type="text/css">

    .slider  { width:100%; height:200px; overflow:hidden; position:relative }
    .items   { width:2000em; position:absolute }
    .item    { /* do not set any width */ height:200px; overflow:hidden;
             float:left; display:inline-block }

</style>


<div class="slider equal">
    <div class="items">

        <div class="item equal"></div>
        <div class="item equal"></div>
        <div class="item equal"></div>

    </div>
</div>

Класс CSS «равный» предназначен для этого jQuery:

// Set slider children to width of parent

if($("div.equal").length){
    $.fn.setAllToMaxWidth = function(){
        return this.width( Math.min.apply(this, $.map( this , function(e){ return $(e).width() }) ) );
    };

    $("div.equal").setAllToMaxWidth();
};

Этот обходной путь jQuery является адаптацией jQuery Equal Column Heights. Джайна Юэн.

Это означает, что макет слайдера отображается точно так, как я хочу, при загрузке страницы и сохраняется с моим макетом сетки, независимо от ширины браузера.

Однако есть небольшая загвоздка — если вы измените размер окна браузера после его загрузки, ваш макет может растянуться за пределы ширины элементов ползунка и выглядеть немного странно.

person flynnduism    schedule 14.07.2011