|
JavaScript - Ypslideout Dropdown Issue
http://ahy4life.com/test2/index.php
Symptom: when the cursor is moved over the child menu of, say, MEET THE OWNERS, is the the title becomes one line "MEET THE" . There seems to be a javascript issue that can't quite fathom. The adjacent menu PHYSICAL THERAPY seems to not display this symptom, altho moving the cursor over a child menu caused the title no longer highlight in green, as the other menus do correctly. What am I missing? Similar TutorialsCan 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'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//<![CDATA[
function store(element) {
// store values
var cl = element;
var text_list = new Array();
var value_list = new Array();
var length = cl.length;
for (var foo=0; foo<length; foo++) {
text_list[foo] = cl.options[foo].text;
value_list[foo] = cl.options[foo].value;
alert("text array " + foo + " " + text_list[foo]);
alert("value array " + foo + " " + value_list[foo]);
}
populate(cl, text_list, value_list);
}
function populate(element, text, value) {
// populate options with previously stored values
var cl = element;
var length = cl.length;
cl.options.length=0;
for (var bar=0; bar<length; bar++) {
cl.options[bar]= new Option(text[bar], value[bar], false, false);
}
}
function crafty_set_country(code) {
var cl = document.getElementById('select');
store(cl);
for (var i=0; i<cl.length; i++) {
if (cl.options[i].value == code) {
alert(cl.options[i].value + " found");
var value = cl.options[i].value;
var text = cl.options[i].text;
cl.options.length=0;
cl.options[0]=new Option(text, value, true, true);
/*
for (var j=0; j<cl.length; j++) {
alert("second loop " + cl.options[j].text);
if (cl.options[i].value != code) {
cl.options[j]
}
}
*/
} else {
alert(cl.options[i].value);
}
}
}
//]]>
</script>
</head>
<body>
<form>
<select id="select">
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>
<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">
</form>
</body>
</html>
Many thanks! Martin hey guys The first dropdown has some options as : abc(a) bcd(a) cde(b) def(b) efg(c) fgh(c) The second dropdown has : a b c On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance. Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) {
if (val > 1) {
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
}
Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe if i press any key from keyboard all related word to that alphabet will display below the dropdown.what is the code for it.thanks.
if I had two dropdown boxes... If I select the first one with the value of the month name .. eg.. January. How can I get the second dropdown box below to get that same value.?? Thanks S. Okay well here is my code. i want to mkae it so the functions add together to get a total price, i need some help Code: <html>
<head>
</head>
<script type="text/javascript">
function addit(){
if(document.getElementById("add").value=="0")
{
document.getElementById("amount").value="$0.00"
}
if(document.getElementById("add").value=="1")
{
document.getElementById("amount").value="$5.00"
}
if(document.getElementById("add").value=="2")
{
document.getElementById("amount").value="$10.00"
}
if(document.getElementById("add").value=="3")
{
document.getElementById("amount").value="$15.00"
}
}
function addit2(){
if(document.getElementById("add2").value=="4")
{
document.getElementById("amount").value="$30.00"
}
if(document.getElementById("add2").value=="5")
{
document.getElementById("amount").value="$40.00"
}
}
</script>
<body>
<table class="comparison pricing-email" border="0" cellspacing="1" cellpadding="0" width="30%">
<tbody>
<tr class="row1">
<td class="col1">Choose # of EMAIL accounts:
<select style="width: 60px; font-size: 17px;" name="add" id="add" onChange="addit()">
<option value="0"> </option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">6</option>
</select>
</td>
</tr>
<tr class="row2">
<td class="col2">Choose # of EMAIL accounts:
<select style="width: 60px; font-size: 17px;" name="add" id="add2" onChange="addit2()">
<option value="0"> </option>
<option value="4">44</option>
<option value="5">43</option>
<option value="3">342</option>
</select>
</td>
</tr>
<tr class="row1">
<td class="col1">Total Price: <input type="text" id="amount" value="" style="border:none; font-size:13pt;"></td>
</tr><tr>
<td>
<input type="submit" name="submit" value="Sign-Up">
</td>
</tr>
</tbody>
</table>
</form>
</body>
I am just learning but this is driving me nuts. Any help would be appreciated. I am trying to change the value of a quantity dropdown on this page: http://www.walmart.com/ip/Energizer-...Pack/872068#rr This will change it in the browser but the 3 value is not retained when I add the item to cart. Do I have to do something with onchange? What? Code: document.getElementsByClassName('stripitems')[0].childNodes[3].childNodes[3].value= 3
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;
}
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, I want to set a different value for each name and use url for values. Can somebody help me with this? eg: name A3 and value http://www.audi.com Code: <script type="text/javascript">
function dynamic1(parent,child){
var parent_array = new Array();
parent_array[''] = ['Please select a manufacturer'];
parent_array['Audi'] = ['A3','A4','A5','A6','A8','Q5','Q7','S3','S4','S5','S6','S8','RS6'];
parent_array['Dacia'] = ['Sandero','Logan'];
parent_array['FIAT'] = ['Bravo','Punto','Grande Punto'];
parent_array['Peugeot'] = ['207','308','407','607'];
parent_array['SEAT'] = ['Ibiza','New Ibiza','Leon'];
parent_array['Skoda'] = ['Fabia','Octavia Tour','Octavia 2','Superb'];
var thechild = document.getElementById(child);
thechild.options.length = 0;
var parent_value = parent.options[parent.selectedIndex].value;
if (!parent_array[parent_value]) parent_value = '';
thechild.options.length = parent_array[parent_value].length;
for(var i=0;i<parent_array[parent_value].length;i++){
thechild.options[i].text = parent_array[parent_value][i];
thechild.options[i].value = parent_array[parent_value][i];} }
</script>
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;
}
<!-- *** NOTE:*** I EDITED THIS SCRIPT WITH YOUR SUGGESTION *** --> <!-- *** THE SCRIPT IS STILL NOT WORKING *** --> ALSO: Would the second drop down need to be in <?php tags - or is it being populated with just "java" <!-- *** THE FIRST DROPDOWN GETS THE DATA FROM (db)qw_groups BUT DOES NOT "@GET" and pass the value to qw_groupitems *** --> <!-- *** first dropdown value=$group[id] *** --> <!-- *** Then second dropdown should populate with: $q = mysql_query("SELECT * FROM qw_groupitems WHERE GroupId ='$groups'"); *** --> <!-- *** the .php code listed below, the page is: csa_ajax.php *** --> <script type="text/javascript"> var request = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { request = false; } } @end @*/ if (!request && typeof XMLHttpRequest != 'undefined') { request = new XMLHttpRequest(); } function fillSelect(groups) { var url = "csa_ajax.php?groups=" + escape(groups); request.open("GET", url, true); request.onreadystatechange = go; request.send(null); } function go() { if (request.readyState == 4) { if (request.status == 200) { var response = request.responseText; var list=document.getElementById("groupitems"); var items=response.split('|'); for (var i=1; i<items.length; i++ ) { var x = document.createElement('option'); var y = items[i]; x.text = x.value = y; list.appendChild(x); } } } } function initCs() { var groups=document.getElementById('groups'); groups.onchange=function() { if(this.value!="") { var list=document.getElementById("groupitems"); while (list.childNodes[0]) { list.removeChild(list.childNodes[0]) } fillSelect(this.value); } } fillSelect(groups.value); } window.onload=initCs; </script> <form method="post" action="#"> <p><label>groups: <select id="groups" name="groups"> <?php require_once("includes/connect.php"); $mysql = mysql_query("SELECT * FROM qw_groups"); while($group=mysql_fetch_assoc($mysql)){ echo "<option value='$group[id]'>$group[GroupName]</option>"; } echo "</select>"; ?> </label> <label>GroupItems: <select id='groupitems' name='groupitems'> <option> == Select Group== </option> </select></label></p> </form> <!-- *** HERE IS THE PHP PAGE csa_ajax.php ***--> <?php require_once("includes/connect.php"); $groups=@$_GET['groups']; $q = mysql_query("SELECT * FROM qw_groupitems WHERE GroupId ='$groups'"); while ($r = mysql_fetch_assoc($q)){ echo "|".$r['GroupId']; } } ?> Ok i have a question. Is there any way to short down the drop down in "Alphabetical" order. I have a drop down select list which gets its values from mysql DB and i want it to sort it down in alphabetical order to easy selection for the user. Thanks in advance. I need help with this js... this is dropdown list...if user choose okc in first list(vrsta) in second (celik) user can choose C0270 and C0370...if chosen pc in first list in second user can choose C1330 and C1530 etc... There are two boxes...ans15 and ans14...and button which user clicks The idea is that user choose one option(okc,pc or cc) and choose option (C0270 or something else) onclick some values should be written in boxes example: chosen okc and C0270 in ans15 "hello" and in ans14 "goodbye" should be writen if chosen okc and C0370 in ans15 "hi" and in ans14 "bye" should be writen Code: <script type="text/javascript">
function setOptions(chosen) {
var izbor = document.form3.celik;
izbor.options.length = 0;
if (chosen == " ") {
izbor.options[izbor.options.length] = new Option('choose',' ');
}
if (chosen == "okc") {
izbor.options[izbor.options.length] = new Option('C0270','C0270');
izbor.options[izbor.options.length] = new Option('C0370','C0370');
}
if (chosen == "pc") {
izbor.options[izbor.options.length] = new Option('C1330','C1330');
izbor.options[izbor.options.length] = new Option('C1530','C1530');
}
if (chosen == "cc") {
izbor.options[izbor.options.length] = new Option('C1120','C1120');
izbor.options[izbor.options.length] = new Option('C1220','C1220');
}
}
</script>
</head>
<body>
<FORM name="form3">
<table width="439" height="139" border="1">
<tr>
<td width="200" height="33">
<div align="center">
<select name="vrsta" size="1"
onchange="setOptions(document.form3.vrsta.options
[document.form3.vrsta.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="okc">Opsti konstrukcijski celici</option>
<option value="pc">Poboljsani celici</option>
<option value="cc">Cementirani celici</option>
<option value="cl">Celicni liv</option>
<option value="sl">Sivi liv</option>
</select>
<br>
<br>
</div></td>
<td width="108" rowspan="3"> </td>
<td width="109" rowspan="3"> </td>
</tr>
<tr>
<td height="33"><div align="center">
<select name="celik" size="1">
<option value=" " selected="selected">Izabrati prvo vrstu</option>
</select>
</div></td>
</tr>
<tr>
<td height="23" rowspan="2"><div align="center">
<input type="button" value=" ok " onclick="beta(this.form)" />
</div>
</div>
<div align="center"></div> </td>
</tr>
<tr>
<td><input type="type" "number" value="" name="ans15" size="9" /></td>
<td><input type="type" "number" value="" name="ans14" size="9" /></td>
</tr>
</table>
</FORM>
</body>
</html>
This script works great in Google Chrome, mac, firefox >> BUT NOT WORKING IN IE <script type="text/javascript"> // Get value for second dropdown var request = false; if (!request && typeof XMLHttpRequest != 'undefined') { request = new XMLHttpRequest(); } function fillSelect(groups) { var url = "csa_ajax.php?groups=" + escape(groups); request.open("GET", url, true); request.onreadystatechange = go; request.send(null); } function go() { if (request.readyState == 4) { if (request.status == 200) { var response = request.responseText; var list=document.getElementById("groupitems"); var items=response.split('|'); for (i=1; i<items.length; i++) { var values=items[ i ].split(';'); var x=document.createElement('option'); x.setAttribute('value', values[0]); var y=document.createTextNode(values[1]); x.appendChild(y); list.appendChild(x); }}}} function initCs() { var groups=document.getElementById('groups'); groups.onchange=function() { if(this.value!="") { var list=document.getElementById("groupitems"); while (list.childNodes[0]) { list.removeChild(list.childNodes[0]) } fillSelect(this.value); } } fillSelect(groups.value); } window.onload=initCs; </script> <script type="text/javascript"> // pass selected value to textboxes function SplitText (info) { if (info == '') { return; } var tarr = info.split(","); document.getElementById('tBox1').value = tarr[0]; document.getElementById('tBox2').value = tarr[1]; document.getElementById('tBox3').value = tarr[2]; document.getElementById('tBox4').value = tarr[3]; } </script> <form method="post" action="#"> <p><label>groups: <select id="groups" name="groups"> <option>===Select Group ===</option> <?php require_once("includes/connect.php"); $mysql = mysql_query("SELECT * FROM qw_groups"); while($group=mysql_fetch_assoc($mysql)){ echo "<option value='$group[id]'>$group[GroupName]</option>"; } echo "</select>"; ?> </label> <label>GroupItems: <select id='groupitems' name='groupitems' onChange="SplitText(this.value)" onClick="SplitText(this.value)"> <option>===Select Group Item===</option> </select></label></p> <!-- Input selected data from listBox --> <p style="margin: 2px"> <input type="text" name="GroupId" id="tBox1" value=""><br> <input type="text" name="GroupName" id="tBox2" value=""><br> <input type="text" name="GroupItemId" id="tBox3" value=""><br> <input type="text" name="GroupItem" id="tBox4" value=""><br> </p> </form> <!-- here is the PHP. page csa_ajax.php --> <?php require_once("includes/connect.php"); $groups=@$_GET[groups]; $q = mysql_query("SELECT * FROM qw_groupitems WHERE GroupId = '$groups'"); { while ($r = mysql_fetch_assoc($q)){ $f1 = $r[GroupId]; $f2 = $r[GroupName]; $f3 = $r[id]; $f4 = $r[GroupItem]; echo "|$f1,$f2,$f3,$f4;$f1-$f4"; } } ?> I created the following javascript to display info when you choose from a dropdown <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>View Local Contact </td> <td><select name="ContentListBox" id="ContentListBox" onchange="javascript:ShowDiv();"> <option value="">Select State</option> <option value="AK">Alaska</option> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> </select></td> <td> </td> </tr> </table> <div id="AK" style="display:none;"></div> <div id="AL" style="display:none;"><div class="salesman">Marilyn O. Rogers </div> <div class="salesphone">Phone/Fax: 615-824-7804</div> <div class="salesemail">E-mail: <a href="mailto:morogers1@comcast.net">morogers1@comcast.net</a></div></div> <div id="AR" style="display:none;"><div class="salesman">Lonnie Muse</div> <div class="salesphone">Phone: 432-366-9213</div> <div class="salesemail">E-mail: <a href="mailto:muselon@sbcglobal.net">muselon@sbcglobal.net</a></div></div> When you choose the second one and then the third one the second choice does not disappear and it displays both. How can i refresh in between each one so that is displays only one? HI I am trying to add a 'orderby' or 'sortby' dropdown to a website to give various options of order picked from a MySQL recordset, the example below is what I am looking for that changes on re-fresh and remembers the selection chosen. Example Site - Waterstones Bookstore I think it would be a mixture of Javascript and PHP?? I have searched for hours looking for a solution Many thanks in advance |
|||||||