Handling Select/option in html with javascript

I came across one situation where I have to show/hide text according to the option selected by user.






As shown in the image below, I have a drop down box. Here when user selects any option except first option ("Individua Team- No registration"), I want to display a some text.







Example: See image below.





Solution

HTML Code:
<select name="Team" id="Team" onchange="showDiv(this.value)">
<option value="noteam" selected>Individual-No Team</option>
<option value='Ben&Jerry' >Ben & Jerry</option>
<option value='Giants'>Giants</option>
<option value='Gladiators'>Gladiators</option>
<option value='greatestteam' >greatest team</option>
<option value='MyTeam'>My Team</option>
<option value='starone'>star one</option>
</select>
</form>

CSS:
.hiddenDiv {
display: none;
}
.visibleDiv {
display: block;
}

Javascript:
function showDiv(divName) {
// hide div
if (divName == 'Individual-no team') {
document.getElementById("teaminfo").className = "hiddenDiv";
}
else {
document.getElementById("teaminfo").className = "visibleDiv";
}
}

Check box and text alignment in Firefox.

I have a check box and a text next to it.
In Firefox, they are not aligned properly.
here is the screen shot






Solution
To fix this problem just apply CSS "vertical-align: middle" to input element.

Few interesting websites for web designing

http://www.alistapart.com
http://www.webdesignerwall.com/
http://www.cssplay.co.uk/

Start

Since long I was thinking to create a blog but I never found out any interesting stuff to put in the blog. But right now while browsing different web dev/design forums to find the solution of different design issues I decided t create a blog where I can put the problem I am facing and also the solution I found from different forums.

Hopefully this will help other web designers also. :)