 JavaScript
Kit newsletter (issue 16) |
 |
JavaScript Kit/ Freewarejava Newsletter issue #16
JavaScript Kit URL: http://javascriptkit.com/
Freewarejava URL: http://freewarejava.com/
This newsletter is NEVER sent unsolicited. The reason you're receiving it is because you
voluntarily chose to subscribe (or someone else did it for you). In any event, to
unsubscribe, please follow the instructions located at the footnote on this newsletter.
------------------Newsletter begins here---------------------
Table of contents
1) New JavaScript tutorials added
2) Featured article- Using JavaScript with CSS
3) New scripts added to our archive!
4) New Java applet- QGoo Image applet
-------------------------------------------------------------
1) New JavaScript tutorials added
-Using JavaScript to statically display elements http://javascriptkit.com/javatutors/static.shtml
Learn how to use JavaScript to position an element (ie: image) so it's always visible on
the user's screen!
-Sending objects from one page to another using JavaScript http://javascriptkit.com/javatutors/send1.shtml
Alex Vincent, a long time visitor of JavaScript Kit, shows you several client side
techniques for sending information from one page to another using JavaScript.
-----------------------Sponsor Message-----------------------
http://www.SitePoint.com -> For all your Web
needs!
SitePoint is a network of Web sites providing FREE expert advice, articles, product
reviews, tutorials and Industry News for Web Developers and small businesses.
It's FREE Weekly Newsletter contains everything your need to know about building,
maintaining and marketing your Web site!
Subscribe now simply by sending an email to mailto:subscribe@sitepoint.com, or visit the
network at http://www.SitePoint.com
More than 25,000 subscribers can't be wrong!
-----------------------End of sponsor Message----------------
2) Featured article- Using JavaScript with CSS
Often times in a company, the JavaScript programmer and CSS (Cascading Style Sheet) expert
are two different people. As the former is whipping up some script to validate a form, the
later is tweaking with the line-height property to ensure that the site's text is spaced
out evenly. To put it more generally, JavaScript and CSS guys usually work independent and
oblivious of one another.
All this is changing, and fast. With DHTML acting as the binding glue, the once worlds
apart realm of scripting and page design is quickly coming together. JavaScript can
actually now be used to access and manipulate CSS values on the page, and consequently, a
page's look. In this featured article, we'll show you how.
In IE 4+ and NS 6+, JavaScript supports a new object, "style", which exists on
top of all display elements (ie: SPAN, TABLE, B etc). The object allows JavaScript
programmers read-write access to any CSS attribute in an element (with CSS defined), in
turn the element's appearance. Take a look at the following simple example, which changes
a text's color to red whenever the mouse moves over it:
<b style="color:green" onMouseover="this.style.color='red'"
onMouseout="this.style.color='green'">Test</b>
The key to achieving the above color-change is the "style" object, which, as you
can see, is accessed as a direct child of the element in question. All the CSS properties
of that element can then by manipulated simply by using the property's name (ie:
"color"), and assigning a valid CSS value to it (ie: "blue"). Note
that for properties with a hyphen, such as "background-color", the scripting
equivalent would be the name WITHOUT the hypen, and the first letter after the hypen
capitalized. In other words, to access, for example, the "background-color"
property of an element using JavaScript, the syntax is "style.backgroundColor"
Here is another, more meaty demonstration of the "style" object that causes the
border of a table to "flash." The example works in BOTH IE4+ and NS 6:
<table id="test" style="border:2px solid red">
<td>
Test border
</td>
</table>
<script language="JavaScript1.2">
//if browser supports the new DOM (IE 5+, NS 6+)
//set theobject to element "test" via DOM method
//else default to IE 4's method of retrieving an element
(document.getElementByID!='') ? theobject=document.getElementById("test")
: theobject=document.all.test
function flashborder(){
if (theobject.style.borderColor.indexOf("red")!=-1)
theobject.style.borderColor="green"
else
theobject.style.borderColor="red"
}
setInterval("flashborder()",1000)
</script>
The above code will alternate the border color of a table between red and green.
3) New scripts added to our archive !
http://javascriptkit.com/cutpastejava.shtml
-Drop down messages http://javascriptkit.com/script/script2/combomessage.shtml
If you've got lot of contents to show and not a lot of space, this is the perfect script
for you. It compacts and adds interactivity to any deserving information. Use the drop
down box to first select a topic, and corresponding content is automatically displayed
below it.
-Dynamic highlight link script http://javascriptkit.com/script/script2/highlight.shtml
Use this nifty script to add a highlight effect to any link when the mouse passes over it,
with the highlight color for each link fully customizable. Great way to add emphasis to
particular links on your site! Requires IE 4+ to see effect. Updated to work in NS 6 as
well!
-Break out of frames script http://javascriptkit.com/script/cut36.shtml
This script detects if your page is trapped inside someone else's frames, and
automatically breaks out of it! We use it on the frontpage of JavaScript Kit to avoid
entrapment by another site.
-Counter script http://javascriptkit.com/script/script2/counter.shtml
This is a fake- yet highly believable- JavaScript counter script. The script DOES actually
increment the visitor count, though it does so based on a fixed algorithm involving the
current date, not the actual number of visitors. Use it to add a fun, inflatable, and most
importantly, believable counter display to your site!
4) New Java applet- QGoo Image applet http://javascriptkit.com/java/qgoo.shtml
Ever feel like "smearing up" someone's picture/photograph? This fun image
manipulation applet can help you do that!
This concludes the 16th edition of the JavaScript Kit/Freewarejava.com newsletter.
To subscribe:
|
