CSS3 Pocket Primer by Oswald Campesato

CSS3 Pocket Primer by Oswald Campesato

Author:Oswald Campesato
Language: eng
Format: epub
Publisher: Mercury Learning and Information


DETECTING SCREEN WIDTH AND HEIGHT

The window object supports a resize event that you can use for determining the width and height of the screen, which in turn enables you to modify other effects in HTML5 Web pages. Listing 5.4 displays the contents of ResizeBorder1.html that illustrates how to maintain the same blue border regardless of the screen size or screen orientation.

LISTING 5.4 ResizeBorder1.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" >

<title>Resizing the Window</title>

<style>

* {

margin:0px; padding:0;

}

#outer {

width: 400px; height: 300px;

border: 10px solid blue;

}

</style>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />

<script src="http://code.jquery.com/jquery-2.0.0b1.js">

</script>

<script src="http://code.jquery.com/jquery-migrate-1.1.0.js">

</script>

<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">

</script>

</head>

<body onload="resizeBorder();">

<div id="outer">

</div>

<script>

// borderWidth equals 'border' in the CSS selector above

var borderWidth = 10;

window.onresize = function() { resizeBorder(); }

function resizeBorder() {

// do the following if the screen has been resized:

var rescaledScreenWidth = document.documentElement.

clientWidth;

var rescaledScreenHeight = document.documentElement.

clientHeight;

$("#outer").css('width', rescaledScreenWidth-

2*borderWidth);

$("#outer").css('height', rescaledScreenHeight-

2*borderWidth);

}

</script>

</body>

</html>

Listing 5.4 contains a <style> element whose first selector sets the padding and margin to 0px for all elements in the Web page. The second selector specifies a blue border of 10px. When you load this Web page into a border, and whenever you resize the browser, the JavaScript function resize-Border() is executed. This JavaScript function obtains the current width and height of the browser with this code snippet:

var rescaledScreenWidth = document.documentElement.clientWidth;

var rescaledScreenHeight = document.documentElement.clientHeight;

The next two lines of code in resizeBorder() set the width and the height properties of the <div> element (whose id attribute has the value outer) equal to the current width and height values, decreased by the quantity 2*borderWidth.



Download



Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.
Popular ebooks
Whisky: Malt Whiskies of Scotland (Collins Little Books) by dominic roskrow(56043)
What's Done in Darkness by Kayla Perrin(26603)
The Fifty Shades Trilogy & Grey by E L James(19087)
Shot Through the Heart: DI Grace Fisher 2 by Isabelle Grey(19070)
Shot Through the Heart by Mercy Celeste(18944)
Wolf & Parchment: New Theory Spice & Wolf, Vol. 10 by Isuna Hasekura and Jyuu Ayakura(17125)
Python GUI Applications using PyQt5 : The hands-on guide to build apps with Python by Verdugo Leire(17006)
Peren F. Statistics for Business and Economics...Essential Formulas 3ed 2025 by Unknown(16885)
Wolf & Parchment: New Theory Spice & Wolf, Vol. 03 by Isuna Hasekura and Jyuu Ayakura & Jyuu Ayakura(16833)
Wolf & Parchment: New Theory Spice & Wolf, Vol. 01 by Isuna Hasekura and Jyuu Ayakura & Jyuu Ayakura(16459)
The Subtle Art of Not Giving a F*ck by Mark Manson(14363)
The 3rd Cycle of the Betrayed Series Collection: Extremely Controversial Historical Thrillers (Betrayed Series Boxed set) by McCray Carolyn(14149)
Stepbrother Stories 2 - 21 Taboo Story Collection (Brother Sister Stepbrother Stepsister Taboo Pseudo Incest Family Virgin Creampie Pregnant Forced Pregnancy Breeding) by Roxi Harding(13656)
Scorched Earth by Nick Kyme(12778)
Drei Generationen auf dem Jakobsweg by Stein Pia(10971)
Suna by Ziefle Pia(10894)
Scythe by Neal Shusterman(10344)
The Ultimate Python Exercise Book: 700 Practical Exercises for Beginners with Quiz Questions by Copy(9828)
D:\Jan\FTP\HOL\Work\Alien Breed - Tower Assault CD32 Alien Breed II - The Horror Continues Manual 1.jpg by PDFCreator(9811)
De Souza H. Master the Age of Artificial Intelligences. The Basic Guide...2024 by Unknown(9776)