Style processing is perhaps the most complex part of the browser. Encapsulating all details into a library is definitively a good idea. Here we continue revising the library of "Writing an Event Library" to encapsulate the details of style processing. You can see the source file gossip-0.4.js directly.
We'll use the revised library to rewrite several examples we've seen. First, we rewrite the first example of Getting and Setting Styles.
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#message').css({
color : '#ffffff',
backgroundColor : '#ff0000',
width : '300px',
height : '200px',
paddingLeft : '250px',
paddingTop : '150px'
});
});
</script>
</head>
<body>
<div id="message">This is a message.</div>
</body>
</html>Then, we write its second example.
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<style type="text/css">
#message {
color: #ffffff;
background-color: #ff0000;
width: 500px;
height: 200px;
padding-left: 250px;
padding-top: 150px;
}
</style>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#console').html(
XD('#message').css('backgroundColor')
);
});
</script>
</head>
<body>
<div id="message">This is a message.</div>
<span id="console"></span>
</body>
</html>The following is the third example of Element Positions.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
#container {
color: #ffffff;
background-color: #ff0000;
height: 50px;
position: absolute;
top: -100px;
left:-100px;
}
</style>
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
var search = XD('#search').offset();
XD('#container').css({
left : search.left + 'px',
top : search.top + search.offsetHeight + 'px',
width: search.offsetWidth + 'px'
});
});
</script>
</head>
<body>
<div id="container">This is a message</div>
<hr>
Search: <input id="search" type="text">
</body>
</html>The following is the first example of Display, Visibility and Opacity:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
#message {
color: #ffffff;
background-color: #ff0000;
border-width: 10px;
border-color: black;
border-style: solid;
width: 100px;
height: 50px;
padding: 50px;
}
</style>
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#toggle').click(function() {
var messageXD = XD('#message');
if(messageXD.css('display') === 'none') {
messageXD.show();
}
else {
messageXD.hide();
}
});
});
</script>
</head>
<body>
<button id='toggle'>Toggle the visible status</button>
<hr>
This is a text! This is a text! This is a text! This is a text! This is a text!
<div id="message">Message 1</div>
This is other text!This is other text!This is other text!This is other text!This is other text!
</body>
</html>The following is its second example.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#fadeIn').click(function() {
XD('#image').fadeIn(10000);
});
XD('#fadeOut').click(function() {
XD('#image').fadeOut(10000);
});
});
</script>
</head>
<body>
<button id='fadeOut'>Fade Out</button>
<button id='fadeIn'>Fade In</button><br>
<img id="image" src="../images/caterpillar_small.jpg">
</body>
</html>The following is the rewritten example of The className Property.
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.released {
border-width: 1px;
border-color: red;
border-style: dashed;
}
.pressed {
border-width: 5px;
border-color: black;
border-style: solid;
}
</style>
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#logo').click(function() {
XD(this).toggleClass('released', 'pressed');
});
});
</script>
</head>
<body>
<img id="logo" class='released'
src="../images/caterpillar_small.jpg">
</body>
</html>The following is the written example of Window Dimensions.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
#message1 {
text-align: center;
vertical-align: middle;
color: #ffffff;
background-color: #ff0000;
width: 100px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
var message1XD = XD('#message1');
message1XD.opacity(0.5);
var viewport = XD.viewport();
message1XD.css({
width : viewport.width + 'px',
height: viewport.height / 2 + 'px',
paddingTop : viewport.height / 2 + 'px'
});
XD('#confirm').click(function() {
message1XD.css({
width: '0px',
height: '0px',
paddingTop: '0px',
display: 'none'
});
});
});
</script>
</head>
<body>
Blah...Blah...<br>Blah...Blah...<br>Blah...Blah...<br>
<button>Do it</button>
<div id="message1">
Ads...Ads...<br><br>
<button id="confirm">confirm</button>
</div>
</body>
</html>