 |
 |
|
|
|||||||
| Scripts and Tools Share your free scripts , tools , icons, fontz, screen savers , etc here. |
 |
|
|
Thread Tools | Display Modes |
|
|
|
|
|
|||||||
| Scripts and Tools Share your free scripts , tools , icons, fontz, screen savers , etc here. |
|
|
|
Thread Tools | Display Modes |
|
#51
05-11-2010, 12:27 AM
|
|||
|
|||
Trailing Clock Cursor
Just a neat little trick, cool cursors mouse, a display of date/time around the animated mouse.... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Copy & Paste JavaScript code below in your HEAD section JavaScript Code:
<SCRIPT>
dCol='BLUE';//date colour.
fCol='RED';//face colour.
sCol='BLUE';//seconds colour.
mCol='BLUE';//minutes colour.
hCol='RED';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;
//Alter nothing below! Alignments will be lost!
d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY");
m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6; //dieu chinh toc do di chuyen theo mouse
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7; //di chuyen vi tri kim theo chieu doc
HandX=-2.5; // di chuyen vi tri kim theo chieu ngang
scrll=0;
step=0.06; // dieu chinh toc do xoay cua vong ngay thang, so cang nho toc do cang cham, 0: khong xoay
currStep=0; //xoay diem dat cua vong ngay thang
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
</SCRIPT>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
|
|
#52
05-13-2010, 01:34 AM
|
|||
|
|||
|
How to create AJAX Notifications with jQuery
It'll be very easy to view the type of this notification if you're using <i>GMail</i> one the web based environment. Today, the author of this post guides you to build a simple application for display... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup
|
|
#53
05-13-2010, 10:25 AM
|
|||
|
|||
|
AJAX Navigation Menu
Use this JavaScript instead of frames. When a visitor clicks on a [Only Registered users can see links . Click Here To Register...], the content of that link is inserted into the page without a refresh. When a page doesn... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place JavaScript below in your HEAD section JavaScript Code:
<script language="javascript">
// Created by: Michael :: http://www.posters-bestellen.nl
var please_wait = null;
function open_url(url, target) {
if ( ! document.getElementById) {
return false;
}
if (please_wait != null) {
document.getElementById(target).innerHTML = please_wait;
}
if (window.ActiveXObject) {
link = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
link = new XMLHttpRequest();
}
if (link == undefined) {
return false;
}
link.onreadystatechange = function() { response(url, target); }
link.open("GET", url, true);
link.send(null);
}
function response(url, target) {
if (link.readyState == 4) {
document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website ASAP and give him the fallowing errorcode: " + link.status;
}
}
function set_loading_message(msg) {
please_wait = msg;
}
</script>
HTML Code:
<script type="text/javascript">
<!--
/* This script and many more are available free online at
Created by: Michael :: http://www.posters-bestellen.nl */
set_loading_message("Please wait while the page is opening....");
//-->
</script>
<table>
<tr>
<td valign=top width=150>
<H5>My Navagation links</H5>
<a href="javascript:void(0)" onclick="open_url('page-1.html','my_site_content');">
Go to page 1</a><br>
<a href="javascript:void(0)" onclick="open_url('page-2.html','my_site_content');">
Go to page 2</a><br>
<a href="javascript:void(0)" onclick="open_url('page-3.html','my_site_content');">
Go to page 3</a><br>
<a href="javascript:void(0)" onclick="open_url('page-4.html','my_site_content');">
Go to page 4</a><br>
<a href="javascript:void(0)" onclick="open_url('xxxx.html','my_site_content');">
Broken Link</a><br>
</td>
<td valign=top>
<div id="my_site_content">
</div>
</td>
</tr>
</table>
|
|
#54
05-15-2010, 02:58 PM
|
|||
|
|||
|
DHTML Fading Animation Image
Enhancing [Only Registered users can see links . Click Here To Register...] on your website with this image rotator plus smooth dynamic [Only Registered users can see links . Click Here To Register...] (fade-in-fade-out). A very great anima... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Use JavaScript code below to setup the script JavaScript Code:
<SCRIPT language=javaScript>
<!-- Beginning of JavaScript -
sandra0 = new Image();
sandra0.src = "photo1.jpg";
sandra1 = new Image();
sandra1.src = "photo2.jpg";
sandra2 = new Image();
sandra2.src = "photo3.jpg";
var i_strngth=1
var i_image=0
var imageurl = new Array()
imageurl[0] ="photo1.jpg"
imageurl[1] ="photo2.jpg"
imageurl[2] ="photo3.jpg"
function showimage() {
if(document.all) {
if (i_strngth <=110) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth+10
var timer=setTimeout("showimage()",100)
}
else {
clearTimeout(timer)
var timer=setTimeout("hideimage()",1000)
}
}
if(document.layers) {
clearTimeout(timer)
document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")
document.close()
i_image++
if (i_image >= imageurl.length) {i_image=0}
var timer=setTimeout("showimage()",2000)
}
}
function hideimage() {
if (i_strngth >=-10) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth-10
var timer=setTimeout("hideimage()",100)
}
else {
clearTimeout(timer)
i_image++
if (i_image >= imageurl.length) {i_image=0}
i_strngth=1
var timer=setTimeout("showimage()",500)
}
}
// - End of JavaScript - -->
</SCRIPT>
HTML Code:
<BODY onload=showimage()> <DIV id=mainbod style="POSITION: relative; VISIBILITY: visible"></DIV> <DIV id=testimage style="POSITION: relative; VISIBILITY: visible"></DIV> </BODY>
|
|
#55
05-17-2010, 01:39 AM
|
|||
|
|||
|
JavaScript Countdown Timer solution in OOP
This JavaScript code is the new & unique solution to create a countdown timer on your web pages; it's really new in the look of web developers and users. This JavaScript countdown timer is very ea... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: CSS below for styling thescript, place it into HEAD section CSS Code:
<style type="text/css">
body{
font-family:arial,sans-serif;
color:#000;
background:#fff;
text-align:center;
}
input{
font-size:20px;
padding:5px;
border:none;
background:#69c;
margin:0 10px;
}
input#c[disabled]{
background:#eee;
}
#display{
font-weight:bold;
margin:20px auto;
width:720px;
font-size:350px;
}
.final{
color:#c00;
}
.over{
color:#c00;
text-decoration:blink;
}
#preferences{
margin-top:.5em;
background:#ccc;
border-top:1px solid #999;
padding:2em;
font-size:1em;
text-align:left;
}
#preferences p {
width:49%;
float:left;
padding:5px 0;
margin:0;
position: absolute;
top: 0px;
}
#preferences input{
font-size:20px;
padding:5px;
border:1px solid #999;
background:#fff;
margin:0 2px;
}
#preferences label{
padding-top:10px;
width:30%;
float:left;
display:block;
padding-right:1em;
}
#preferences input#set{
font-size:20px;
padding:5px;
width:600px;
margin:0 auto;
border:none;
background:#69c;
clear:both;
display:block;
}
#preferences input#set:hover{
background:#ffc;
}
</style>
JavaScript Code:
<script>
countdown = function(){
/*
configuration of script, properties with
values and labels will become form elements!
*/
var cfg = {
displayID:'display',
preferencesID:'preferences',
finalClass:'final',
overClass:'over',
initialText:{
value:'2:00',
label:'Initial Text'
},
seconds:{
value:2*60,
label:'Time in Seconds'
},
finalCountdown:{
value:30,
label:'Warning start'
},
pauseLabel:{
value:'pause',
label:'Pause Text'
},
resumeLabel:{
value:'resume',
label:'Resume Text'
},
resetLabel:{
value:'reset',
label:'Reset Text'
},
startLabel:{
value:'start',
label:'Start Text'
}
};
/* presets */
var seconds = cfg.seconds.value;
var interval = null;
var secs = null;
var startTime = null;
var realsecs = null;
/* create display */
var display = document.createElement('div');
display.id = cfg.displayID;
document.body.appendChild(display);
display.innerHTML = cfg.initialText.value;
/* create form with buttons */
var form = document.createElement('form');
document.body.appendChild(form);
var startButton = createInput('button','startButton',cfg.startLabel.value);
startButton.onclick = startCountDown;
form.appendChild(startButton);
var pauseButton = createInput('button','pauseButton',cfg.pauseLabel.value);
pauseButton.onclick = pauseCountDown;
pauseButton.disabled = true;
form.appendChild(pauseButton);
var resetButton = createInput('button','resetButton',cfg.resetLabel.value);
resetButton.onclick = resetCountDown;
form.appendChild(resetButton);
/* create preferences panel */
var preferencesPanel = document.createElement('div');
preferencesPanel.id = cfg.preferencesID;
preferencesPanel.style.display = 'none';
var firstForm = document.getElementsByTagName('form')[0];
firstForm.appendChild(preferencesPanel);
var button = createInput('button',null,'preferences');
button.onclick = togglePreferences;
preferencesPanel.parentNode.insertBefore(button,preferencesPanel);
/* create preferences form */
var prefs = [];
for (var i in cfg){
if(cfg[i].value){
prefs.push(i);
var p = document.createElement('p');
p.appendChild(createLabel(cfg[i].label,i));
p.appendChild(createInput('text',i,cfg[i].value));
preferencesPanel.appendChild(p);
}
}
var setPreferencesButton = createInput('button','set','set');
preferencesPanel.appendChild(setPreferencesButton);
setPreferencesButton.onclick = setPreferences;
function setPreferences(){
for(var i=0,j=prefs.length;i<j;i++){
cfg[prefs[i]].value = document.getElementById(prefs[i]).value;
}
resetCountDown();
preferencesPanel.style.display = 'none';
}
function togglePreferences(){
preferencesPanel.style.display = preferencesPanel.style.display === 'none' ? 'block' : 'none';
}
function startCountDown(){
pauseButton.disabled = false;
startButton.disabled = true;
startTime = new Date();
interval = setInterval(countdown.doCountDown, 100);
}
function doCountDown(){
realsecs = Math.ceil(seconds - (new Date() - startTime) / 1000);
var mins = parseInt(realsecs / 60);
var secs = realsecs % 60;
display.innerHTML = parseInt(mins) + ':'+ (secs < 10 ? '0' : '') +(secs % 60);
display.className = (realsecs > cfg.finalCountdown.value) ? '' : cfg.finalClass;
if(realsecs===0){
display.className = cfg.overClass;
window.clearTimeout(interval);
}
}
function resetCountDown(){
window.clearTimeout(interval);
startButton.disabled = false;
pauseButton.disabled = true;
display.innerHTML = cfg.initialText.value;
interval = null;
seconds = cfg.seconds.value;
pauseButton.value = cfg.pauseLabel.value;
resetButton.value = cfg.resetLabel.value;
startButton.value = cfg.startLabel.value;
display.className = '';
}
function pauseCountDown(){
if(pauseButton.value === cfg.pauseLabel.value){
seconds = realsecs;
window.clearTimeout(interval);
pauseButton.value = cfg.resumeLabel.value;
} else {
startCountDown();
pauseButton.value = cfg.pauseLabel.value;
}
}
function createInput(type,id,value){
var input = document.createElement('input');
input.value = value;
input.type = type;
if(id){
input.id = id;
}
return input;
}
function createLabel(text,id){
var label = document.createElement('label');
label.appendChild(document.createTextNode(cfg[id].label));
label.htmlFor = id;
return label;
}
return {doCountDown:doCountDown};
}();
</script>
|
|
#56
05-19-2010, 12:53 AM
|
|||
|
|||
|
Streaming Horizontal Banner
Use this [Only Registered users can see links . Click Here To Register...] to make a a [Only Registered users can see links . Click Here To Register...] on your web page. If do not view the source code, maybe you will think tha... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Use CSS code below for styling the script CSS Code:
<style type="text/css">
<!--
#slideCont {
border:solid 1px #000;
text-align:center;
}
#slideCont img {
margin: 5px;
}
-->
</style>
JavaScript Code:
<script type="text/javascript">
<!--
/*
-----------------------------------------------
Streaming banners - v.1
(c) 2006 www.haan.net
You may use this script but please leave the credits on top intact.
Please inform us of any improvements made.
When usefull we will add your credits.
------------------------------------------------ */
<!--
function clip() {
// width of the banner container
var contWidth = 425;
// height of the banner container
var contHeight = 90;
var id1 = document.getElementById('slideA');
var id2 = document.getElementById('slideB');
id1.style.left = parseInt(id1.style.left)-1 + 'px';
document.getElementById('slideCont').style.width = contWidth + "px";
document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
id2.style.display = '';
if(parseFloat(id1.style.left) == -(contWidth)) {
id1.style.left = '0px';
}
setTimeout(clip,25)
}
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
clip();
});
//-->
</script>
HTML Code:
<div id="slideCont" style="overflow: hidden; position: relative; z-index: 1; width: 425px; height: 90px; top: 0px; clip: rect(auto, 425px, 90px, auto);"> <div id="slideA" style="overflow: hidden; position: absolute; z-index: 1; top: 0px; left: -194px; width: 850px; height: 90px;"> <div style="float: left;" id="innerSlideA"> <a href="http://www.apache.org/"><img src="/logos/logo_jsbank.jpg" border="0" height="44" width="126"></a> <a href="http://www.haan.net/"><img src="/logos/gif_logojsb2.gif" border="0" height="60" width="120"></a> <a href="http://www.mysql.com/"><img src="/logos/jsb_banner.gif" border="0" height="44" width="126"></a> </div> <div id="slideB" style="overflow: hidden; position: relative; z-index: 1; top: 0px; left: 0px; width: 425px; height: 90px;"> <a href="http://www.apache.org/"><img src="/logos/logo_jsb.jpg" border="0" height="44" width="126"></a> <a href="http://www.haan.net/"><img src="/logos/logo_jsb__88x31.gif" border="0" height="60" width="120"></a> <a href="http://www.mysql.com/"><img src="/logos/logo_jsb_120x60.jpg" border="0" height="44" width="126"></a> </div> </div> </div>
|
|
#57
05-20-2010, 12:26 AM
|
|||
|
|||
|
Expanding Navigation Menu onClick
This is a simple expand collapse menu. The anchor tags that expand each menu are added by [Only Registered users can see links . Click Here To Register...], so the HTML code doesn't contain any event handlers or unnecessary HTML tags. The ... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place CSS below in your HEAD section CSS Code:
<style type="text/css">
ul#menu {
width: 100px;
list-style-type: none;
border-top: solid 1px #b9a894;
margin: 0;
padding: 0;
}
ul#menu ol {
display: none;
text-align: right;
list-style-type: none;
margin: 0;
padding: 5px;
}
ul#menu li,
ul#menu a {
font-family: verdana, sans-serif;
font-size: 11px;
color: #785a3c;
}
ul#menu li {
border-bottom: solid 1px #b9a894;
line-height: 15px;
}
ul#menu ol li {
border-bottom: none;
}
ul#menu ol li:before {
content: "-";
}
ul#menu a {
text-decoration: none;
outline: none;
}
ul#menu a:hover {
color: #539dbc;
}
ul#menu a.active {
color: #be5028;
}
</style>
JavaScript Code:
<script language="javascript">
/*
Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham) */
// Node Functions
if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter)) result[result.length] = children[i];
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}
if(document.createElement) window.onload = initMenu;
</script>
HTML Code:
<ul id="menu">
<li>Menu Item 1
<ol>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
</ol>
</li>
<li>Menu Item 2
<ol>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
<li><a href="#">Sub Item 2.3</a></li>
</ol>
</li>
<li>Menu Item 3
<ol>
<li><a href="#">Sub Item 3.1</a></li>
<li><a href="#">Sub Item 3.2</a></li>
<li><a href="#">Sub Item 3.3</a></li>
</ol>
</li>
<li>Menu Item 4
<ol>
<li><a href="#">Sub Item 4.1</a></li>
<li><a href="#">Sub Item 4.2</a></li>
<li><a href="#">Sub Item 4.3</a></li>
</ol>
</li>
<li>Menu Item 5
<ol>
<li><a href="#">Sub Item 5.1</a></li>
<li><a href="#">Sub Item 5.2</a></li>
<li><a href="#">Sub Item 5.3</a></li>
</ol>
</li>
</ul>
|
|
#58
05-22-2010, 12:51 AM
|
|||
|
|||
|
Waving Text Trailer
This JavaScript codecan be used to be that a mouse cursor pointer was just a mouse cursor. Since DHTML came along and gave programmers the ability to track the precise coordinates of the mouse, it was... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place CSS below in your HEAD section CSS Code:
<STYLE>.spanstyle {
FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: black; FONT-FAMILY: Verdana; POSITION: absolute; TOP: -50px
}
</STYLE>
JavaScript Code:
<SCRIPT>
/*
Cursor Trailor Text- By Peter Gehrig (http://www.24fun.ch/)
Permission given to Dynamicdrive.com to feature script in it's archive.
*/
var moves=17
var tracker=0
var xpos
var ypos
var cursortext='JavaScriptBank.com - Bank of over 2000+ free JavaScript'
cursortext=cursortext.split("")
function setup() {
if (tracker==1 && document.all) {
for (i=cursortext.length-1; i>=1; i--) {
xposition[i]=xposition[i-1]+moves
yposition[i]=yposition[i-1]
}
xposition[0]=xpos+moves
yposition[0]=ypos
for (i=0; i<cursortext.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xposition[i]
thisspan.posTop=yposition[i]
}
}
else if (tracker==1 && document.layers) {
for (i=cursortext.length-1; i>=1; i--) {
xposition[i]=xposition[i-1]+moves
yposition[i]=yposition[i-1]
}
xposition[0]=xpos+moves
yposition[0]=ypos
for (i=0; i<cursortext.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xposition[i]
thisspan.top=yposition[i]
}
}
var timer=setTimeout("setup()",40)
}
function MouseMovement(e)
{
xpos = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
ypos = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
tracker=1
}
var xposition=new Array()
for (i=0;i<=cursortext.length-1;i++) {
xposition[i]=-50
}
var yposition=new Array()
for (i=0;i<=cursortext.length-1;i++) {
yposition[i]=-50
}
/*hieu ung di chuyen chuot*/
for (i=0;i<=cursortext.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(cursortext[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = MouseMovement;
</SCRIPT>
HTML Code:
<BODY onload=setup()> </body>
|
|
#59
05-24-2010, 12:43 AM
|
|||
|
|||
|
Trailing Kisses and Lips
Spreading the love on your site with this JavaScript! It produces big kisses and lips behind your mouse pointer as it moves, each disappearing only after a noticeable delay (set to 1 second in demo). ... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place CSS below in your HEAD section CSS Code:
<style type="text/css">
<!--
h1 {
color:#cc3333;
font-family:"Comic Sans MS",Helvetica;
}
h3 {
color:#993333;
font-family:"Comic Sans MS",Helvetica;
}
.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
}
-->
</style>
JavaScript Code:
<script language="JavaScript1.2" type="text/JavaScript">
<!-- cloak
//Kissing trail- By dij8 (dij8@dij8.com)
//Modified by Dynamic Drive for bug fixes
//Visit http://www.dynamicdrive.com for this script
kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1000 //duration images stay on screen (in milliseconds)
kissSpacer = 50 //distance to move mouse b4 next heart appears
theimage = "lips_small.gif" //the 1st image to be displayed
theimage2 = "small_heart.gif" //the 2nd image to be displayed
//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {
posX = getMouseXPos(e)
posY = getMouseYPos(e)
if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
showKisser(posX,posY)
lastX = posX
lastY = posY
}
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageX+10)
} else {
return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
}
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageY)
} else {
return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
}
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
if (curKisser >= kisserCount) {curKisser = 0}
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
eval("clearTimeout(kissDelay" + curKisser + ")")
}
eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}
function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
document.captureEvents(Event.MOUSEMOVE)
document.onMouseMove = doKisser
} else {
document.onmousemove = doKisser
}
}
window.onload=kissbegin
// decloak -->
</script>
HTML Code:
<script language="JavaScript" type="text/JavaScript">
<!-- cloak
// Add all DIV's of hearts
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>n')
document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>n')
}
}
// decloak -->
</script>
Files [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...]
|
|
#60
05-26-2010, 12:58 AM
|
|||
|
|||
|
Slideshow with zoom-in-zoom-out-animation
Slideshow with great transitoon effect. Each [Only Registered users can see links . Click Here To Register...] has a [Only Registered users can see links . Click Here To Register...] of its own. Netscape-users will see a simple image-rotation-ef... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place HTML below in your BODY section HTML Code:
<BODY onload=initiate()>
<SCRIPT>
<!-- Beginning of JavaScript -
// Slideshow with zoom-in-zoom-out-animation
// CONFIGURATION:
// 1. Create your images (gif or jpg). They should have the same width.
// Put those images in the same directory as the HTML-file.
// You can add as many images as you like.
// 2. Copy the script-block and paste it into head-section of your HTML-file..
// 3. Copy the span-blocks with the id "imgcontainer" into the body-section
// of your HTML-file.
// 4. Insert 'onLoad="initiate()"' into the body tag.
// 5. Configure the varibales below.
// The width of your images (pixels). All pictures should have the same width.
var imgwidth=256
// The horizontal and vertical position of the images (pixels).
var pos_left=10
var pos_top=10
// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="logojs.gif"
imgname[1]="photo3.jpg"
imgname[2]="photo4.jpg"
// Where should those images be linked to?
// Add an URL for each image.
// If you don't want to add an URL just write '#' instead of the URL.
var imgurl=new Array()
imgurl[0]="http://javascriptbank.com"
imgurl[1]="http://javascriptbank.com"
imgurl[2]="http://javascriptbank.com"
// This block will preload your images. Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgname[i]
}
// Standstill-time between the images (microseconds).
var pause=2000
// Speed of the stretching and shrinking effect. More means slower.
var speed=20
// This variable also affects the speed (the length of the step between each inmage-frame measured in pixels). More means faster.
var step=10
// Do not edit the variables below
var i_loop=0
var i_image=0
function stretchimage() {
if (i_loop<=imgwidth) {
if (document.all) {
imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
}
i_loop=i_loop+step
var timer=setTimeout("stretchimage()",speed)
}
else {
clearTimeout(timer)
var timer=setTimeout("shrinkimage()",pause)
}
}
function shrinkimage() {
if (i_loop>-step) {
if (document.all) {
imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
}
i_loop=i_loop-step
var timer=setTimeout("shrinkimage()",speed)
}
else {
clearTimeout(timer)
changeimage()
}
}
function changeimage() {
i_loop=0
i_image++
if (i_image>imgname.length-1) {i_image=0}
var timer=setTimeout("stretchimage()",pause)
}
function initiate() {
if (document.all) {
document.all.imgcontainer.style.posLeft=pos_left
document.all.imgcontainer.style.posTop=pos_top
changeimage()
}
if (document.layers) {
document.imgcontainer.left=pos_left
document.imgcontainer.top=pos_top
rotatenetscape()
}
}
function rotatenetscape() {
document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>")
document.imgcontainer.document.close()
i_image++
if (i_image>imgname.length-1) {i_image=0}
var timer=setTimeout("rotatenetscape()",pause*2)
}
document.write("<div id=\"roof\" style=\"position:relative\">")
document.write("<div id=\"imgcontainer\" style=\"position:absolute;top:0px;left:0px\"></div>")
document.write("</div>")
// - End of JavaScript - -->
</SCRIPT>
</BODY>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
|
|
| Bookmarks |
|
|
Linear Mode
