Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Twelve Dynamic HTML Lessons : Page 9

From Cascading Style Sheets to higlighted text to toggling images on and off the page, here are twelve fancy things that you can learn to do today in DHMTL.


advertisement
Expand Your Mind
Wow, did you see that? (You are using IE4.0, right?) In this lesson we're going to show you how to do that one. If you missed it, then just click here and we'll show you again.

We're using the letter-spacing attribute and changing it on the fly to expand the title heading of this page. It's pretty easy to do and you'll be able to cut & paste the javascript to put it in your own pages. Here it is:

<script language=JavaScript> ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 )) <!-- function expandText(which, start, finish, step, speed){ if (ie4); if (start < finish){ document.all(which).style.letterSpacing = start+"px"; start=start+step; setTimeout("expandText('"+which+"',"+start+","+finish+","+step+","+speed+")",speed); } } } //--> </script>

This function, called expandText, will work with any ID name you pass to it. The ID you modify doesn't have to be associated with a <div>, you can associate it with an <h1> or anything else that you can control letter-spacing on. You'll need to pass 5 variables to the script when invoked:


expandText('which',start,finish,step,speed);

  • which - the ID of the HTML you wish to modify
  • start - the value for the beginning letter-spacing (must be less than finish)
  • finish - the end value for letter-spacing (must be greater than start)
  • step - the increment to increase letter-spacing (1 is the smoothest)
  • speed - the speed in milliseconds to animate the expansion (1000=1 second)
Once you've determined the setting, then just call the routine. Here's how we called the routine when our page loaded:

<body onload="expandText('expand',-10,10,1,30);">

Pretty simple, right? And pretty powerful too. You'll notice that we are setting our letter-spacing in pixels ("px" in the code). You can change that to one of the other units of measurement if you like. If you wanted to do this in points, just change "px" to "pt" and the letter-spacing will be adjusted with points.

This core routine can be used to modify things other than letter-spacing and we'll be using it in some of our future examples. You might also modify it to contract text. It can be done with just 2 simple changes. Give it a try.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date