KidsLovePC Contact Us
  Home   PHP  Graphics ASP  JavaScript   J2EE  HTML  JAVA   Swing   Webtip  Forums  Lyric  Free sheet music  Ringtones

Best books about Javasript

JavaScript Flying in Effect

javascript, javascript detect chinese input formSee this JAVAscript flying in effect demo page. Please note that this works properly in Internet explorer, not in Firefox.

javascript, javascript detect chinese input formHow to do it?

This flying-in effect uses javascript to swap serveral <div> tag.

First you need copy following javascript code to your <head> section.

<SCRIPT LANGUAGE="JavaScript">
<!--

 

n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

function init() {
slideoutActive = 0
if (n) {
slideout1 = document.slideoutInterface.document.slideoutContent.document.slideoutContent1
slideout2 = document.slideoutInterface.document.slideoutContent.document.slideoutContent2
slideout3 = document.slideoutInterface.document.slideoutContent.document.slideoutContent3
slideout4 = document.slideoutInterface.document.slideoutContent.document.slideoutContent4
slideout5 = document.slideoutInterface.document.slideoutContent.document.slideoutContent5
}

if (ie) {
slideout1 = slideoutContent1.style
slideout2 = slideoutContent2.style
slideout3 = slideoutContent3.style
slideout4 = slideoutContent4.style
slideout5 = slideoutContent5.style
}
slideoutShown = slideout1
slideoutShown.xpos = 0
slideoutNew = "none"
slideoutNew.xpos = -285
}

function slideout(which) {
if (!slideoutActive && slideoutShown != which) {
slideoutActive = 1
slideoutNew = which
slideoutNew.xpos = -285
slideoutLeft()
}
}

function slideoutLeft() {
if (slideoutShown.xpos > -285) {
slideoutShown.xpos -= 15
slideoutShown.left = slideoutShown.xpos
setTimeout("slideoutLeft()",30)
}
else {
hide(slideoutShown)
show(slideoutNew)
setTimeout("slideoutRight()",50)
}
}

function slideoutRight() {
if (slideoutNew.xpos < 0) {
slideoutNew.xpos += 15
slideoutNew.left = slideoutNew.xpos
setTimeout("slideoutRight()",30)
}
else {
slideoutShown = slideoutNew
slideoutActive = 0 // stops the sequence
}
}

function show(showobj) {
if (n) showobj.visibility = "show"
if (ie) showobj.visibility = "visible"
}
function hide(hideobj) {
if (n) hideobj.visibility = "hide"
if (ie) hideobj.visibility = "hidden"
}

//-->
</SCRIPT>

 

Then add the following style code to your <style> tag.

<STYLE TYPE="text/css">
<!--
A {color:#000000; font-family:'Arial'; font-weight:bold; font-size:10pt; text-decoration:none; line-height:20pt;}
STRONG {font-family:'Arial'; font-size:15pt; font-weight:bold; line-height:25pt;}
P {font-family:'Arial'; font-size:10pt; line-height:13pt;}
TD {font-family:'Arial'; font-size:10pt; line-height:13pt;}

#slideoutInterface {position:absolute; left:50; top:50; width:400; height:250; clip:rect(0,400,250,0); background-color:#000000; layer-background-color:#000000; visibility:visible;}
#slideoutSidebar1 {position:absolute; left:5; top:5; width:100; height:30; clip:rect(0,100,30,0); background-color:#9797FF; layer-background-color:#9797FF;}
#slideoutSidebar2 {position:absolute; left:5; top:40; width:100; height:30; clip:rect(0,100,30,0); background-color:#FFFF00; layer-background-color:#FFFF00;}
#slideoutSidebar3 {position:absolute; left:5; top:75; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF80C0; layer-background-color:#FF80C0;}
#slideoutSidebar4 {position:absolute; left:5; top:110; width:100; height:30; clip:rect(0,100,30,0); background-color:#00FF80; layer-background-color:#00FF80;}
#slideoutSidebar5 {position:absolute; left:5; top:145; width:100; height:30; clip:rect(0,100,30,0); background-color:#FF5353; layer-background-color:#FF5353;}

#slideoutContent {position:absolute; left:110; top:5; width:285; height:240; clip:rect(0,285,240,0); background-color:#000000; layer-background-color:#000000;}
#slideoutContent1 {position:absolute; left:0; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:visible;}
#slideoutContent2 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent3 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent4 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}
#slideoutContent5 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:hidden;}

//-->
</STYLE>

 

customize the following <div> in your web page.

<DIV ID="slideoutInterface">

<DIV ID="slideoutSidebar1"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout1)">LINK 1</A></P></DIV>
<DIV ID="slideoutSidebar2"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout2)">LINK 2</A></P></DIV>
<DIV ID="slideoutSidebar3"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout3)">LINK 3</A></P></DIV>
<DIV ID="slideoutSidebar4"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout4)">LINK 4</A></P></DIV>
<DIV ID="slideoutSidebar5"><P ALIGN=CENTER><A HREF="javascript:slideout(slideout5)">LINK 5</A></P></DIV>

<DIV ID="slideoutContent">

<DIV ID="slideoutContent1">
<P ALIGN="CENTER"><STRONG>LINK 1</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
THIS IS web page 2
<img src="images/pig.gif" alt="java script download, javascript flying in effect">
</TD>
</TABLE>
</P>
</DIV>

<DIV ID="slideoutContent2">
<P ALIGN="CENTER"><STRONG>LINK 2</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
THIS IS web page 2
</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent3">
<P ALIGN="CENTER"><STRONG>LINK 3</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
THIS IS web page 3

</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent4">
<P ALIGN="CENTER"><STRONG>LINK 4</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
THIS IS web page 4

</TD></TABLE>
</P>
</DIV>

<DIV ID="slideoutContent5">
<P ALIGN="CENTER"><STRONG>LINK 5</STRONG>
<P>
<TABLE BORDER=0 WIDTH=275><TD>
THIS IS web page 5

</TD></TABLE>
</P>
</DIV>

</DIV>

 

Finally, add onload="init()" to <body> tag.

 

 

 

Best books about ASP & ASP.Net from Amazon
JavaScript Bible, Fifth Edition (Paperback) JavaScript & DHTML Cookbook (Paperback) JavaScript: The Definitive Guide (Paperback) Beginning JavaScript Second Edition (Paperback) JavaScript: The Complete Reference, Second Edition (Paperback)

 

Printer Inkjet A Z lyricsLearn ChineseHome|PHP|Swing|HTML|JavaScript|ASP|JAVA|Forum|WebTip|Contact Us
Copyright © kidslovepc.com All rights reserved(new). Privacy|Copyright
designed by info@kidslovepc.com

Please help us cover the web site maintenance fee.
barcode scanner Thermal Printer credit card machine bar code printer