Экранные страницы в html

Question

Экранные страницы в html

0

Я ищу создать веб-страницу, которая разделена на несколько разных разделов в зависимости от размера экрана пользователя/окна. Например, когда веб-страница сначала загружается, на экране должен отображаться первый раздел (черный фон). Если пользователь прокручивает страницу вниз, это приведет их к странице. Если, однако, пользователь щелкает в любом месте на первой странице (черный фон), это приведет их к странице Two, отображая только синий фон.

Есть ли в любом случае я могу определить размер экрана пользователя (используя jQuery), чтобы установить размер тега divOne? И опять же, если пользователь нажимает на первую страницу, чтобы установить размер экрана второй страницы?

У меня есть следующий код css & html.

Код CSS

Тело {высота: 100%;}

#pageOne{
background:black; height: ?
}

#pageTwo{
background:blue; height: ?
}

HTML-код

<div id="pageOne"></div>
<div id="pageTwo"></div>

Код jquery

$(document).ready(function () {    
$('#pageOne').css({ 'height': (($(window).height()) - 62) + 'px' });

$(window).resize(function () {
    $('#pageOne').css({ 'height': (($(window).height()) - 62) + 'px' });
});

$('#pageTwo').css({ 'height': (($(window).height()) - 162) + 'px' });

$(window).resize(function () {
    $('#pageTwo').css({ 'height': (($(window).height()) - 162) + 'px' });
});

$('#pageOne').click(function () {
    $('html, body').animate({ scrollTop: $(document).height() }, 1500);
    return false;
});
})

user3325171 22 март 2014, в 19:01

Источник

Теги:

javascript

jquery

html

css

asp.net

3 ответа

Ещё вопросы

mathius1 · Answer 1 · 2014-03-22T16-30-00.000Z

Вы можете определить размер экрана с помощью:

  $(window).height(); // height
  $(window).width(); // width

Также, чтобы определить, когда пользователь изменяет размер браузера:

$(window).resize(function() {
    // Resize Elements
});

MasterDev · Answer 2 · 2014-03-22T16-48-00.000Z

может выполняться с помощью функций jquery

//Возвращает высоту окна просмотра браузера

$( window ).height();

//Возвращает высоту HTML-документа

$( document ).height();

//Возвращает ширину окна просмотра браузера

$( window ).width();

//Возвращает ширину HTML-документа

$( document ).width();

загляните в эти jQuery api (s), Height api Ширина api

Используйте control + k для правильного форматирования кода :) (комментарии включены, просто выделите все)

Alexander Lozada · Answer 3 · 2014-03-22T15-05-00.000Z

Чтобы добавить код Mathius, вы также установили бы высоту div равной высоте окна. Вот как я его реализую. Предполагается следующее: у вас есть jQuery, страницы имеют имя класса .page, а весь следующий код заключен в $(function(){});

function func(){     //can be named whatever you wish
    winheight = $(window).height();      //getting the height of the window
    $('.page').height(winheight);        //setting the div height to equal winheight
}

func();    //calling the above function when the page loads

$(window).resize(function() {
    func();    //calling the function when the page is resized
});

//you can call func(); whenever you need to make sure the page height matches 
//browser window height - but calling the function on document load and window
//resize should cover everything.

Вам не нужно беспокоиться о настройке любой ширины - просто установите стиль CSS в width: 100% и это будет работать правильно. По какой-либо причине CSS использует ширину почти для всех процентов, поэтому height: 100% масштабируется при изменении ширины браузера, а не по высоте.

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

Ура приятель! Теперь это работает.
@ user3325171 Не забудьте пометить ответ как правильный :)