[bjslist] Beginners JavaScript Newsletter - March 2002

  • From: "Beginners Javascript" <bjs@xxxxxxxxxxxxxxx>
  • To: <bjslist@xxxxxxxxxxxxx>
  • Date: Tue, 26 Mar 2002 15:53:08 -0000

Beginners JavaScript Newsletter
(http://www.beginnersjavascript.co.uk)

Apologies all round for the lack of newsletters recently. This was due to
pressure
of work but things are now hopefully returning to normal!


***************************************************
Please visit our NEWSLETTER SPONSOR:
        http://www.onlinepriceguide.co.uk
Free UK price comparisons for BOOKs, CDs and DVDs
***************************************************


INTRODUCTION
============

Just a fairly short newsletter this time as I want to devote most of my
efforts to increasing the number of tutorials/articles available on the
site. As usual, I have big plans for upgrading the site and, subject to
unforeseen circumstances, there should be some new information posted within
the next week or two so be sure to visit the site regularly to keep up to
date with the latest changes.

Thanks to everyone who has sent in comments and suggestions but please keep
them coming - it all helps to make the site better if I know what people
like (and dislike!)

And now onto the real purpose of this newsletter...


Internet Explorer "Magic"
=========================

The focus of this newsletter is the ability provided by MS Internet Explorer
to dynamically modify style sheet settings from within JavaScript. Not only
is it fairly simple to achieve but, if used correctly, it can allow any of
your visitors who have impaired vision to read all the information you are
presenting.

This is accomplished by adding a short JavaScript function to your page and
then "calling" that function by means of the onMouseOver/onMouseOut events
on a HTML element. In this example I have used a <DIV> tag but, in theory,
most tags should allow you to do this sort of thing.

The 2 JavaScript functions should be added between the <HEAD> and </HEAD>
tags on your page to ensure it is loaded before the content appears
onscreen. If this is not done, it is technically possible (although
unlikely) that people could try to use the function before the browser knows
it even exists!

Here are the JavaScript functions:

<SCRIPT LANGUAGE="JavaScript">
<!--
function zoomit(id)
{
  id.style.zoom = "150%";
  id.style.filter = "DropShadow(Color=#d0d0d0, OffX=2, OffY=2, Positive=1)";
}

function normal(id)
{
  id.style.zoom = "normal";
  id.style.filter = "";
}

// -->
</script>


And once this is place, they can be called wherever you like in your page by
using some HTML like this:

<div id=div1 align=center onMouseOver="zoomit(div1);"
onMouseOut="normal(div1)">
<P>Move the mouse over this text and it will "zoom" (i.e. get bigger).
<BR>To restore it back to normal, move the mouse away</p>
</div>


And that's all there is to it ;-)


THE EXPLANATION
===============

The HTML tag containing the information to be zoomed is given a unique NAME
attribute (div1 in this case). This must be unique for the current page and
allows the JavaScript functions to directly modify the settings of the tag
as required.

Within the 2 functions, the CSS settings are directly modified using the
name passed into the function and the results are plain to see on the
screen. The function "zoomit" carries out the changes necessary to zoom the
information and the "normal" function returns everything to the way it was
originally.

The zoom property used in these functions can be set to either "normal", a
scale value (e.g. 1.5) or a percentage (e.g. 150%). In the functions shown
here I have also played around with another MS IE specific setting
("filter") but that will be covered in more depth in a future newsletter.


VARIATIONS
==========

A useful variation on this would be to "separate" the controlling area from
the content that is modified. For example, you could add the
onMouseOver/onMouseOut events to one DIV tag but pass through the ID for
another DIV tag elsewhere on your page. That way, when the mouse is moved
over/out  the image, the content of the DIV tag will be modified
accordingly.

Here is some example HTML for this variation:

<div id=div1 align=center onMouseOver="zoomit(div2);"
onMouseOut="normal(div2)">
<P>Move the mouse over this text and it will "zoom" the text shown below.
<BR>To restore it back to normal, move the mouse away from this text</p>
</div>
<BR>
<div id=div2 align=center>
<P>This section is the one that will change</p>
</div>

If you want a pointless variation, how about changing the action of the
"zoomit" function so that the text becomes too small to read - interesting
but completely pointless!


AND FINALLY
===========
All suggestions for topics/tips to be covered are gratefully received. The
current list includes frames, forms plus an introduction to JavaScript
classes but if you have something more urgent that you would like to see
then just drop me a line.

Regards
Richard
bjs@xxxxxxxxxxxxxxx
http://www.beginnersjavascript.co.uk

***********************************************************
Please visit our NEWSLETTER SPONSOR:
http://www.onlinepriceguide.co.uk
Free UK price comparisons for BOOKs, CDs and DVDs
***********************************************************



Other related posts:

  • » [bjslist] Beginners JavaScript Newsletter - March 2002