Dynamic Styles In DHTML

Uncategorized / By
As the Internet gained popularity, HTML became increasing weakened. People started demanding more and more features, and this caused the creation of DHTML. It also created CSS, or Cascading Style Sheets.
 
Styles allow us to separate the content of the HTML page from its presentation. DHTML makes very good use of styles – we can dynamically alter them in the same way we can alter attributes of HTMLelements. This is a very powerful development – now we can move images around the screen, change an element’s color in response to events, change the visibility of elements, and much more.
 
As a re-cap, styles are attached to an element through the style attribute, e.g.
 
<P STYLE=”color:blue”>csitquestion.com Free Informative Sites .
 
Complete Code:
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> Dynamic Style </title>

  <head>

 

 </head>



 <body>

<P STYLE="color:blue">eBIZ.com Pvt. Ltd.</P>

</body>

</html>
 
Click here to view the result.
 
Alternatively, we can attach styles inside a style tag, e.g.
 
<STYLE> P {color:blue} </STYLE> ….. <P>eBIZ.com Pvt. Ltd.</P>
 
Complete code :
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> Dynamic Style </title>

  <head>

<STYLE>

P {color:blue}

</STYLE>



 </head>



 <body>

  <P>eBIZ.com Pvt. Ltd.</P>

 </body>

</html>
 
Click hereto view the result.
 
Dynamically Changing the Style
 
With the help of DHTML, we can control the behavior of style. We can dynamically change the style by using HTML DOM. This gives the web developer great flexibility to control the look and feel of the page contents as per the need. For example, suppose you want to highlight a particular paragraph by changing its font color, size etc. when user moves the mouse over this text and when mouse moves out of this paragraph, you want to restore the previous style of the text.
 
Changing Color
 
When we move the mouse over a hyperlink, it changes color. No other element does this, but we can easily add the effect to any element. Look at the example given below:
  
<HTML>

<HEAD>

<TITLE>Dynamic Style </TITLE>

<STYLE>

P {

color:blue

}

</STYLE>

</HEAD>

<BODY>

<P onmouseover="style.color='red';" onmouseout="style.color='blue';">
This is an Example of Dynamic Style</P>

<P onmouseover="style.color='red';" onmouseout="style.color='blue';">
Move your mouse over the text, to highlight the text.</P>

</BODY>

</HTML>
 
Click here to view the result.
 
Using attachEvent
 
You may be thinking that the code is over-complicated, and that it could be simplified. It can. Advanced DHTML provides extra keywords to allow for the dynamic nature of DHTML. One of these is attachEvent, which allows us to attach an event handler to an element from within the script tag.
  
<HTML>

<HEAD>

<TITLE>Dynamic Style</TITLE>

<STYLE>

P {color:blue}

</STYLE>

<SCRIPT>

function start() {

for (e=0;e<document.all.length;e++)

if (document.all[e].tagName=='P') {

document.all[e].attachEvent('onmouseover',toogle);

document.all[e].attachEvent('onmouseout',toogle1);

}

}



function toogle() {

 	event.srcElement.style.color='red';

 



}



function toogle1() {	

	event.srcElement.style.color='blue';

}

</SCRIPT>

</HEAD>

<BODY onload="start();">

<p>This is an Example of Dynamic Style</P>

<P>Move your mouse over the text, to highlight the text.</P></BODY>

</HTML>
 
Click here to view the result.
 
One advantage with this code is that we no longer have to add the event handlers to every <P> element – the code does this for us by iterating through the all collection, and attaching the onmouseover and onmouseout event handlers to all P elements.
 
Changing fontSize
  
function scred() {

with (event.srcElement.style) {

color='blue';

fontSize=16;

}

}

function scblack() {

with (event.srcElement.style) {

color='black';

fontSize=12;

}

}
 
notice that the CSS style is font-size, whereas in script we use fontSize. All hyphenated styles folow the same pattern – remove the hyphen and capitalize the first letter of all words after the first.
 
So, background-color becomes backgroundColor and so on.
 
If you are wondering what event.srcElement means, when the event is captured, it is captured on an element. So we have an event object created by the event, and the event object has many properties about the event. One of these is srcElement, which returns the element that fired the event. And you may think that the program wrenches the text around a bit too much. Make the following changes to fix the problem:
  
function start() {

 for (e=0;e<document.all.length;e++)

if (document.all[e].tagName=='P') {

 document.all[e].attachEvent('onmouseover',toogle);

document.all[e].attachEvent('onmouseout',toogle1);

}

}
 
and changing the style declaration to
P { color:blue;font-size:14px;}
 
Complete source code:
  
<HTML>

<HEAD>

<TITLE>Dynamic Style</TITLE>

<STYLE>

P {

color:blue;

font-size:14px

}

</STYLE>

<SCRIPT>

function start() {

for (e=0;e<document.all.length;e++)

	if (document.all[e].tagName=='P') 

	{

		document.all[e].attachEvent('onmouseover',toogle);

		document.all[e].attachEvent('onmouseout',toogle1);

	}

}



function toogle() 

{

	with (event.srcElement.style) {

	color='red';

	fontSize=16;

	}

}



function toogle1() {

	with (event.srcElement.style) 

	{

	color='blue';

	fontSize=14;

	}

}

</SCRIPT>

</HEAD>

         <BODY  onload="start();">
<p>This is an  Example of Dynamic Style&lt;/P>
<P>Move your  mouse over the text, to highlight the text.&lt;/P>&lt;/BODY>

  </HTML>
 
Click here to view the result.
 
 
Dynamically Changing the position
 
There are two styles that affect the position of an element, namely top and left. These two styles hold the distance of the element from the top of the screen and from the left of the screen respectively. With DHTML and Dynamic Styles, we can change the values of these styles to move an element around.
 
You may have seen scrolling text displays – where large bodies of text of are scrolled in a neat container. These are created by changing the position of the text inside a DIV element.
  
<HTML>

<HEAD>

<TITLE>Text Scroller</TITLE>

<SCRIPT>

sp=650;

function scroll() {

if (sp<-700) sp=100;

sp--;

text.style.left=sp;

setTimeout('scroll()',10);

}

</SCRIPT>

</HEAD>

<BODY onload="scroll();">

<DIV STYLE="position:absolute;overflow:hidden;top:100;left:100;width:600;

height:100;background-color:cyan">

<SPAN ID="text" STYLE="position:relative;top:50;left:0;width:800;height:100">

Here is the text that we see scrolling on the browser screen.
 This DHTML Example is brought to you by eBIZ.com.

</SPAN>

</DIV>

</BODY>

</HTML>
 
The DIV element contains the overflow style, this defines the behavior of the element when its contents overflow the parent’s elements boundaries. The SPAN element needs an ID, and is positioned relative to its parent DIV element. This means that the co-ordinate system places (0,0) as the top-left of the DIVelement.
 
The text that is scrolled is placed inside the SPAN element. The scroll function decrements sp, the scroll position, and then adjust the relative position of the SPAN element accordingly. This gives the movement, and the display is kept tidy because any text outside the DIV element is not shown. The animation is performed by the setTimeout function, and the scroll is repeated by detecting sp being at the end of the text (sp=-700), and resetting it to the starting position of the text (sp=650).
 
Click here to view the output.
 
Properties of STYLE
 
Clearly, positioning your block of content depends upon the specified STYLE properties. We seemed to pull our example properties out of a hat — position, width, left? Where did we get these from? Well, several documents on Web contain references to the positioning properties available for style sheets — two worth reviewing are Microsoft’s CSS Attributes Reference (under “Positioning Properties”) and Netscape’s Defining Positioned Blocks of HTML Content.
 
Below we’ve included a handy chart summarizing the common STYLE properties which you may want to use when using the CSS syntax to position blocks of content.
 
position Specifies how the block should be positioned on the page with respect to other page elements. Possible values:

“position:absolute;” Block is positioned absolutely within the browser window, relative to &lt;BODY> block.
“position:relative;” Block is positioned relative to its parent block, if any, or else normal flow of page.
“position:static;” Block is positioned according to standard HTML layout rules — follows flow of document. (MSIE 4+ only; Netscape 5)
width Specifies the width at which the block’s contents should wrap. You may specify width in measured units (50px), as a percentage of the parent block’s width (50%), or autowhich wraps the block according to its parent’s width.

Examples: “width:50px;” or “width:50%;”
height Specifies the height of the block, measured in units (50px), percentage of the parent block’s height (50%), or auto. Note that the height of the block will be forced to the minimum necessary to display its contents; however, you can make the block taller than necessary.

Examples: “height:50px;” or “height:50%;”
left Specifies the offset of the left edge of the block in accordance with the positionattribute. Positive measures (5px) are offset towards the right while negative measures (-5px) are offset towards the left.

Examples: “left:5px;” or “left:-5px;”
top Specified the offset from the top edge of the block in accordance with the positionattribute. Positive measures (5px) are offset towards the bottom of the page while negative measures (-5px) are offset towards the top of the page.

Examples: “top:10px;” or “top:-10px;”
clip Specifies a rectangular portion of the block which is visible. Typically, you use the clipproperty if you want to show only a portion of the block, therefore hiding a portion. Syntax:

MSIE: clip:rect(top right bottom left)
Example: “clip:rect(0px 30px 50px 0px);”

Netscape: clip:rect(left,top,right,bottom)
Example: “clip:rect(0,0,30,50);”

Notice that the syntaxes vary between browsers, both in the need to specify measurement units (MSIE) and the order of the parameters.
visibility Specifies whether a block should be visibile. If not visible, the block will not appear on the page, although you can make it visible later using JavaScript. The possible values for this property again vary between browsers.

MSIE:
“visbility:inherit;” Block inherits the visibility property of its parent.
“visibility:visible;” Block is visible.
“visibility:hidden;” Block is invisible.

Netscape:
“visbility:inherit;” Block inherits the visibility property of its parent.
“visibility:show;” Block is visible.
“visibility:hide;” Block is invisible.
z-index Specifies the “stacking order” of blocks, should they happen to overlap other positioned blocks. A block is assigned a z-index, which is any integer. When blocks overlap, that which has the greater positive z-index appears above a block with a lower z-index. Blocks with an equal z-index value are stacked according to the order in which they appear in the source code (bottom-to-top: first block defined appears on bottom, last block defined appears on top).

Example: “z-index:3;”
background-color Specifies the background color for the block.

Examples: “background-color:green;” or “background-color:FF8F00;”
background-image Specifies a background image for the block.

Example: “background-image:url(‘images/tilewood.jpg’);”
 
Employing the various STYLE properties gives you powerful control over the position and look of the blocks of content on your page. Conceptually, then, when we think in DHTML we think of a page as made up of one or more blocks. Of course, this is not immediately evident to the viewer, who essentially sees a flat Web page, without realizing that several smaller blocks of content are positioned here and there to create the overall effect.
 
Still, the question begs: how is this dynamic? Precise, yes, but dynamic? Consider the fact that, now that the blocks have been put into place, you can — at any time — change their properties. Position, background, clipping region, z-index — it’s all plastic, with the help of JavaScript, and that is the reason to be excited!