JavaScript DHTML/Ajax Layer/Text Effects

Материал из Web эксперт
Перейти к: навигация, поиск

Содержание

Fade/Appear effect functional test

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

 <title>script.aculo.us Effects functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>

</head> <body>

script.aculo.us Fade/Appear effect functional test

Note: these tests use the browser default CSS style rules.

DIV

TEST

<a href="#" onclick="Effect.Fade("test_div"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_div"); return false;">Effect.Appear</a>

SPAN

TEST
<a href="#" onclick="Effect.Fade("test_span"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_span"); return false;">Effect.Appear</a>

P

TEST


<a href="#" onclick="Effect.Fade("test_p"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_p"); return false;">Effect.Appear</a>

IMG

<img id="test_img" src="icon.png" alt="test image" />
<a href="#" onclick="Effect.Fade("test_img"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_img"); return false;">Effect.Appear</a>


The following elements are not supported with Fade/Appear on all browsers!

TABLE

<tbody></tbody>
TEST

<a href="#" onclick="Effect.Fade("test_table"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_table"); return false;">Effect.Appear</a>

TBODY

<tbody id="test_tbody"></tbody>
TEST

<a href="#" onclick="Effect.Fade("test_tbody"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_tbody"); return false;">Effect.Appear</a>

TR

<tbody></tbody>
TEST

<a href="#" onclick="Effect.Fade("test_tr"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_tr"); return false;">Effect.Appear</a>

TD

<tbody></tbody>
TEST

<a href="#" onclick="Effect.Fade("test_td"); return false;">Effect.Fade</a> | <a href="#" onclick="Effect.Appear("test_td"); return false;">Effect.Appear</a> </body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Highlight text dynamically

   <source lang="html4strict">

<html> <head> <title>DynAPI Examples - DynLayer Anchor - Anchoring</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); </script> <script language="Javascript"> cnt=0; w = new DynLayer(" ",-10,-10,20,18); // use negative x,y to hide layer during ns4 resize (or reload) w.setAnchor({topA:"c",leftA:"c",stretchH:120,stretchV:28}); w.__a=w.addChild(new DynLayer(null,null,null,null,null,"#000000")); w.__b=w.addChild(new DynLayer(null,null,null,null,null,"#000000")); w.__c=w.addChild(new DynLayer(null,null,null,null,null,"#000000")); w.__d=w.addChild(new DynLayer(null,null,null,null,null,"#000000")); w.__a.setAnchor({stretchH:"100%",stretchV:2,top:0}) w.__b.setAnchor({stretchH:2,stretchV:"100%",right:0}) w.__c.setAnchor({stretchH:"100%",stretchV:2,bottom:0}) w.__d.setAnchor({stretchH:2,stretchV:"100%",left:0}) window.setTimeout("setColor()",200); dynapi.document.addChild(w); function setColor() {

 var color="#ffcc00";
 cnt++
 if (cnt>4)cnt=1;
 if(cnt==1) w.__a.setBgColor(color);
 else w.__a.setBgColor("#000000");
 if(cnt==2) w.__b.setBgColor(color);
 else w.__b.setBgColor("#000000");
 if(cnt==3) w.__c.setBgColor(color);
 else w.__c.setBgColor("#000000");
 if(cnt==4) w.__d.setBgColor(color);
 else w.__d.setBgColor("#000000");
 window.setTimeout("setColor()",300);

} function setAnchor(t){

 if(t=="a") w.setAnchor({topA:"a",leftA:"a",stretchH:90,stretchV:18});
 if(t=="b") w.setAnchor({topA:"b",leftA:"b",stretchH:100,stretchV:18});
 if(t=="c") w.setAnchor({topA:"c",leftA:"c",stretchH:120,stretchV:28});
 if(t=="d") w.setAnchor({topA:"d",leftA:"d",stretchH:120,stretchV:35});
 if(t=="e") w.setAnchor({topA:"e",leftA:"e",stretchH:80,stretchV:18});
 if(t=="f") w.setAnchor({topA:"f1",leftA:"f1",bottomA:"f3",rightA:"f2",stretchH:"*",stretchV:"*"});

} </script> </head> <body bgcolor="#FFFFFF"> <script> dynapi.document.insertAllChildren(); </script>

 Anchoring/Docking

Change Anchor
     Location

<a href="javascript:setAnchor("a")">Anchor A</a>
<a href="javascript:setAnchor("b")">Anchor B</a>
<a href="javascript:setAnchor("c")">Anchor C</a>
<a href="javascript:setAnchor("d")">Anchor D</a>
<a href="javascript:setAnchor("e")">Anchor E</a>
<a href="javascript:setAnchor("f")">Anchor F</a>

 Resize the browser to see the changes <p align="center"> topA
rightA
bottomA
leftA
</td>

     <p>A example of an anchor
     : <a name="myname"
     id="myname">&nbsp;</a>
     <p>Some text here,
     some more text here some text here, some more text here. some more text here
     some  text here, some more text here.  
     <a id="a" name="a">AnchorHere</a>
     
     some more text here some text here, some more text here. some more text
     here some text here, some more text here. some more text here some text
     here, some more text here. 
     <a id="b" name="b">AnchorHere</a><p>And more text here some text here, some
     more text here. some more text here some text here, some more text here.
     some more text here some text here, some more text here. some more text
     here some text here, some more text here. some more text here  some text here, some more text here.
some more text here  

<a id="c" name="c">MoreText</a>

 some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.

some more text here some text
           here, some more text here. some more text here some text here, some
           more text here.some more text

<a id="d" name="d">Testing</a>

here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here some more text here some

  text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here..

some more text here some text here, some
           more text here.some more text here some text here, some more text
           here.

<a name="e" id="e">Anchor_here</a>

some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here. <p>some more text here some text here, some more text here.some more text here some text here, some more text here. some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.some more text here some text here, some more text here.

some more text here some text here, some more text here.
<a id="f1" name="f1">1</a> <a id="f2" name="f2">2</a>
    
  <a id="f3" name="f3">3</a>
some more text here some text
           here, some more text here.some more text here some text here, some
more text here.

</body> </html>


      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Rainbow highligher

   <source lang="html4strict">

<html> <head> <title>DynAPI Examples - Highlighter</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("dynapi.functions.Color"); dynapi.library.include("dynapi.gui.Highlighter"); </script> <script language="Javascript"> var x=0,y=50,c=0,lyr,clr,inc=1; var d1=new Date(); for(var i=0;i<300;i++){

 y+=inc;
 if(y>200) inc*=-1;
 x=50+c*1;
 c+=1;
 if (i<=100) clr=dynapi.functions.fadeColor("#0000FF","#FF0000",i);
 else if (i>100 && i<=200) clr=dynapi.functions.fadeColor("#FF0000","#00FF00",i-100);
 else clr=dynapi.functions.fadeColor("#00FF00","#FFFFFF",(i-200));
 lyr=new Highlighter(x,y,1,50,clr);
 dynapi.document.addChild(lyr);

} dynapi.onLoad(init); function init(){

 var d2=new Date();
 document.frm.txt.value = i+" layers in "+(d2-d1)+" milliseconds";

} </script> </head> <body> <form name="frm">Speed: <input type="text" size="50" name="txt" value="loading..."> </form> <script>

 dynapi.document.insertAllChildren();

</script> </body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Text BlindUp and BlindDown

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

 <title>script.aculo.us Effects functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
 <style type="text/css" media="screen">
   #d1 { background-color: #888; }
 </style>
 

</head> <body>

script.aculo.us Effects functional test file

<a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("blind_up","d1",{duration:1.5}) }); return false;">BlindUp</a> | <a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("blind_down",{duration:1.5}) }); return false;">BlindDown</a> |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text color fade in

   <source lang="html4strict">

<html> <head> <title>DynAPI Examples - Fader</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript"> dynapi.library.setPath("./dynapisrc/"); dynapi.library.include("dynapi.api"); dynapi.library.include("Fader"); </script> <script language="Javascript">

var lyr1=new DynLayer("

This

",0,0,100,100); var lyr2=new DynLayer("

Is

",300,200,100,100); var lyr3=new DynLayer("

Not

",0,50,100,100); var lyr4=new DynLayer("

Flash!

",400,250,100,100); var lyr5=new DynLayer("

DynAPI 3.0 Rulez!

",100,300,300,100); var lyr6=new DynLayer("

Got DynAPI?

",400,100,200,100);

dynapi.document.addChild(lyr1); dynapi.document.addChild(lyr2); dynapi.document.addChild(lyr3); dynapi.document.addChild(lyr4); dynapi.document.addChild(lyr5); dynapi.document.addChild(lyr6); lyr1.setVisible(false); lyr2.setVisible(false); lyr3.setVisible(false); lyr4.setVisible(false); lyr5.setVisible(false); lyr6.setVisible(false); dynapi.onLoad(function(){

 lyr1.fadeIn(); lyr1.slideTo(100,100);
 lyr1.addEventListener({
   onfadein:function(e){
     lyr2.fadeIn(); lyr2.slideTo(170,100);
   }
 });
 lyr2.addEventListener({
   onfadein:function(e){
     lyr3.fadeIn(); lyr3.slideTo(200,100);
   }
 });
 lyr3.addEventListener({
   onfadein:function(e){
     lyr4.fadeIn();lyr4.slideTo(260,100);
   }
 });
 lyr4.addEventListener({
   onfadein:function(e){
     lyr1.fadeOut();
     lyr2.fadeOut();
     lyr3.fadeOut();
     lyr4.fadeOut();
   },
   onfadeout:function(e){
     window.setTimeout("lyr5.fadeIn();lyr5.slideTo(null,100);",600);
   }
 });
 lyr5.addEventListener({
   onfadein:function(e){
     window.setTimeout("lyr5.fadeOut();lyr5.slideTo(400,100);",600);
   },
   onfadeout:function(e){
     window.setTimeout("lyr6.fadeIn();lyr6.slideTo(150,100);",100);
   }
 });

}); </script> </head> <body> <script>

 dynapi.document.insertAllChildren();

</script> </body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>


Text Effects: highlight

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

 <title>script.aculo.us Effects functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
 <style type="text/css" media="screen">
   #d1 { background-color: #888; }
 </style>
 

</head> <body>

script.aculo.us Effects functional test file

<a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("highlight",{duration:1.5}) }); return false;">Highlight</a> |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text effects: outlook bar

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css">

  1. menu {
 width: 300px;
 border: 1px #000 solid;

} .menu_header {

 background-color: #00CC99;
 color: #FFFFFF;

} .menu_block {

 background-color: #006699;
 color: #FFFFFF;
 overflow:hidden;

} .menu_block div { } .close_block {

 position: relative;
 width: 100%;
 bottom: 0px;
 height: 15px;
 text-align: center;
 display: block;

} </style> <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script> <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script> </head> <body>

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text Effects: Puff

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

 <title>script.aculo.us Effects functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
 <script type="text/javascript" charset="utf-8">
   Position.includeScrollOffsets = true;
 </script>

<body>

script.aculo.us Effects functional test file

Effect.Puff

 click to test puff, no position set
 click to test puff, floats
 click to test puff, absolute position set

Floating inside a container

   click to puff
   click to puff
   click to puff
   click to puff
   click to puff
   click to puff
   click to puff
   click to puff
   click to puff

</div> </body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text effects: Scale X only, Scale Y only, Scale X and Y

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

 <title>script.aculo.us Effects functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
 <style type="text/css" media="screen">
   #scaleable { background-color: #888; }
 </style>
 

</head> <body>

script.aculo.us Effects functional test file

<a href="#" onclick="new Effect.Scale( "scaleable", 20,{ scaleX: true, scaleY: false }); return false;">Scale X only</a> | <a href="#" onclick="new Effect.Scale( "scaleable", 20,{ scaleX: false, scaleY: true }); return false;">Scale Y only</a> | <a href="#" onclick="new Effect.Scale( "scaleable", 20,{ scaleX: true, scaleY: true }); return false;">Scale X and Y</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text effects: scroll (slow-motion) down-below, scroll last-heading

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

 <title>script.aculo.us Effects functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>

</head> <body>

script.aculo.us ScrollTo effect functional test

<a href="#" onclick="new Effect.ScrollTo("down-below",{duration:5.0}); return false;">scroll (slow-mo) down-below...</a>, <a href="#" onclick="new Effect.ScrollTo("last-heading"); return false;">scroll last-heading</a>

first-headingHeading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

DOWN BELOWHeading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

<a href="#" onclick="new Effect.ScrollTo("first-heading"); return false;">scroll...</a>

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

Heading 2

  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item
  • item

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text effects: slide down, slide up

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

 <title>script.aculo.us Effects functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>

</head> <body>

script.aculo.us Effects functional test file

Effect.SlideDown/Effect.SlideUp

<script type="text/javascript" language="javascript" charset="utf-8">

 var effect_1 = null;

</script> <a href="#" onclick="effect_1 = Effect.SlideDown("d1",{duration:1.0}); return false;">Start slide down</a> | <a href="#" onclick="effect_1 = Effect.SlideUp("d1",{duration:1.0}); return false;">Start slide up</a> | <a href="#" onclick="effect_1.cancel(); return false;">cancel()</a> | <a href="#" onclick="alert(Object.inspect($("d1").firstChild.style)); return false;">inspect()</a> | <a href="#" onclick="$("d1").firstChild.innerHTML += $("d1").firstChild.innerHTML; return false;">add content</a>

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>


Text: Slide Up and Slide Down

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

 <title>script.aculo.us Effects functional test file</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script src="./scriptaculous-js-1.6.4src/prototype.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/scriptaculous.js" type="text/javascript"></script>
 <script src="./scriptaculous-js-1.6.4src/unittest.js" type="text/javascript"></script>
 <style type="text/css" media="screen">
   #d1 { background-color: #888; }
 </style>
 

</head> <body>

script.aculo.us Effects functional test file

<a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("slide_up",{duration:1.5}) }); return false;">SlideUp</a> | <a href="#" onclick="$$("div.d").each( function(e) { e.visualEffect("slide_down",{duration:1.5}) }); return false;">SlideDown</a>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/scriptaculous-js-1.6.4.zip">scriptaculous-js-1.6.4.zip( 139 k)</a>