Tài liệu CSS Cookbook- P14 doc

14.2 Applying a Different Stylesheet Based on the Time of Day

Problem

You want to apply a different stylesheet as the day progresses.

Solution

Pull in the time on the user’s clock and deliver the appropriate stylesheet:

<script type="text/javascript">

function setTimedStylesheet() {

var theTime = new Date().getHours();

if (8 <= theTime&&theTime < 20) {

document.write("<link rel='stylesheet' href='daytime.css'

type='text/css'>");

}

if (20 <= theTime&&theTime < 8) {

document.write("<link rel='stylesheet' href='nighttime.css'

type='text/css'>");

}

}

setTimedStylesheet();

</script>

Make sure you include the noscript element that includes a link to the default stylesheet

in case the browser does not have JavaScript:

<script type="text/javascript">

function setTimedStylesheet() {

var theTime = new Date().getHours();

if (8 <= theTime&&theTime < 20) {

document.write("<link rel='stylesheet' href='daytime.css'

type='text/css'>");

}

if (20 <= theTime&&theTime < 8) {

document.write("<link rel='stylesheet' href='nighttime.css'

type='text/css'>");

}

}

setTimedStylesheet();

</script>

<noscript>

<link href="default.css" rel="stylesheet" type="text/css">

</noscript>

Discussion

Creating a customized look and feel based on the time of day isn’t a far-fetched notion.

Radio and television stations in the United States divide their broadcasts based on the

time of day—for example, Daytime Emmy Awards, drive-time radio shows, prime time

television shows, and so on.

14.2 Applying a Different Stylesheet Based on the Time of Day | 625

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

The main problem with using this method is that you are assuming the clocks on peo￾ple’s computers are actually accurate.

Another solution is to get the time of day from your server through a middleware pro￾gramming language such as PHP and pass it on as a variable to the JavaScript.

See Also

The Date object reference at http://www.w3schools.com/jsref/jsref_obj_date.asp

14.3 Redirecting to a Mobile Site Based on the Browser’s

Screen Width

Problem

You want to apply a change to the stylesheet based on the browser’s screen width.

Solution

Detect the screen width of the current browser and redirect the browser to a more

mobile-friendly version of the site’s design:

<script type= "text/javascript">

if (screen.width <= 481) {

document.location = "http://mobi.example.com/"

}

</script>

Discussion

The base resolution relies on the JavaScript being able to detect the browser width

(based in pixels). If the browser width is less than or equal to 481 pixels, it’s assumed

that the browser is a mobile device.

Not all mobile devices have JavaScript.

Higher-resolution design

You can also flip the script to detect whether a user’s browser has a larger-than-average

browser window open:

<script type= "text/javascript">

if (screen.width <= 481) {

document.location = "http://mobi.example.com/"

} else if (screen.width >= 1280) {

626 | Chapter 14: Interacting with JavaScript

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

document.location = "http://high-def.example.com/";

}

</script>

See Also

More robust JavaScript for delivering a resolution-independent layout at http://www

.themaninblue.com/writing/perspective/2004/09/21/

14.4 Adding a JavaScript Framework to a Web Page

Problem

You want to add a JavaScript framework to a web page, as shown in Figure 14-2.

Figure 14-2. The jQuery framework home page

Solution

Use Google’s hosting feature to associate the jQuery framework (see Figure 14-3, shown

later) to a web page:

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

14.4 Adding a JavaScript Framework to a Web Page | 627

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Then, below the citing of the jQuery framework, add a custom script:

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

<script type="text/javascript">

// Your code goes here...

$(document).ready(function(){

window.alert("Hello, world! You have JavaScript!")

});

</script>

Discussion

By using Google to host the jQuery framework code, you reap three immediate benefits.

The first benefit is that of caching. If other websites utilize Google’s services and link

to jQuery, the code is cached within the browser. When a site visitor goes to another

site, the page renders faster since the jQuery is already cached. Even with the minified

and gzipped version weighing 19 KB, this translates to savings for your users.

A second benefit deals with how many connections a browser can make to a web server.

To not overwhelm a server, a browser limits the number of connections made to a web

server as it downloads the HTML, imagery, scripts, and so on. Offloading the jQuery

framework to another server makes the page render faster.

The third benefit is that Google’s servers are likely to be faster at delivering files such

as the jQuery framework to the site visitor’s machine, unless your server was possibly

a stone’s throw from your site visitors.

The alert statement is included as a simple demonstration of where cus￾tom JavaScript is placed. If a simple alert statement were all that was

needed, the script would be a quick line of code bypassing the need for

a JavaScript framework:

<script type="text/javascript">

window.alert("Hello, world! You have JavaScript!")

</script>

See Also

The list of jQuery and other Ajax libraries hosted by Google at http://code.google.com/

apis/ajaxlibs/documentation/

14.5 Using CSS3 Selectors in IE6 and IE7

Problem

You want to use CSS3 selectors in earlier versions of Internet Explorer.

628 | Chapter 14: Interacting with JavaScript

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Solution

First, include CSS3 syntax within the stylesheet for CSS3-capable browsers:

#content {

border: 4px solid black;

}

#content p {

margin: 1em 0;

}

/* removes the bottom margin from the last paragraph */

#content p:last-child {

margin: 1em 0 0 0;

}

Then use jQuery’s ability to reference portions of a document through standardized

CSS3 syntax:

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

<script type="text/javascript">

// Your code goes here...

$(document).ready(function(){

$("#content p:last-child").css("margin","1em 0 0 0");

});

</script>

Discussion

One of the benefits of using a JavaScript framework such as jQuery is its usage of CSS

selectors. Instead of styles being applied to a page, selectors associate functions and

behaviors to parts of the page.

To use a CSS selector, first use what’s called a jQuery object:

$(css-selector);

Then set a CSS selector within the jQuery object:

$("p+p");

Next, add the CSS declaration:

$("p+p").css("font-weight","normal");

jQuery might not understand some CSS shorthand properties. If jQuery

is not affecting the look of the page as intended through a CSS shorthand

property, use the CSS properties that make up the shorthand properties

instead. For example, use border-right instead of simply border.

14.5 Using CSS3 Selectors in IE6 and IE7 | 629

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.