JQuery липкий нижний колонтитул, который корректируется с динамическим контентом - PullRequest
3 голосов
/ 02 июля 2011

Я сейчас использую плагин здесь http://codedumper.com/jquerystickyfooter, чтобы создать нижний колонтитул с наклейкой.

Взгляните http://client.astam.co.uk. Он работает так, как вы ожидаете.

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

Есть ли способ, чтобы плагин узнал, что он может изменить свое положение?

Ответы [ 2 ]

1 голос
/ 02 июля 2011

Лучше использовать $ .stickyFooterPos () в качестве обратного вызова для других функций изменения макета, таких как изменение функции закрытия в вашем app.js на

    function close(){
    $(this).attr('href', 'javascript:void(0)');
    $(this).parent().fadeOut(200,function(){$.stickyFooterPos()});
}

PS: как и другие предлагали, позиция: фиксированная - это далекоболее лучший выбор, учитывая тот факт, что число пользователей IE6 уменьшается ... (см. http://www.w3schools.com/browsers/browsers_explorer.asp, а также http://www.w3schools.com/browsers/browsers_stats.asp)

1 голос
/ 02 июля 2011

Поддерживаете ли вы IE6? Если нет, то вы можете просто расположить нижний колонтитул как «position: fixed» вместо использования плагина jQuery. Кроме того, плагин JQ позиционирует div только при загрузке, изменении размера и прокрутке окна. Будет работать следующий код, добавленный для кнопки закрытия оповещения -

    $('#alert .close').click(
       function() {
         $.stickyFooterPos();
        }
   );

Просто добавьте это в свой js-файл, и при нажатии кнопки закрытия будет работать позиционирование.

EDIT - предыдущий код может не работать, если вы используете fadeOut () для кнопки закрытия. Скорее вы можете изменить код для кнопки закрытия на -

$(this).attr('href', 'javascript:void(0)');
$(this).parent().fadeOut(200, function(){$.stickyFooterPos()});
$.stickyFooterPos();
...