This week, you will learn how to create a simple drop down menu, which is a 1 level drop-down menu with timeout effect. In the other words, it is similar to treelike unordered list.
I just wrote the simple script for the menu that will be displayed on the page:
HTML Code
<ul id=”menuStyle”>
<li><a
href=
“#” onmouseover=”
menuopen(’m1′)”
onmouseout=”closetime()”>Page 1</a>
<div id=“m1” onmouseover=“cancelclosetime()” onmouseout=“closetime()”>
<a href=”#”>Subpage 1A</a>
<a href=“#”>Subpage 1B</a>
<a href=“#”>Subpage 1C</a>
<a href=“#”>Subpage 1D</a>
<a href=“#”>Subpage 1E</a>
</div>
</li>
<li><a href=“#” onmouseover=“menuopen(’m2′)” onmouseout=“closetime()”>Page 2</a>
<div id=“m2″ onmouseover=“cancelclosetime()” onmouseout=”closetime()“>
<a href=“#”>Subpage 2A</a>
<a href=”#”>Subpage 2B</a>
<a href=“#”>Subpage 2C</a>
<a href=“#”>Subpage 2D</a>
</div>
</li>
<li><a href=”#” onmouseover=“menuopen(’m3′)” onmouseout=“closetime()”>Page 3</a>
<div id=”m3″ onmouseover=“cancelclosetime()” onmouseout=“closetime()”>
<a href=“#”>Subpage 3A</a>
<a href=“#”>Subpage 3B</a>
</div>
</li>
<li><a href=“#” onmouseover=“menuopen(’m4′)” onmouseout=“closetime()”>Page 4</a>
<div id=“m4″ onmouseover=“cancelclosetime()” onmouseout=“closetime()”>
<a href=“#”>Subpage 4A</a>
<a href=“#”>Subpage 4B</a>
</div>
</li>
<li><a href=“#” onmouseover=“menuopen(’m5′)” onmouseout=”closetime()”>Page 5</a>
<div id=“m5″ onmouseover=“cancelclosetime()” onmouseout=“closetime()”>
<a href=“#”>Subpage 5A</a>
<a href=“#”>Subpage 5B</a>
<a href=“#”>Subpage 5C</a>
</div>
</li>
</ul>
As you can see, I’ve used unordered list for menu items. The event handlers that I used to control the show and hidden layer are onmouseover and onmouseout.
CSS Code
Refer to http://codebasic.net/dropdownmenu.css
See more…
(more…)
|
No Comments » | 1,164 views
This tutorial is to teach you how to write a script to record the last visit of your visitor and displays it upon their return. If this is their first visit, then a welcome message is displayed. Otherwise the message with last time visit will be displayed.
You need to make use of cookie, which is stored on the visitor’s computer. Each time the same computer requests a page; it will send the cookie too.
In this example, I create a cookie with an expiration date of 1 day and checks to see if cookie is set, or it has been greater or equal to 1 day.
Create and Store a Cookie
Firstly, you need to create a function that stores the cookie name, the value of the cookie, and the number of days until the cookie expires in a variable.
(more…)
|
No Comments » | 701 views
Sometimes we to do some validation that allow to process user input client side. This is because it will save the user time if he/she is notified of errors before submitting the form. This is the sample of my simple JavaScript code for validating URL, using regular expression:
<script language=”javascript”>
function URLValidate(v) {
var regex = /http:\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{3}/;
alert(regex.test(v));
}
</script>
<body>
<form>
<input type=”text” size=”20″ id=”url”/>
<input type=”button” value=”Validate” onClick=”URLValidate(document.getElementById(’url’).value);”/>
</form>
</body>
However, this example does not cover all the cases, it only can validate the URL start with http://, if the URL start with www, then it will return false. By right, it should not be like that.
(more…)
|
No Comments » | 1,976 views
In this tutorial, I’ll show you how to create a vertical scrolling marquee using JavaScript. Below is the demonstration of what I’ll be creating:
<div style=”font-family:Arial;font-size:11px;width:160px;”>
<div style=”color:#14A9D6;margin-bottom:5px” align=”center”>
Vertical Scrolling Marquee
</div>
<div style=”color:#EF6007″ align=”center”>
<marquee bgcolor=”#E5E5E5″ scrollamount=”2” direction=”up” loop=”true” height=”150px”>
<center><strong> More Exciting<br> Tutorials<br>
<font color=”red”>Coming Soon !!!<br><br>So, keep an eye <br>on upcoming tutorials.</font>
</strong></center>
</marquee>
</div>
</div>
Here I create an outer <div>. With this basic framework of the scroller created, lets see the script that will scroll the <div> upwards to create a vertical content scroller.
Click here to see the sample.
(more…)
|
7 Comments » | 8,414 views
I have written the script that can be used for validation of bad words or so called dirty words. This filter will detect the selected curse words in the English language. There are sample of word list that I have tried to filter out in this tutorial.
The words that have to be filtered must be added to the variable badWords. When the user types the word and press the Filter button, if the text contains any word that is present in the variable badWords, then it will go to call the function to return the replaced value. In this case, I used ‘*’ to replace those bad words.
My Code Here:
(more…)
|
6 Comments » | 3,336 views