RSS

May 15th, 2008

Javascript onfocus-onblur, show-hide table-div

2


For an example, visit SecretTweet.com and click in the textbox up top--the only textbox on the whole page. The captcha, tags field, language field, and submit button all are hidden until needed by the user.

<html>
<head>
<script type="text/JavaScript">
<!--
function showthetable(theTable)
{
      if (document.getElementById(theTable).style.display == 'none')
      {
            document.getElementById(theTable).style.display = 'block';
      }
}
//-->
</script>
</head>
 
<body>
<textarea name="whatever" cols="55" rows="2" onfocus="showthetable('TABLENAME');return true;"></textarea>
 
<div class="options">
<table border="0" cellpadding="0" cellspacing="0">
<tr id="TABLENAME" style="display: none;">
<td>
Hidden content until onfocus!  Hooray!
  </td>
</table>
</div>
 

Read More


April 1st, 2008

Javascript Expand/Collapse Element

0


Note: This piece of code wasn't entirely created by me. Also, I don't claim to be knowledgeable in javascript...I'm just sharing.

function expandCollapse() {
for (var i=0; i<expandCollapse. »
arguments.length; i++) {
var element = document.getElementById »
(expandCollapse.arguments[i]);
element.style.display = (element.style. »
display == "none") ? "block" : "none";
	}
}

Which will allow you to expand and collapse a div in css. I needed this for a new addition to VisitMatewan.com that I'm working on. Handy....

Read More


March 7th, 2008

Intrinsic Form Values

1


Rather than type a long explanation of what exactly this is and what it does, it's best to just show you:


If you still don't understand what this does, here's a short explanation: Onfocus of form field, default value is automatically cleared and, if no value is entered, return the default value (onblur).Why use this? Personally, I feels it's a waste of space to label form fields (perfect example on the NY Times Login Page) ...it also looks pretty cluttered.Enough jibjab, here's how I do it (there are other ways, of course...but this one seems to work easiest and the best):

 
<input class="input" name="fieldname" value="Click in me then click away" onfocus="if(this.value == 'Click in me then click away') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Click in me then click away';}">
 

Read More


RSS