|
JavaScript - Javascript Chained Drop Down Menu
I am trying to create 2 different drop down menus which are chained.
First drop down menu: options 1, 2, 3, and 4 Second drop down menu: options 1, 2, 3 and 4 However for the first drop down menu, if you choose the number then that number cannot be selected again on the second drop down menu. So if i pick 4 on the first drop down. then only 1, 2, and 3 should show up on the second drop down OR if you pick 4 on the second drop down it gives you an error saying you selected that value. Here is the complicated part that I cannot figure out. I want each drop down menus on two different pages and not on the same page. So after you select the submit button on the first drop down it should go to another page with the second drop down.. Has anyone seen this before. if you can give me some tips or show me how its done or even a webpage that has already implemented this i would appreciate it. Thank you! Similar Tutorialspart of index page Code:
<form id="form1" name="form1" method="get" action="show.php">
<select id="mark" name="mark">
<option value="">--</option>
<option value="100">BMW</option>
<option value="101">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="1" class="100">1 series</option>
<option value="3" class="100">3 series</option>
<option value="5" class="100">5 series</option>
<option value="6" class="100">6 series</option>
<option value="7" class="100">7 series</option>
<option value="11" class="101">A1</option>
<option value="23" class="101">A3</option>
<option value="33" class="101">S3</option>
<option value="44" class="101">A4</option>
<option value="54" class="101">S4</option>
</select>
<button name="" type="submit" > Find! </button>
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#series").chained("#mark");
});
</script>
js Code: (function($) {
$.fn.chained = function(parent_selector, options) {
return this.each(function() {
/* Save this to self because this changes when scope changes. */
var self = this;
var backup = $(self).clone();
/* Handles maximum two parents now. */
$(parent_selector).each(function() {
$(this).bind("change", function() {
$(self).html(backup.html());
var selected = "";
selected = selected.substr(1);
/* Also check for first parent without subclassing. */
/* TODO: This should be dynamic and check for each parent */
/* without subclassing. */
var first = $(parent_selector).first();
var selected_first = $(":selected", first).val();
$("option", self).each(function() {
/* Remove unneeded items but save the default value. */
if (!$(this).hasClass(selected) &&
!$(this).hasClass(selected_first) && $(this).val() !== "") {
$(this).remove();
}
});
/* If we have only the default value disable select. */
if (1 == $("option", self).size() && $(self).val() === "") {
$(self).attr("disabled", "disabled");
} else {
$(self).removeAttr("disabled");
}
$(self).trigger("change");
});
/* Force IE to see something selected on first page load. */
$("option", this).first().attr("selected", "selected");
/* Force updating the children. */
$(this).trigger("change");
});
});
};
/* Alias for those who like to use more English like syntax. */
$.fn.chainedTo = $.fn.chained;
})(jQuery);
show.php Code: <?php
if (isset($_GET['mark']))
{
$papar_car=$_GET['mark'];
}
if (isset($_GET['series']))
{
$papar_ser=$_GET['series'];
}
?>
<!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"/>
</head>
<body>
<form id="form1" name="form1" method="get" action="show.php">
<select id="mark" name="mark">
<option value="">--</option>
<option value="100"<? if($papar_car=="100")echo "selected='selected'"; ?>>BMW</option>
<option value="101"<? if($papar_car=="101")echo "selected='selected'"; ?>>Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="1" class="100" <? if($papar_ser=="1")echo "selected='selected'"; ?>>1 series</option>
<option value="3" class="100"<? if($papar_ser=="3")echo "selected='selected'"; ?>>3 series</option>
<option value="5" class="100"<? if($papar_ser=="5")echo "selected='selected'"; ?>>5 series</option>
<option value="6" class="100"<? if($papar_ser=="6")echo "selected='selected'"; ?>>6 series</option>
<option value="7" class="100<? if($papar_ser=="7")echo "selected='selected'"; ?>">7 series</option>
<option value="11" class="101" <? if($papar_ser=="11")echo "selected='selected'"; ?>>A1</option>
<option value="23" class="101" <? if($papar_ser=="23")echo "selected='selected'"; ?>>A3</option>
<option value="33" class="101"<? if($papar_ser=="33")echo "selected='selected'"; ?>>S3</option>
<option value="44" class="101" <? if($papar_ser=="44")echo "selected='selected'"; ?>>A4</option>
<option value="54" class="101"<? if($papar_ser=="54")echo "selected='selected'"; ?>>S4</option>
</select>
<button name="" type="submit" > Find! </button>
</p>
</form>
<script type="text/javascript" language="javascript">
var car_m= <?php echo $_POST['mark']; ?>
</script>
<script type="text/javascript" language="javascript">
var car_m_s= <?php echo $_POST['series']; ?>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#series").chained("#mark");
});
</script>
guys, after i done selection in the form1, i press submit button and Im going to show.php page. on show.php page i want categories to be already selected. whats my problem? Hi Everyone! I would genuinely appreciate some help on this one. I'm trying to combine a chained drop down list with the ability for the last selection to show/hide a div. I've researched and found ways to do both individually, but I'm hitting the wall when it comes to combining the javascript. This is how I'd like it to work: -- User selects from DropDown List 1. -- DropDown List 2 options appear based on the selection in 1. -- User selects from DropDown List 2, -- Appropriate div is shown. Here's the Javascript I'm using to show/hide a div: Code: function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
function hideDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = "none"; // hide
}
function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var courseSelect = document.getElementById("courseSelect");
for (var i=0; i<=courseSelect.options.length -1; i++)
{
hideDiv(courseSelect.options[i].value);
}
}
function toggle(showID){
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}
Here's the Javascript for the chained drop down lists: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" defer>
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + this.value))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
$(function(){
cascadeForm = $('.cascadeTest');
deptartmentSelect = cascadeForm.find('.deptartmentSelect');
courseSelect = cascadeForm.find('.courseSelect');
cascadeSelect(deptartmentSelect, courseSelect);
});
And lastly, my HTML (simplified) Code: <form action="#" class="cascadeTest">
<table>
<tr>
<th>Organization:</th>
<td><select name="deptartmentSelect" class="deptartmentSelect">
<option value="0">Select a Department</option>
<option value="1">Dept A</option>
<option value="2">Dept B</option>
<option value="3">Dept C</option>
</select></td>
</tr>
<tr>
<th>Territory:</th>
<td><select name="courseSelect" class="courseSelect" onChange="toggle(this.options[this.options.selectedIndex].value)">
<option value="0" class="static">- Courses -</option>
<option value="A1" class="sub_1">Course A1</option>
<option value="B1" class="sub_2">Course B1</option>
<option value="C1" class="sub_3">Course C1</option>
</select></td>
</tr>
</table>
</form>
<div id="A1" style="display:none;">I am Course A1</div>
<div id="B1" style="display:none;">I am Course B1</div>
<div id="C1" style="display:none;">I am Course C1</div>
Thanks again in advance! Hi I wanna to have two select boxes, one of them will contain a list of provinces, and on the other I wanna have a list of cities, but based on selected province. When province selects, cities select box must be changed, too. I don't wanna use AJAX for this purpose, as the server is already too busy and I don't like to disturb it more. So if anyone can provide a solution, just by Javascript and not with AJAX, I would be appreciate it. Cheers! hey just wondering if anyone could help me with a problem im having with this menu for a website i got a chained menu javascript downloaded and all the data entered for it it will work in firefox but wont in internet explorer and i just dont understand why http://www.jomcfall97.talktalk.net/index1.html its the menu on the right hand side this is the error message Message: Object doesn't support this property or method Line: 247 Char: 5 Code: 0 URI: http://www.jomcfall97.talktalk.net/chainedmenu.js Here are lines 244 - 248 function initListGroup(n) { var _content=cs_findContent(n), count=0; if (_content!=null) { content=new cs_contentOBJ("cs_"+n,_content.menu); cs_content[cs_content.length]=content; and heres the full chainedmenu.js Code: var _disable_empty_list=false;
var _hide_empty_list=false;
var onclickaction="alert"
function goListGroup(){
for (i=arguments.length-1;i>=0; i--){
if (arguments[i].selectedIndex!=-1){
var selectedOptionvalue=arguments[i].options[arguments[i].selectedIndex].value
if (selectedOptionvalue!=""){
if (onclickaction=="alert")
alert(selectedOptionvalue)
else if (newwindow==1)
window.open(selectedOptionvalue)
else
window.location=selectedOptionvalue
break
}
}
}
}
if (typeof(disable_empty_list)=="undefined") { disable_empty_list=_disable_empty_list; }
if (typeof(hide_empty_list)=="undefined") { hide_empty_list=_hide_empty_list; }
var cs_goodContent=true, cs_M="M", cs_L="L", cs_curTop=null, cs_curSub=null;
function cs_findOBJ(obj,n) {
for (var i=0; i<obj.length; i++) {
if (obj[i].name==n) { return obj[i]; }
}
return null;
}
function cs_findContent(n) { return cs_findOBJ(cs_content,n); }
function cs_findM(m,n) {
if (m.name==n) { return m; }
var sm=null;
for (var i=0; i<m.items.length; i++) {
if (m.items[i].type==cs_M) {
sm=cs_findM(m.items[i],n);
if (sm!=null) { break; }
}
}
return sm;
}
function cs_findMenu(n) { return (cs_curSub!=null && cs_curSub.name==n)?cs_curSub:cs_findM(cs_curTop,n); }
function cs_contentOBJ(n,obj){ this.name=n; this.menu=obj; this.lists=new Array(); this.cookie=""; }; cs_content=new Array();
function cs_topmenuOBJ(tm) { this.name=tm; this.items=new Array(); this.df=0; this.addM=cs_addM; this.addL=cs_addL; }
function cs_submenuOBJ(dis,link,sub) {
this.name=sub;
this.type=cs_M; this.dis=dis; this.link=link; this.df=0;
var x=cs_findMenu(sub);
this.items=x==null?new Array():x.items;
this.addM=cs_addM; this.addL=cs_addL;
}
function cs_linkOBJ(dis,link) { this.type=cs_L; this.dis=dis; this.link=link; }
function cs_addM(dis,link,sub) { this.items[this.items.length]=new cs_submenuOBJ(dis,link,sub); }
function cs_addL(dis,link) { this.items[this.items.length]=new cs_linkOBJ(dis,link); }
function cs_showMsg(msg) { window.status=msg; }
function cs_badContent(n) { cs_goodContent=false; cs_showMsg("["+n+"] Not Found."); }
function cs_optionOBJ(text,value) { this.text=text; this.value=value; }
function cs_emptyList(list) { for (var i=list.options.length-1; i>=0; i--) { list.options[i]=null; } }
function cs_refreshList(list,opt,df) {
cs_emptyList(list);
for (var i=0; i<opt.length; i++) {
list.options[i]=new Option(opt[i].text, opt[i].value);
}
if (opt.length>0) {
list.selectedIndex=df;
}
}
function cs_getOptions(menu) {
var opt=new Array();
for (var i=0; i<menu.items.length; i++) {
opt[i]=new cs_optionOBJ(menu.items[i].dis, menu.items[i].link);
}
return opt;
}
function cs_updateListGroup(content,idx,sidx,mode) {
var i=0, curItem=null, menu=content.menu;
while (i<idx) {
menu=menu.items[content.lists[i++].selectedIndex];
}
if (menu.items[sidx].type==cs_M && idx<content.lists.length-1) {
var df=cs_getIdx(mode,content.cookie,idx+1,menu.items[sidx].df);
cs_refreshList(content.lists[idx+1], cs_getOptions(menu.items[sidx]), df);
if (content.cookie) {
cs_setCookie(content.cookie+"_"+(idx+1),df);
}
if (idx+1<content.lists.length) {
if (disable_empty_list) {
content.lists[idx+1].disabled=false;
}
if (hide_empty_list) {
content.lists[idx+1].style.display="";
}
cs_updateListGroup(content,idx+1,df,mode);
}
}
else {
for (var s=idx+1; s<content.lists.length; s++) {
cs_emptyList(content.lists[s]);
if (disable_empty_list) {
content.lists[s].disabled=true;
}
if (hide_empty_list) {
content.lists[s].style.display="none";
}
if (content.cookie) {
cs_setCookie(content.cookie+"_"+s,"");
}
}
}
}
function cs_initListGroup(content,mode) {
var df=cs_getIdx(mode,content.cookie,0,content.menu.df);
cs_refreshList(content.lists[0], cs_getOptions(content.menu), df);
if (content.cookie) {
cs_setCookie(content.cookie+"_"+0,df);
}
cs_updateListGroup(content,0,df,mode);
}
function cs_updateList() {
var content=this.content;
for (var i=0; i<content.lists.length; i++) {
if (content.lists[i]==this) {
if (content.cookie) {
cs_setCookie(content.cookie+"_"+i,this.selectedIndex);
}
if (i<content.lists.length-1) {
cs_updateListGroup(content,i,this.selectedIndex,"");
}
}
}
}
function cs_getIdx(mode,name,idx,df) {
if (mode) {
var cs_idx=cs_getCookie(name+"_"+idx);
if (cs_idx!="") {
df=parseInt(cs_idx);
}
}
return df;
}
function _setCookie(name, value) {
document.cookie=name+"="+value;
}
function cs_setCookie(name, value) {
setTimeout("_setCookie('"+name+"','"+value+"')",0);
}
function cs_getCookie(name) {
var cookieRE=new RegExp(name+"=([^;]+)");
if (document.cookie.search(cookieRE)!=-1) {
return RegExp.$1;
}
else {
return "";
}
}
// ----
function addListGroup(n,tm) {
if (cs_goodContent) {
cs_curTop=new cs_topmenuOBJ(tm); cs_curSub=null;
var c=cs_findContent(n);
if (c==null) {
cs_content[cs_content.length]=new cs_contentOBJ(n,cs_curTop);
}
else {
delete(c.menu); c.menu=cs_curTop;
}
}
}
function addList(n,dis,link,sub,df) {
if (cs_goodContent) {
cs_curSub=cs_findMenu(n);
if (cs_curSub!=null) {
cs_curSub.addM(dis,link||"",sub);
if (typeof(df)!="undefined") { cs_curSub.df=cs_curSub.items.length-1; }
}
else {
cs_badContent(n);
}
}
}
function addOption(n,dis,link,df) {
if (cs_goodContent) {
cs_curSub=cs_findMenu(n);
if (cs_curSub!=null) {
cs_curSub.addL(dis,link||"");
if (typeof(df)!="undefined") { cs_curSub.df=cs_curSub.items.length-1; }
}
else {
cs_badContent(n);
}
}
}
function initListGroup(n) {
var _content=cs_findContent(n), count=0;
if (_content!=null) {
content=new cs_contentOBJ("cs_"+n,_content.menu);
cs_content[cs_content.length]=content;
for (var i=1; i<initListGroup.arguments.length; i++) {
if (typeof(arguments[i])=="object" && arguments[i].tagName && arguments[i].tagName=="SELECT") {
content.lists[count]=arguments[i];
arguments[i].onchange=cs_updateList;
arguments[i].content=content; arguments[i].idx=count++;
}
}
if (content.lists.length>0) {
cs_initListGroup(content,content.cookie);
}
}
}
function resetListGroup(n) {
var content=cs_findContent("cs_"+n);
if (content!=null && content.lists.length>0) {
cs_initListGroup(content,"");
}
}
any help appreciated as ive just come to a standstill over this thanks Okay everyone, new here, of course, and as much as I hate to be one of those people that don't really know much about a topic at hand and gratuitously seek out the help of those who do, here I am. The upshot is that it's probably something really easy to answer for those who know Javascript already. I've tried figuring this out but I'm at a loss. I can manage pretty well with CSS, messing around and playing with values to figure out what I need, but I've taken a look at the Javascript and it's completely unapproachable for me. I used a website, http://www.mycssmenu.com/ to create a really nifty dropdown menu, which has a tree structure in Javascript as well as collapse and expand buttons. The great thing is that, for those with Javascript disabled, it still fully works as a CSS drop-down menu. But I've been asked to modify it. Right now, you click and that's how things expand. But I've been asked to make it so that it will expand simply on hover.And I don't know what to do at all. Of course I know how to change the colors of the particular fields when you hover, through CSS, but to make it expand simply on hover? Think anyone can give me some pointers or a bit of help? The website in question is here Psiholog Popa Anca. Great job on the colors though, eh? Let me know! I'm sorry if this question might have already been posted before, but as I do not know how to go about phrasing the questions(due to low calibre in technical terms), I could not do any search about it. Basically what I intended to do is to add a *drop down list* to the header looking something like this http://www.w3schools.com/DHTML/tryit...rydhtml_menu10 except for the fact that the header(the Tutorials, Scripting, Validation coloured in pink) isn't coded using .html but .js(in this website, its coded in html as shown below). <html> <head> <style> body{font-family:arial;} table{font-size:80%;background:black} a{color:black;text-decoration:none;font:bold} a:hover{color:#606060} td.menu{background:lightblue} table.menu { font-size:100%; position:absolute; visibility:hidden; } </style> <script type="text/javascript"> function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } </script> </head> <body> <h3>Drop down menu</h3> <table width="100%"> <tr bgcolor="#FF8080"> <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')"> <a href="/default.asp">Tutorials</a><br /> <table class="menu" id="tutorials" width="120"> <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr> <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr> <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr> <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr> </table> </td> <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')"> <a href="/default.asp">Scripting</a><br /> <table class="menu" id="scripting" width="120"> <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr> <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr> <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr> <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr> <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr> </table> </td> <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')"> <a href="/site/site_validate.asp">Validation</a><br /> <table class="menu" id="validation" width="120"> <tr><td class="menu"><a href="/web/web_validate.asp">Validate HTML</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate XHTML</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate CSS</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate XML</a></td></tr> <tr><td class="menu"><a href="/web/web_validate.asp">Validate WML</a></td></tr> </table> </td> </tr> </table> <p>Mouse over these options to see the drop down menus</p> </body> </html> So how can I code this in .js instead of .html? I really need a clue on how to get started on coding this as this is totally new to me, hope that anyone would appreciate helping me and I will be grateful about it. Hi guys. I have been scowering high and low for code to create a Java drop down menu bar for my site. I want it to be something like this: http://javascript-array.com/scripts/...rop_down_menu/ but want to insert pictures into it, for each heading, to create a new looking bar if thats possible. Can you do a mouseover with them also, as i currently have one set up, to change text colour (2 different images per button) but am unsure of the code. Thanks in advance. Hi everyone, How can I achieve this? I need to get my drop down menu go over the javascript slideshow going on in this page: www.kimikal.com/store It works on all browsers except for IE, which hides the menu behind the js slideshow. Any help would be greatly appreciated! I've been running into a brick wall on this problem, and have gone over my html, css and PHP dozens of times, so I'm thinking it's a Javascript issue (where my skills are lacking). I'm using a drop-down menu script that I got he http://www.php-development.ru/javascripts/dropdown.php, which I have modified slightly to eliminate timeout and change styles on closing the menu (by clicking on it). It works fine everywhere except in IE 6 and 7. In IE 7, the menu appears where it should, but looks blank. If you leave the sub-menu open and hover over another link, the menu appears as it should. Both drop-down menus do this. In IE6, the problem is similar, except that only the bottom border of the menu items appear, not the whole link. The page can be found he http://www.georgekoury.com/index_test.php, and the only options with drop-down are "Individual Insurance" and "Group Insurance". I realize the code isn't entirely compliant, I inherited this code from another programmer and I'm trying to avoid having to rewrite the whole structure. I'm not sure what code you may need me to post, so if more information is needed, please let me know and I'll provide it. hi im new to scripting so apologies if this is a basic question. I have a form which has javascript validation which triggers hidden divs if certain input boxes are left blank. I have it working with text fields and text areas, but im having trouble with a drop down menu. This is the code for my drop down: Code: <select name="department" size="1" id="department"> <option value="" selected>Please select</option> <option value="1">Personal Injury</option> <option value="2">ULR & Credit Hire</option> <option value="3">Consumer Credit</option> <option value="4">Health & Safety</option> <option value="5">Property</option> </select> And this is the code currently for the Javascript validating: Code: if(department.selectedIndex == 0){
var error = true;
$('#department_error').fadeIn(500);
}else{
$('#department_error').fadeOut(500);
If i leave the drop down on the 'Please Select' value, the error message should show, but at the moment it doesnt show up. I have a feeling the syntax is wrong in the javascript? Any help very much appreciated Thanks Hey, so I'm a complete javascript newbie and am trying to create a drop down menu with four different boxes. The site I'm working on is basically an ecommerce site, so I'll use cars as a good example for what I want to do. Let's say that I'm selling cars and want to target the buyer directly, then I would have the following boxes, each one serving as a dependent of the one before it: 1. Pick the brand (BMW, Mercedes, Etc.) 2. Pick the type of car (Sports car, SUV, Mini Van, etc.) 3. Pick the color (blue, green, etc.) 4. Pick the price ($0-$19,999/$19,999-29,999/etc.) So far I have the first two boxes down by using the following site: http://www.supertom.com/menugen/. Now my problem is that the site only allows for the first two boxes to be made, and says that "the values in box1 are static and printed directly as normal HTML. The corresponding box2 options will also be copied into the HTML as well as the javascript for full functionality." Being a complete newbie, I have no idea what this means. So I decided to search the internet for an answer and was not able to find one, thus leading me here, which from the looks of it seems like a great forum. If anyone could tell me how to connect a third and fourth box that falls into the same hierarchy as the first and the second then I would appreciate. Really THANK YOU, and I'm really looking forward to reading your replies!! -Bobby Hello! My first (but surely not last) post on this forum. I made a drop box menu and I want to activate specific javascript functions when they are selected. I think this should be fairly easy to solve. I am very new at HTML and Javascript btw. This is what I tried: if (document.getElementById("selectense").value="present"){ document.getElementById("present").style.visibility="visible"; } <span class="tensebox"> <select id="selectense"> <option onclick="showPresent()">Present</option> <option onclick="showPC()">Present</option> </select></span> (and I have some text with the ID "present) Hi guys, I am having an issue changing a piece of Javascript and hoped you guru's could help?I am not awful with Javascript but it is fair to say I am still at the beginning of my learning! I can't find the correct answer in forums and tutorials and you guys are literally my last hope! Here it is .... I have a drop-down menu on a website I am working on which is made up of HTML, CSS and a little bit of Javascript. At the moment it is set so that when the user hovers over the menu it operates the drop-down. This obviously does not work for iPads etc as there is no mouse to hover. I want to keep my menu but alter the Javascript so the menu drops when clicked instead. Here is my code: Javascript Code: <script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
HTML Code: <div id="menuPadding"> <div id="menu"> <ul id="nav"> <li id="m1"><a href="">HOME</a></li> <li id="m2">ABOUT US <ul> <li><a href="">Our Values</a></li> <li><a href="">Facilities</a></li> <li><a href="">Arena</a></li> <li><a href="">Jobs</a></li> </ul> </li> <li id="m3">SUCCESS <ul> <li><a href="">Jobs</a></li> <li><a href="">Results</a></li> <li><a href="">Awards</a></li> <li><a href="">Testimonials</a></li> </ul> </li> </div> </div> CSS Code: #menu {
margin-top: 16px;
width: 879px;
height: 30px;
z-index: 1000;
font-family: Verdana, Geneva, sans-serif;
font-size:11px;
font-weight:bold;
}
#menuPadding {
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
text-align:center;
z-index: 1000;
}
#menuPadding ul {
height: 29px;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
z-index: 1000;
}
#menuPadding ul li {
/* display: inline;*/
line-height: 29px;
padding:0px;
margin-left:1px;
display:block;
float:left;
font-weight:bold;
color:#fff;
z-index: 1000;
}
#menuPadding ul li a {
text-align:center;
z-index: 1000;
}
#menuPadding ul li li {
padding:0px;
margin:0px;
z-index: 1000;
}
#menuPadding ul li li a {
text-align:left;
padding-left:14px;
text-transform:uppercase;
z-index: 1000;
font-size:90%;
}
#menuPadding ul li li a.notupper {
text-transform:none;
z-index: 1000;
}
/* coloured menus */
#menuPadding ul li#m1 {
background:#FF0000;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m1 li {
background:#FF0000;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m2 {
background:#0099CC;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m2 li {
background:#0099CC;
width:166px;
z-index: 1000;
}
#menuPadding ul li#m2 li a {
width:166px;
z-index: 1000;
}
#menuPadding ul li#m3 {
background:#999999;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m3 li {
background:#999999;
width:176px;
z-index: 1000;
}
#menuPadding ul li#m3 li a {
width:176px;
z-index: 1000;
}
#menuPadding ul li#m4 {
background:#9966CC;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m4 li {
background:#9966CC;
width:156px;
z-index: 1000;
}
#menuPadding ul li#m4 li a {
width:156px;
z-index: 1000;
}
#menuPadding ul li#m5 {
background:#AAC619;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m5 li {
background:#AAC619;
width:230px;
padding-right:20px;
z-index: 1000;
}
#menuPadding ul li#m5 li a {
width:230px;
z-index: 1000;
}
#menuPadding ul li#m6 {
background:#FF9900;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m6 li {
background:#FF9900;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m7 {
background:#FF0099;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m7 li {
background:#FF0099;
width:216px;
color:#fff;
z-index: 1000;
}
#menuPadding ul li#m7 li a {
width:216px;
color:#fff;
z-index: 1000;
}
#menuPadding ul li#m7 li li {
font-size:87%;
z-index: 1000;
}
#menu li ul ul { /* third-and-above-level lists */
margin: -30px 0 0 216px;
z-index: 1000;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
z-index: 1000;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
z-index: 1000;
}
#menuPadding ul li#m8 {
background:#660099;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m8 li {
background:#660099;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m9 {
background:#A80017;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m9 li {
background:#A80017;
width:146px;
z-index: 1000;
}
#menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited {
color:#fff;
z-index: 1000;
}
#menuPadding ul li a:hover {
color:#000;
z-index: 1000;
}
/* suckerfish */
#menu, #menu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;color:#fff;
}
#menu a {
display: block;
width: 96px;
}
#menu li { /* all list items */
float: left;
width: 96px; /* width needed or else Opera goes nuts */
border-top:1px solid #fff;
}
#menu li ul { /* second-level lists */
position: absolute;
background: orange;
width: 106px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
font-size:90%;
}
#menu li ul ul { /* third-and-above-level lists */
/* margin: -1em 0 0 96px;*/
font-size:110%;
}
#menu li li {
font-size:100%;
color:#fff;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
I realise that this must be quite an easy thing for you guys but - as I said - I am at the beginning of my learning and it is confusing the hell out of me! All of the things I have tried have not worked! Any help would be truly appreciated! Thanks in advance! I am trying to create a drop down menu for dates that starts with today's date, but allows people to choose 50 years into the past and 10 years into the future. Here's what I have for the years: 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>
<body>
<h4>Select a date to see the energies for that day
<script type="text/javascript">
var mesparaluna=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
function populatedropdown(mesparaluna, diaparaluna, axxa1){
var today=new Date()
var mesparaluna=document.getElementById(mesparaluna)
var diaparaluna=document.getElementById(diaparaluna)
var axxa1=document.getElementById(axxa1)
for (var i=0; i<31; i++)
diaparaluna.options[i]=new Option(i, i+1)
diaparaluna.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
mesparaluna.options[m]=new Option(mesparaluna[m], mesparaluna[m]+1)
mesparaluna.options[today.getMonth()]=new Option(today.getMonth(), today.getMonth(), true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
axxa1.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
axxa1.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
</script>
<script>
sacakindias()
</script>
<SCRIPT SRC=tzolkin.js></script>
<script>
armatzolkin()
</script>
<p><font size="2" face="Verdana">
<SELECT class="input_tex" name=mesparaluna id="mesparaluna"></SELECT> </font>
<SELECT class="input_tex" name="diaparaluna" id="diaparaluna"></SELECT> </font>
<SELECT class="input_tex" name="axxa1" id="axxa1"></SELECT></p>
<p><INPUT class="input_tex" onclick="sacakinpersonal()" type="button" value="Search"><img border="0" name="pirav" src="blanco.gif" class="shakeimage" width="10" height="10">
<INPUT class="input_tex" onclick="sacakindias()" type="button" value="Today"></p></form>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("diaparaluna", "mesparaluna", "axxa1")
}
</script>
</h4>
</body>
</html>
I am also having a problem with the month. I wanted it to show the name of the month, but I am getting a number (and a wrong one at that). Apologies... I am a terrible newbie with Javascript. Hello All, I'm trying to find a script that would be able to do the following: The are two drop down boxes, the first one populating the second (state/county --> town) The first box is single choice, the second is multiple choice. I'm looking for a script that would be able to deal with generating the code for all possible values that could be chosen in the second drop down box. The drop down boxes are part of a form which allow people to search for educational courses within areas of a state/county. I've had a good root around the internet but am rapidly getting confused ... many thanks in advance. Si. I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it... I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same.... My live demo is here! Thank you for any help and/or advice in advance, Best Regards, Tim Hi there, I am new to Java Script but had to delve into it to create the options for a form I wish to create. I downloaded chainedseletmenu from the following; http://www.dynamicdrive.com/dynamici...menu/index.htm I have the script working, so that you select a first option and a new box appears, then you select the next option and an aditional box appears and so on... This is fine, but I wish to only make additional selection boxes appear if certain options from the drop down lists are selected, but not for others. Also, I wish for users of my forms to be able to add options that are not yet available, I will give an example, lets say cars; if a user selects a make from the list, eg "Honda", a drop down selection list apears, the user then has the option to choose the "Type" of Honda, eg "Prelude", "Civic", "NSR" etc. I would like to be able to add an additional here; = "Not listed". When the "Not listed" is clicked, I would like to give my users the choice to enter the type (in this example, it could be "CRX") into an auto-appearing text box, after form submission, this could then be added the existing selection list for future users. I am aware that this requires use of a database and conection to tit, but for a start, can anyone guide me in the right direction, or does anyone have examples of such code that I can study and get an idea of what to do? This is for a non-profit educational site that I am trying to create for my learners! So would apprieciate any help I can get! Kind regards, Luke ? how would i make it for a menu so you could press it and it would go down to click on a link.
Hi! I'm using this javascript and php/MySQL: http://www.dynamicdrive.com/dynamici...ects/index.htm When I make a selection in all 3 lists I have a button that saves the selections in my MySQL database, like this: set1, Toyota, Cars, Camry Then I want to be able to select set1 in a list and press an "Edit" button that retrieves these 3 selections and auto selects them in the list. How is this possible? Thanks in advance Vigour Hi I found this code from here http://www.dynamicdrive.com/forums/s...ad.php?t=35776 And cant seem to get it to work. I want to show 2 drop downs and then a hidden div with the answer. 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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/chainedmenu.js"></script>
<script type="text/javascript" src="scripts/config2.js"></script>
<script type="text/javascript">
window.onload=function(){
var lastDiv = "";
document.getElementById('secondlevel').onchange=function(){
if (lastDiv)
document.getElementById(lastDiv).className = "hiddenDiv";
//if value of the box is not nothing and an object with that name exists, then change the class
if (this.value && document.getElementById(this.value)) {
document.getElementById(this.value).className = "visibleDiv";
lastDiv = this.value;}}}
</script>
<style type="text/css">
.hiddenDiv {
display:none;
}
</style>
</head>
<body onLoad="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, 'saveit'); ">
<form name="listmenu0">
<div class="black1 bold">1. Select Product Range</div>
<div class="selects"><select name="firstlevel" style="width:250px;"></select></div>
<div class="black1 bold">2. Select Product Code</div>
<div class="selects"><select id="secondlevel" name="secondlevel" onchange="showDiv(this.value)" style="width:250px;"></select></div>
</form>
<div id="storesContent">
<div id="one" class="hiddenDiv">DIV1</div>
<div id="two" class="hiddenDiv">DIV2</div>
<div id="three" class="hiddenDiv">DIV3</div>
</div>
</body>
</html>
many thanks Roy |
|||||||