One Columns Css File

http://www.infotechcomputer.
in
“Jh x.ks'kk; ue%“
‘INFOTECH DHTML & CSS’

1. Position - Relative
<html> <head> <style>
h1.ex1{position:relative;left:20px;}
h1.ex2{position:relative;left:-20px;}
</style>
</head>
<body>
<h1>Normal Heading</h1>
<h1 class="ex1">Heading +20</h1>
<h1 class="ex2">Heading -20</h1>
<p>
Relative positioning moves an element relative to its original position.
</p>
<p>"left:20" adds 20 pixels to the element's LEFT Position.</p>
<p>"left:-20" subtracts 20 pixels from the element's LEFT position.</p>
</body> </html>
2. Position - Absolute
h1.x{position:absolute;left:100px;top:150px;}
</style>
</head>
<body>
<h1 class="x">This is a heading</h1>
INFOTECH Computer Education, Kishangarh (Raj)  9829171122 Page 1

<p>With absolute positioning, an element can be placed anywhere on a page.</p>
<p>The LEFT position of the heading is 100 pixels from the left of the page. The TOP position
is 150 pixels from the top of the page.</p>
</body> </html>
3. Visibility
h1.one{visibility:visible;}
h1.two{visibility:hidden;}
</style>
</head>
<body>
<h1 class="one">Heading one</h1>
<h1 class="two">Heading two</h1>
<p>Where is heading two?</p>
</body> </html>
4. Z Index
img.x{position:absolute;left:0px;top:0px;z-index:1;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index 1 has higher priority.</p>
</body> </html>
5. Cursors
<html> <body>
<p>Move the mouse over the words to see the cursor change</p>
<span style="cursor: auto">Auto</span><br>
<span style="cursor:
crosshair">Crosshair</span><br>
<span style="cursor:default">Default</span><br>
<span style="cursor:pointer">Pointer</span><br>
<span style="cursor:hand">Hand</span><br>
<span style="cursor:move">Move</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: wait">wait</span><br>
<span style="cursor: help">help</span><br>
</body> </html>
6. Watermark
body{background-attachment: fixed;background-image: url("bulboff.gif");background-repeat:
no-repeat;}
</style>
</head>
<body>
<p>Scroll the page and see what happens</p><br><br><br><br><br><br><br>
<p>Scroll the page and see what happens</p>
</body> </html>
7. Change Background Color
<html> <head>
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
</head>
<body>
<b>Mouse over the squares and the background color will change!</b>
<table width="300" height="100">
<tr>
<td onmouseover="bgChange('red')" onmouseout="bgChange('transparent')" bgcolor="red">
</td>
<td onmouseover="bgChange('blue')" onmouseout="bgChange('transparent')"
bgcolor="blue">
</td>
<td onmouseover="bgChange('green')" onmouseout="bgChange('transparent')"
bgcolor="green">
</td>
</tr>
</table>
</body> </html>
13. Onload
<html> <head>
function mymessage()
{
alert("This message was triggered from the
onload event");
}
</script>
</head>
<body onload="mymessage()">
</body>
14. Onunload
<html> <head>
function mymessage()
{
alert("This message was triggered from the
onunload event");
}
</script>
</head>
<body onunload="mymessage()">
<p>An alert box will display a message when you close this document!</p>
</body> </html>
15. Onchange
<html> <head>
function preferedBrowser()
{
prefer=document.forms[0].browsers.value;
alert("You prefer browsing internet with " +
prefer);
}
</script>
</head>
<body>
<form>
Choose which browser you prefer:
<select id="browsers" onchange="preferedBrowser()">
<option value="Internet Explorer">Internet Explorer
<option value="Netscape">Netscape Navigator
</select>
</form>
</body> </html>
16. Onsubmit
<html> <head>
function confirmInput()
{
fname=document.forms[0].fname.value;
alert("Hello " + fname + "! You will now be redirected to www.w3Schools.com");
}
</script>
</head>
<body>
<form onsubmit="confirmInput()" action="http://www.w3schools.com/">
Enter your name: <input id="fname" type="text" size="20"> <input type="submit">
</form>
</body> </html>
17. Onreset
<html> <head>
function message()
{
alert("This alert box was triggered by the
onreset event handler");
}
</script>
</head>
<body>
<form onreset="message()">
Enter your name: <input type="text" size="20"> <input type="reset">
</select>
</form>
</body> </html>
18. Onselect
<html> <head>
function message()
{
alert("This alert box was triggered when you selected the content of the input field");
}
</script>
</head>
<body>
<p>Select the content in the input field</p>
<form>
<input type="text" value="Select this text" onselect="message()" size="20">
</form>
</body> </html>
19. Onblur
<html> <head>
function message()
{
alert("This alert box was triggered by the onblur event handler");
}
</script>
</head>
<body>
<p>The onblur event occurs when an element loses focus. Try to click or write in the input
field below, then click elsewhere in the document so the input field loses focus.</p>
<form>
Enter your name: <input type="text" onblur="message()" size="20">
</form>
</body> </html>
20. Onfocus
<html> <head>
function message()
{
alert("This alert box was triggered by the onfocus event handler");
}
</script>
</head>
<body>
<form>
Enter your name: <input type="text" onfocus="message()" size="20">
</form>
</body> </html>
21. Onkeydown
<html> <head>
function writeMessage()
{
document.forms[0].mySecondInput.value=document.forms[0].myInput.value;
}
</script>
</head>
<body>
<p>The onkeydown event occurs when the a keyboard key is on it's way DOWN.</p>
<form>
Enter your name: <input type="text" name="myInput" onkeydown="writeMessage()" size="20">
<input type="text" name="mySecondInput" size="20">
</select>
</form>
</body> </html>
22. Onkeyup
<html> <head>
function writeMessage()
{
document.forms[0].mySecondInput.value=document.forms[0].myInput.value;
}
</script>
</head>
<body>
<p>The onkeyup event occurs when the a keyboard key is on it's way UP.</p>
<form>
Write a message:<br>
<input type="text" name="myInput" onkeyup="writeMessage()" size="20">
<input type="text" name="mySecondInput" size="20">
</form>
</body> </html>
23. Onkeypress
<html> <head>
function message()
{
alert("This alert box was triggered when you pressed a button on your keyboard");
}
</script>
</head>
<body onkeypress="message()">
<p>The onkeypress event is triggered when the user presses a button on the keyboard.</p>
<p>To trigger the onkeypress event, make sure that this window has focus.</p>
</body> </html>
24. Onmouseover and Onmouseout

<html> <body>
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">
Mouse over this text</h1>
</body> </html>
25. Onclick
<html> <head>
cc=0;
function changeimage()
{
if (cc==0)
{
cc=1;
document.getElementById('myimage').src="bulbon.gif";
}
else
{
cc=0;
document.getElementById('myimage').src="bulboff.gif";
}
}
</script>
</head>
<body>
<img id="myimage" onclick="changeimage()" border="0" src="bulboff.gif" width="100"
height="180">
<p>Click to turn on/off the light</p>
</body> </html>
26. Ondoubleclick
<html> <head>
function gettip(txt)
{
document.getElementById('tip').innerHTML='W3Schools is about WEB standards, and
scripting technologies for the World Wide Web';
}
</script>
</head>
<body>
<p>Double click the "W3Schools.com"</p>
<table>
<tr>
<th ondblclick="gettip()" valign="top">W3Schools.com</th> <th id="tip"> </th>
</tr>
</table>
</body> </html>
27. Onmouseup and Onmousedown

<html> <head>
function lighton()
{
document.getElementById('myimage').src="bulbon.gif";
}
function lightoff()
{
document.getElementById('myimage').src="bulboff.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif"
width="100" height="180">
<p>Click to turn on the light</p>
</body>
</html>
28. Onmousemove
<html>
<head>
var i=1;
function moveright()
{
document.getElementById('header').style.position="relative";
document.getElementById('header').style.left=i;
i++;
}
</script>
</head>
<body onmousemove="moveright()"> <h1 id="header"> Move the mouse over this page </h1>
</body> </html>
29. Disable Right Click

<html> <head>
function disable()
{
if (event.button == 2)
{
alert("Sorry no rightclick on this page.\nNow
you cannot view my source\nand you cannot
steal my images");
}
}
</script>
</head>
<body onmousedown="disable()">
<p>Right-click on this page to trigger the event.</p>
<p>Note that this does not guarantee that someone won't view the page source or steal the
images.</p>
</body> </html>
30. Tooltip
<html> <head>
{
document.getElementById('tip').innerHTML=txt;
}
function reset()
{
document.getElementById('tip').innerHTML="";
}
</script>
</head>
<body>
<p>Mouse over these drinks:</p>
<span onmouseover="gettip('Hot black drink')" onmouseout="reset()">Coffee</span>
<br><br>
<span onmouseover="gettip('Cold white drink')" onmouseout="reset()">Milk</span>
<p id="tip">INFOTECH</p>
</body> </html>
31. Typewriter
<html> <head>
message="The best way to learn, is to study examples. –http://infotechksg.weebly.com”
pos=0;
maxlength=message.length+1;
function writemsg()
{
if (pos<maxlength)
{
txt=message.substring(pos,0);
document.forms[0].msgfield.value=txt;
pos++;
timer=setTimeout("writemsg()",50);
}
}
function stoptimer()
{
clearTimeout(timer);
}
</script>
</head>
<body onload="writemsg()" onunload="stoptimer()">
<form>
<input id="msgfield" size="65">
</form>
</body> </html>
32. Shake Window

<html> <head>
<script>
function startEQ()
{
richter=5;
parent.moveBy(0,richter);
parent.moveBy(0,-richter);
parent.moveBy(richter,0);
parent.moveBy(-richter,0);
timer=setTimeout("startEQ()",10);
}
function stopEQ()
{
}
</script>
</head>
<body>
<form>
<input type="button" onclick="startEQ()" value="Start an earthquake"> <br><br>
<input type="button" onclick="stopEQ()" value="Stop the earthquake">
</form>
</body> </html>
33. Menu 1
span {border:groove 2px;padding:3px;font-family:arial;font-
size:12px;width:100px;height:70px;background-
color:#c0c0c0;position:relative;top:-80px;left:-10px;}
</style>
function showmenu(elmnt)
{
elmnt.style.top="-15px";
}
function hidemenu(elmnt)
{
elmnt.style.top="-80px";
}
</script>
</head>
<body>
<span onmouseover="showmenu(this)" onmouseout="hidemenu(this)">
<a href="/default.asp">HOME</a><br>
<a href="/js/default.asp">JavaScript</a><br><br><hr>INFOTECH Computer Education<br>
</span>
<p></p>
<p></p>
<p> <a href="http://www.microsoft.com"> Explorer</a> <br>
<a href="http://my.netscape.com">Navigator</a> <br><br></p>
<hr />
Browser<br>
</span>
<p></p>
<p></p>
<p>
<a href="http://www.altavista.com">Alta Vista</a><br>
<a href="http://www.yahoo.com">Yahoo!</a><br><br></p>
<hr>
Search<br></span>
</body> </html>
34. Left Menu

Table { font-size:12; background-color:#c0c0c0; }
span{border:groove 2px;padding:3;font-family:arial;font-
size:12;width:90;height:40;background-color:#c0c0c0;
position:relative;top:-15;left:-80;}
</style>
{
elmnt.style.left="-10";
}
{
elmnt.style.left="-80";
}
</script>
</head>
<body>
<table border="0" width="100%">
<tr>
<td width="90%"><a href="/default.asp">HOME</a></td>
<td rowspan="2">A</td>
</tr>
<tr><td><a href="/js/default.asp">JavaScript</a></td></tr>
</table>
</span>
<br>
<table width="100%">
<tr> <td width="90%"><a href="http://www.microsoft.com">Explorer</a></td>
<td rowspan="2">B</td></tr><tr>
<td><a href="http://my.netscape.com">Navigator</a></td></tr>
</table>
</span>
<br>
<tr>
<td width="90%"><a href="http://www.altavista.com">AltaVista</a></td>
<td rowspan="2">C</td></tr>
<tr><td><a href="http://www.yahoo.com">Yahoo!</a></td></tr>
</table>
</span>
</body> </html>
35. Select Menu

<html> <head>
function go()
{
location=document.forms[0].gowhere.value;
}
</script>
</head>
<body>
<form>
<select id="gowhere" onchange="go()">
<option>-Select location-
<option value="/asp/default.asp">ASP Coding
<option value="/flash/default.asp">Flash Tutorial
<option value="/js/default.asp">JavaScripts
</select>
</form>
</body> </html>
36. Drop Down Menu

body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu{font-size:100%;position:absolute;visibility:hidden;}
</style>
{
document.getElementById(elmnt).style.visibility="visible";
}
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<h3>Drop down menu</h3>
<tr bgcolor="#FF8080"><td onmouseover="showmenu('tutorials')"
onmouseout="hidemenu('tutorials')">
<a href="/default.asp">Tutorials</a><br>
<table class="menu" id="tutorials" width="120">
<tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
<tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr>
<tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
<tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
<tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
<a href="/default.asp">Scripting</a><br>
<table class="menu" id="scripting" width="120">
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
<tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
<a href="/site/site_validate.asp">Validation</a><br>
<table class="menu" id="validation" width="120">
<tr><td class="menu"><a href="/site/site_validate.asp">Validate HTML</a></td></tr>
<tr><td class="menu"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr>
<tr><td class="menu"><a href="/site/site_validate.asp">Validate CSS</a></td></tr>
<tr><td class="menu"><a href="/site/site_validate.asp">Validate XML</a></td></tr>
<tr><td class="menu"><a href="/site/site_validate.asp">Validate WML</a></td></tr>
</table>
</td>
</tr>
</table>
<p>Mouse over these options to see the drop down menus</p>
</body> </html>
37. Always on TOP

<html> <head>
var timer;
function scrolltop()
{
document.getElementById('scrollmenu').style.top=document.body.scrollTop;
timer=setTimeout("scrolltop()",1);
}
function stoptimer()
{
}
</script>
</head>
<body onload="scrolltop()" onunload="stoptimer()">
<span id="scrollmenu" style="position:absolute">
<b>Menu</b><br> <a href="http://infotechksg.weebly.com">INFOTECH Computer
Education</a><br>
<a href="http://www.microsoft.com">Microsoft</a><br>
<a href="http://www.altavista.com">Altavista</a><br>
</span>
<table border="0" width="100%">
<tr><td width="100"> </td>
<td>Scroll this page to see the "always-on-top" menu <br><br><br><br><br>
Scroll this page to see the "always-on-top" menu <br><br><br><br><br>
</td>
</tr>
</table>
</body> </html>
38. Inset
<html> <head>
function inset(elmnt)
{
elmnt.style.border="inset 2";
}
function outset(elmnt)
{
elmnt.style.border="outset 2";
}
</script>
<style>
td{background:C0C0C0;border:2px outset;}
</style>
</head>
<body>
<table width="80">
<tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a
href="a1.html">HOME</a></td></tr>
href="a2.html">JavaScript</a></td></tr>
href="a3.html">Explorer</a></td></tr>
href="a4.html">Navigator</a></td></tr>
href="a5.html">AltaVista</a></td></tr>
<tr><td onmouseover="inset(this)" onmouseout="outset(this)"><a href="a6.html">Yahoo!
</a></td></tr>
</table>
</body> </html>
39. Description Menu

<html><head><style>
table{background:black;}
a{text-decoration:none;color:#000000;}
th{width:150px;background:#FF8080;}
td{font:bold;background:#ADD8E6;}
</style>
{
document.getElementById('tip').innerHTML=txt;
}
function reset()
{
document.getElementById('tip').innerHTML=" ";
}
</script>
</head>
<body>
<b>Mouse over the links to see their descriptions</b><br>
<table width="400px">
<tr><th><a href="http://infotechksg.weebly.com" onmouseover="gettip('Where Quality
Matters’)"
onmouseout="reset()">W3Schools.com</a></th>
<td rowspan="3" id="tip"> </td> </tr>
<tr> <th> <a href="http://www.microsoft.com" onmouseover="gettip('Microsoft Internet
Explorer')"
onmouseout="reset()">Internet Explorer</a> </th> </tr>
<tr><th> <a href="http://my.netscape.com" onmouseover="gettip('Netscape Navigator')"
onmouseout="reset()">Netscape Navigator</a></th> </tr>
</table>
</body> </html>
40. Sliding Vertically

table{background:black;position:absolute;}
table.topnav{font-size:80%;top:0;left:0;}
table.menu{font-size:100%;bottom:0;z-index:-1;}
</style>
var i=0;
var intHide;
function show()
{
if (i>-100)
{
i=i-1;
document.all("menu").style.bottom=i;
}
}
function showmenu()
{
clearInterval(intHide);
intShow=setInterval("show()",10);
}
function hide()
{
if (i<0)
{
i=i+1;
document.all("menu").style.bottom=i;
}
}
function hidemenu()
{
clearInterval(intShow);
intHide=setInterval("hide()",10);
}
</script>
</head>
<body>
<table class="topnav" width="150">
<tr bgcolor="#FF8080"> <td onmouseover="showmenu()" onmouseout="hidemenu()">
<a href="/default.asp"> MENU</a><br>
<table class="menu" id="menu" width="100%">
<tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
<tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr>
<tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
<tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
<tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
</table>
</td>
</tr>
</table>
<br>
<p>Mouse over MENU to see the menu options</p>
</body> </html>
41. Horizontal Sliding

table.nav{background:black;position:relative;font: bold 80% arial;top:0px;left:-135px;}
</style>
var i=-135;
var intHide;
var speed=3;
function showmenu()
{
clearInterval(intHide);
intShow=setInterval("show()",10);
}
function hidemenu()
{
clearInterval(intShow);
intHide=setInterval("hide()",10);
}
function show()
{
if (i<-12)
{
i=i+speed;
document.getElementById
('myMenu').style.left=i;
}
}
function hide()
{
if (i>-135)
{
i=i-speed;
document.getElementById
('myMenu').style.left=i;
}
}
</script>
</head>
<body>
<table id="myMenu" class="nav" width="150" onmouseover="showmenu()"
onmouseout="hidemenu()">
<tr><td class="menu"><a href="/default.asp">HOME</a></td>
<td rowspan="5" align="center" bgcolor="#FF8080">M<br>E<br>N<br>U</td></tr>
<tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
</table>
<p>Mouse over the MENU to show/hide the menu</p>
<p>Try changing the "speed" variable in the script, to change the menus's sliding speed</p>
</body> </html>
42. Cursor Trial

<html> <head>
var i=0;
txt=new Array("trailA","trailB","trailC");
function cursor(interval)
{
pos=i*8+5;
if (interval=='first')
{
i=0;
}
if (i==0)
{
xpos=event.clientX;
ypos=event.clientY;
document.all(txt[i]).style.visibility="visible";
document.all(txt[i]).style.position="absolute";
document.all(txt[i]).style.left=xpos+5;
document.all(txt[i]).style.top=ypos+5;
}
else
{
document.all(txt[i]).style.visibility="visible";
document.all(txt[i]).style.position="absolute";
document.all(txt[i]).style.left=xpos+pos;
document.all(txt[i]).style.top=ypos+pos;
}
if (i==txt.length)
{
i=i;
}
else
{
i++;
}
setTimeout("cursor('next')",10);
}
</script>
</head>
<body onmousemove="cursor('first')">
<h1>Move the cursor over this page</h1>
<span id="trailA" style="visibility:hidden">W</span>
<span id="trailB" style="visibility:hidden">3</span>
<span id="trailC" style="visibility:hidden">S</span>
</body> </html>
43. Cursor Image

<html> <head>
function cursor(event)
{
document.getElementById('trail').style.visibility="visible";
document.getElementById('trail').style.position="absolute";
document.getElementById('trail').style.left=event.clientX+10;
document.getElementById('trail').style.top=event.clientY;
}
</script>
</head>
<body onmousemove="cursor(event)">
<img id="trail" style="visibility:hidden" src="w3schools.gif" width="100" height="30">
</body> </html>
44. Cursor Text

<html> <head>
function cursor(event)
{
document.getElementById('trail').style.visibility="visible";
document.getElementById('trail').style.position="absolute";
document.getElementById('trail').style.left=event.clientX+10;
document.getElementById('trail').style.top=event.clientY;
}
</script>
</head>
<body onmousemove="cursor(event)">
<span id="trail" style="visibility:hidden">Cursor Text</span>
</body> </html>

One Columns Css File

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

One Columns Css File

Uploaded by

Copyright:

Available Formats

http://www.infotechcomputer.

‘INFOTECH DHTML & CSS’

INFOTECH Computer Education, Kishangarh (Raj)  9829171122 Page 1

24. Onmouseover and Onmouseout

27. Onmouseup and Onmousedown

29. Disable Right Click

32. Shake Window

34. Left Menu

35. Select Menu

36. Drop Down Menu

37. Always on TOP

39. Description Menu

40. Sliding Vertically

41. Horizontal Sliding

42. Cursor Trial

43. Cursor Image

44. Cursor Text

You might also like