Archive for January, 2010
Drop-Down Stickies
Attaching a drop-down sticky to a word or phrase in your document is an easy way to add valuable information close to the word, without obscuring it.
Code:
<?php
function start_link($text, $nextid)
{
$idtext = $nextid;
?>
<a href="javascript:void drop('<?=$idtext?>');">
<span id="a_<?=$idtext?>"><?=$text?></span>
</a>
<div id="<?=$idtext?>" class="drop" style="display:none">
<table cellspacing="0" cellpadding="0" width="170">
<tr>
<td valign="top" width="20">
<a href="javascript:void close(<?=$idtext?>)">
<img src="close.gif" border="0" />
</a>
</td>
<td valign="top" width="150">
<?php
}
//--------------------
function end_link()
{
?>
</td>
</tr>
</table>
</div>
<?php
}
//-----------------
function link_header()
{
?>
<style type="text/css">
.drop
{
padding:5px;
font-size:small;
background:#eeeeee;
border:1px solid black;
position:absolute;
}
</style>
<script type="text/javascript">
function drop(sid)
{
aobj = document.getElementById("a_" + sid);
divobj = document.getElementById(sid);
divobj.style.top = (aobj.offsetBottom + 10) + "px";
divobj.style.left = (aobj.offsetLeft + 10) + "px";
divobj.style.display = "block";
}
function close(sid)
{
divobj = document.getElementById(sid);
divobj.style.display = "none";
}
</script>
<?php
}
?>
<html>
<head>
<?php link_header(); ?>
</head>
<body>
Hello <?php start_link("my friend", 1); ?>
Jimmy <?php end_link(); ?> .How are you?
</body> </html>
Save this code as drop-down.php
Section Content with Spinners
This code shows how to create sections on your page with spinners that open and show section of the content interactively.
Code:
<?php
function start_section($id, $title)
{
?>
<table cellspacing="0" cellpadding="0">
<tr>
<td width="30" valign="top">
<a href="javascript:void twist('<?=$id?>');">
<img src="up.gif" border="0" id="img-<?=$id?>" />
</a>
</td>
<td width="90%">
<h1><?=$title?></h1>
<div style="display:none;position:absolute" id="<?=$id?>" class="content">
<?php
}
function end_section()
{
?>
</div>
</td>
</tr>
</table>
<?php
}
?>
<html>
<head>
<style type="text/css">
body{font-family:Verdana;}
h1{font-size:medium;border-bottom:1px solid black;}
.content{font-size:small; margin-left:10px; padding:10px;}
</style>
<script type="text/javascript">
function twist(sid)
{
imgobj = document.getElementById("img-" + sid);
divobj = document.getElementById(sid);
if(imgobj.src.match("up.gif"))
{
imgobj.src = "down.gif";
divobj.style.position = "relative";
divobj.style.display = "block";
}
else
{
imgobj.src = "up.gif";
divobj.style.display = "none";
divobj.style.position = "absolute";
}
}
</script>
</head>
<body>
<?php start_section("first", "section one"); ?>
first part first part first part first part first part.
first part first part first part first part first part.
<?php end_section(); ?>
<?php start_section("sec", "section two"); ?>
section two section two section two section two section two.
section two section two section two section two section two.
<?php end_section(); ?>
</body>
</html>
Save the as spinners.php
Move Images using Javascript
Next javascript code shows how you can move images around the page.
Compatibility: Mozilla, Opera, Chrome, Safari
Code:
var curElement;
function doMouseMove(e)
{
var newleft = 0, newTop = 0;
curElement.style.position = "absolute";
if((e.which == 1) && (curElement != null))
{
newleft = e.screenX - (curElement.offsetWidth/2);
curElement.style.left = newleft + "px";
newtop = e.screenY - (curElement.offsetHeight/2);
curElement.style.top = newtop + "px";
}
}
function doDragStart(e)
{
// Don't do default drag operation.
if ("IMG" == e.target.tagName)
{
e.returnValue = false;
}
}
function doMouseDown(e)
{
if ((e.which == 1) && (e.target.tagName == "IMG"))
{
curElement = e.target;
}
}
function dropElem()
{
curElement = null;
}
document.ondragstart = doDragStart;
document.onmousedown = doMouseDown;
document.onmousemove = doMouseMove;
document.onmouseup = dropElem;
To expirement with it create an HTML document and put the code in the head element, the body element must contains at least one img element, good luck.
