Bird Brains
One day a man goes to a pet shop to buy a parrot. The assistant takes the man to the parrot section and asks the man to choose one. The man asks, "How much is the yellow one?"

The assistant says, "$2000." The man is shocked and asks the assistant why it's so expensive. The assistant explains, "This parrot is a very special one. He knows typewriting and can type really fast."

"What about the green one?" the man asks.

The assistant says, "He costs $5000 because he knows typewriting and can answer incoming telephone calls and takes notes."

"What about the red one?" the man asks.

The assistant says, "That one's $10,000."

The man says, "What does HE do?"

The assistant says, "I don't know, but the other two call him boss."

Make table cells and rows clickable
I have been looking through my logs and I see that a good amount of people do searches on Google for making a table row clickable or a table cell clickable and come to my site. The link they are going to does not explain it well. So I thought I would do a few quick examples and show you how to add some other effects to make it more dynamic.

The first thing you need to do is add an onclick handler to the element. If it is a cell you add it to the td tag. If it is the row, you add it to the tr tag.

This is a basic example to make a table cell clickable:

Test

Test - Click

Test

Test

Code:

<table id="test" border='1' cellspacing='0' cellpadding='0'>
  <tr onclick="alert('bang')">
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>

Here is an example to make a table row clickable:

Test

Test

Test

Test

Code:

<table id="test" border='1' cellspacing='0' cellpadding='0'>
  <tr onclick="alert('bang')">
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>

Now how is a person supposed to know that they can click on the cell or the row? It is hard since the cursor stays the same and there are no other visual markers. You can change that by changing the cursor and the background color when the mouse is placed on the row or cell.

Example with table cell:

Test

Test - Click

Test

Test

Code:

<table id="test" border='1' cellspacing='0' cellpadding='0'>
  <tr>
    <td>Test</td>
    <td onmouseover="this.style.background='red';this.style.cursor='pointer'"
        onmouseout="this.style.background='white';" onclick="alert('bang')">
        Test - Click</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>

Example with table row:

Test

Test

Test

Test

Code:

<table id="test" border='1' cellspacing='0' cellpadding='0'>
  <tr onmouseover="this.style.background='red';this.style.cursor='pointer'"
        onmouseout="this.style.background='white';" onclick="alert('bang')">
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>

Well I hope this helped you out!
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages

Bigger the better?
A man goes into his local building supply store and orders 10,054 bricks.

"May I ask what you're building?" asks the man behind the counter.

"It's going to be a barbecue."

"Wow, that's a lot of bricks for one barbecue,"

"Not really; I live on the 12th floor."

Protecting Your Content - Waste of Time
One question I am tired of hearing is how do I keep my text from being able to be copied, printed, etc. The short answer is you can not do it.

The reason you can not do it is due to the fact that there are so many ways to get around the security you put on the page.

For instance people disable the right click menu, well you can use the keys (Ctrl-A,Ctrl-C,Ctrl-V).

Well you are now saying I can disable the keys. Yes you can, but now people can not use your forms. But people can turn off JavaScript. Yes JavaScript can be disabled. So now the users can click and type away with your code sitting there useless.

Another trick people do is use the CSS media to keep people from printing the contents. They sent the style to hide all of the content. Well a person can use the print screen key to get the information, they can copy and past the code into word, save the webpage and remove the CSS, edit the page with a editor, and much much more.

Now your web page content is public domain. When you are viewing a website, you download that code into your cache. Even if you set the meta tag to not cache it, it is still placed there. Anyone can go into their temp folder and view the pages. Therefore any images, movies, sounds, etc are sitting on the user's computer ready to be grabbed and used.

A real life example:
I once had an class where quizzes were given online. It had a JavaScript timer that would submit the page automatically after 5 minutes. Sad thing is I disabled the JavaScript and had as long as I wanted to take it. (Note: I did this on a sample quiz that did not count and I could take it multiple times for practice.) The server side code did not check to see how long the test was opened. A big flaw in the software, that means this flaw could result in extra time. Even though I never needed to do this since there was 10 questions and took roughly 30 seconds to do it!

If you do not want a person to use the information, then do not place the information online. It is that simple.

Eric Pascarello Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages

Holiday Spirt
A very rich lawyer is approached by the United Way. The man from the United Way is concerned that the lawyer made over $1,000,000.00 last year but didn't donate even a cent to a charity.

"First of all", says the lawyer, "my mother is sick and dying in the hospital, and it's not covered by healthcare. Second, I had five kids through three divorced marriages. Third, my sister's husband suddenly died and she has no one to support her four children..."

"I'm terribly sorry", says the United Way man, "I feel bad about asking for money."

The Lawyer responds, "Yeah, well if I'm not giving them any money, why should I give you any?"

CSS: Change/Remove Bulleted List's Black Dot
I have been asked by a few people how to change the image on a bulleted list so they are not stuck with the boring black dot. By applying CSS rules, you are are able to change the dot to any image you want. So if the black dot does not fit in, you can change it to a star.

There is two ways to do it, one requires more work than the other!

The first one I do not see used that much, most people perfer the second method even though the first one is simpler to apply it.

li {
  list-style-image: redStar.gif;
}

The second method has a bit more to it.

ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li{
  background-image: url(redStar.gif);
  background-repeat: no-repeat;
  background-position: 0 50%;
  padding-left: 12px;
}

If you just do not want to show the dot at all, you just need to do this:

ul{ 
  list-style-type: none;
}

Hopefully this will solve your black dot problems.

Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages

Brake Joke
One day this mechanic was working late under a car and some brake fluid dripped into his mouth. "Wow! That stuff isn't too bad tasting," he thought.

The next day he told his buddy about tasting the brake fluid. "Not bad," he said. "Think I'll have a little more today." His friend got a little concerned but didn't say anything.

The following day the mechanic told his friend about drinking a cup full of the brake fluid. "Great stuff! Think I'll have some more today." And so he did.

A few days later the mechanic was up to a bottle a day, and told his friend, "This brake fluid is really great stuff." His friend was now really worried. "You know that brake fluid is poison and really bad for you. You better stop drinking that stuff."

"Hey, no problem," the mechanic replied. "I can stop any time."

Auto Complete JavaScript
I have been working on an auto complete JavaScript function. It is still in the testing phase, but it works with the major browsers that I tested so far.

The code creates a list of options from an array. How the matches are made can be adjusted to find text anywhere in a string or the exact say way the user wants it. You can also ignore case too.

There will be more options added to it in the future.

You can read more about it and download the codehere: AutoComplete Type Ahead Example

If you want to see more options, add a comment here.

Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages

The Hunting Dog Breeder
Chester and Earl are going hunting. Chester says to Earl, "I'll send my dog out to see if there are any ducks out in the pond. If there aren't any ducks out there, I'm not going hunting."

So he sends the dog out to the pond. The dog comes back and barks twice. Chester says, "Well I'm not going to go out. He only saw two ducks out there."

Earl says, "You're going to take the dog's barks for the truth?" Earl doesn't believe it, so he goes to look for himself. When he gets back he says, "I don't believe it where did you get that dog? There really are only two ducks out there!"

Chester says, "Well, I got him from the breeder up the road. If you want, you can get one from him, too."

So Earl goes to the breeder and says he wants a dog like the one his friend Chester has. The breeder obliges and Earl brings the dog home, tells it to go out and look for ducks. Minutes later the dog returns with a stick in it's mouth and starts humping Earl's leg.

Outraged, Earl takes the dog back to the breeder and says, "This dog is a fraud. I want my money back!"

The breeder asks Earl what the dog did. So Earl tells him that when he sent the dog out to look for ducks, it came back with a stick in its mouth and started humping his leg.

The breeder says, "Earl, all he was trying to tell you was that there are more fucking ducks out there than you can shake a stick at!"

The Office is a Prairie
There is a commercial on TV that a guy sees a prairie dog and it reminds him of the office life. I find that to be so true.

My first job as a contractor for MCI-Digex, I had a cuffice. For those that do not know what a cuffice is, it is a cube with higher walls and a door. Basically you can not stand up and see over the wall and you have privacy. You are able to close you door and no one can even tell that you are working (or not working.)

My current job as a contractor with the Army, I am in a normal cube with low walls. I have noticed I tend to stand up to see what the commotion is. I tend to butt into more conversations.

When I was in my cuffice, I never really cared what was going on since it would require me to walk through my door. Those extra steps made it more work then it was worth.

My solution, remove all of the walls so it makes it easier for me to talk to my co-workers so I get no work done. Oh wait, I mean make the walls taller so I get work done because I am lazy!

Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages

Billable Hours Joke
A plumber attended to a leaking faucet at a neurosugeon's house. After a 2-minute job, he demanded $75.

"I don't charge this amount even though I'm a surgeon."

"You're right -- that's why I switched from surgery to plumbing!"

Entire Cell Clickable For Column Sort - ASP.NET
The one thing I love about datagrids is how easy you can make them sort your information. The thing I hate about the sort is you need to click the link to do it instead of the whole header cell. So I wrote up a little JavaScript function that makes the whole cell clickable for the sort! The following code needs to be placed between the head tags.

<script type="text/javascript">
  //Code Makes Entire Headers Clickable For Sorting
  function MakeHeadersClickable(xDataGridName){
    var theLinks = document.getElementById(xDataGridName).getElementsByTagName("a");  
//Grab all of the link elements
    var numLinks = parseInt(theLinks.length);
    for(i=0;i<numLinks;i++){  //Loop through the links
    theFunc = theLinks[i].href.split("pt:"); //Determine the post back code and remove the javascript: text
    if(theFunc.length > 1){
      theLinks[i].offsetParent.onclick = new Function(theFunc[1]); //Add the onclick event to the header
      //theLinks[i].className = "noUnde";                //Add CSS class to the link!
      theLinks[i].offsetParent.style.cursor = "pointer"; //Add Css pointer(hand) cursor to the header cell
    }
  }
</script>

You just need to call the code by adding an onload event handler to your body tag with the parameter of your datagrids name

  <body onload="MakeHeadersClickable('DataGrid1')">

Now when the page loads, the whole header column is made clickable! It is rather easy to do. If there is a way to do it without JavaScript someone please tell me.

Who is going to be the first Java person to complain about posting .NET stuff? LOL

Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages

A quick joke
All objects in the world can be placed into one of two categories:

- things that need to be fixed
- things that will need to be fixed after you've had a few minutes to play with them.

Table with Static Header and Scrollable Rows
Well a lot of people in the JavaScript forum have been asking for a table that has a static header and scrollable rows. I normally give a link or two that requires them to build divs and such.

I thought I would get away from all of the pain and hassle and start up a project with a script that requires 3 steps: Download - Add js reference - Call the function.

Right now I am in the testing phase of the script with version 0.8b.

You can see the script here: My Site

And you talk about it here on my blog or at the Ranch JS Forum

Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages

Eating Their Way Up The Corporate Ladder

A group of cannibals get appointed as engineers in a defense company. During the welcoming ceremony the boss says, "You're all part of our team now. You can earn good money here, and you can go to the cafeteria for something to eat. So please don't trouble any of the other employees." The cannibals promised.

Four weeks later the boss returns and says, "You're all working very hard, and I'm very satisfied with all of you. However, one of our janitors has disappeared. Do any of you know what happened to him?"

The cannibals all shake their heads no.

After the boss has left, the leader of the cannibals says to the others, "Which of you idiots ate the janitor?"

A hand raises hesitantly, to which the leader of the cannibals replies, "You fool! For four weeks we've been eating Team Leaders, Supervisors and Project Managers and no one noticed anything, and you have to go and eat the janitor!"

Finding the position of non-positioned elements

Another common question that gets asked in the HTML and JavaScript forum is how do I find the position of a non-positioned element. When an element is positioned absolutely on the page, it is a very easy one line statement to get the location:

var theSpotX = document.getElementById('theElement').style.top;
var theSpotY = document.getElementById('theElement').style.left;

Now with non-absolutely positioned items it is a little different. The following code allows you to find the coordinates of the element.

function GetElementPostion(xElement){

  var selectedPosX = 0;
  var selectedPosY = 0;
  var theElement = document.getElementById(xElement);
              
  while(theElement != null){
    selectedPosX += theElement.offsetLeft;
    selectedPosY += theElement.offsetTop;
    theElement = theElement.offsetParent;
  }
                        		      		      
  return selectedPosX + "," + selectedPosY

}

All you need to do is call the function passing the id of the element that you want the position of. The function loops through finding the position of the element that was passed. Then it loops to find the passed element's parent position. It repeats the loop until reaches the first element in the hierarchy tree of the document. By suming up all of the X and Y positions of all of the elements traversed up the document tree, you are able to find the x and y coordinates of the element of the page.

In the example code above, I am just returning a string that contains the x and y positions. You can just as easily return an array or just one of the two values depending on your need.

Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages

Smack!
Jack came to work Monday and his co-workers asked him how his weekend was. He said he played a little golf. So his co-worker asked him how well he did. "I hit two of my best balls," he said. "Tell me about it," said his co-worker. "I stepped on a rake."

Preventing Multiple Form Submissions
A question that comes up all of the time in the JavaScript forum on JavaRanch is how can I prevent multiple form submissions. Well I am getting tired of answering the question so I thought I would blog about it and point future questions here!

The first choice you have is to use an onclick handler on the submit button to either disable or hide the button.

onclick="this.disabled=true"
onclick="this.visibility='hidden'"
onclick="this.display='none'"

Another method is to use a validation method with the onsubmit handler on the form. This uses a Boolean to determine if the button has been pressed.

<form onsubmit="return Validate()">
<script>
  wasSubmitted=false;
  function Validate(){
    if(!wasSubmitted){
      wasSubmitted=true;
      return true;
    }
    else return false;
  }
</script>

BUT there is a major problem with this since the Boolean is easily over written when the page is refreshed. Submitting the form can also cause it to be overwritten. You can try to use a cookie to hold the value, but you have to rely on cookies being enabled.

Another thing is send the user to a confirmation page that the form has been submitted! The action tag is there for a reason in the form attributes.

The best bet is to use your server side code to determine if there are multiple submissions since JavaScript can be disabled. Your server side code can not!
Use a session variable or IP address of the user and log if the information has been submitted. If it has then you do not process the request. This will eliminate the multiple clicks.

Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages