Screen pages in html

Question

I'm looking to create a web page that is split in several different sections depending on the user screen/window size. For example, when the web page first loads, the screen should display the first section (black background). If the user scrolls down the page, it will take them into pageTwo. If however, the user clicks anywhere on the first page (black background) it will take them to pageTwo, displaying only the blue background.

Is there anyway I can detect the screen size of the user (using jQuery) to set the size of the div tag pageOne? And the same again if the user clicks on the first page to set the screen size of the second page?

I have the following css & html code.

CSS Code

body{height:100%;}

#pageOne{
background:black; height: ?
}

#pageTwo{
background:blue; height: ?
}

HTML code

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

jQUERY Code

$(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;
});
})

Answer 1

can be done with jquery functions

// Returns height of browser viewport

$( window ).height();

// Returns height of HTML document

$( document ).height();

// Returns width of browser viewport

$( window ).width();

// Returns width of HTML document

$( document ).width();

look into these jquery api(s), Height api Width api

Answer 2

To add on to Mathius' code, you would also set the div height equal to the window height. Here is how I would implement it. The following are assumed - you have jQuery, the pages have the classname .page, and all of the following code is wrapped in $(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.

You don't need to worry about setting any width - just set the CSS style to width: 100% and that will work correctly. For whatever reason, CSS uses width for nearly all percentages, so height: 100% will scale when the browser width is modified, not the height.

(PS untested code, so let me know if I made a mistake)

Answer 3

You can detect screen size with:

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

Also to detect when the user resizes browser:

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