Lair360 Blog

Version: 1.3
Revision: 34 Build 12

JavaScript – Advance Ads Rotator v1.3

Introduction: for the past hours, I was revising my ‘JavaScript Ads Rotator’. But, strangely enough, I was able to compressed and remove half of the junk from my previous script. Also, this script can resize all of your images / banners automatically.

If you want to use this new script, please feel free to copy and use it on your website, blogs or forum. However, please don’t remove any of my comments, especially my copyright regulations and rules!

Thank for your support!

Lair360 ~ Administrator

1.] Download notepad++ from the original author or from another source.
——————————-

http://sourceforge.net/projects/notepad-plus/

http://filehippo.com/download_notepad/

——————————-

2.] Copy this ‘JavaScript’ source code and save it as “ad-rotator.js”.

File: ad-rotator.js
—Copy Source Code—

// Version: 1.13
// Revision: 36 Build 21
// Copyrighted by Lair360
// Url: lair360.co.uk/blog/
// *******************************
var width   = "125";        // Width of Advertisements
var height  = "125";        // Height of Advertisements
var target  = "_blank";     // Target window to open the ads
// *******************************
var image = new Array()
// Write down the source urls of ad images
image[0]='125x125.gif';
image[1]='125x125.gif';
image[2]='125x125.gif';
image[3]='125x125.gif';
image[4]='125x125.gif';

var links = new Array()
//Write link to ads respectively
links[0]='link0';
links[1]='link1';
links[2]='link2';
links[3]='link3';
links[4]='link4';

var text = new Array()
//Write text description to ads respectively
text[0]='text0';
text[1]='text1';
text[2]='text2';
text[3]='text3';
text[4]='text4';
// *******************************
var s = Math.floor(Math.random()*image.length & text.length);
document.write('<a href="'+links[s]+'" target="'+target+'"><img src="'+image[s]+'" width="'+width+'" height="'+height+'" alt="'+text[s]+'" border="0"></a>');

—End Source Code—

3.] Finally, you’ll need to add this ‘html – string’ into your webpage.

—Copy Source Code—

<script type="text/javascript" language="Javascript" src="ad-rotator.js"></script>

—End Source Code—

4.] Save your webpage and exit. After that, just alter the above JScript with your own images and links.

5.] Finish!

Copyrighted By Lair360

Version: 34.3
Revision: 132 Build 32

JavaScript ~Digital Clock

Introduction: this little project was designed in my IT college course.
It’s a little “LCD clock”, which was made from JavaScript and CSS stylesheet.
The project was created in my own time (lunch period) and it was a success…

Copyright Notice: You can copy the source code and use it on your own website, blog and forums. However, you must not distribute these source code to other users without my permission! Also, please don’t alter or remove my copyright + author. This is because, this source code are not yours!!

1.] Download notepad++ from the original author or from a mirror and install the software.
——————————-

http://sourceforge.net/projects/notepad-plus/

http://filehippo.com/download_notepad/

——————————-

2.] Copy these code into your notepad and save them into the same folder.
But, please don’t change the name of the files! If you do this, the codes will be broken!

a.] Copy this ‘JavaScript’ source code and save it as “Js_engine.js” [without the quotes].

File Name: Js_engine.js
—Copy Source Code—

/*LCD Clock v2*/
/*http://lair360.co.uk*/
/*Copyrighted By Lair360*/

function show1(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("digital-clock"): document.all.digital-clock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="PM"
if (hours<12)
dn="AM"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML=""+ctime+""
setTimeout("show1()",1000)
}
window.onload=show1

—End Source Code—
Copyright 2001-2008 Lair360

b.] Copy this ‘CSS Stylesheet’ source code and save it as “CSS_File.css” [without the quotes].

Notice: please don’t modify the “min-width” lower than the original “width”.
If you modify this line, the clock will look bad! Also, please keep the width above 95px for a better view…

File Name: CSS_File.css
—Copy Source Code—

#digital-clock.styling {
width: 95px;
min-width: 95px;
color: red;
background-color: black;
text-align: center;
font-size: 12px;
font-weight: normal;
font-family: BankGothic Md BT, Helvetica, Arial, Geneva;
border-width: 2px;
border-style: ridge;
border-color: red;
padding: 2px;
}

—End Source Code—
Copyright 2001-2008 Lair360

c.] Copy this ‘html’ source code and insert it to your index page or another page.

Notes: the “script” and “link” must be in the “head” element and the “span” tag must be in the body element…

File Name: Template.html
—Copy Source Code—

<head>
<link rel="stylesheet" type="text/css" href="CSS_File.css"></link>
<script type="text/javascript" src="Js_engine.js"></script>
</head>
<body>
<span id="digital-clock" class="styling"></span>
</body>

—End Source Code—
Copyright 2001-2008 Lair360

Notes: if you want every parts of the source code in one file, you can use this method which is shown below…

Tips: copy everything; paste it into your notepad and save it as a html file.

File Name: Single_Template.html
—Copy Source Code—

<head>
<script type="text/javascript">
<!--
/*LCD Clock v2*/
/*http://lair360.co.uk*/
/*Copyrighted By Lair360*/

function show1(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("digital-clock"): document.all.digital-clock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="PM"
if (hours<12)
dn="AM"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML=""+ctime+""
setTimeout("show1()",1000)
}
window.onload=show1
//-->
</script>
<style type="text/css">
<!--
#digital-clock.styling {
width: 95px;
min-width: 95px;
color: red;
background-color: black;
text-align: center;
font-size: 12px;
font-weight: normal;
font-family: BankGothic Md BT, Helvetica, Arial, Geneva;
border-width: 2px;
border-style: ridge;
border-color: red;
padding: 2px;
}
-->
</style>
</head>
<body>
<span id="digital-clock" class="styling"></span>
</body>

—End Source Code—
Copyright 2001-2008 Lair360

Important notice: if you know what you’re doing with these codes, then please…don’t hesitate to experiment them! But, you must keep these codes to yourself and never distribute them to others without proper permission!

Version: 32.2
Revision: 13 Build 21

JavaScript Tutorial – Part 1

Introduction: this tutorial will guide you to use “Script” codes in a formal fashion.
It will also help you to use “JavaScript” in a correct format.

————————————————–

<SCRIPT …> designates a script section of the page.
The contents of <SCRIPT …> are run using the scripting language set by the required “TYPE” attribute.

Example: the following <SCRIPT …> sets a short JavaScript, by far the most common scripting language.

<SCRIPT TYPE="text/javascript">
<!--
document.write("right now: " + new Date());
//-->
</SCRIPT>

The codes were wrapped in “JavaScript – Text” and it will not conflict with other source codes…

Notes: It is a popular but inaccurate belief that the LANGUAGE attribute is required for <SCRIPT …>. Furthermore, “LANGUAGE” has never been a required attribute and has not been the standard way to indicate scripting language for several years.

Important: <SCRIPT …> elements should always begin with <!– on the first line.
The last line should begin with the line-level comment string for the scripting language (// in JavaScript) followed by –>, as in the example above.