Basic JavaScript Lesson 1

JAVASCRIPT

INTRODUCTION

JavaScript is a well featured object oriented programming (OOP) language.
It is not Java.
It is mor light weight language used exclusively on web pages to mainpulate objects on the page and embedded in the browser itself.
Like all programming languages, JavaScript's basic purpose is to pick up on the actions of the user and react to them.
JavaScript does this through a series of Event, Functions, and Objects.
There are all sorts of Events like the famous "onMouseOver" event that initiates the common image rollover or pop up menu. Events are added to HTML tags just like attributes and point to a function.Event coded in its tag, a JavaScript function is called and run.
This is referred to as a "function call"
A function contains JavaScript "statements" that mainpulate an Oblect in some way.This is done dynamically in real time.
Once we point to an object with a reference like above, we can use JavaScript Methods and Properties to manipulate that object. amethod is something an object can do ro call on. A property is a characteristic of an object that can be dynamically changed by JavaScript.
Let me explain

we will changing th background color of web page when an event occurs.Let me make the background of a page change colors when a link on the page is hovered over.
Lets start out by making a simple web page with a gray background:
[script language="JavaScript"]
function change_color(){
document.bgColor="red";
document.fgColor="green"}

function change_back(){
document.bgColor="white";
document.fgColor="black"}

[/script]

follow html code

[html]
[head]
[title]JS Background Changing[/title]
[script language="JavaScript"]

function change_color(){
document.bgColor="yellow";
document.fgColor="green"}

function change_colorA(){
document.bgColor="red";
document.fgColor="blue"}

function change_colorB(){
document.bgColor="#410000";
document.fgColor="#222222"}

function change_colorC(){
document.bgColor="green";
document.fgColor="#810000"}

function change_colorD(){
document.bgColor="pink";
document.fgColor="#710000"}

function change_colorE(){
document.bgColor="#720000";
document.fgColor="#FFFFFF"}

function change_colorF(){
document.bgColor="yellow";
document.fgColor="pink"}

function change_colorG(){
document.bgColor="yellow";
document.fgColor="black"}

function change_colorH(){
document.bgColor="red";
document.fgColor="green"}

function change_colorI(){
document.bgColor="green";
document.fgColor="white"}

[/script]
[style]
a {margin-left:10px;margin-right:15px;color:#000000;text-decoration:none;font-size:14px;font-weight:bold;}
[/style]

[/head]

[body bgcolor="gray"]

[p]Here's some regular ol' paragraph content.[/p]

[a href="#" onMouseOver="change_color()"]AAAAA[/a]
[a href="#" onMouseOver="change_colorA()"]BBBBBB[/a]
[a href="#" onMouseOver="change_colorB()"]CCCCC[/a]
[a href="#" onMouseOver="change_colorC()"]DDDDD[/a]
[a href="#" onMouseOver="change_colorD()"]EEEEE[/a]
[a href="#" onMouseOver="change_colorE()"]FFFFF[/a]
[a href="#" onMouseOver="change_colorF()"]GGGGG[/a]
[a href="#" onMouseOver="change_colorG()"]HHHHH[/a]
[a href="#" onMouseOver="change_colorH()"]IIIIII[/a]
[a href="#" onMouseOver="change_colorI()"]JJJJJJ[/a]
[/body]
[/html]
i am using here <> for []

How to create rounded corners without JavaScript only through css

let me explain suppose you have a blah div now how to show blah div rounded
first define an other div abc div than put your blah div inside abc div.
now use this code
#abc {width:500px;background-color:#FF0000;padding:5px;}
now no need to define blah div as blah name than use this code for rounded corner for your css

.spiffy{
display:block;
}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
background:#ffffff;

}
.spiffy1{
border-right:1px solid #ffffff;
padding-right:1px;
margin-right:3px;
border-left:1px solid #ffffff;
padding-left:1px;
margin-left:3px;
background:#478dec;
}
.spiffy2{
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
padding:0px 1px;
background:#3883ea;
margin:0px 1px;
}
.spiffy3{
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
margin:0px 1px;
}
.spiffy4{
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
}
.spiffy5{
border-right:1px solid #ffffff;
border-left:1px solid #ffffff;
}
.spiffy_content{
padding:0px 5px;
background:#ffffff;
}
now how to define rounded div inside your html page i am using here <> for {}
{div id="abc"}
{div}
{b class="spiffy"}
{b class="spiffy1"}{b}{/b}{/b}
{b class="spiffy2"}{b}{/b}{/b}
{b class="spiffy3"}{/b}
{b class="spiffy4"}{/b}
{b class="spiffy5"}{/b}
{/b} {div class="spiffy_content"}
{div id="maincontent"}
{/div}
<--either you can create a new div where you can use your content
{/div}
{b class="spiffy"}
{b class="spiffy5"}{/b}
{b class="spiffy4"}{/b}

{b class="spiffy3"}{/b}
{b class="spiffy2"}{b}{/b}{/b}
{b class="spiffy1"}{b}{/b}{/b}
{/b}
{/div}
{/div}

how to creat rounded corner particular div through css html with javascript

Let me explain how to create rounded corner a particular div

follow javascript code either use javascript file which is link to your html file nor use inside your html head section

this is javascript code
function make_corners()
{
var $i;
var $elements=find_class(document.body,"rounded");//where can define your div id//
if(!(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.indexOf("5.5")>-1)) for($i in $elements) rounded_corners($elements[$i]);
}


function rounded_corners($element)
{
var $rc_radius=15, $rc_left=true, $rc_right=true, $rc_top=true, $rc_bottom=true, $rc_self_color, $rc_parent_color, $rc_antialiased,$rc_antialiased_cf=0.33,$rc_compact,$rc_auto_margin,$rc_method="margin",$rc_border,$border_color;
var $property,$container,$el_container,$el_inner,$j,$i,$ang,$ang_last,$bw,$width,ee,$err_alert;
var $classes=$element.className.split(" ");
$rc_self_color=get_current_style($element,"background-color","(transparent)|(rgba)");
$rc_parent_color=get_current_style($element.parentNode,"background-color","(transparent)|(rgba)");
$border_color=get_current_style($element,"border-top-color");
for ($i in $classes)
{
$property=$classes[$i].split("-");
if($property[0]=="rc") switch ($property[1])
{
case "radius":
$rc_radius=$property[2];
break;
case "top":
$rc_top=$property[2]!="0"?true:false;
break;
case "left":
$rc_left=$property[2]!="0"?true:false;
break;
case "right":
$rc_right=$property[2]!="0"?true:false;
break;
case "bottom":
$rc_bottom=$property[2]!="0"?true:false;
break;
case "selfcolor":
$rc_self_color="#"+$property[2];
break;
case "parentcolor":
$rc_parent_color=$property[2]=="transparent"?"transparent":"#"+$property[2];
break;
case "inheritstylecolors":
$rc_parent_color=$property[2]!="0"?false:true;
$rc_self_color=$property[2]!="0"?false:true;
break;
case "antialiased":
$rc_antialiased=$property[2]!="0"?true:false;
break;
case "antialiasedcf":
$rc_antialiased_cf=parseFloat($property[2]);
break;
case "compact":
$rc_compact=$property[2]!="0"?true:false;
break;
case "automargin":
$rc_auto_margin=$property[2]!="0"?true:false;
break;
case "method":
$rc_method=$property[2];
break;
case "border":
$rc_method="margin";
$rc_border=true;
$element.style.border="none";
break;
}
}
if($rc_antialiased && $rc_method=="margin")
{
var $arr_self_color=color2array($rc_self_color);
var $arr_parent_color=$rc_border?color2array($border_color):color2array($rc_parent_color);
if($arr_self_color!=false && $arr_parent_color!=false) var $rc_antialiased_color="rgb("+Math.round(($arr_parent_color[0]-$arr_self_color[0])*$rc_antialiased_cf+$arr_self_color[0])+","+Math.round(($arr_parent_color[1]-$arr_self_color[1])*$rc_antialiased_cf+$arr_self_color[1])+","+Math.round(($arr_parent_color[2]-$arr_self_color[2])*$rc_antialiased_cf+$arr_self_color[2])+")";
else $rc_antialiased=false;
}
var $containers=new Array();
if($rc_top)$containers[0]="top";
if($rc_bottom)$containers[$containers.length]="bottom";
if(!$rc_parent_color)$rc_parent_color=get_current_style(document.body,"background-color");
for($j in $containers)
{
$container=$containers[$j];
$el_container=document.createElement("div");
$el_container.className="rc-container-"+$container;
if($rc_parent_color && $rc_method=="margin")
{
try
{
$el_container.style.backgroundColor=$rc_parent_color;
}
catch(ee){self.status="Chyba nastaveni pozadi."}
}
$el_container.style.height=$rc_radius+"px";
for($i=0;$i<$rc_radius;$i++)
{
$el_inner=document.createElement("span");
if($rc_self_color && $rc_method=="margin")$el_inner.style.backgroundColor=$rc_self_color;
$el_inner.style.display="block";
$el_inner.className="rc-inner rc-level-"+$i;
$ang=Math.asin($i/$rc_radius);
$el_inner.style.height="1px";
$el_inner.style.overflow="hidden";
$width=($rc_radius-Math.round($rc_radius*Math.cos($ang)));
if($rc_method=="margin")
{
$el_inner.style.margin="0 "+($rc_right?$width:"0")+"px 0 "+($rc_left?$width:"0")+"px";
if($rc_antialiased || $rc_border)
{
$bw=Math.ceil($rc_radius*Math.cos(Math.asin(($i-1)/$rc_radius))-$rc_radius*Math.cos($ang));
if($bw==0)$bw=1;
$el_inner.style.borderWidth="0 "+($rc_right?$bw:"0")+"px 0 "+($rc_left?$bw:"0")+"px";
if(!$rc_border)
{
try{$el_inner.style.borderColor=$rc_antialiased_color;}
catch($ee){if(!$err_alert)alert("There's probably a wrong CSS declaration of color used (use '#000000' instead of 'black' or '#000'.");$err_alert=true;}
}
else
{
$el_inner.style.borderColor=($rc_antialiased && $width) ? $rc_antialiased_color : $border_color;
if($i==$rc_radius-1)
{
$el_inner.style.backgroundColor=$border_color;
}
}
$el_inner.style.borderStyle="solid";
}
}
else
{
if($rc_parent_color)$el_inner.style.borderColor=$rc_parent_color;
$el_inner.style.borderStyle="solid";
$el_inner.style.borderWidth="0 "+($rc_right?$width:"0")+"px 0 "+($rc_left?$width:"0")+"px";
}
if($container=="top" && $el_container.firstChild)$el_container.insertBefore($el_inner.cloneNode(true),$el_container.firstChild);
else $el_container.appendChild($el_inner.cloneNode(true));
delete $el_inner;
}
if($rc_compact)
{
if($container=="top") $el_container.style.marginBottom="-"+$rc_radius+"px";
else $el_container.style.marginTop="-"+$rc_radius+"px";
}
if($rc_auto_margin)
{
$el_container.style.marginLeft="-"+get_current_style($element,"padding-left");
$el_container.style.marginRight="-"+get_current_style($element,"padding-right");
if($container=="top") $el_container.style.marginTop="-"+get_current_style($element,"padding-top");
else $el_container.style.marginBottom="-"+get_current_style($element,"padding-bottom");
}
if($container=="top" && $element.firstChild)$element.insertBefore($el_container.cloneNode(true),$element.firstChild);
else $element.appendChild($el_container.cloneNode(true));
delete $container;
}
}

// common functions:

function find_class($element,$classnames,$result,$first)
{
if(!$first)$first=$element;
if(!$result)$result=new Array();
if ($element.nodeType==1)
{
var $test_exp=new RegExp("(^| )("+$classnames+")( |$)");
if($test_exp.test($element.className)) $result[$result.length]=$element;
}
if ($element.hasChildNodes()) $result=find_class($element.firstChild,$classnames,$result,$first);
if ($element.nextSibling && $element!=$first) $result=find_class($element.nextSibling,$classnames,$result,$first);
return $result;
}

function get_current_style($element,$property,$not_accepted)
{
var ee,$i,$val,$apr;
var $na=new RegExp($not_accepted);
try
{
var $cs=document.defaultView.getComputedStyle($element,'');
$val=$cs.getPropertyValue($property);
}
catch(ee)
{
if($element.currentStyle)
{
$apr=$property.split("-");
for($i=1;$i<$apr.length;$i++) $apr[$i]=$apr[$i].toUpperCase();
$apr=$apr.join("");
$val=$element.currentStyle.getAttribute($apr);
}
}

if($not_accepted && $na.test($val) && $element.parentNode) $val=get_current_style($element.parentNode,$property,$not_accepted);
return $val;
}

function color2array($value)
{
if($value.substr(0,1)=="#")return hex2array($value);
else if($value.indexOf("rgb")>-1) return rgb2array($value);
else return false;
}

function rgb2array($value)
{
var $i;
var $regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;
var $array=$regexp.exec($value);
$array.shift();
for($i=0;$i<3;$i++)$array[$i]=parseInt($array[$i]);
return($array);
}

function hex2array($value)
{
return new Array(parseInt($value.substr(1,2),16),parseInt($value.substr(3,2),16),parseInt($value.substr(5,2),16));
}
after define which div you want to rounded corner in this javascript function where define rounded

Let me explain
some time you have problem if you need more rounded corner in your html page

so you should define only class rouned in your css file where write any property which is common your other div

than other property you need define your html page which div you want to rounded corner as follow div id="blah" style="background-color:#ff0000;width:100px" as you like your div

you can do same for other div

than use following code before closing your body tag in your html page


{script type="text/javascript"}make_corners();{/script} i m using here <> for {}

Note: My English communication is not strong please avoid sentence error and frequently ask question email me anand.hey@gmil.com

how to design your particular div scroll

let me explain how to design your particular div scroll through css, html
and JavaScript.

First use following JavaScript code in your head tag after start head tag before close head tag

this code



put this JavaScript code start body tag
i am using here <> for {} there is html problem
{script type="text/javascript"}

{/script}


now creat a JavaScript file

where can put this code and this file link to your html file

eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('7 E={4k:6(){P.M(1m,\'4z\',P.4v)},3C:6(f){7 g=15,H=1m,1R=5J;5(!g.20||!g.4D)B;5(3E(f)==\'4F\')f=15.20(f);5(f==14||1R.2Q.2u(\'6H\')!=-1||((1R.2Q.2u(\'6y\')!=-1||1R.2Q.2u(\'6C\')!=-1)&&!(3E(4l)!="6h"&&4l.5Y))||1R.6d==\'67\'||(1R.5N.2u(\'6t\')!=-1&&1R.2Q.2u(\'66\')!=-1))B;5(f.1D){f.1D();B};5(!f.1S||f.1S==\'\'){7 h="68",c=1;1H(15.20(h+c)!=14){c++};f.1S=h+c}7 k=f.1S;f.3c=2i 65();7 l=f.3c;l.1M={5W:[\'-1s\',0],5V:[0,\'-1s\'],5X:[\'1s\',0],5Z:[0,\'1s\'],6G:[0,\'-1p\'],6I:[0,\'1p\'],6J:[0,\'-4W\'],6l:[0,\'+4W\']};l.3i=["-2s","2s"];l.44=["-2s","2s"];7 m=12(\'6v\',C),D=12(\'5f\',C),G=12(\'5k\',C),1d=12(\'5g\',C);7 o=12(\'5e\',C),1h=12(\'5l\',C);2E=8;1d.A.1u=\'4X 4M 5r\';1d.1C();f.1q.4J=\'2t\';1h.A.5L="5M";1h.A.1B="4N";1h.A.U="4N";1h.A.26="3X";1h.A.3S="-5A";1h.1C();7 p=f.T,54=f.1c;2f(f,1d,\'17\',[\'1u-13-U\',\'1u-1N-U\',\'1u-11-U\',\'1u-1P-U\']);7 q=f.T,55=f.1c,3I=54-55,3V=p-q;7 s=(f.1T)?f.1T:0,57=(f.1V)?f.1V:0;7 t=15.3W.1i,3d=/#([^#.]*)$/;7 u=[\'5j\',\'5n\',\'5p\'];l.V=[];l.1W=[];l.5s=l.O=[];l.5G=l.1Q=[];l.1o=[8,8];l.W=[];l.1x=[0,0];l.1k=[];l.3F=[];l.X=[];1H(f.56){m.Z(f.56)};m.Z(o);f.Z(D);f.Z(1d);5(N(f,\'26\')!=\'3X\')f.1q.26="33";D.A.U="51";D.A.1B="51";D.A.11="17";D.A.13="17";2f(f,1d,"17",[\'J-13\',\'J-11\',\'J-1N\',\'J-1P\']);7 w=f.1c,4O=f.T,3N;3N=D.T;D.A.5x="5w 4M 5v";5(D.T>3N)2E=C;D.A.5C="17";2f(1d,f,8,[\'J-13\',\'J-11\',\'J-1N\',\'J-1P\']);1r(D);1r(f);l.X[0]=D.1e-f.1e;l.X[2]=D.1f-f.1f;f.1q.4L=N(f,"J-1P");f.1q.4H=N(f,"J-1N");1r(D);1r(f);l.X[1]=D.1e-f.1e;l.X[3]=D.1f-f.1f;f.1q.4L=N(1d,"J-11");f.1q.4H=N(1d,"J-13");7 x=l.X[2]+l.X[3],3Q=l.X[0]+l.X[1];2f(f,D,8,[\'J-13\',\'J-1N\',\'J-11\',\'J-1P\']);G.A.U=f.1c+\'F\';G.A.1B=f.T+\'F\';D.A.U=w+\'F\';D.A.1B=4O+\'F\';G.A.26=\'3X\';G.A.11=\'17\';G.A.13=\'17\';G.1C();D.Z(m);f.Z(G);G.Z(1h);m.A.26=\'33\';D.A.26=\'33\';m.A.11="0";m.A.U="4K%";D.A.4J=\'2t\';D.A.13="-"+l.X[2]+"F";D.A.11="-"+l.X[0]+"F";l.3R=1h.T;l.39=6(){7 a=m.5E,36=5H=0;1n(7 i=0;il.2g[1])?1:0;l.3q=(3yl.2g[3])?1:0;l.3l=a-l.4Z;l.3r=3m-l.4V;l.35=(l.3l>40)?1:(l.3l<-40)?-1:0;l.2Y=(l.3r>40)?1:(l.3r<-40)?-1:0;5((l.35!=0||l.2Y!=0)&&!l.1X)l.1X=H.2Z(6(){5(l.35==0&&l.2Y==0){H.2n(l.1X);l.1X=8;B};2H();5(l.3p==1||l.3q==1)f.18((l.35*l.3p)+"s",(l.2Y*l.3q)+"s",C)},45)}6 2m(){E.2c(g,\'2w\',3n);5(l.1X)H.2n(l.1X);l.1X=8;5(l.3w)H.53(l.3w);5(l.3s)H.2n(l.3s)}6 2H(){l.3v=(H.58)?H.58:(g.2b&&g.2b.1V)?g.2b.1V:0;l.3o=(H.52)?H.52:(g.2b&&g.2b.1T)?g.2b.1T:0}f.1D=6(a){5(G.L[1]()===0||G.L[0]()===0)B;m.A.J=\'4X\';7 b=l.W[0],4G=l.W[1],3e=G.2k,2C=G.2R,32,2W,2z=[];G.A.U=f.1c-3I+\'F\';G.A.1B=f.T-3V+\'F\';2z[0]=l.O[0];2z[1]=l.O[1];l.W[0]=l.39()>l.O[0];l.W[1]=l.2G()>l.O[1];7 c=(b!=l.W[0]||4G!=l.W[1]||2z[0]!=l.O[0]||2z[1]!=l.O[1])?C:8;3e.19.3h(l.W[1]);2C.19.3h(l.W[0]);32=(l.W[1]||l.1W[1]);2W=(l.W[0]||l.1W[0]);l.39();l.2G();l.3T();l.3J();5(!l.W[0]||!l.W[1]||l.1k[0]||l.1k[1])2C.2D.1C();1l 2C.2D.2y();5(32)3b(3e,(2W&&!l.1k[0])?l.1x[1]:0);1l m.A.11="0";5(2W)3b(2C,(32&&!l.1k[1])?l.1x[0]:0);1l m.A.13="0";5(c&&!a)f.1D(C);m.A.J=\'17\';l.1o[0]=l.1o[1]=8};f.69=f.18=6(a,b,c){7 d=[[8,8],[8,8]],Q;5((a||a===0)&&l.V[0]){a=3z(a,0);Q=G.2R.4;Q.1a=(c)?Y.1U(Y.1Y(Q.1I,Q.1a-a),0):-a;Q.43();d[0]=[-Q.1a-Q.1O,-Q.1I]}5((b||b===0)&&l.V[1]){b=3z(b,1);Q=G.2k.4;Q.1a=(c)?Y.1U(Y.1Y(Q.1I,Q.1a-b),0):-b;Q.43();d[1]=[-Q.1a-Q.1O,-Q.1I]}5(!c)l.1o[0]=l.1o[1]=8;B d};f.3a=6(a){5(a==14||!4c(a))B;7 b=4f(a);f.18(b[0]+l.X[2],b[1]+l.X[0],8);f.18(0,0,C)};2f(1d,f,\'17\',[\'1u-13-U\',\'1u-1N-U\',\'1u-11-U\',\'1u-1P-U\']);f.4S(1d);f.1T=0;f.1V=0;f.2X=C;30(f,\'64\',8);f.1D();f.18(57,s,C);5(t.R(3d)){f.3a(g.20(t.R(3d)[1]))}G.2y();l.6a=H.2Z(6(){7 n=1h.T;5(n!=l.3R){f.1D();l.3R=n}},6c);6 3z(v,i){7 a=v.6e();v=6f(a);B 1b((a.R(/p$/))?v*l.O[i]*0.9:(a.R(/s$/))?v*l.O[i]*0.1:v)}6 3k(a){7 a=a.63(\'-\'),3u=a[0],i;1n(i=1;3t=a[i];i++){3u+=3t.62(0).5R()+3t.5S(1)}B 3u}6 N(a,b){5(H.4E)B H.4E(a,14).5T(b);5(a.4w)B a.4w[3k(b)];B 8};6 2f(a,b,c,d){7 e=2i 3U();1n(7 i=0;i0)||(1y[1][0]==0&&1g<0)));5(l.V[0]&&(!l.V[1]||1K))1y=f.18(l.3i[1G],8,C);3Z=!l.V[0]||(l.V[0]&&l.V[1]&&2P&&!1K)||(l.V[0]&&((1y[0][0]==1y[0][1]&&1g>0)||(1y[0][0]==0&&1g<0)));5(2P&&3Z&&!1K)l.1o[1G]=C;1l l.1o[1G]=8;5(e.1J)e.1J();B 8};6 4c(a){1H(a.1A){a=a.1A;5(a==f)B C}B 8};6 1r(a){7 b=a,23=1z=0;7 c="";5(b.38){1H(b){23+=b.4y;1z+=b.4x;b=b.38;c+=1z+" "}}1l 5(b.x){23+=b.x;1z+=b.y}a.1f=23;a.1e=1z};6 4f(a){7 b=a;23=1z=0;1H(!b.T&&b.1A&&b!=m&&N(b,\'3D\')=="5K"){b=b.1A}5(b.38){1H(b!=m){23+=b.4y;1z+=b.4x;b=b.38}}B[23,1z]};6 30(a,b,c){5(!a.1t)a.1t=\'\';7 d=a.1t;5(b&&!d.R(2F("(^|\\\\s)"+b+"($|\\\\s)")))d=d.3O(/(\\S$)/,\'$1 \')+b;5(c)d=d.3O(2F("((^|\\\\s)+"+c+")+($|\\\\s)","g"),\'$2\').3O(/\\s$/,\'\');a.1t=d}},4v:6(){5(E.34)1m.2n(E.34);7 d=/#([^#.]*)$/,2l=/(.*)#.*$/,5D,i,1w,4B=15.2J("a"),2q=15.3W.1i;5(2q.R(2l))2q=2q.R(2l)[1];1n(i=0;1w=4B[i];i++){5(1w.1i&&1w.1i.R(d)&&1w.1i.R(2l)&&2q===1w.1i.R(2l)[1]){1w.3P=C;E.M(1w,\'5t\',6(e){5(!e)e=1m.1E;7 a=(e.1j)?e.1j:P;1H(!a.3P&&a.1A){a=a.1A};5(!a.3P)B;7 b=15.20(a.1i.R(d)[1]),31=8;5(b==14)b=(b=15.5z(a.1i.R(d)[1])[0])?b:14;5(b!=14){7 c=b;1H(c.1A){c=c.1A;5(c.3a){c.3a(b);31=c}};5(31){5(e.1J)e.1J();15.3W.1i="#"+a.1i.R(d)[1];31.3c.2d();B 8}}})}};E.3L();5(1m.48)1m.48()},3L:6(){5(E.5B)B;E.5u=C;7 a=E.4d(15.2J("5q")[0],"4u",\'4a\');1n(7 i=0,3K;3K=a[i];i++)E.3C(3K)},4d:6(a,b,c){5(3E(a)==\'4F\')a=15.20(a);5(a==14)B 8;7 d=2i 2F("(^|\\\\s)"+c+"($|\\\\s)"),5y,3B=[],3H=0;7 e=a.2J(b);1n(7 i=0,2v;2v=e[i];i++){5(2v.1t&&2v.1t.R(d)){3B[3H]=2v;3H++}}B 3B},34:1m.2Z(6(){7 a=15.20(\'4a-5I\');5(a!=14){E.3L();1m.2n(E.34)}},4K),M:6(a,b,c){5(!E.2e(a,b,c)&&a.4h){a.4h(\'4g\'+b,c)}},2e:6(a,b,c){5(a.46){a.46(b,c,8);1m.46("5c",6(){E.2c(a,b,c)},8);B C}1l B 8},2c:6(a,b,c){5(!E.4e(a,b,c)&&a.4b)a.4b(\'4g\'+b,c)},4e:6(a,b,c){5(a.49){a.49(b,c,8);B C}1l B 8}};6 6L(a){E.3C(a)};E.4k();',62,420,'||||sBr|if|function|var|false||||||||||||||||||||||||||||sY|return|true|mDv|fleXenv|px|tDv|wD|movBr|padding|curPos|getSize|addTrggr|getStyle|cntRSize|this|Bar|match||offsetHeight|width|scroller|reqS|paddings|Math|appendChild||top|createDiv|left|null|document|setPos|0px|contentScroll|sDv|trgtScrll|parseInt|offsetWidth|pDv|yPos|xPos|delta|fDv|href|srcElement|forcedHide|else|window|for|edge||style|findPos||className|border|sSBr|anchoR|barSpace|scrollState|curtop|parentNode|height|fHide|scrollUpdate|event|target|iNDx|while|mxScroll|preventDefault|hoverH|mV|keyAct|right|targetSkew|bottom|cntSize|nV|id|scrollTop|min|scrollLeft|forcedBar|tSelectFunc|max|sFBr|getElementById|goScroll|minPos|curleft|sSDv|_|position|maxPos|moved|mWheelProc|indx|documentElement|remTrggr|mDPosFix|addChckTrggr|copyStyles|mTBox|clientX|new|createScrollBars|vrt|urlExt|intClear|clearInterval|sFDv|setSize|urlBase|visibility||hidden|indexOf|pusher|mousemove|retFalse|fShow|cPSize|barPadding|clientY|hBr|jBox|stdMode|RegExp|getContentHeight|pageScrolled|ofstParent|getElementsByTagName|vertical|mMoveBar|scrollBoth|focusProtect|formItem|vEdge|userAgent|hrz|barZ|sRange|clicked|mouseup|hUpReq|fleXcroll|sYdir|setInterval|classChange|eScroll|vUpReq|relative|catchFastInit|sXdir|maxCWidth|mMouseUp|offsetParent|getContentWidth|scrollToElement|updateScroll|fleXdata|uReg|vBr|padLoss|baseProp|setVisibility|wheelAct|mdX|camelConv|xAw|mY|tSelectMouse|yScrld|mOnXEdge|mOnYEdge|yAw|barClickScroll|parT|reT|xScrld|barClickRetard|doScrollPos|mdY|calcCScrollVal|refreshTimeout|retArray|fleXcrollMain|display|typeof|forcedPos|hElem|key|brdWidthLoss|setWidth|tgDiv|initByClass|selectstart|mHeight|replace|fleXanchor|padHeightComp|zTHeight|zIndex|setHeight|Array|brdHeightLoss|location|absolute|inputName|hEdge||maxx|prepareScroll|contentScrollPos|baseAct||addEventListener|onmousedown|onfleXcrollRun|removeEventListener|flexcroll|detachEvent|isddvChild|getByClassName|remChckTrggr|findRCpos|on|attachEvent|aSize|pointerOffsetY|fleXcrollInit|HTMLElement|pointerOffsetX|scrlTrgt|getPos|index|setTimeout|80|flexinactive|inCurPos|div|globalInit|currentStyle|offsetTop|offsetLeft|load|detail|anchorList|wheelDelta|createElement|getComputedStyle|string|reqV|paddingLeft|mousewheel|overflow|100|paddingTop|solid|1em|postHeight|pkeY|vBar|keyCode|removeChild|DOMMouseScroll|fixIEDispBug|inMposY|100p|1px|length|inMposX|opera|100px|pageYOffset|clearTimeout|brdWidth|intlWidth|firstChild|oScrollX|pageXOffset|none|_hscroller|block|unload|vscroller|domfixdiv|mcontentwrapper|copyholder|blur|onblur|textarea|scrollwrapper|zoomdetectdiv|xScroll|input|yScroll|select|body|blue|containerSize|click|initilialized|black|2px|borderBottom|clsnm|getElementsByName|999|initialized|borderBottomWidth|matcH|childNodes|focus|contentSize|compPad|init|navigator|inline|fontSize|12px|platform|hscroller|scrollgeneric|scrollerjogbox|toUpperCase|substr|getPropertyValue|bscrollgeneric|_38|_37|_39|prototype|_40|visible|base|charAt|split|flexcrollactive|Object|MSIE|KDE|flex__|commitScroll|sizeChangeDetect|basebeg|2500|vendor|toString|parseFloat|mousedown|undefined|hBar|setAttribute|bar|_35|keydown|425|tabIndex|onmouseclick|type|onmousewheel|75|Mac|resize|contentwrapper|dblclick|ondblclick|AppleWebKit|onmouseover|keyup|barbeg|Safari|barend|keypress|baseend|_33|OmniWeb|_34|_36|auto|CSBfleXcroll'.split('|'),0,{}))

now creat your css file

where can put your css code and link to this css file to in your html file

flowing code
i am passing id mainbody in javascript function which is mention in html head code
/*#mainbody, {background-color: #FFFFFF; width: 602px; height: 338px;margin-left:-8px;margin-top:-12px; overflow: auto; border-bottom: 2px solid #F1EECC; border-top: 2px solid #F1EECC; outline: none;}
#test1 {background-color: #FFFFFF; left: 0.8em; top: 1em; }
#test1 div {color: #000000;}
.aligntocenter {margin: 0.5em auto; border: 2px solid #A22; width: 90%; position: relative; height: 500px;}
.fixedsize {width: 400px; height: auto; position: relative; color: black; padding: 1px;}
.scrollgeneric {line-height: 1px; font-size: 1px; position: absolute;}
.vscrollerbase, .vscrollerbar {width: 25px; top: 0px;}
.vscrollerbar {left: 0px;}
.hscrollerbase, .hscrollerbar {height: 15px; left: 0px;}
.hscrollerbar {top: 0px;}
.vscrollerbar, .hscrollerbar {padding: 5px; z-index: 2;}
.vscrollerbarbeg {background-color:#C1C9D0 url(images/verticlascroll.gif) 0px -10px; width: 25px; height: 20px;}
.vscrollerbarend {background-color:#C0CBD8 url(images/verticalscroll.gif); width: 25px; height: 10px;}
.hscrollerbarbeg {background-color:#410000 url(/web/images/verticaloverscroll.gif) -10px 0px; height: 15px; width: auto; left: 0;}
.hscrollerbarend {background-color:#410000 url(/web/images/verticaloverscroll.gif); height: 15px; width: 10px;}
.vscrollerbase, .hscrollerbase {background-color: #D1DDCB; background-image: url(images/horigentalscroll.png);}
.hscrollerbasebeg {left: 0px; top: 0px; height: 15px; background: url(images/scrollbases.gif) -22px 0px no-repeat;}
.hscrollerbaseend {top: 0px; height: 15px; width: 7px; background: url(images/scrollbases.gif) 0% 0% no-repeat;}
.vscrollerbasebeg {top: 0px; width: 15px; background: url(images/scrollbases.gif) -7px -8px no-repeat;}
.vscrollerbaseend {height: 7px; width: 15px; background: url(images/scrollbases.gif) -7px 0px no-repeat;}
.scrollerjogbox {width: 15px; height: 15px; bottom: 0px; right: 0px; background: white url(images/scrolljog.gif) 50% 50%;}*/

after finished all these stuff your particular div scroll design as you need change your css code as you need

Note : My English communication is note strong so please avoid sentence error

if you need any query please email me anand.hey@gmil.com

structure using through div in your html

let me explain how to use div in your html page

1.) suppose your html page have header, left panel, right panel, main body, footer

that time
your structurer should

i am using inline css but avoid inline css always use link css

let me explain id & class for css

id is particular identification which id use for single identity
class is not particular identification
class can use many time but id use one time
first you should use global css in your css * {margin:0px;padding:0px}
than body {margin:auto;padding:auto;font-family:Arial, Verdana, sans-serif;font-size:12px;font-decoration:none;line-height:12px;text-decoration:none;}


you can use following structure in side body tag and closing before body tag

header

left panel which is showing left side. Don't use height because if you fixed your div height it will create problem when your content is goes to long. That time your are gating scroll your particular
div which is not good for a website.

main content where can use your content float:left always position in left

right panel after float this div position right side

may be some time you have a problem
1.) suppose you main content have long content but left panel and right panel have sort content that time your main body may be hidden. That time you should use a class
.clear {clear:both;} in your css, and use

before closing your main body div tag that time your main body showing perfect

Note: My English is not strong please if any sentence error avoid and frequently ask
question. anand.hey@gmail.com