|
JavaScript - A Little Help With A Dropdown Menu Please
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 Similar Tutorialshey 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>
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! 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;
}
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 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? 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/ 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>
I am using a drop down menu for a website I'm working on to display menu items under categories. I'm using the same code to do this on two different pages with the actual content of the menu's loading from a MySQL database using PHP scripts. www.browniepointscatering.com/menu.php www.browniepointscatering.com/seasonal.php On the menu.php page I left the code below in the mix which drops down the first category listed on the left. On the seasonal.php page I took the code below out and it no longer drops down any menu by default when the page is loaded. What I'd like to do is drop down nothing initially when the page is loaded but if someone opens up the "Cupcakes" category and clicks on an item it would keep that category open when it loads the item details in the center column. If you need to see more code let me know! <!-- Add-On Code: Show Select Containers On Load --> <script type="text/javascript">/* <![CDATA[ */if(!qmad.sopen){qmad.sopen=new Object();qmad.sopen.log=new Array();if(window.attachEvent)window.attachEvent("onload",qm_sopen_init);else if(window.addEventListener)window.addEventListener("load",qm_sopen_init,1);};function qm_sopen_init(e,go){if(window.qmv)return;if(!go){setTimeout("qm_sopen_init(null,1)",10);return;}var i;var ql=qmad.sopen.log;for(i=0;i<10;i++){var a;if(a=document.getElementById("qm"+i)){var dd=a.getElementsByTagName("DIV");for(var j=0;j<dd.length;j++){if(dd[j].idiv.className.indexOf("qm-startopen")+1){ql.push(dd[j].idiv);var f=dd[j][qp];if(!qm_a(f)){var b=false;for(var k=0;k<ql.length;k++){if(ql[k]==f.idiv)ql[k]=null;}ql.push(f.idiv);f=f[qp];}}}}}var se=0;var sc=0;if(qmad.tree){se=qmad.tree.etype;sc=qmad.tree.ctype;qmad.tree.etype=0;qmad.tree.ctype=0;}for(i= ql.length-1;i>=0;i--){if(ql[i]){qm_oo(new Object(),ql[i],1);qm_li=null;}}if(qmad.tree){qmad.tree.etype=se;qmad.tree.ctype=sc;}}/* ]]> */</script> Hello. I just added this javascript/css dropdown menu to my site (download came from here). Everything seemed to be going fine until I started to test it on other pages. It seems to be running into some sort of conflict on certain pages, but I have no idea why or how. All I can tell is that the page loads differently (it shows basically an un-styled site, then it loads) and that's when the conflict occurs. In short, the menu shows up about 50px below where it should, rendering it impossible to use. I don't care how it looks in IE. The only browser that is showing it correctly is Opera. Any help would be greatly appreciated. I have no idea. :/ http://www.surrealtwilight.com You'll have to login with "Reviewer" password "testingme" to see the layout I've been working on. Menu works fine on the index page and some other pages, but not for the website pages like st_rules.php and stuff like that. :/ Any help will be greatly appreciated. I love how it looks, and I'm super bummed it's doing this. Hi, Hi have the attached some menu content code which has 3 levels. I need some help with the .CSS file to make it step out correctly please. I am using cssverticalmenu.css which is 2 levels It allows the code to step out 1 level but the second layer overwrites the third. Any advice would be greatly appreciated. Yes I am a novice. 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. Can someone explain to me why my dropdown menu works on all my subpages but not on my home page? Just about done with this site to present to my client and need to get this working asap. PM me and I'll give you the URL. Thanks in advance! Respectfully, Len 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?? I have been searching everywhere and have found a few of articles available regarding dropdown menu.. couldnt get exactly what i wanted.. i am not really good at javascript, or even programing..am trying my best. anyway~ Here is what i want. something simple if there is more than 1 data entity (count>1) (Case 1), then execute 'select(drop down)' else (count <=1)(Case 2), then just show the data entity itself. (i dun even want the dropdown box to appear) as below screenshot or the attachment I have a script getting me the dropdown menu as below, i wanna modify this but not sure where to start... -------------------------------- <div id="abcdefg"> <form id="setLanguage" action="{$request_uri}" method="post"> <select name="selectlanguage" id="selectlanguage" onchange="setLanguage(this.value)"> {foreach from=$languages key=k item=language name="languages"} <option value="{$language.id_lang}" {if $language.iso_code == $lang_iso} selected {/if} >{$language.name} </option> {/foreach} </select> <input type="hidden" name="id_lang" id="id_lang" value=""/> </form> </div> -------------------------------- Really appreciate your help with modifying this. Please try not to give me a totally new script (i bet it will/may work better but i wouldnt be able to understand..:-( so no point...) 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?
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! 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 |
|||||||