JavaScript - Dropdown Menu Error. Unable To Get Property 'options'

*Edit: I thread title should probably be "Initialize indices..."*

I've done quite a bit of research but couldn't find what I need to know so here I am.

I have some javascript generated by php that reads a configuration file to add options to a select menu. This is somewhat irrelevant but... these options are removed from the menu when clicked and data related to the option is shown on the page... and the option gets re-added when the data is closed. I need the option to go back in the correct place/order in the select menu... which wouldn't be a problem if I could initialize the indices of the menu's options. They need to be initialized because when the page is created, saved settings are read and certain options are not shown in the list because they may already be shown according to the settings... meaning... since browsers automatically increment the indices of the options by 1 (starting at 0), if data is closed that was initially open and therefore not in the select menu at first... the key/index associated with that data will likely not match the correct menu order.

Code:

<script type="text/javascript">
	function addOptionToSelect(selectID,index,offset,val,txt) {
		var elSel = document.getElementById(selectID);
		elSel.options[index+offset].value = val;
		elSel.options[index+offset].text = txt;
	}
	function addLoadEvent(func) {
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = func;
		} else {
			window.onload = function() {
				if (oldonload) {
					oldonload();
				}
				func();
			}
		}
	}
<?php
	foreach ($props as $k => $prop) {
		if (!in_array($prop, $_SESSION['crProps'])) {
?>
	addLoadEvent(addOptionToSelect('propertySelect',<?php echo $k; ?>,1,'?p=<?php echo $prop; ?>&k=<?php echo $k; ?>','<?php echo $prop; ?>'));
<?php
		}
	}
?>
</script>

For example, suppose I have the following potential data sets: a,b,c,d,e,f

In the config file that helps create the page, suppose it is something like: <Default>0:a|2:c|3:d</Default>
(FYI: I've designed it so that the data set names/options are separated by the pipe character ("|") and their corresponding index is the number to the left of the colon.)

Then the select menu that is initially generated would be something like:
(Every other data set name except for what is already open by default.)
<select id="bleh">
<option value="b">b
<option value="e">e
<option value="f">f
</select>

And by default, browsers would assign the indices like so:
(skipping getElementById and all that...)
select.options[0].value = b
select.options[1].value = e
select.options[2].value = f

Whereas, I need it to be initialized like this:
select.options[1].value = b
select.options[4].value = e
select.options[5].value = f

So that when the data sets initially open are closed (a, c, or d)... they get put in the correct position in the list.


I just thought of something... it's a little inefficient (OCD lol) but it should work and at worst would only cost a couple of milliseconds of processing time. A solution to this problem might be to load the menu with all options so that their indices are correct... and remove the defaults afterward. I'll try it.

My problem has to do with having more then two drop down menus and disabling selected items. In this example whenever anyone selects an option from either of the drop-down menus the opposing drop-down menu greys out the selection:

Code:

<script type="text/javascript"> 

function updateSelect(changedSelect, selectId) {
   var otherSelect = document.getElementById(selectId);
   for (var i = 0; i < otherSelect.options.length; ++i) {
       otherSelect.options[i].disabled = false;
   }
   if (changedSelect.selectedIndex == 0) {
      return;
   }
   otherSelect.options[changedSelect.selectedIndex].disabled = true;
}

</script>

Code:

<select id="subject1" name="indication_subject[]" onchange="updateSelect(this,'subject2');" >
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

<select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1');" >
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

The above code works perfect. My problem is extending this to even more drop-down menus. I'm not a javascript guy but my logic was thinking something like this:

Code:

ARRAY = "subject1, subject2, subject3"; 

<select id="subject1" name="indication_subject[]" onchange="updateSelect(this,'ARRAY');" >

...either an array to include multiple drop-down menus or what about something like this?

Code:

<select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1, subject2, subject3, subject4');" >

Obviously I know my code solutions don't work, however, I'm hoping they can provide someone with clarity with respect to what I'm trying to accomplish.

I sincerely would appreciate anyone's help on this.

I have a page:
http://www.girlscoutsmoheartland.org...progsearch.php
that works perfectly fine in every browser I try, except for actual IE7 (it even works fine in IE8 emulating IE7).
When you search for something on that page and have a display of results, each result has a link that changes a table row's display to visible, and hides the row when clicked again. It doesn't do that in IE7.
There are no errors or warning in Firefox's Error Console. But IE7 has an "Error on Page" notice (which does NOT appear in IE8 emulating IE7), that says:

Line: 59
Char: 11
Error: Could not get the display property. Invalid argument.

The script in question is this, with what would be line 59 indicated:
Code:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       var f = document.getElementById(id + "b");
	   
       if(e.style.display == 'table-row')
          e.style.display = 'none';
       else
          e.style.display = 'table-row'; <<-- This is line 59
		  
       if(f.style.display == 'table-row')
          f.style.display = 'none';
       else
          f.style.display = 'table-row';
    }
//-->
</script>

I really don't know what to do, or where to begin. Everything in my limited knowledge seems to be working just fine. Most of my site's visitors use IE8, but enough use actual IE7 that I really need to fix this.
Thanks for any help or advice!
Liam

greetings,

I'm unable to find solution for dreamweaver reporting syntax error with the following page:

http://www.redskyjewelry.com/test_product_detail.html

I am revamping my website so the css is not set up for this page but that's okay. I have put in the various javascripts based on the product so the page is similar to a template. The syntax error is for the second set of boxes, the bracelet length options, and specifically for line with:

form.amount.value = 6.5 inches;

from the following script--


<SCRIPT language=javascript>
function BraceletLength(form)
{

if (form.os0.value == "6.5 inches")
{
form.amount.value = 6.5 inches;
form.item_number.value = "6.5 inches";
}

if (form.os0.value == "7 inches")
{
form.amount.value = 7 inches;
form.item_number.value = "7 inches";
}

if (form.os0.value == "7.5 inches")
{
form.amount.value = 7.5 inches;
form.item_number.value = "7.5 inches";
}

if (form.os0.value == "8 inches")
{
form.amount.value = 8 inches;
form.item_number.value = "8 inches";
}


}
</SCRIPT>

I hope I have included enough information and I thank any input into this glitch I am having. I'll check back tomorrow, and thank you.
judith

I've been using this javascript (menu.js) for a drop down navigation menu for my site. Everything works well on it but in multiple browsers I get this error occurring on line 7 and 16 which is the d.className = "menuHover"; and d.className = "menuNormal";

Code:

function expand(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuHover";
  d.className = "menuHover";
}

function collapse(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuNormal";
  d.className = "menuNormal";
}

Im new to this whole thing. What needs to be done to solve this?

Appreciate the help.

Hey, this error ONLY occurs in IE.
"Unexpected call to method or property access."
I pinpointed it to this line:
o.appendChild(e);

The full function is:
Code:

function aO(d, t, src, p, id ){
  alert('aO has begun.');
  var o, e, i;
  if (!ie){ o = cE('object');o.data = src; } 		
  else { o = cE('embed');o.src = src; }

  o.id = id;
  if (!ie){ p.push( ['movie', src] ); }
  if ( typeof(id) === 'String' ){o.id = id;}
  o.type = t;
  o.style.width = '210px';
  for(i = 0; i < p.length; i++){
    e = cE('param');
    e.name = p[i][0];
    e.value = p[i][1];
    o.appendChild(e);
  }
  d.appendChild(o);
  alert('aO has finished.');
}

What it does is write a flash object to the page.



The FULL code is:
Code:

<!-- Chat Options -->
<noscript>
  It appears that you do not have JavaScript enabled. Please enable it, otherwise you cannot view the chatbox.
</noscript>
<div id="chatWrap">
  <ul id="ccon" style="display:none;"> 
    <li><a href="javascript:void(0);" onclick="switchChat();">Switch to <span id="cnext">Chat Title</span></a></li>
    <li><a href="javascript:void(0);" onclick="resizeChat();"><span id="csize">Expand</span> Chat</a></li>
    <li><a href="javascript:void(0);" onclick="toggleChat();"><span id="chatToggle">Close</span> Chat</a></li>
  </ul>
</div>
<div id="cbox" style="display:block;"></div>

<!-- Chat Script -->
<script type="text/javascript"><!-- // --><![CDATA[
var chats = [];
chats[0] = ['Main Chat', 'Uber-Anime-Chat', 1236404792847];
chats[1] = ['Roleplay Chat','Uber-Anime-Roleplay', 1236403501064];
var chat = {
  'opt': 'a=000000&b=100&c=999999&d=848484&e=000000&g=CCCCCC&h=333333&i=29&j=CCCCCC&k=666666&l=333333&m=000000&n=CCCCCC&s=1&t=0',
  'ref': 'www.uber-anime.com',
  'cur': 0,
  'delay': 1.5,
  'params': [['wmode','transparent'] , ['allowscriptaccess','always'] , ['allownetworking','internal']]
}

var chatState = 0;
var chatStates = [];
chatStates[0] = ['Expand', '300px'];
chatStates[1] = ['Shrink', '500px'];

function cE(e){return document.createElement(e);}
function cT(s){return document.createTextNode(s);}

var ie = false;

function aO(d, t, src, p, id ){
  var o, e, i, embed;
  if (!ie){ o = cE('object');o.data = src; } 		
  else { o = cE('embed');o.src = src; }

  o.id = id;
  if (!ie){ p.push( ['movie', src] ); }
  if ( typeof(id) === 'String' ){o.id = id;}
  o.type = t;
  o.style.width = '210px';
  for(i = 0; i < p.length; i++){
    e = cE('param');
    e.name = p[i][0];
    e.value = p[i][1];
    o.appendChild(e);
    if(ie) {
      embed = cE('embed');
      embed.setAttribute(p[i][0], p[i][1]);
    }
  }
  if(ie) o.appendChild(embed);
  d.appendChild(o);
}

function switchChat() {
  if (document.getElementById('cbox').hasChildNodes())
    while (document.getElementById('cbox').childNodes.length >= 1)
      document.getElementById('cbox').removeChild(document.getElementById('cbox').firstChild);

  var x = chat.cur;
  chat.cur = (x + 1) % chats.length;
  var c = chats[x];
  var src = 'http://st.chatango.com/flash/group.swf?ref=' + chat.ref + '&gn=' + c[1] + '.chatango.com&cid=' + c[2] + '&' + chat.opt;
  document.getElementById('cbox').innerHTML = '';
  aO( document.getElementById('cbox'), 'application/x-shockwave-flash', src, chat.params, 'chat' );
  document.getElementById('ccon').style.display = 'block'; // qfix
  document.getElementById('cnext').innerHTML = chats[chat.cur][0];

  document.getElementById('chat').style.height = chatStates[chatState][1];
  document.getElementById('csize').innerHTML = chatStates[chatState][0];
}

function resizeChat(){
  if(chatState == 0)
    chatState = 1;
  else
    chatState = 0;
  document.getElementById('chat').style.height = chatStates[chatState][1];
  document.getElementById('csize').innerHTML = chatStates[chatState][0];
}

function toggleChat() {
  if(document.getElementById('cbox').style.display == 'block') {
    display = 'none';
    chatStateTxt = 'Open';
  } else {
    display = 'block';
    chatStateTxt = 'Close';
  }  
  document.getElementById('chatToggle').innerHTML = chatStateTxt;
  document.getElementById('cbox').style.display = display;
}

function chatInit(){
  if (navigator.userAgent.indexOf('MSIE') !== -1){ie = true;}
  if ( chat.delay <= 0 ){
    switchChat();
  } else {
    i = cE('img');
    i.src = 'ajax-loader.gif';
    document.getElementById('cbox').appendChild(i);
    document.getElementById('cbox').appendChild(cT(' Loading Chat... If this message stays up, your browser may not be supported.'));
    var clk = setTimeout( function(){ switchChat(); }, chat.delay * 1000 );
  }
  delete chatInit;
}

chatInit();
//]]>
</script>

Can anyone tell me how to fix this? This is ridiculously irritating, and it's important that I can fix it ASAP.

Hi, I'm a newbie to the forum and jquery and have been trying to use it for a slick form wizard i found here. http://thecodemine.org/

It's almost complete but IE keeps giving me an error I've tried everything to fix with no luck.

I'm using jquery-1.4.2.min.js and the error it's giving me is

Unexpected call to method or property access. line 103 character 460

The code it highlights is:

Code:

{this.nodeType===1&&this.appendChild(a)})},

at the end of this line.

Complete line is:

Code:

wrapInner:function(a){if(c.isFunction(a))return this.each(function(b){c(this).wrapInner(a.call(this,b))});return this.each(function(){var b=c(this),d=b.contents();d.length?d.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){c(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){c.nodeName(this,"body")||c(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.appendChild(a)})},

Any help would be greatly appreciated. Thanks!


FYI:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Tue, 15 Nov 2011 16:45:53 UTC


Message: Unexpected call to method or property access.
Line: 103
Char: 460
Code: 0
URI: http://custsatdev/contact/jqueryform...y-1.4.2.min.js

I have a working drop down menu on my "Facebook" icon at the top of my website.

www.billboardfamily.com

The menu works fine, but I would like for it to open to the left of the icon... should look something like the attached pic.

I do not know enough about js to make this happen, any help would be great. Thanks in advance!

anylinkmenu.js
Code:

//** AnyLink JS Drop Down Menu v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
//** January 29th, 2009: Script Creation date

//**May 22nd, 09': v2.1
	//1) Automatically adds a "selectedanchor" CSS class to the currrently selected anchor link
	//2) For image anchor links, the custom HTML attributes "data-image" and "data-overimage" can be inserted to set the anchor's default and over images.

//**June 1st, 09': v2.2
	//1) Script now runs automatically after DOM has loaded. anylinkmenu.init) can now be called in the HEAD section

//**May 23rd, 10': v2.21: Fixes script not firing in IE when inside a frame page

if (typeof dd_domreadycheck=="undefined") //global variable to detect if DOM is ready
	var dd_domreadycheck=false

var anylinkmenu={

menusmap: {},
preloadimages: [],
effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:false, duration:500}}, //customize menu effects

dimensions: {},

getoffset:function(what, offsettype){
	return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
},

getoffsetof:function(el){
	el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight}
},

getdimensions:function(menu){
	this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight,
		docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20,
		docheight:(window.innerHeight ||this.standardbody.clientHeight)-15,
		docscrollx:window.pageXOffset || this.standardbody.scrollLeft,
		docscrolly:window.pageYOffset || this.standardbody.scrollTop
	}
	if (!this.dimensions.dropmenuw){
		this.dimensions.dropmenuw=menu.dropmenu.offsetWidth
		this.dimensions.dropmenuh=menu.dropmenu.offsetHeight
	}
},

isContained:function(m, e){
	var e=window.event || e
	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
	if (c==m)
		return true
	else
		return false
},

setopacity:function(el, value){
	el.style.opacity=value
	if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
		el.style.MozOpacity=value
		if (el.filters){
			el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
		}
	}
},

showmenu:function(menuid){
	var menu=anylinkmenu.menusmap[menuid]
	clearTimeout(menu.hidetimer)
	this.getoffsetof(menu.anchorobj)
	this.getdimensions(menu)
	var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos
	var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos
	if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
		posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
	}
	if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){  //drop up instead?
		posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge
	}
	if (this.effects.fade.enabled){
		this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
		if (this.effects.shadow.enabled)
			this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
	}
	menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})
	if (this.effects.shadow.enabled){
		//menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
		menu.shadow.setcss({left:posx+anylinkmenu.effects.shadow.depth[0]+'px', top:posy+anylinkmenu.effects.shadow.depth[1]+'px', visibility:'visible'})
	}
	if (this.effects.fade.enabled){
		clearInterval(menu.animatetimer)
		menu.curanimatedegree=0
		menu.starttime=new Date().getTime() //get time just before animation is run
		menu.animatetimer=setInterval(function(){anylinkmenu.revealmenu(menuid)}, 20)
	}
},

revealmenu:function(menuid){
	var menu=anylinkmenu.menusmap[menuid]
	var elapsed=new Date().getTime()-menu.starttime //get time animation has run
	if (elapsed<this.effects.fade.duration){
		this.setopacity(menu.dropmenu, menu.curanimatedegree)
		if (this.effects.shadow.enabled)
			this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)
	}
	else{
		clearInterval(menu.animatetimer)
		this.setopacity(menu.dropmenu, 1)
		menu.dropmenu.style.filter=""
	}
	menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2
},

setcss:function(param){
	for (prop in param){
		this.style[prop]=param[prop]
	}
},

setcssclass:function(el, targetclass, action){
	var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
	if (action=="check")
		return needle.test(el.className)
	else if (action=="remove")
		el.className=el.className.replace(needle, "")
	else if (action=="add" && !needle.test(el.className))
		el.className+=" "+targetclass
},

hidemenu:function(menuid){
	var menu=anylinkmenu.menusmap[menuid]
	clearInterval(menu.animatetimer)
	menu.dropmenu.setcss({visibility:'hidden', left:0, top:0})
	menu.shadow.setcss({visibility:'hidden', left:0, top:0})
},

getElementsByClass:function(targetclass){
	if (document.querySelectorAll)
		return document.querySelectorAll("."+targetclass)
	else{
		var classnameRE=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "i") //regular expression to screen for classname
		var pieces=[]
		var alltags=document.all? document.all : document.getElementsByTagName("*")
		for (var i=0; i<alltags.length; i++){
			if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
				pieces[pieces.length]=alltags[i]
		}
		return pieces
	}
},

addDiv:function(divid, divclass, inlinestyle){
	var el=document.createElement("div")
	if (divid)
		el.id=divid
	el.className=divclass
	if (inlinestyle!="" && typeof el.style.cssText=="string")
		el.style.cssText=inlinestyle
	else if (inlinestyle!="")
		el.setAttribute('style', inlinestyle)
	document.body.appendChild(el)
	return el
},

getmenuHTML:function(menuobj){
	var menucontent=[]
	var frag=""
	for (var i=0; i<menuobj.items.length; i++){
		frag+='<li><a href="' + menuobj.items[i][1] + '" rel="nofollow" target="' + menuobj.linktarget + '">' + menuobj.items[i][0] + '</a></li>\n'
		if (menuobj.items[i][2]=="efc" || i==menuobj.items.length-1){
			menucontent.push(frag)
			frag=""
		}
	}
	if (typeof menuobj.cols=="undefined")
		return '<ul>\n' + menucontent.join('') + '\n</ul>'
	else{
		frag=""
		for (var i=0; i<menucontent.length; i++){
			frag+='<div class="' + menuobj.cols.divclass + '" style="' + menuobj.cols.inlinestyle + '">\n<ul>\n' + menucontent[i] + '</ul>\n</div>\n'
		}
		return frag
	}
},

addEvent:function(targetarr, functionref, tasktype){
	if (targetarr.length>0){
		var rel="nofollow" target=targetarr.shift()
		if (target.addEventListener)
			target.addEventListener(tasktype, functionref, false)
		else if (target.attachEvent)
			target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)})
		this.addEvent(targetarr, functionref, tasktype)
	}
},

domready:function(functionref){ //based on code from the jQuery library
	if (dd_domreadycheck){
		functionref()
		return
	}
	// Mozilla, Opera and webkit nightlies currently support this event
	if (document.addEventListener) {
		// Use the handy event callback
		document.addEventListener("DOMContentLoaded", function(){
			document.removeEventListener("DOMContentLoaded", arguments.callee, false )
			functionref();
			dd_domreadycheck=true
		}, false )
	}
	else if (document.attachEvent){
		// If IE and not an iframe
		// continually check to see if the document is ready
		if ( document.documentElement.doScroll && window == window.top) (function(){
			if (dd_domreadycheck) return
			try{
				// If IE is used, use the trick by Diego Perini
				// http://javascript.nwbox.com/IEContentLoaded/
				document.documentElement.doScroll("left")
			}catch(error){
				setTimeout( arguments.callee, 0)
				return;
			}
			//and execute any waiting functions
			functionref();
			dd_domreadycheck=true
		})();
	}
	if (document.attachEvent && parent.length>0) //account for page being in IFRAME, in which above doesn't fire in IE
		this.addEvent([window], function(){functionref()}, "load");
},

addState:function(anchorobj, state){
	if (anchorobj.getAttribute('data-image')){
		var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0]
		if (imgobj){
			imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
		}
	}
	else
		anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
},

addState:function(anchorobj, state){
	if (anchorobj.getAttribute('data-image')){
		var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName('img')[0]
		if (imgobj){
			imgobj.src=(state=="add")? anchorobj.getAttribute('data-overimage') : anchorobj.getAttribute('data-image')
		}
	}
	else
		anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)
},

setupmenu:function(targetclass, anchorobj, pos){
	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
	var relattr=anchorobj.getAttribute("rel")
	dropmenuid=relattr.replace(/\[(\w+)\]/, '')
	var dropmenuvar=window[dropmenuid]
	var dropmenu=this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) //create and add main sub menu DIV
	dropmenu.innerHTML=this.getmenuHTML(dropmenuvar)
	var menu=this.menusmap[targetclass+pos]={
		id: targetclass+pos,
		anchorobj: anchorobj,	
		dropmenu: dropmenu,
		revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click")? "click" : "mouseover",
		orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
		shadow: this.addDiv(null, "anylinkshadow", null) //create and add corresponding shadow
	}
	menu.anchorobj._internalID=targetclass+pos
	menu.anchorobj._isanchor=true
	menu.dropmenu._internalID=targetclass+pos
	menu.shadow._internalID=targetclass+pos
	menu.dropmenu.setcss=this.setcss
	menu.shadow.setcss=this.setcss
	menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
	this.setopacity(menu.shadow, this.effects.shadow.opacity)
	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow
		var menu=anylinkmenu.menusmap[this._internalID]
		if (this._isanchor && menu.revealtype=="mouseover" && !anylinkmenu.isContained(this, e)){ //event for anchor
			anylinkmenu.showmenu(menu.id)
			anylinkmenu.addState(this, "add")
		}
		else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow
			clearTimeout(menu.hidetimer)
		}
	}, "mouseover")
	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
		if (!anylinkmenu.isContained(this, e)){
			var menu=anylinkmenu.menusmap[this._internalID]
			menu.hidetimer=setTimeout(function(){
				anylinkmenu.addState(menu.anchorobj, "remove")
				anylinkmenu.hidemenu(menu.id)
			}, anylinkmenu.effects.delayhide)
		}
	}, "mouseout")
	this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu
		var menu=anylinkmenu.menusmap[this._internalID]
		if ( this._isanchor && menu.revealtype=="click"){
			if (menu.dropmenu.style.visibility=="visible")
				anylinkmenu.hidemenu(menu.id)
			else{
				anylinkmenu.addState(this, "add")
				anylinkmenu.showmenu(menu.id)
			}
			if (e.preventDefault)
				e.preventDefault()
			return false
		}
		else
			menu.hidetimer=setTimeout(function(){anylinkmenu.hidemenu(menu.id)}, anylinkmenu.effects.delayhide)
	}, "click")
},

init:function(targetclass){
	this.domready(function(){anylinkmenu.trueinit(targetclass)})
},

trueinit:function(targetclass){
	var anchors=this.getElementsByClass(targetclass)
	var preloadimages=this.preloadimages
	for (var i=0; i<anchors.length; i++){
		if (anchors[i].getAttribute('data-image')){ //preload anchor image?
			preloadimages[preloadimages.length]=new Image()
			preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-image')
		}
		if (anchors[i].getAttribute('data-overimage')){ //preload anchor image?
			preloadimages[preloadimages.length]=new Image()
			preloadimages[preloadimages.length-1].src=anchors[i].getAttribute('data-overimage')
		}
		this.setupmenu(targetclass, anchors[i], i)
	}
}

}

menucontents.js
Code:

var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'', linktarget:''} //First menu variable. Make sure "anylinkmenu1" is a unique name!
anylinkmenu1.items=[
	["Fan Page", "http://www.facebook.com/BillboardFamily/"],
	["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"],
	["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"]
//no comma following last entry!
]



var anylinkmenu2={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#FDD271', linktarget:'_new'} //Second menu variable. Same precaution.
anylinkmenu2.items=[
	["Fan Page", "http://www.facebook.com/BillboardFamily/"],
	["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"],
	["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"]
//no comma following last entry!
]



var anylinkmenu3={divclass:'anylinkmenucols', inlinestyle:'', linktarget:'secwin'} //Third menu variable. Same precaution.
anylinkmenu3.cols={divclass:'column', inlinestyle:''} //menu.cols if defined creates columns of menu links segmented by keyword "efc"
anylinkmenu3.items=[
	["Fan Page", "http://www.facebook.com/BillboardFamily/"],
	["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"],
	["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"]
//no comma following last entry!
]

var anylinkmenu4={divclass:'anylinkmenu', inlinestyle:'width:150px; background:#DFFDF4', linktarget:'_new'} //Second menu variable. Same precaution.
anylinkmenu4.items=[
	["Fan Page", "http://www.facebook.com/BillboardFamily/"],
	["Carl", "http://www.facebook.com/CarlMartin.BillboardFamily/"],
	["Amy", "http://www.facebook.com/AmyMartin.BillboardFamily/"]
//no comma following last entry!
]

css for the menu
Code:

.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/

}

/* ######### Default class for drop down menus ######### */

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
font: normal 13px Arial;
line-height: 18px;
background: #000000;
width: 85px; /* default width for menu */
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
color: #00AFEF;
text-indent: 10px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}

.anylinkmenu a:hover{ /*hover background color*/
background: black;
color: #00AFEF;
text-decoration: underline;
}

/* ######### Alternate multi-column class for drop down menus ######### */


.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E9E9E9;
}

.anylinkmenucols li{
padding-bottom: 3px;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

hey guys, i wonder why my drpdown box cant be copied?
can some1 help me correct it.. thanks!

Code:

<html>
	<head>
		<title></title>
	</head>
<script type="text/javascript">
var desc = new Array();
desc['a1'] = 'issue';
desc['a2'] = 'tel';
desc['a3'] = 'account name';
desc['a4'] = 'caller';
desc['a5'] = 'OS';
desc['a6'] = 'modem';
desc['a7'] = 'router';

function CopyFields(){
    var copytext = '';
    for(var i = 0; i < arguments.length; i++){
        copytext += desc[arguments[i]] + ': ' + document.getElementById(arguments[i]).value + '\n';
    }
    var tempstore = document.getElementById(arguments[0]).value;
    document.getElementById(arguments[0]).value = copytext;
    document.getElementById(arguments[0]).focus();
    document.getElementById(arguments[0]).select();
    document.execCommand('Copy');
    document.getElementById(arguments[0]).value = tempstore;
}
--></script>	<body>
<form>
		<table border="0" cellpadding="0" cellspacing="0" style="width: 500px;">
			<tbody>
				<tr>
					<td>

						<table border="0" cellpadding="0" cellspacing="0" style="width: 500px;">
							<tbody>
								<tr>
									<td style="text-align: right;">
										issue:</td>
									<td>
										<textarea id="a1"></textarea></td>
								</tr>
								<tr>
									<td style="text-align: right;">
										tel:</td>
									<td>
										<input id="a2" /></td>
								</tr>
								<tr>
									<td style="text-align: right;">
										account name:</td>
									<td>
										<input id="a3" /></td>
								</tr>
								<tr>
									<td style="text-align: right;">
										caller:</td>
									<td>
										<input id="a4" /></td>
								</tr>
								<tr>
									<td style="text-align: right;">
										os:</td>
									<td>
										<select id="a5"><option selected="selected" value="">Windows 7</option><option value="">Windows Vista</option><option value="">Windows XP</option><option value="">X MAC 10.x</option><option value="">Other</option></select></td>
								</tr>
								<tr>
									<td style="text-align: right;">
										modem:</td>
									<td>
										<input id="a6" /></td>
								</tr>
								<tr>
									<td style="text-align: right;">
										router:</td>
									<td>
										<input id="a7" /></td>
								</tr>
							</tbody>
						</table>
						<input onclick="CopyFields('a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7');" type="button" value="Copy" /> <input type="reset" /></td>
				</tr>
			</tbody>
		</table>
                </form>
	</body>
</html>

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?

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;
}

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

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 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...)