www.mattginsberg.net » JavaScript Tutorials http://www.mattginsberg.net Wed, 12 May 2010 18:23:10 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Tutorial: Draggable Div with Open and Close Links. http://www.mattginsberg.net/tutorial-draggable-div-with-open-and-close-links/ http://www.mattginsberg.net/tutorial-draggable-div-with-open-and-close-links/#comments Sat, 26 Sep 2009 04:01:53 +0000 Matt Ginsberg http://www.mattginsberg.net/?p=1697 banner2

If you read my first draggable div tutorial, you would know that I had planned to show you how to add a close and open function for this. So within this tutorial, I plan to show you what the old code looked like, and how to add the two extra functions. At the bottom of the tutorial you will see a link to view it in action.

Here is the full code from the previous tutorial:
See it in action.

<!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=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#maindiv{
z-index:10;
background: #FFC;
color:#000;
width: 400px;
height: 250px;
position: absolute;
top: 50px;
left: 50px;
padding:10px;
}
#header{
color:#000000;
background: #CCC;
padding:5px;
text-align:center;
}
#header:hover{
color:#fff;
background:#000;
text-align:center;
}
</style>
<script language="javascript">
var drag=0;
var xdif=0;
var ydif=0;
var initx="50px";
var inity="50px";
function begindrag(event){
if(drag==0){
floatingd = document.getElementById("maindiv");
if(floatingd.style.left==""){
floatingd.style.left=initx;
}
if(floatingd.style.top==""){
floatingd.style.top=inity;
}
prex=floatingd.style.left.replace(/px/,"");
prey=floatingd.style.top.replace(/px/,"");
drag=1;
xdif=event.clientX-prex;
ydif=event.clientY-prey;
}else{
drag=0;
}
}
function mousepos(event){
floatingd = document.getElementById("maindiv");
if(drag==1){
floatingd.style.left = event.clientX-xdif+"px";
floatingd.style.top = event.clientY-ydif+"px";;
}
}
</script>
</HEAD>
<BODY onMouseMove="mousepos(event)" >
<div id='maindiv'>
<div id='header' onclick="begindrag(event)" style="cursor:move">click in this region then move your mouse around</div>
<br />
Once you move it, then click on the mouse again to release it.... very easy and cool. :) This is perfect for advertising, or a website with stats. </div>
</body>
</html>

Now, it is very simple to add the open and close functions to this.
You want to add this into the Javascript code:

function closeit(){document.getElementById("maindiv").style.display="none"}
function loadwindow(){document.getElementById("maindiv").style.display="block"}

Your full Javascript code should look like this:

<script language="javascript">
var drag=0;
var xdif=0;
var ydif=0;
var initx="50px";
var inity="50px";
function begindrag(event){
if(drag==0){
floatingd = document.getElementById("maindiv");
if(floatingd.style.left==""){
floatingd.style.left=initx;
}
if(floatingd.style.top==""){
floatingd.style.top=inity;
}
prex=floatingd.style.left.replace(/px/,"");
prey=floatingd.style.top.replace(/px/,"");
drag=1;
xdif=event.clientX-prex;
ydif=event.clientY-prey;
}else{
drag=0;
}
}
function mousepos(event){
floatingd = document.getElementById("maindiv");
if(drag==1){
floatingd.style.left = event.clientX-xdif+"px";
floatingd.style.top = event.clientY-ydif+"px";;
}
}
function closeit(){
document.getElementById("maindiv").style.display="none"
}
function loadwindow(){
document.getElementById("maindiv").style.display="block"
}
</script>

You now want to add the close div link into your HTML. To close the div, use the following HTML code:
Make sure to enter this code inside of the maindiv.

<p onClick="closeit()" style="cursor:pointer">close this div</p>

You now want to add the open div link into your HTML. To open the div, use the following HTML code:
Make sure this code is not inside of the maindiv.

<div onclick="loadwindow()" style="cursor:pointer">Load Div</div>

Here is the full code with the open and close links:

<!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=utf-8" />
<title>Draggable Div</title>
</head>
<style type="text/css">
#maindiv{
z-index:10;
background: #FFC;
color:#000;
width: 400px;
height: 250px;
position: absolute;
top: 50px;
left: 50px;
padding:10px;
}
#header{
color:#000000;
background: #CCC;
padding:5px;|
text-align:center;
}
#header:hover{
color:#fff;
background:#000;
text-align:center;
}
</style>
<script language="javascript">
var drag=0;
var xdif=0;
var ydif=0;
var initx="50px";
var inity="50px";
function begindrag(event){
if(drag==0){
floatingd = document.getElementById("maindiv");
if(floatingd.style.left==""){
floatingd.style.left=initx;
}
if(floatingd.style.top==""){
floatingd.style.top=inity;
}
prex=floatingd.style.left.replace(/px/,"");
prey=floatingd.style.top.replace(/px/,"");
drag=1;
xdif=event.clientX-prex;
ydif=event.clientY-prey;
}else{
drag=0;
}
}
function mousepos(event){
floatingd = document.getElementById("maindiv");
if(drag==1){
floatingd.style.left = event.clientX-xdif+"px";
floatingd.style.top = event.clientY-ydif+"px";;
}
}
function closeit(){
document.getElementById("maindiv").style.display="none"
}
function loadwindow(){
document.getElementById("maindiv").style.display="block"
}
</script>
</HEAD>
<BODY onMouseMove="mousepos(event)" >
<div id='maindiv'>
<div id='header' ononclick="begindrag(event)" style="cursor:move">click in this region then move your mouse around</div>
<p><br />
Once you move it, then click on the mouse again to release it.... very easy and cool. :) This is perfect for advertising, or a website with stats. </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p onClick="closeit()" style="cursor:pointer">close this div</p>
</div>
<div onclick="loadwindow()" style="cursor:pointer">Load Div</div>
</body>
</html>

See it in action.

]]> http://www.mattginsberg.net/tutorial-draggable-div-with-open-and-close-links/feed/ 1 Tutorial: Draggable Div http://www.mattginsberg.net/tutorial-draggable-div/ http://www.mattginsberg.net/tutorial-draggable-div/#comments Fri, 25 Sep 2009 04:01:06 +0000 Matt Ginsberg http://www.mattginsberg.net/?p=1665 banner

Creating a div is, as you already (should) know, is very easy. A div is a great way to layout a website for many reasons. In this tutorial, I will show you how to create a div that lays on top of your content, and then the user can move it around the screen as they see fit. Also, you can see how to add a link within your website that will open the div and a link to close it. If you want to learn more, read this tutorial.

The first thing you want to do is create a new HTML file, or use a file that you are working with right now. You want to add the following CSS to the stylesheet. If you do have the stylesheet, be sure not to include the <style type=”text/css”> and the </style>. If you do not have an external stylesheet, add the below after the head section and before the body section.


<style type="text/css">
#maindiv{
z-index:10;
background: #FFC;
color:#000;
width: 400px;
height: 250px;
position: absolute;
top: 50px;
left: 50px;
padding:10px;
}
#header{
color:#000000;
background: #CCC;
padding:5px;
text-align:center;
}
#header:hover{
color:#fff;
background:#000;
text-align:center;
}
</style>

Next you want to add the Javascript. Below is the code.


<script language="javascript">
var drag=0;
var xdif=0;
var ydif=0;
var initx="50px";
var inity="50px";
function begindrag(event){
if(drag==0){
floatingd = document.getElementById("maindiv");
if(floatingd.style.left==""){
floatingd.style.left=initx;
}
if(floatingd.style.top==""){
floatingd.style.top=inity;
}
prex=floatingd.style.left.replace(/px/,"");
prey=floatingd.style.top.replace(/px/,"");
drag=1;
xdif=event.clientX-prex;
ydif=event.clientY-prey;
}else{
drag=0;
}
}
function mousepos(event){
floatingd = document.getElementById("maindiv");
if(drag==1){
floatingd.style.left = event.clientX-xdif+"px";
floatingd.style.top = event.clientY-ydif+"px";;
}
}
</script>

Now you want to put the following code in the <body> script like so:


<body onMouseMove="mousepos(event)" >

And finally, enter the following HTML code into the body section of your website.


<div id='maindiv'>
<div id='header' onclick="begindrag(event)" style="cursor:move">click in this region then move your mouse around</div>
<br />
Once you move it, then click on the mouse again to release it.... very easy and cool. This is perfect for advertising, or a website with stats. </div>

Here is the full code:

<!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=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#maindiv{
z-index:10;
background: #FFC;
color:#000;
width: 400px;
height: 250px;
position: absolute;
top: 50px;
left: 50px;
padding:10px;
}
#header{
color:#000000;
background: #CCC;
padding:5px;
text-align:center;
}
#header:hover{
color:#fff;
background:#000;
text-align:center;
}
</style>
<script language="javascript">
var drag=0;
var xdif=0;
var ydif=0;
var initx="50px";
var inity="50px";
function begindrag(event){
if(drag==0){
floatingd = document.getElementById("maindiv");
if(floatingd.style.left==""){
floatingd.style.left=initx;
}
if(floatingd.style.top==""){
floatingd.style.top=inity;
}
prex=floatingd.style.left.replace(/px/,"");
prey=floatingd.style.top.replace(/px/,"");
drag=1;
xdif=event.clientX-prex;
ydif=event.clientY-prey;
}else{
drag=0;
}
}
function mousepos(event){
floatingd = document.getElementById("maindiv");
if(drag==1){
floatingd.style.left = event.clientX-xdif+"px";
floatingd.style.top = event.clientY-ydif+"px";;
}
}
</script>
</HEAD>
<BODY onMouseMove="mousepos(event)" >
<div id='maindiv'>
<div id='header' onclick="begindrag(event)" style="cursor:move">click in this region then move your mouse around</div>
<br />
Once you move it, then click on the mouse again to release it.... very easy and cool. :) This is perfect for advertising, or a website with stats. </div>
</body>
</html>

See it in action.

]]> http://www.mattginsberg.net/tutorial-draggable-div/feed/ 1 Adding CAPTCHA to PHP email form using JavaScript. http://www.mattginsberg.net/captcha-to-php-email-form/ http://www.mattginsberg.net/captcha-to-php-email-form/#comments Wed, 24 Dec 2008 22:19:35 +0000 Matt Ginsberg http://www.mattginsberg.net/?p=587 captcha

To put it simply a captcha works by generating a random string, writing it to an image, then storing the string inside of a session or cookie or by some other method. These are great when you want to have some extra security in your forms. They also help from all of the spam emails you get from your website forms.

Instead of typing out the entire script, take a look at this great premade script. It was made by Jonathan Feaster and he posted it on his website. He named it Jcap. You can view the website here. Everything is premade and all you need to do is drag the files into your server. Do a few tweaks with the HTML and your good to go.

]]> http://www.mattginsberg.net/captcha-to-php-email-form/feed/ 1 Tutorial: Highlight table row with the onClick function. http://www.mattginsberg.net/highlight-table-row/ http://www.mattginsberg.net/highlight-table-row/#comments Sat, 06 Dec 2008 01:01:30 +0000 Matt Ginsberg http://www.mattginsberg.net/?p=593 Have you ever have a very long table and it got really annoying for you and your visitors to look at the information? With this very simple script, your aggrevation is now over. Lets get started.

Insert this JavaScript code into the <head></head> of your HTML document.


<script>
var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(el, backColor,textColor){
if(typeof(preEl)!='undefined') {
preEl.bgColor=orgBColor;
try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
}
orgBColor = el.bgColor;
orgTColor = el.style.color;
el.bgColor=backColor;
try{ChangeTextColor(el,textColor);}catch(e){;}
preEl = el;
}
function ChangeTextColor(a_obj,a_color){ ;
for (i=0;i<a_obj.cells.length;i++)
a_obj.cells(i).style.color=a_color;
}
</script>

 

Now it is time to add the table to the <body></body> of your HTML.


<table width="450" border="1">
<tr>
<td colspan="6">Highlight Row onClick.</td>
</tr>
<tr>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>

 

Now where you see <tr>, insert the following code before the >:


onClick="HighLightTR(this,'#ccc','#000000');"
The first set of numbers is for the highlight behind the text. The second set is for the text.

 

You will now have something like this:


<table width="450" border="1">
<tr>
<td colspan="6">Highlight Row onClick.</td>
</tr>
<tr>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
<td style="font-weight:bold">TEST</td>
</tr>
<tr onClick="HighLightTR(this,'#ccc','#000000');">
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr onClick="HighLightTR(this,'#ccc','#000000');">
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr onClick="HighLightTR(this,'#ccc','#000000');">
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr onClick="HighLightTR(this,'#ccc','#000000');">
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>

 

Here is the final code put together:

<!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=utf-8" />
<title>Untitled Document</title>
<script>
var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(el, backColor,textColor){
if(typeof(preEl)!='undefined') {
preEl.bgColor=orgBColor;
try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
}
orgBColor = el.bgColor;
orgTColor = el.style.color;
el.bgColor=backColor;
try{ChangeTextColor(el,textColor);}catch(e){;}
preEl = el;
}
function ChangeTextColor(a_obj,a_color){ ;
for (i=0;i<a_obj.cells.length;i++)
a_obj.cells(i).style.color=a_color;
}
</script>
</head>
<body>
<table width="425" border=0 align=center cellpadding="2" cellspacing="2">
<caption>
click to see effect
</caption>
<tr>
<th><strong>Test</strong></th>
<th><strong>Test</strong></th>
<th><strong>Test</strong></th>
<th><strong>Test</strong></th>
<th><strong>Test</strong></th>
<th><strong>Test</strong></th>
<tr onClick="HighLightTR(this,'#ccc','#000000');" >
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
</tr>
<tr onClick="HighLightTR(this,'#345','#000000');" >
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
</tr>
<tr onClick="HighLightTR(this,'#543','#000000');" >
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
<td align=left>test</td>
</tr>
</table>
</body>
</html>
 
 

 

 

 

 

 

 

See it in action!

]]> http://www.mattginsberg.net/highlight-table-row/feed/ 0