- 2.1. Accessing Elements and Protecting the DOM
- 2.2. Editing the Web Page with DHTML ? la jQuery
- 2.3. Animatedly Reducing and Enlarging of an Element
- 2.4. Changing Attributes Dynamically
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
2.2. Editing the Web Page with DHTML à la jQuery
Generally, you can design the visual appearance of a web page much better and more effectively with style sheets than with pure HTML. In particular, they make it easier to separate layout and structure of the site. These statements are probably old hat to you, as true as they are.
If you now change the style sheets of a site dynamically via JavaScript, we are talking about Dynamic Hypertext Markup Language (DHTML). But animation effects such as showing and hiding parts of a web page via other JavaScript techniques also form part of this. In the following example, we look at how you can carry out animated web page changes with jQuery quickly, simply, conveniently, and yet reliably in the various browsers. In this example, we change the Cascading Style Sheets (CSS) class of an element dynamically.
First, let’s look at a little CSS file that should be integrated into the following web page and saved in the lib directory (ch2_2.css):
Listing 2.2. The File with the External Style Sheets
01 body {
02 background: lightgray;color: blue;
03 }
04 div {
05 background: white;font-size: 14px;
06 }
07 .mClass {
08 background: red; color: yellow; font-size: 24px;
09 }
Nothing much happens in the CSS file. It determines the background and foreground color of the entire web page and all elements of the type div, plus the font size for all elements of the type div.
Of primary interest is the class described in lines 7–9. It is not yet to be used on loading the following web page, but is to be assigned dynamically in case of a user action (ch2_2.html):
Listing 2.3. Changing the CSS Class
01 <html xmlns="http://www.w3.org/1999/xhtml">
02 <head>
03 <meta http-equiv="Content-Type"
04 content="text/html; charset=utf-8" />
05 <title>The second jQuery example</title>
06 <link type="text/css" rel="stylesheet"
07 href="lib/ch2_2.css" />
08 <script type="text/javascript"
09 src="lib/jquery-1.8.2.min.js"></script>
10 <script type="text/javascript">
11 $(document).ready(function(){
12 $("#a").click(function(){
13 $("#c").addClass("mClass");
14 });
15 $("#b").click(function(){
16 $("#c").removeClass("mClass");
17 });
18 });
19 </script>
20 </style>
21 </head>
22 <body>
23 <h1>Editing Style Sheets with jQuery</h1>
24 <button id="a">Add CSS class</button>
25 <button id="b">Remove CSS class</button><hr/>
26 <div id="c">He who knows all the answers
27 has not been asked all the questions.
28 </div><hr/>
29 <div id="c">Be not afraid of going slowly,
30 be afraid only of standing still.</div>
31 </body>
32 </html>
In the example, you can see two buttons below a heading and two texts within a div section that is separated by a separator in each case. This is pure HTML. Plus in lines 6 and 7 you can see the link to the CSS file.
)
Figure 2.3. The site after loading
But now we want to use jQuery to manipulate the text below the buttons or the first div container. That is why the div container has an ID. The text below it is intended for comparison purposes.
For accessing the elements of the web page, the example uses jQuery mechanisms already mentioned in the first example. To react to the relevant click on a button, we again use the method click(). So far, there is nothing new.
Now you should notice that we do not yet assign the CSS class from the linked CSS file to an element on loading the web page. But take a look at line 13.
Listing 2.4. Adding a CSS Class
$("#c").addClass("mClass");
As the name of the method addClass() already implies, calling this method assigns the indicated style sheet class to the preceding element. This happens dynamically without the web page having to be reloaded in any way. The function is triggered when the user clicks the corresponding button, as you can see from the surrounding click() method.
)
Figure 2.4. The CSS class has been assigned.
In line 16, you can see how the class is removed again following the same pattern. This time, we use the method removeClass(). If you test the example, you will see that font and background are changed accordingly.