Использование jQuery scrollTo & onAfterFirst для перепланировки сайта - PullRequest
Новая
       8

Использование jQuery scrollTo & onAfterFirst для перепланировки сайта

1 голос
/ 29 ноября 2011

Так вот, где я застрял. Я пытаюсь перестроить свой веб-сайт компании-интерната (www.20nine.com) из монстра flash / flex, теперь он превращается в jQuery с той же функциональностью.

http://demos.flesler.com/jquery/scrollTo/

По этим ссылкам в разделе «Опции» нажмите «onAfterFirst». Это именно тот переход, который мне нужен, но с некоторыми изменениями.

Код на этом сайте выглядит так: 

    $('#options-onAfterFirst').click(function(){

        reset_o(); $paneOptions.scrollTo( 'li:eq(15)', 1600, { 

            queue:true,

            onAfterFirst:function(){

                $('#options-message').text('Got there horizontally!');

            },

            onAfter:function(){

                $('#options-message').text('Got there vertically!');

            }

        });

То, что я хочу сделать, - это создать сайт, который использует сетку Div 3x3, и изменить эти «onAfter: function's», чтобы загружать содержимое каждого div (или iFrame) при его посадке. В настоящее время этот код также заставляет содержимое отображаться в одном кадре, где каждый элемент div / iframe должен отображаться в полноэкранном режиме независимо от размера окна браузера пользователя.

Вот изображение, чтобы проиллюстрировать это:

illustration

Серые квадраты - это каждая "страница", я думаю, это должны быть iFrames. Фиолетовая линия будет основной оберткой, объединяющей весь сайт. Синяя линия обозначает, как я хочу, чтобы браузер распознавал полноэкранный аспект и перемещался по быстрому полноэкранному изображению, а затем на следующую страницу содержимого.

В библиотеке кодов scrollTo та, с которой я работаю, помечена как «Диагональ» (это, по-видимому, необходимо для получения эффекта двух движений)

В поисках помощи я прочитал, что УДАЛЕНИЕ этой строки кода позволит использовать полноэкранную утилиту, но я не проверил это (в данный момент я едва могу заставить мою работать) 

$(window).resize(function () {
    //call the resizePanel function
    resizePanel();
});

По словам человека, это должно сделать div в полноэкранном режиме при изменении размера окна.

Я определенно путаюсь, где мне нужно внедрить код, и как правильно настроить комбо-беспорядок 3x3 div / iframe (вот такая странная структура сайта для того, к чему я привык)

Любые советы о том, как сконструировать этого монстра?

...