|
JavaScript - I Want Dropdown Menu To Display Right Values
I have two dropdown menus.
1st -> Drop Down Menu (name="optionDrop") has 5 values which are "ABC", "ABCD", "ABCDE", "True or False" and "Yes or No". 2nd -> Drop Down Menu (name="numberDrop") has 5 values which are "","1", "2", "3" and "4". Now this is what I want to achieve: If user select "ABC" from "optionDrop", then only display options "", "1" and "2" If user select "ABCD" from "optionDrop", then only display options "", "1", "2" and "3" If user select "ABCDE" from "optionDrop", then only display options "", "1", "2", "3" and "4" If user select "True or False" from "optionDrop", then do not display DropDown Menu and Display N/A (This I achieved but I want hidden numberDrop to equal 1, I have not achieved that part) If user select "Yes or No" from "optionDrop", then do not display DropDown Menu and Display N/A (This I achieved but I want hidden numberDrop to equal 1, I have not achieved that part) Does anyone know how this can be done and implemented in the javascript code I have? Below is Javascript Code: Code: function getDropDown() {
var optionDrop = document.getElementsByName("optionDrop");
var na = document.getElementById("na");
var numberDrop = document.getElementsByName("numberDrop");
var answerA = document.getElementById("answerA");
var answerB = document.getElementById("answerB");
var answerC = document.getElementById("answerC");
var answerD = document.getElementById("answerD");
var answerE = document.getElementById("answerE");
var answerTrue = document.getElementById("answerTrue");
var answerFalse = document.getElementById("answerFalse");
var answerYes = document.getElementById("answerYes");
var answerNo = document.getElementById("answerNo");
if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){
numberDrop[0].style.display = "block";
na.style.display = "none";
}else if (optionDrop[0].value == "trueorfalse" || optionDrop[0].value == "yesorno"){
numberDrop[0].style.display = "none";
na.style.display = "block";
}
}
Htrml code: Code: <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
<td>Question:</td>
<td rowspan="3">
<textarea rows="5" cols="40" name="questionText"></textarea>
</td>
<td>Option Type:</td>
<td>
<select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
</td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>
Similar TutorialsHi, im looking for some help figuring out how to achieve the following: i have an ecommerce site. on a product a customer can select attributes associated with that product (i.e colour, size, shape etc.). Each attriute is represented by a HTML select, containing the values allowed for that product. the problem comes when certain colours do not come in certain sizes. Say my product has the following: colours: red, yellow, blue size: small, medium, large shape: square, circle but there is no stock for red,medium and red,large. I need to dynamically remove medium + large when red is selected so they cannot be chosen from the select. This could apply for any combination of attributes. Also this is completely dynamic so there could be 2 attributes or 10 attributes, and changing one would need to cascade down the selects. i have posted the code at the bottom of the post. The js representation of what is selectable is an object, containing other objects, each object representing a variation and wether to show or not. i know this is a right mouthful to try and explain, its even hard to figure out how to do it! an example of what im trying to achieve is: http://www.bit-cart.com/online-store-front-live-demo/products/Mikes-Test-Product.html. I do have jquery available on my page if it helps. any ideas would be most appreciated! thanks mike HTML: Code: <select name='attribute_12' id='attribute_12' class='attribute-select'>
<option value='166'>attribute_12 166</option>
<option value='165'>attribute_12 165</option>
<option value='171'>attribute_12 171</option>
</select>
<select name='attribute_10' id='attribute_10' class='attribute-select'>
<option value='108'>attribute_10 108</option>
<option value='110'>attribute_10 110</option>
<option value='120'>attribute_10 120</option>
<option value='148'>attribute_10 148</option>
</select>
<select name='attribute_19' id='attribute_19' class='attribute-select'>
<option value='201'>attribute_19 201</option>
<option value='202'>attribute_19 202</option>
<option value='203'>attribute_19 203</option>
</select>
JS: Code: <script type="application/javascript">
var variants = {
"304" : {"attrs":[171,108,201], "show":0},
"305" : {"attrs":[171,108,202], "show":1},
"306" : {"attrs":[171,108,203], "show":0},
"307" : {"attrs":[171,120,201], "show":1},
"308" : {"attrs":[171,120,202], "show":0},
"309" : {"attrs":[171,120,203], "show":1},
"310" : {"attrs":[171,148,201], "show":0},
"311" : {"attrs":[171,148,202], "show":1},
"312" : {"attrs":[171,148,203], "show":0},
"313" : {"attrs":[171,110,201], "show":1},
"314" : {"attrs":[171,110,202], "show":0},
"315" : {"attrs":[171,110,203], "show":1},
"316" : {"attrs":[166,108,201], "show":0},
"317" : {"attrs":[166,108,202], "show":1},
"318" : {"attrs":[166,108,203], "show":0},
"319" : {"attrs":[166,120,201], "show":1},
"320" : {"attrs":[166,120,202], "show":0},
"321" : {"attrs":[166,120,203], "show":1},
"322" : {"attrs":[166,148,201], "show":0},
"323" : {"attrs":[166,148,202], "show":1},
"324" : {"attrs":[166,148,203], "show":0},
"325" : {"attrs":[166,110,201], "show":1},
"326" : {"attrs":[166,110,202], "show":0},
"327" : {"attrs":[166,110,203], "show":1},
"328" : {"attrs":[165,108,201], "show":0},
"329" : {"attrs":[165,108,202], "show":1},
"330" : {"attrs":[165,108,203], "show":0},
"331" : {"attrs":[165,120,201], "show":1},
"332" : {"attrs":[165,120,202], "show":0},
"333" : {"attrs":[165,120,203], "show":1},
"334" : {"attrs":[165,148,201], "show":0},
"335" : {"attrs":[165,148,202], "show":1},
"336" : {"attrs":[165,148,203], "show":0},
"337" : {"attrs":[165,110,201], "show":1},
"338" : {"attrs":[165,110,202], "show":0},
"339" : {"attrs":[165,110,203], "show":1}
}
</script>
I have two select lists. Morning Code: <tr valign="top">
<td align="right">Morning:</td>
<td><select name="wcsave_09_msession" id="wcsave_09_msession" size="1" onblur="CheckField(this.form,this,'');" onchange="display1(this,'Mastery sesson 1','Concurrent sessons 1-6');">
<option value="" selected="selected">Choose one</option>
<option value="Mastery sesson 1">Mastery sesson #1</option>
<option value="Concurrent sessons 1-6">Concurrent sessons #1-#6</option>
</select>
</td>
</tr>
Afternoon: Code: <tr valign="top">
<td align="right">Afternoon:</td>
<td><select name="wcsave_09_asession" id="wcsave_09_asession" size="1" onblur="CheckField(this.form,this,'');" onchange="display2(this,'Mastery sesson 2','Concurrent sessons 7-12');"><!--showDiv(this.value)-->
<option value="" selected="selected">Choose one</option>
<option value="Mastery sesson 2">Mastery sesson #2</option>
<option value="Concurrent sessons 7-12">Concurrent sessons #7-#12</option>
</select>
</td>
</tr>
In each list depending on what option is chosen, a corresponding div will show with select lists. Morning div: Code: <div id="Mastery sesson 1" style="display: none;">
<table class="special">
<tr valign="top">
<td>(9:15 a.m. - 10:15 a.m.)<br /><select name="wcsave_10_session_mmastery" id="wcsave_10_session_mmastery">
<option value="" selected="selected">Choose one</option>
<option value="Mastery session #1 - Computer Lab: Searching Essentials"><strong>Mastery session #1</strong> - Computer Lab: Searching Essentials</option>
</select>
</td>
</tr>
</table>
</div>
<div id="Concurrent sessons 1-6" style="display: none;">
<table class="special">
<tr valign="top">
<td>Choose a session for each time slot.<br />
(9:15 a.m. - 10:15 a.m.)<br /><select name="wcsave_10_session_mconc1" id="wcsave_10_session_mconc1" onchange="toggleSelect();">
<option value="" selected="selected">Choose one</option>
<option value="Concurrent session #1 - IRB 101 for Research Nurses">Concurrent session #1 - IRB 101 for Research Nurses</option>
<option value="Concurrent session #2 - A Research Poster Contest as a Tool to Learn About Research/EBP">Concurrent session #2 - A Research Poster Contest as a Tool to Learn About Research/EBP</option>
<option value="Concurrent session #3 - Beginning the EBP Journey: Evaluating and Synthesizing the Literature">Concurrent session #3 - Beginning the EBP Journey: Evaluating and Synthesizing the Literature</option>
</select>
</td>
</tr>
<tr valign="top">
<td>(10:30 a.m. - 11:30 a.m.)<br /><select name="wcsave_10_session_mconc2" id="wcsave_10_session_mconc2" onchange="toggleSelect();">
<option value="" selected="selected">Choose one</option>
<option value="Concurrent session #4 - IRB 101 for Research Nurses">Concurrent session #4 - Making Sense of Statistics When Reading Research</option>
<option value="Concurrent session #5 - Original Research Presentations">Concurrent session #5 - <em>Original Research Presentations</em></option>
<option value="Concurrent session #6 - IRB Considerations with Vulnerable Populations">Concurrent session #6 - IRB Considerations with Vulnerable Populations</option>
</select>
</td>
</tr>
</table>
</div>
Afternoon div: Code: <div id="Mastery sesson 2" style="display: none;">
<table class="special">
<tr valign="top">
<td>(1:45 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_mmastery" id="wcsave_10_session_mmastery">
<option value="" selected="selected">Choose one</option>
<option value="Mastery session #2 - Beyond the Basics of Searching!"><strong>Mastery session #2</strong> - Beyond the Basics of Searching!</option>
</select>
</td>
</tr>
</table>
</div>
<div id="Concurrent sessons 7-12" class="hiddenDiv">
<table class="special">
<tr valign="top">
<td>Choose a session for each time slot.<br />
(1:45 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_aconc1" id="wcsave_10_session_aconc1" onchange="toggleSelect();">
<option value="" selected="selected">Choose one</option>
<option value="" selected="selected">Choose one</option>
<option value="Concurrent session #7 - EBP Protocols">Concurrent session #7 - EBP Protocols</option>
<option value="Concurrent session #8 - Writing for Publication">Concurrent session #8 - Writing for Publication</option>
<option value="Concurrent session #9 - Original Research Presentations">Concurrent session #9 - Original Research Presentations</option>
</select>
</td>
</tr>
<tr valign="top">
<td>(3:00 p.m. - 4:00 p.m.)<br /><select name="wcsave_10_session_aconc2" id="wcsave_10_session_aconc2" onchange="toggleSelect();">
<option value="" selected="selected">Choose one</option>
<option value="Concurrent session #10 - Writing a Research Question Using PICO">Concurrent session #10 - Writing a Research Question Using PICO</option>
<option value="Concurrent session #11 - EBP Project Presentations">Concurrent session #11 - EBP Project Presentations</option>
<option value="Concurrent session #12 - The Role of the Research Facilitator">Concurrent session #12 - The Role of the Research Facilitators</option>
</select>
</td>
</tr>
</table>
</div>
Once two options are chosen in the divs, the Afternoon or Morning becomes disabled. Code: function toggleSelect() {
var selBox0 = document.getElementById('wcsave_10_session_mconc1');
var selBox1 = document.getElementById('wcsave_10_session_mconc2');
var selBox2 = document.getElementById('wcsave_09_msession');
var selBox3 = document.getElementById('wcsave_10_session_aconc1');
var selBox4 = document.getElementById('wcsave_10_session_aconc2');
var selBox5 = document.getElementById('wcsave_09_asession');
if ((selBox0.selectedIndex !=0) && (selBox1.selectedIndex !=0)) {selBox5.disabled = true;} else {selBox5.disabled = false;}
if ((selBox3.selectedIndex !=0) && (selBox4.selectedIndex !=0)) {selBox2.disabled = true;} else {selBox2.disabled = false;}
}
Here is the code to show/hide the divs: Code: function display1(obj,id1,id2) {
var selBox0 = document.getElementById('wcsave_10_session_mconc1');
var selBox1 = document.getElementById('wcsave_10_session_mconc2');
var selBox2 = document.getElementById('wcsave_09_msession');
var selBox3 = document.getElementById('wcsave_10_session_aconc1');
var selBox4 = document.getElementById('wcsave_10_session_aconc2');
var selBox5 = document.getElementById('wcsave_09_asession');
var txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {document.getElementById(id1).style.display = 'block';}
if ( txt.match(id2) ) {document.getElementById(id2).style.display = 'block';}
}
function display2(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {document.getElementById(id1).style.display = 'block';}
if ( txt.match(id2) ) {document.getElementById(id2).style.display = 'block';}
}
What I want to do is set the sub div dropdown selectedIndex == 0 when Morning or Afternoon is set to Choose one. In essence clearing the values when the div is hidden so the other fields are no longer disabled. Any ideas? Hey guys, Im trying to figure out how to display a string of text beneath the drop down when a specific option is selected. for example: if you select 'Colors' just plain text would appear the drop down and show the list of colors 'red, blue, green, yellow' or if you select 'Fruit' the plain text shows the list of fruit "orange, banana, apple, lemon' Any ideas or can you guys point me in the right direction? I have a similar code except its when you type in a number in a textarea it would output the coressponding data. i have a simple form basically....and i want to display a div containing a message when a certain dropdown menu item is selcted... as you will see...i have two divs in my message...one named website design and one named twitter design both set to display none when website design is selected i want the websitemessage div to display when twitter is selected i want the twitter message to display... any thoughts? here is some of the code Code: <form id="contactform" action="contact-submit.php" method="post">
<!-- form fields -->
<div class="form">
<label for="name">Name<em>•</em></label>
<input class="textbox required" type="text" name="name" id="name" /><br />
<label for="email">E-Mail<em>•</em></label>
<input class="textbox required email" type="text" name="email" id="email" /><br />
<label for="subject">What are you interested in?<em>•</em></label>
<select type="text" value="Choose a Service" name="subject" id="subject" onchange="Select(this,'budget',1);"/>
<option selected> -- Select A Design Service --</option>
<option id="website"> Website Design </option>
<option> Twitter </option>
<option> Ning or Tumblr </option>
<option> Flyers </option>
<option> Business Card or Brochure</option>
<option> Album or Mixtape cover</option>
<option>Other</option>
</select><br />
<div id="websitemessage" style="display:none;"><label> Do you already have a Logo to use for this website? </label>
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="Logo: Yes"> Yes
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="Logo: Not yet"> Not yet
</input>
</div>
<div id="twittermessage" style="color:#B5B5B5;
display:none;"><SPAN>Twitter Designs start at </SPAN><span style="color:#000;"> $30</SPAN>
</div>
any ideas on what script i would put into the head tags to make that happen? I have a working drop down menu on my "Facebook" icon at the top of my website. www.billboardfamily.com The menu works fine, but I would like for it to open to the left of the icon... should look something like the attached pic. I do not know enough about js to make this happen, any help would be great. Thanks in advance! anylinkmenu.js Code: //** AnyLink JS Drop Down Menu v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
//** January 29th, 2009: Script Creation date
//**May 22nd, 09': v2.1
//1) Automatically adds a "selectedanchor" CSS class to the currrently selected anchor link
//2) For image anchor links, the custom HTML attributes "data-image" and "data-overimage" can be inserted to set the anchor's default and over images.
//**June 1st, 09': v2.2
//1) Script now runs automatically after DOM has loaded. anylinkmenu.init) can now be called in the HEAD section
//**May 23rd, 10': v2.21: Fixes script not firing in IE when inside a frame page
if (typeof dd_domreadycheck=="undefined") //global variable to detect if DOM is ready
var dd_domreadycheck=false
var anylinkmenu={
menusmap: {},
preloadimages: [],
effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:false, duration:500}}, //customize menu effects
dimensions: {},
getoffset:function(what, offsettype){
return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
},
getoffsetof:function(el){
el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight}
},
getdimensions:function(menu){
this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight,
docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20,
docheight:(window.innerHeight ||this.standardbody.clientHeight)-15,
docscrollx:window.pageXOffset || this.standardbody.scrollLeft,
docscrolly:window.pageYOffset || this.standardbody.scrollTop
}
if (!this.dimensions.dropmenuw){
this.dimensions.dropmenuw=menu.dropmenu.offsetWidth
this.dimensions.dropmenuh=menu.dropmenu.offsetHeight
}
},
isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},
setopacity:function(el, value){
el.style.opacity=value
if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
el.style.MozOpacity=value
if (el.filters){
el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
}
}
},
showmenu:function(menuid){
var menu=anylinkmenu.menusmap[menuid]
clearTimeout(menu.hidetimer)
this.getoffsetof(menu.anchorobj)
this.getdimensions(menu)
var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos
var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos
if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
}
if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){ //drop up instead?
posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge
}
if (this.effects.fade.enabled){
this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
if (this.effects.shadow.enabled)
this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
}
menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})
if (this.effects.shadow.enabled){
//menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
menu.shadow.setcss({left:posx+anylinkmenu.effects.shadow.depth[0]+'px', top:posy+anylinkmenu.effects.shadow.depth[1]+'px', visibility:'visible'})
}
if (this.effects.fade.enabled){
clearInterval(menu.animatetimer)
menu.curanimatedegree=0
menu.starttime=new Date().getTime() //get time just before animation is run
menu.animatetimer=setInterval(function(){anylinkmenu.revealmenu(menuid)}, 20)
}
},
revealmenu:function(menuid){
var menu=anylinkmenu.menusmap[menuid]
var elapsed=new Date().getTime()-menu.starttime //get time animation has run
if (elapsed<this.effects.fade.duration){
this.setopacity(menu.dropmenu, menu.curanimatedegree)
if (this.effects.shadow.enabled)
this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)
}
else{
clearInterval(menu.animatetimer)
this.setopacity(menu.dropmenu, 1)
menu.dropmenu.style.filter=""
}
menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2
},
setcss:function(param){
for (prop in param){
this.style[prop]=param[prop]
}
},
setcssclass:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add" && !needle.test(el.className))
el.className+=" "+targetclass
},
hidemenu:function(menuid){
var menu=anylinkmenu.menusmap[menuid]
clearInterval(menu.animatetimer)
menu.dropmenu.setcss({visibility:'hidden', left:0, top:0})
menu.shadow.setcss({visibility:'hidden', left:0, top:0})
},
getElementsByClass:function(targetclass){
if (document.querySelectorAll)
return document.querySelectorAll("."+targetclass)
else{
var classnameRE=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "i") //regular expression to screen for classname
var pieces=[]
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
pieces[pieces.length]=alltags[i]
}
return pieces
}
},
addDiv:function(divid, divclass, inlinestyle){
var el=document.createElement("div")
if (divid)
el.id=divid
el.className=divclass
if (inlinestyle!="" && typeof el.style.cssText=="string")
el.style.cssText=inlinestyle
else if (inlinestyle!="")
el.setAttribute('style', inlinestyle)
document.body.appendChild(el)
return el
},
getmenuHTML:function(menuobj){
var menucontent=[]
var frag=""
for (var i=0; i<menuobj.items.length; i++){
frag+='<li><a href="' + menuobj.items[i][1] + '" rel="nofollow" target="' + menuobj.linktarget + '">' + menuobj.items[i][0] + '</a></li>\n'
if (menuobj.items[i][2]=="efc" || i==menuobj.items.length-1){
menucontent.push(frag)
frag=""
}
}
if (typeof menuobj.cols=="undefined")
return '<ul>\n' + menucontent.join('') + '\n</ul>'
else{
frag=""
for (var i=0; i<menucontent.length; i++){
frag+='<div class="' + menuobj.cols.divclass + '" style="' + menuobj.cols.inlinestyle + '">\n<ul>\n' + menucontent[i] + '</ul>\n</div>\n'
}
return frag
}
},
addEvent:function(targetarr, functionref, tasktype){
if (targetarr.length>0){
var rel="nofollow" target=targetarr.shift()
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)})
this.addEvent(targetarr, functionref, tasktype)
}
},
domready:function(functionref){ //based on code from the jQuery library
if (dd_domreadycheck){
functionref()
return
}
// Mozilla, Opera and webkit nightlies currently support this event
if (document.addEventListener) {
// Use the handy event callback
document.addEventListener("DOMContentLoaded", function(){
document.removeEventListener("DOMContentLoaded", arguments.callee, false )
functionref();
dd_domreadycheck=true
}, false )
}
else if (document.attachEvent){
// If IE and not an iframe
// continually check to see if the document is ready
if ( document.documentElement.doScroll && window == window.top) (function(){
if (dd_domreadycheck) return
try{
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left")
}catch(error){
setTimeout( arguments.callee, 0)
return;
}
//and execute any waiting functions
functionref();
dd_domreadycheck=true
})();
}
if (document.attachEvent && parent.length>0) //account for page being in IFRAME, in which above doesn't fire in IE
this.addEvent([window], function(){functionref()}, "load");
},
addState:function(anchorobj, state){
if (anchorobj.getAttribute('data-image')){
var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0]
if (imgobj){
imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
}
}
else
anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
},
addState:function(anchorobj, state){
if (anchorobj.getAttribute('data-image')){
var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0]
if (imgobj){
imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
}
}
else
anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
},
setupmenu:function(targetclass, anchorobj, pos){
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
var relattr=anchorobj.getAttribute("rel")
dropmenuid=relattr.replace(/\[(\w+)\]/, '')
var dropmenuvar=window[dropmenuid]
var dropmenu=this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) //create and add main sub menu DIV
dropmenu.innerHTML=this.getmenuHTML(dropmenuvar)
var menu=this.menusmap[targetclass+pos]={
id: targetclass+pos,
anchorobj: anchorobj,
dropmenu: dropmenu,
revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click")? "click" : "mouseover",
orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
shadow: this.addDiv(null, "anylinkshadow", null) //create and add corresponding shadow
}
menu.anchorobj._internalID=targetclass+pos
menu.anchorobj._isanchor=true
menu.dropmenu._internalID=targetclass+pos
menu.shadow._internalID=targetclass+pos
menu.dropmenu.setcss=this.setcss
menu.shadow.setcss=this.setcss
menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
this.setopacity(menu.shadow, this.effects.shadow.opacity)
this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow
var menu=anylinkmenu.menusmap[this._internalID]
if (this._isanchor && menu.revealtype=="mouseover" && !anylinkmenu.isContained(this, e)){ //event for anchor
anylinkmenu.showmenu(menu.id)
anylinkmenu.addState(this, "add")
}
else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow
clearTimeout(menu.hidetimer)
}
}, "mouseover")
this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
if (!anylinkmenu.isContained(this, e)){
var menu=anylinkmenu.menusmap[this._internalID]
menu.hidetimer=setTimeout(function(){
anylinkmenu.addState(menu.anchorobj, "remove")
anylinkmenu.hidemenu(menu.id)
}, anylinkmenu.effects.delayhide)
}
}, "mouseout")
this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu
var menu=anylinkmenu.menusmap[this._internalID]
if ( this._isanchor && menu.revealtype=="click"){
if (menu.dropmenu.style.visibility=="visible")
anylinkmenu.hidemenu(menu.id)
else{
anylinkmenu.addState(this, "add")
anylinkmenu.showmenu(menu.id)
}
if (e.preventDefault)
e.preventDefault()
return false
}
else
menu.hidetimer=setTimeout(function(){anylinkmenu.hidemenu(menu.id)}, anylinkmenu.effects.delayhide)
}, "click")
},
init:function(targetclass){
this.domready(function(){anylinkmenu.trueinit(targetclass)})
},
trueinit:function(targetclass){
var anchors=this.getElementsByClass(targetclass)
var preloadimages=this.preloadimages
for (var i=0; i<anchors.length; i++){
if (anchors[i].getAttribute('data-image')){ //preload anchor image?
preloadimages[preloadimages.length]=new Image()
preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-image')
}
if (anchors[i].getAttribute('data-overimage')){ //preload anchor image?
preloadimages[preloadimages.length]=new Image()
preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-overimage')
}
this.setupmenu(targetclass, anchors[i], i)
}
}
}
menucontents.js Code: var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'', linktarget:''} //First menu variable. Make sure "anylinkmenu1" is a unique name!
anylinkmenu1.items=[
["Fan Page", "http://www.facebook.com/BillboardFamily/"],
["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"],
["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"]
//no comma following last entry!
]
var anylinkmenu2={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#FDD271', linktarget:'_new'} //Second menu variable. Same precaution.
anylinkmenu2.items=[
["Fan Page", "http://www.facebook.com/BillboardFamily/"],
["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"],
["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"]
//no comma following last entry!
]
var anylinkmenu3={divclass:'anylinkmenucols', inlinestyle:'', linktarget:'secwin'} //Third menu variable. Same precaution.
anylinkmenu3.cols={divclass:'column', inlinestyle:''} //menu.cols if defined creates columns of menu links segmented by keyword "efc"
anylinkmenu3.items=[
["Fan Page", "http://www.facebook.com/BillboardFamily/"],
["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"],
["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"]
//no comma following last entry!
]
var anylinkmenu4={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#DFFDF4', linktarget:'_new'} //Second menu variable. Same precaution.
anylinkmenu4.items=[
["Fan Page", "http://www.facebook.com/BillboardFamily/"],
["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"],
["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"]
//no comma following last entry!
]
css for the menu Code: .selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
}
/* ######### Default class for drop down menus ######### */
.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
font: normal 13px Arial;
line-height: 18px;
background: #000000;
width: 85px; /* default width for menu */
}
.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.anylinkmenu ul li a{
width: 100%;
display: block;
color: #00AFEF;
text-indent: 10px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}
.anylinkmenu a:hover{ /*hover background color*/
background: black;
color: #00AFEF;
text-decoration: underline;
}
/* ######### Alternate multi-column class for drop down menus ######### */
.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E9E9E9;
}
.anylinkmenucols li{
padding-bottom: 3px;
}
.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}
.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}
hey guys, i wonder why my drpdown box cant be copied? can some1 help me correct it.. thanks! Code:
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
var desc = new Array();
desc['a1'] = 'issue';
desc['a2'] = 'tel';
desc['a3'] = 'account name';
desc['a4'] = 'caller';
desc['a5'] = 'OS';
desc['a6'] = 'modem';
desc['a7'] = 'router';
function CopyFields(){
var copytext = '';
for(var i = 0; i < arguments.length; i++){
copytext += desc[arguments[i]] + ': ' + document.getElementById(arguments[i]).value + '\n';
}
var tempstore = document.getElementById(arguments[0]).value;
document.getElementById(arguments[0]).value = copytext;
document.getElementById(arguments[0]).focus();
document.getElementById(arguments[0]).select();
document.execCommand('Copy');
document.getElementById(arguments[0]).value = tempstore;
}
--></script> <body>
<form>
<table border="0" cellpadding="0" cellspacing="0" style="width: 500px;">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 500px;">
<tbody>
<tr>
<td style="text-align: right;">
issue:</td>
<td>
<textarea id="a1"></textarea></td>
</tr>
<tr>
<td style="text-align: right;">
tel:</td>
<td>
<input id="a2" /></td>
</tr>
<tr>
<td style="text-align: right;">
account name:</td>
<td>
<input id="a3" /></td>
</tr>
<tr>
<td style="text-align: right;">
caller:</td>
<td>
<input id="a4" /></td>
</tr>
<tr>
<td style="text-align: right;">
os:</td>
<td>
<select id="a5"><option selected="selected" value="">Windows 7</option><option value="">Windows Vista</option><option value="">Windows XP</option><option value="">X MAC 10.x</option><option value="">Other</option></select></td>
</tr>
<tr>
<td style="text-align: right;">
modem:</td>
<td>
<input id="a6" /></td>
</tr>
<tr>
<td style="text-align: right;">
router:</td>
<td>
<input id="a7" /></td>
</tr>
</tbody>
</table>
<input onclick="CopyFields('a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7');" type="button" value="Copy" /> <input type="reset" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Hello friends. I need a little help with this code i can't get to work. Under 500.000 euros a link to another website need to open when selected in the dropdown menu. Code: <input type="hidden" id="budget_min" name="budget_min" value="0" />
<input type="hidden" id="budget_max" name="budget_max" value="0" />
<select onchange="updatePriceLimit(this)">
<option value="http://othersite.com">-500.000 euros</option>
<option value="500000-1000000">500.000 - 1.000.000 euros</option>
<option value="1000000-2000000">1.000.000 - 2.000.000 euros</option>
<option value="2000000-100000000">2.000.000+ euros</option>
</select>
<script type="text/javascript">
function updatePriceLimit(select) {
if (select.value.search(/http/i)) {
location.href=select.value;
} else {
var limit = select.value.split('-');
document.getElementById('budget_min').value = limit[0];
document.getElementById('budget_max').value = limit[1];
}
}
</script>
TIA i want to activate a dropdown menu with a lot of submenus and i have function setActive() { aObj = document.getElementById('nav').getElementsByTagName('a'); for(i=0;i<aObj.length;i++) { if(document.location.href.indexOf(aObj[i].href)>=0) { aObj[i].className='active'; } } } window.onload = setActive; but it activate me only the sub butons and i want the primary - the top buton active i have a css class separated can you help me ? what should i add in the code? Hi guys. I was wondering if you maybe could help me with the following issue. I would like to make a menu that when you click it, a submenu slides beneath it, when you click it again it slides back up (so not automatically if you click another menu). I attached an image to clearify myself. This is what I came up with so far, but now I am stuck.. can somebody help me? http://www.webmention.com/menu.htm is the look I actually want.. seperated menu's and the submenu not 'in' the main menu.. Thanks! Can someone please explain this code to me please. Its the beginning of a javascript code to hide and show a drop down menu. Ill include the html code to give u a better understanding too. Thank you so much, ive been frustrated on this for nearly a month HTML Code: <body>
<h1>Menu Test</h1>
<ul id=”menu”>
<li class=”menu”><a href=”#”>Home</a></li>
<li class=”menu”><a href=”#”>Products</a>
<ul>
<li><a href=”#”>Sub-item 1</a></li>
<li><a href=”#”>Sub-item 2</a></li>
<li><a href=”#”>Item 3</a></li>
</ul></li>
<li class=”menu”><a href=”#”>Support</a>
<ul>
<li><a href=”#”>Sub-item 1</a></li>
<li><a href=”#”>Sub-item 2</a></li>
</ul></li>
<li class=”menu”><a href=”#”>Employment</a>
<ul>
<li><a href=”#”>Sub-item 1</a></li>
<li><a href=”#”>Sub-item 2</a></li>
</ul></li>
<li class=”menu”><a href=”#”>Contact Us</a>
<ul>
<li><a href=”#”>Sub-item 1</a></li>
<li><a href=”#”>Sub-item 2</a></li>
</ul></li>
</ul>
</body>
JavaScript Code: // global variables for timeout and for current menu
var t=false,current;
function SetupMenu() {
if (!document.getElementsByTagName) return;
items=document.getElementsByTagName(“li”);
for (i=0; i<items.length; i++) {
if (items[i].className != “menu”) continue;
//set up event handlers
thelink=findChild(items[i],”A”);
thelink.onmouseover=ShowMenu;
thelink.onmouseout=StartTimer;
//is there a submenu?
if (ul=findChild(items[i],”UL”)) {
ul.style.display=”none”;
for (j=0; j<ul.childNodes.length; j++) {
ul.childNodes[j].onmouseover=ResetTimer;
ul.childNodes[j].onmouseout=StartTimer;
}
}
}
}
// find the first child object of a particular type
function findChild(obj,tag) {
cn = obj.childNodes;
for (k=0; k<cn.length; k++) {
if (cn[k].nodeName==tag) return cn[k];
}
return false;
}
I have a long list consisting of a name and associated number, like this: SITE01 2111 SITE02 4567 SITE03 5555 and so on. I would like to put two dropdown boxes where the user can select either the name or the number. Then based upon the users selection have both the name and number appear. I'm thinking of putting all the data in an array and using the dropdowns to query the array. That sounds good but I'm new to javascript and a detailed example of how to do this would be needed, if its even the right approach to take to accomplish this. Hi Friends.. I am not sure if this post is for the PHP or Javascript section. So I am gonna try my luck here.. I am Dev and I have come here for some coding help. I am just beginning to learn basic html coding (and some php), just so that I can tweak the code of a social network I am building using the script called phpFox. I am not having much luck from their support so I am hoping I'll get help from this vast community My problem is quite small I believe: In my community's sign-up page, under the gender field there is a drop-down but the text is not displayed in it. Although.. there are 2 rows of blank space, and if we select one of them, the value gets saved into the profile. So all I need is to figure out how to display the labels of the fields: 'Male' and 'Female' respectively. Have attached a screenshot of the erroneous page and I am also jotting the part of the code from the 'Signup.html.php' file on my server which deals with that dropdown menu. Hope that could give u an idea as to how to proceed. And if you require details from other parts of the code or related files; pls do let me know. Code: Code: {if Phpfox::getParam('core.registration_enable_gender')}
<div class="table">
<div class="table_left">
<label for="gender">{required}{phrase var='user.gender'}:</label>
</div>
<div class="table_right">
{select_gender}
</div>
</div>
Thanks in advance Waiting Dev this alert should not be open when orange is selected but its popping Code: <html>
<head>
<script>
function valDrop(val) {
if (!document.getElementById('Select').value == ('ORG')) return false;
else
alert('ONLY ORANGE SHOULD BE SELECTED!!')
return true;
}
</script>
</head>
<body>
<select id="Select">
<option value="NONE">Select Location</option>
<option value="APL">APPLE</option>
<option value="ORG">ORANGE</option>
<option value="MNG">MANGO</option>
<option value="BNA">BANANA</option>
<option value="PCH">PEACH</option>
</select>
<br>
<input type='button',
onclick="valDrop()",
value='Submit' />
</body>
</html>
My Javascript dropdown menu drops down behind my embedded music player on my website (http://www.blackoutplaylists.com). I need help fixing this, I've tried everything and can't seem to get it fixed. Any suggestions?
I have a two dropdown menus, the second drop down menu appears depending on what is selected in the first dropdown menu. Problem is that in some browsers, if something is selected in the first dropdown menu, then if I click on the second dropdown menu then a dropdown does not occur, but if I select something in the first dropdown menu again and then click on the second dropdown menu, then the dropdown appears in the second dropdown menu. Why is this happening? In Internet Explorer, Firefox and Safari, my second drop down menu appears straight away when I click on it after selecting something on the first dropdown menu for the first time. In google chrome and opera, I have to select options from the first dropdown menu twice to be able to get the second dropdown menu working. The jquery code for the second dropdown menu is below: Code: $("#optionDropId").change(function(){
var OptDrop = new Array();
OptDrop.abc = ["",1,2];
OptDrop.abcd = ["",1,2,3];
OptDrop.abcde = ["",1,2,3,4];
OptDrop.trueorfalse = [1];
OptDrop.yesorno = [1];
var selectedValue = $(this).val();
$("#numberDropId").html("");
$.each(OptDrop[selectedValue], function(x,y){
$("#numberDropId").append($("<option></option>").attr("value", y).html(y));
});
});
The full code is in Jsfiddle. (the full code might not work fully in JSfiddle but it works in browsers on its own file and the full code shows the order of my code. [1]: http://jsfiddle.net/XZ7um/2/ I'm searching for a (customizable) script which allows me to make a simple drop-down menu. It might not look like a whole lot, but there's more to it than it seems. With any menu builder one can make such a menu BUT since I am restricted to a non html regular font I have to use (small) images with white on black text in that specific font, in order to show always this font to a visitor. Since the page background will also be black, the menu just looks like simple text. any help, advice or directions are highly appreciated. Hi I have two drop down menus I want the first one has name of the folders and when change the other dropdown has names of the sub-folders of this folder i have the top folders at the first dropdown how can i have the subfolders at the second when change first? the problem is how to open folder if i have folders aaaaa has subfolders(1111,2222,2233) bbbbb has subfolders(3333,4422,2433) ccccc has subfolders(1131,2232,2532) and each folder has subfolders how can i have name of these subfolders when change the topfolders(aaaaa, bbbbb, ccccc) I have more than 1000 top folders and eachone have 10 subfolders already i have all topfolders at first dropdown ,i want to have subfolders at second automatic , any help?? Hi everyone, I'm needing some help with a code and looking for some guidance. I'm trying to create two drop down menus that work together. the first dropdown box displays the country with two titles, Can and USA. the other dropdown box displays the province/state. when Can is selected, 10 provinces is listed in the second box. when USA is selected, 50 states is listed in the second box The second menu is disabled until they select from the first menu any help is appreciated! OK, I think this is an error with the js. I'm in the process of putting together a website in which when the user clicks on the nav bar, it drops down displaying the submenu. I'm working with HTML Kit and in the preview screen (which if I remember correctly is IE7) it works fine. However, when I save the file and open it up in any browser (FF, IE, Chrome)only kids and community work section works. I'm not seeing anything wrong. Does anyone have a clue what's going on? Or would it be a problem with the HTML/CSS EDIT: Guess I should post the link http://tinyurl.com/67w4epj |
|||||||