Programming Forums
User Name Password Register
 

RSS Feed
FORUM INDEX | TODAY'S POSTS | UNANSWERED THREADS | ADVANCED SEARCH

Reply
 
Thread Tools Display Modes
Old Aug 13th, 2007, 10:52 AM   #1
temp304
Newbie
 
Join Date: Aug 2007
Posts: 1
Rep Power: 0 temp304 is on a distinguished road
Try my new JavaScript: Customize Dropdown Menu

Customize Dropdown Menu is designed to display some choices, as: languages, countries, themes,... but it's differrent from original version in browsers. This tool combine CSS and JavaScript to create a dropdown you can add image to tilte, every choice.

Let's try dropdown below and feel differences.
Tested: IE 7, Opera 9, Firefox 2, Netscape 9

URL: www.JavaScriptBank.com/../Customize_Dropdown_Menu/

<style type=text/css>
/*
	Customize Dropdown Menu 1.0
	Author: Thái Cao Phong
	Website: www.JavaScriptBank.com
	Please keep these comments above to contact author when you use this script. Thank you very much.
	Vietnamese: Xin ban hay giu lai nhung thong tin tren de nguoi khac co the lien he voi tac gia neu ban co 
su dung doan ma nay. Cam on ban rat nhieu.
*/
img
{
	vertical-align: middle;
}
.title_dropdown
{
	padding: 1px;
	background: url(dropdown_arrow.jpg) no-repeat right;
	width: 15px;
	vertical-align: middle;
	border: 1px solid silver;
	width: 180px;
	height: 17px;
	font: 12px verdana bold;
	text-align: left;
	cursor: hand;
}
.content_dropdown
{
	position: relative;
	vertical-align: middle;
	border: 1px solid black;
	width: 180px;
}
.content_dropdown a
{
	text-decoration: none;
	color: black;
}
.content_dropdown p.off
{
	margin: 0px;
	color: black;
	padding: 3px;
	padding-left: 10px;
	cursor: hand;
	text-align: left;
}
.content_dropdown p.on
{
	background-color: #000077;
	color: white;
	margin: 0px;
	padding: 3px;
	padding-left: 10px;
	cursor: hand;
	text-align: left;
}
.content_dropdown img
{
	width: 30px;
	height: 20px;
	border: none;
	margin-right: 5px;
}
</style>
<script language=javascript>
/*
		
		    xxxxxxxxxxxxxxx   xxxxxxxxxxx     xxxx
		    xxxxxxxxxxxxxxx  xxxxxxxxxxxxx    xxxx
		    xxxxxxxxxxxxxxx  xxxxxxxxxxxxx    xxxx
		         xxxxx       xxxxxxxxxxxx     xxxx
		         xxxxx       xxxxx			  xxxx
		         xxxxx		 xxxxxxxxxxxx	  xxxx
		         xxxxx		 xxxxxxxxxxxxx	  xxxxxxxxxxx			www.JavaScriptBank.com
		         xxxxx		  xxxxxxxxxxxx	  xxxxxxxxxxxxx
		         xxxxx       		 xxxxx	  xxxx     xxxx
		   xxx   xxxxx		  xxxxxxxxxxxx    xxxx     xxxx
		   xxx  xxxxxx		 xxxxxxxxxxxxx	  xxxx     xxxx
		   xxxxxxxxxx		 xxxxxxxxxxxxx	  xxxxxxxxxxxxx
		    xxxxxxxx		  xxxxxxxxxxx      xxxxxxxxxxx

	Customize Dropdown Menu 1.0
	Author: Thái Cao Phong
	Website: www.JavaScriptBank.com
	Please keep these comments above to contact author when you use this script. Thank you very much.
	Vietnamese: Xin ban hay giu lai nhung thong tin tren de nguoi khac co the lien he voi tac gia neu ban co 
su dung doan ma nay. Cam on ban rat nhieu.
*/
var ie = navigator.appName=='Microsoft Internet Explorer'?true:false;
function toggle_dropdown(id)
{
	var div = document.getElementById(id);
	if(div.style.display == 'none')
		div.style.display = 'block';
	else
		div.style.display = 'none';
}
function getObject(evt)
{
	var srcElem;
	if(ie)
	{
		srcElem = event.srcElement;
	}
	else
	{
		srcElem = evt.target;
	}
	return srcElem;
}
function go_any_page()
{
	alert('This is example');
}
function changeStyle(pTag)
{
	pTag.className = (pTag.className == 'off' ? 'on' : 'off');
}
function dropdown_on(evt)
{
	var pTag = getObject(evt);
	if(pTag.tagName == 'P' && pTag.parentNode.id == 'language_dropdown')
		changeStyle(pTag);
}
function dropdown_off(evt)
{
	var pTag = getObject(evt);
	if(pTag.tagName == 'P' && pTag.parentNode.id == 'language_dropdown')
		changeStyle(pTag);
}
function click(evt)
{
	var pTag = getObject(evt);
	if(!document.getElementById('language_dropdown'))
		return;
	if(pTag.tagName == 'DIV' && pTag.className == 'title_dropdown')
		toggle_dropdown('language_dropdown');
	else if(document.getElementById('language_dropdown').style.display == 'block')
		toggle_dropdown('language_dropdown');
}
document.onmouseover = dropdown_on;
document.onmouseout = dropdown_off;
document.onclick = click;
</script>
<div class=title_dropdown><img class=imgclass src="flag.png">Choose your country</div>
	<div id=language_dropdown style='display: none; z-index: -100;' class=content_dropdown>
		<p class=off onClick="go_any_page();"><img src='brazil.gif'>Brazil</p>
		<p class=off onClick="go_any_page();"><img src='japan.gif'>Japan</p>
		<p class=off onClick="go_any_page();"><img src='usa.gif'>USA</p>
		<p class=off onClick="go_any_page();"><img src='vietnam.gif'>Vietnam</p>
	</div>
temp304 is offline   Reply With Quote
Old Aug 13th, 2007, 11:50 AM   #2
titaniumdecoy
Expert Programmer
 
titaniumdecoy's Avatar
 
Join Date: Nov 2005
Posts: 841
Rep Power: 3 titaniumdecoy is on a distinguished road
Send a message via AIM to titaniumdecoy
When I click the dropdown menu, the rest of the page moves down to make way for the selections; I doubt this is the behavior you intended.

The dropdown will not work at all if the user does not have JavaScript enabled. Ideally, you should begin with a working HTML dropdown menu and replace it with your own (by using the removeChild and createElement methods as necessary).

Nevertheless, good job.
titaniumdecoy is offline   Reply With Quote
Reply

Bookmarks

« Previous Thread in Forum | Next Thread in Forum »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Start Learning Java script smita JavaScript and Client-Side Browser Scripting 0 Mar 15th, 2007 7:47 AM
SWING stuff... dsbabyGurl Java 6 Oct 27th, 2006 10:45 PM
dropdown menu location problems Ribbott JavaScript and Client-Side Browser Scripting 6 Oct 11th, 2006 4:23 PM
dropdown menu with persistence? kerriganm HTML / XHTML / CSS 11 Dec 17th, 2005 2:33 PM




DaniWeb IT Discussion Community
All times are GMT -5. The time now is 6:26 AM.

Powered by vBulletin® Version 3.7.0, Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Copyright ©2007 DaniWeb® LLC