Как динамически изменять значение в плагине?

Рейтинг: 2Ответов: 1Опубликовано: 19.10.2014

Есть меню с изменяющимся фоном: http://jsfiddle.net/yuswh9qy/1/

Задача: сделать адаптивным при изменении окна браузера, для этого необходимо при ресайзе передавать в плагин новое значение ширины (width) и пересчитывать значение panelWidth (строка 450 в js).

Успехи: ширина каждой панели рассчитывается правильно при изменении окна.

$(window).resize(function(){
var html = document.documentElement;
var viewportWidth = html.clientWidth;
var viewportHeight = html.clientHeight;
$('#sbi_container').bgImageMenu({
    width       : viewportWidth-3,
    height      : viewportHeight-50 
})
});

В чем проблема: плагин не пересчитывает значение panelWidth, из-за чего сбивается параметр background-position, собственно, из-за него все отображается криво. Заранее благодарю за помощь в решении.

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Во-первых в вашем примере каждый раз при ресайзе создаются новые панели поверх старых. Если старые панели удалять при ресайзе, уже будет лучше смотреться. А чтобы картинки адаптировались по ширине, это нужно пройтись по коду плагина и заменить пиксели в размерах на проценты или другие единицы.

    //изменение размера окна
$(window).resize(function(){
    var html = document.documentElement;
    var viewportWidth = html.clientWidth;
    var viewportHeight = html.clientHeight;

    $('.sbi_panel_img').remove();

    $('#sbi_container').bgImageMenu({
        width       : viewportWidth-3,
        height      : viewportHeight-164
    })
});