| Author: Deepa 23 Jul 2008 | Member Level: Diamond | Rating:  Points: 6 |
<!-- TWO STEPS TO INSTALL DRAG AND DROP MENU:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<style type="text/css">
.move {
width: 100%;
background-color: #004891;
border-bottom: 1px solid #004891;
font-size: 14px;
font-family: verdana;
font-color: #004891;
text-align: center;
}
.info
{
width: 100%;
background-color: #E9F0F8;
border-top: 1px solid #004891;
font-size: 13px;
font-family: verdana;
font-color: #004891;
}
.panel
{
width: 150px;
position: absolute;
border: 1px solid #004891;
left: 50;
top: 0;
font-size: 13px;
font-family: verdana;
}
.panel a:visited {color: #004891;}
.panel a {text-decoration: none; color: #004891}
.panel a:hover {text-decoration: none;}
#panel a.visited{
text-decoration: none;
}
.menu
{
width:100%;
background-color: #E9F0F8;
font-size: 13px;
font-family: verdana;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
N = (document.all) ? 0 : 1;
var ob;
var over = false;
function MD(e) {
if (over)
{
if (N) {
ob = document.getElementById("panel");
X=e.layerX;
Y=e.layerY;
return false;
}
else {
ob = document.getElementById("panel");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
}
}
}
function MM(e) {
if (ob) {
if (N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>
</head>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<div id="panel" class="panel" >
<script language="JavaScript">
function getArray(id)
{
var splitarray = link[id].split("|");
return splitarray;
}
function info(i,obj,col)
{
sublink = getArray(i);
infobar = document.getElementById("infob");
infobar.innerHTML = " "+sublink[2];
obj.style.backgroundColor=col;
}
function endi(obj,col)
{
obj.style.backgroundColor=col;
infobar = document.getElementById("infob");
infobar.innerHTML = "<br>";
}
var link = new Array();
link[0] = "<img src='http://images.bravenet.com/bravenet/images/bullet.gif'> HOME|http://www.bravenet.com | Visit my homepage";
link[1] = "<img src='http://images.bravenet.com/bravenet/images/bullet.gif'> JavaScipts|http://www.bravenet.com| Free JavaScripts";
link[2] = "<img src='http://images.bravenet.com/bravenet/images/bullet.gif'> My links|http://www.bravenet.com | Visit my links";
link[3] = "<img src='http://images.bravenet.com/bravenet/images/bullet.gif'> HOME|http://www.bravenet.com | Visit my homepage";
link[4] = "<img src='http://images.bravenet.com/bravenet/images/bullet.gif'> JavaScript |http://www.bravenet.com| Free JavaScripts";
link[5] = "<img src='http://images.bravenet.com/bravenet/images/bullet.gif'> My links|http://www.bravenet.com | Visit my links";
document.write("<div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'><font color = #ffffff><b>Bravenet.com Scripts</b></font></div><div class='menu'><br></div>");
for(i=0;i<link.length;i++)
{
sublink = getArray(i);
document.write("<a href='"+sublink[1]+"'><div class='menu' onmouseover=\"info("+i+",this,'#ffffff')\" onmouseout=\"endi(this,'#E9F0F8')\" style='cursor:hand'> "+ sublink[0] +"</div></a>");
}
document.write("<div class='menu'><br></div><div class='info' id='infob' name='infob'><br></div>");
</script>
|
| Author: Shivshanker Cheral 23 Jul 2008 | Member Level: Diamond | Rating: Points: 0 |
code for change the font size
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O'Reilly & Associates
Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Change font size </title>
<style rel="stylesheet" id="mainStyle" type="text/css">
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}
</style>
<style id="normalStyle" type="text/css">
body {font-family:Verdana, Helvetica, sans-serif;
font-size:small}
#textSizer {text-align:right; display:none}
.textSize {border:1px solid black}
</style>
<style id="sizer" type="text/css" disabled="disabled">
#textSizer {display:block}
</style>
<style id="smallStyle" type="text/css" disabled="disabled">
body {font-size:xx-small}
</style>
<style id="largeStyle" type="text/css" disabled="disabled">
body {font-size:large}
</style>
<script type="text/javascript" src="../js/cookies.js"></script>
<script type="text/javascript">
// enable/disable
function setSizeStyle() {
if (document.getElementById) {
document.getElementById("sizer").disabled = false;
var styleCookie = getCookie("fontSize");
var styleIDs = ["smallStyle", "largeStyle"];
for (var i = 0; i < styleIDs.length; i++) {
if (styleCookie == styleIDs[i]) {
document.getElementById(styleIDs[i]).disabled = false;
} else {
document.getElementById(styleIDs[i]).disabled = true;
}
}
}
}
// set active style now, before content renders
setSizeStyle();
// invoked by clicking on sizer icons
function changeSizeStyle(styleID) {
setCookie("fontSize", styleID, getExpDate(180, 0, 0));
setSizeStyle();
}
</script>
</head>
<body style="background-color:#ffffff">
<h1 style="font-size:26px; font-weight:bold">User-selectable Font Sizes</h1>
<div id="textSizer">
<img src="fontSizer.jpg" height="18" width="72" alt="Font Sizer"><a
href="" onclick="changeSizeStyle('smallStyle'); return false"><img
class="textSize" src="fontSmall.jpg" height="18" width="18"
alt="Smallest" /></a><a href="" onclick="changeSizeStyle(''); return false"><img
class="textSize" src="fontMedium.jpg" height="18" width="18" alt="Default" /></a><a
href="" onclick="changeSizeStyle('largeStyle'); return false"><img
class="textSize" src="fontLarge.jpg" height="18" width="18" alt="Biggest" /></a>
</div>
<hr />
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</body>
</html>
|