|
JavaScript - Add Dropdown Menu In The Existing System
I am working on a site which is pretty old school.. i have a vertical drop down menu using javascript which uses <img src tag>..
Check the tab fountains at http://www.texaslakesandponds.com/index_html.html (it has a vertex and kasco dropdown) I want to add a similar dropdown for Aerators with the same format and color. I dont know how to do that since it uses a <ul><li> format and the image is called in the css class. Can someone please help me with the code. Similar TutorialsHey all, I'm in process of writing my own script (I don't want to use any jquery plugins) to render a table and allow for filtering/searching. So when user clicks on link, by default there will be parameters passed in query string as you can see in the setDefaults private method below. However, I'm stuck trying to figure out the best way to append values selected from filter dropdown to the query string. I know it will involve something along the lines of $("select").change(function(){var option = $(this).val()}). But I am having difficulty figuring out how to incorporate it with this. I would like to make use of the below buildFilter function somehow: Code: (function($){
var listview = $('#listview');
var lists = (function(){
var criteria = {
drop_filter: {
check: function(value){
if(value)
return
},
msg: "Loading..."
},
search_filter: {
check: function(value){
if(value)
return
},
msg: "Loading..."
}
}
var handleFilter = function(){
}
return {
create: function(component){
var component = component.href.substring(component.href.lastIndexOf('#') + 1);
return component;
},
setDefaults: function(component){
var parameter = {};
switch(component){
case "sites":
parameter = {
'order': 'site_num',
'per_page': '20',
'url': '/sites'
}
}
return parameter;
},
buildFilter: function(){
if(event == "change")
return criteria.drop_filter();
}
}
})();
$('#dashboard a').click(function(){
var currentComponent = lists.create(this);
var custom = lists.setDefaults(currentComponent);
initializeTable(custom);
});
var initializeTable = function(custom){
var defaults = {};
var query_string = $.extend(defaults, custom);
var params = [];
$.each(query_string, function(key,value){
params += key + ': ' + value;
})
alert(params);
}
})(jQuery)
Thanks for any response. Hi there, I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers. My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon. I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated. Here is the existing function which tells a link to be active or selected: Code: var Lst;
function CngClass(obj){
if (Lst) Lst.className='.topnav';
obj.className='selected';
Lst=obj;
}
and here is the menu code: Code: <ul class="topnav"> <li><a href="#">Home</a></li> <li><a onclick="CngClass(this);" href="#">Top Link 2</a> <ul> <li><a onclick="CngClass(this);" href="#">Cookies</a></li> <li><a onclick="CngClass(this);" href="#">Events</a></li> <li><a onclick="CngClass(this);" href="#">Forms</a></li> <li><a onclick="CngClass(this);" href="#">Games</a></li> <li><a onclick="CngClass(this);" href="#">Images</a></li> <li><a onclick="CngClass(this);" href="#">Navigations</a> <ul> <li><a onclick="CngClass(this);" href="#">CSS</a></li> <li><a onclick="CngClass(this);" href="#">JavaScript</a></li> <li><a onclick="CngClass(this);" href="#">JQuery</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tabs</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tutorials</a> <ul> <li><a onclick="CngClass(this);" href="#">HTML</a></li> <li><a onclick="CngClass(this);" href="#">CSS</a></li> <li><a onclick="CngClass(this);" href="#">JavaScript</a></li> <li><a onclick="CngClass(this);" href="#">Java</a> <ul> <li><a onclick="CngClass(this);" href="#">JSP</a></li> <li><a onclick="CngClass(this);" href="#">JSF</a></li> <li><a onclick="CngClass(this);" href="#">JPA</a></li> <li><a onclick="CngClass(this);" href="#">Contact</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tabs</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Contact</a></li> <li><a onclick="CngClass(this);" href="#">Upload script</a></li> </ul> Thanks for any help or advice. 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 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;
}
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! 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>
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 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...) 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?? 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 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! 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> 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, 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 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/ |
|||||||