Sample JavaScript Effects

TOPIC: First the concept, then followed with the directions:

HOW TO HAVE A PopUp TOOLTIP come up below and to the right of words ON MOUSEOVER:
This is a no-javascript, PURE CSS way of doing it. In the HTML :

Instead of having the [words to have a tooltip] BY THEMSELVES, replace those words
as indicated:


[words HAVING tooltip][tooltip ITSELF]


In other words: (just to say it in a little different way):


<- before text -- after text ->[tooltip ITSELF]


[ While you can put anything you want in the tooltip, links are not practical because you will find
you have to mouseOUT to go over the "tooltip", making it disappear! You can have images,
though, IF they are less than 200px wide (and less than about 350px in height) -- see first
teal-colored text on the home page, for an example. ]

--------------------------

** DETAILS**: how it works and how to make this happen!!:

The following CSS rules and classes allow you to make pure CSS (no JavaScript) tooltips,
very similar to the other recipe I sent you (which you put in your code snippets).

WDC.css (this goes in the web page HEAD):

.tooltip:hover, .tooltipfade:hover {
text-decoration:none;
position :relative; }
.tooltip span {
display:none; }
.tooltip:hover span {
display :block;
position :absolute;
top :40px;
left :0;
white-space:nowrap;
background :#ffffdd;
border :1px solid #888888;
color :#444444;
font-family:Arial, Helvetica, sans-serif;
font-size :8pt;
line-height:95%;
padding :2px 5px; }
.tooltipfade span {
position :absolute;
white-space:nowrap;
font-family:Arial, Helvetica, sans-serif;
font-size :8pt;
line-height:95%;
padding :2px 5px;
top :0;
top :-10000px\0; /* IE hack to keep it out of the way */
left :0;
background :#ffffdd;
border :1px solid #888888;
color :#444444;
opacity :0;
z-index :-1000;
filter :alpha(opacity = '0'); }
.tooltipfade:hover span {
-moz-transition :all .5s linear;
-webkit-transition:all .5s linear;
-o-transition :all .5s linear;
-ms-transition :all .5s linear;
transition :all .5s linear;
opacity :1;
filter :alpha(opacity = '100');
top :40px;
z-index :1000; }

Here is code using the above CSS (non-functional, until you save the text
as its own html file ) :
[ NOTE: tooltipfade is an alternative class name you can use instead of tooltip, for
greater flexibility; but, you can use either class name. The example BELOW uses tooltipfade.
One advantage of tooltipfade is that the span widths are NOT set, so the widths vary as need
(just like the heights of the tooltips did in the other recipe) BUT you must have 's in
the text so THERE ARE LINE BREAKS. (Still that may be easier than making multiple
CSS classes for different widths, which is the variations you have to do to do things the
tooltip-class-name-way. ) [ The way tootipfade works is the with of the span block is
determined by longest UNBROKEN line length or browser view window width -- whichever is less.] ]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=8" />

<html>
<head>
<meta content="en-us" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Example 38</title>
<link rel='stylesheet' type='text/css' href='WDC.css' />

</head>
<body>
<a href='/'>Home</a> |
<a href='/news/'>News</a> |
<a class='tooltip' href='/links/'>LinksClick here for a 
collection of great links</a> 

A planet is a celestial body orbiting a star or stellar remnant that is
massive enough to be rounded by 
its own gravityGravitation, or gravity,
is one of the four fundamental interactions of nature (along 
with the strong force, electromagnetism and the weak force)
, is not massive enough to cause thermonuclear fusion, and (etc...)
</body>
</html>

----------------------------------
----------------------------------

ALSO TRY AN AUTO-GRAPHING FACILITY:

http://mynichecomputing.org/makeChartb.html

NOW: If you want to do photo sharing from Flickr, all you need to do is, WITHIN ANY PRODUCTION,

make a link*, perhaps showing the words "My Recent Photos", and then make those words a link to
http://mynichecomputing.org/getFlickr.php?username=[yourUsername]
-- replacing [yourUsername] with your actual Flickr username. THAT'S IT !!

[* Footnote: In the link, it might be better is you also add the attribute: target="_blank" .]

What will happen is that when a visitor sees this link in your production and clicks it:
A PAGE WILL COME UP WITH LINKS TO **YOUR** 20 MOST RECENT PHOTOS.

----------------------------------
----------------------------------

MAKE FRIENDLY DATE-TEXTBOXES : Here is a link to a sample and how you can get the code and use it.

OF COURSE, LIKE EVERYTHING ELSE ON THIS SITE IS *FREE* AND you are provided with a download link to get your own copy.
(The "cost" to use my thing is 2K of code and the code in the html for each
instance of a date textbox is identical.)

At the end of providing what looks like a valid input,
my snippet provides feed back that you enter a particular month, day,
year -- allowing Europeans to correct inputs not formatted "correctly"

----------------------------------
----------------------------------

Also see: THIS (<- NOTE: This is advanced stuff and only for people who know how to write javaScript.)

animation.htm animationMessage.htm changinBanner.htm clickSubMenus.htm contextMenu.htm custPopUp.htm disappearImg.htm flipContent.htm graph.htm JSbreadcrumbs.htm LBpic.htm	LBslideShow.htm MOeffect.htm MOswitch.htm multiSlideDowns.htm scrollText.htm slidedown.htm slideUpIn.htm textBGchange.htm textUnscramble.htm typeText.htm custAlert.htm
picEnlarge.htm -- this one is pure CSS	pureCSSmenus.htm

Sample JavaScript (some CSS) Effects(NOTE: all samples open in the same SECOND window -- which you may have to click manually to give focus)

Sample JavaScript (some CSS) Effects
(NOTE: all samples open in the same SECOND window --
which you may have to click manually to give focus)