JavaScript - Collapsible Lists In Javascript

Hello

This is brilliant and good to work with, there is one issue i have if someone can help please.

I have used example 4 bacuase it visually does exactly what i need, however there is one little problem i cant solve.

I copied the div and now have 2 collapsible divs next to each other, which nearly do exactly what i need.

I have lined up the 2 divs next to each other they both open, but the one on the left pushes the right one out to the right and i don't know how to do that.

here is the code

thanks

the animatedcollapse.js is too long to put but can be found here http://www.dynamicdrive.com/dynamici...edcollapse.htm

Code:

<script type="text/javascript">

    animatedcollapse.addDiv('jason', 'fade=1,height=80px')
    animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
    animatedcollapse.addDiv('michael', 'fade=1,height=120px')

    animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
    animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets')
    animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

    animatedcollapse.ontoggle = function ($, divobj, state) { //fires each time a DIV is expanded/contracted
        //$: Access to jQuery
        //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
        //state: "block" or "none", depending on state
    }

    animatedcollapse.init()
</script>

<div id="mobile_navigation">
<div id="sectionnav">
<a href="#" rel="toggle[dog]" data-openimage="section_active.gif" data-closedimage="section.gif"><img src="collapse.jpg" border="0" /></a> 
<div id="dog">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
</div>

<div id="searchnav">
<a href="#" rel="toggle[cat]" data-openimage="search_active.gif" data-closedimage="search.gif"><img src="collapse.jpg" border="0" /></a> 

<div id="cat">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
</div> 
</div>

Does anyone know of an alternative coding for this function that will do the trick in browsers such as firefox?

Code:

with (document)
{
	write("<STYLE TYPE='text/css'>");
	write(".hiddentext {display:none;}  .outline {cursor: hand; text-decoration:underline; font-family: Arial; font-size: 13px;}");
	write("</STYLE>");
}

function expandIt(whichEl)
{
whichEl.style.display = (whichEl.style.display == "block" ) ? "none" : "block";
}

<img src="images/click.gif" onclick="expandIt(el1); return false">

<div id="el1" class="hiddentext">

...content here...

</div>

Hello,

I created a page which has 12 collapsible panels, each can be opened and closed independently but i would like to have one button on the page that expands all the content, for printability. Below is the section of javascript that relates to the original state of the collapsible panel. When I change the this.contentIsOpen to be true all the panels expand. I would like a way of linking this function to a button.


Code:

Spry.Widget.CollapsiblePanel.prototype.init = function(element)
{
	this.element = this.getElement(element);
	this.focusElement = null;
	this.hoverClass = "CollapsiblePanelTabHover";
	this.openClass = "CollapsiblePanelOpen";
	this.closedClass = "CollapsiblePanelClosed";
	this.focusedClass = "CollapsiblePanelFocused";
	this.enableAnimation = true;
	this.enableKeyboardNavigation = true;
	this.animator = null;
	this.hasFocus = false;
	this.contentIsOpen = false;
};

Many thanks
Liam

Hello,

trying to cooperate with Spry atm, and its going fairly ok..
Its just one thing, i would like it when you open one spry panel,
the rest of them would close. Anyone know how to do that?

Thanks

Could someone be kind enough to provide me with code to make a collapsible menu? What I'm looking for is a vertical menu, that will open up the sub-categories upon a mouseover. Clicking on the menu item will bring them to the specific page. Oh, and this might not matter, but I'd prefer if I was able to style the menu to fit with my site theme. Thanks.

Hi. I haven't used much Javascript before and I have a question about the following code. I've taken it from this tut and changed it a bit so it applies an expand/collapse functionality to a floating sidebar on the side of a website I'm working on.

When I remove the background on the toggle function, it refuses to come back. I have a feeling it's a simple solution, I just don't know what syntax to fill into the second part of the conditional to restore the background image. I've tried display, show, an actual path to the image...

Code:

<script language="JavaScript" type="text/javascript">
    function toggle() {

      	
        var bar = document.getElementById('floater');
        var barText = document.getElementById('f_news');

       
        if (bar.style.width == '210px') {

            
            bar.style.width = '40px';
	    bar.style.backgroundImage = 'none';

            
            barText.style.display = 'none';

           
       
        } else {


            
            bar.style.width = '210px';
	    bar.style.backgroundImage = 'HELP!';

            
            barText.style.display = 'block';

        }
    }
	</script>

Thanks in advance.

I just wrote an essay to discover it had logged me out and I lost everything.

Grrrrrrr.

Here goes again, simplified this time.

I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over.

The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic.

My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it?

I've tried all morning with no success so far!

Thanks,

Nick,

I'm copy pasting this post this time round, I don't trust this website now

hello

i have 2 lists and function to clean them

Code:

function del_sel(option)
{
	if (option == "1")
	{
		document.forms[0].list1.innerHTML = '';
	}

	if (option == "2")
	{
		document.forms[0].list2.innerHTML = '';
	}
}

how to make this function shorter & without options ?

smth like that

Code:

function del_sel(option)
{
document.forms[0].option.innerHTML = ''; 
}

the problem is that this code returns mistake

Code:

function del_sel(option)
{
	document.forms[0].option.innerHTML = '';
}

...

<input type='button' value='Delete onclick='del_sel(form.list1);>

I need help please. I'm trying to validate when a user selects an item from the equipment select list they must select a reason code as to why they are ordering the item. This must work across all rows. Also the field to the left of the equipment select list should allow the user to key in the item # of the part and the select list automatically gets selected with the part. How the heck do I do this. I tried the functions I have included but they suck! Please help me Tracy
Code:

<script>


function validateReason(){
var tr, i=1;
while(tr=document.getElementById('Child'+(i++))){
var txtV=tr.getElementsByTagName('input')[0].value
var selS=tr.getElementsByTagName('select')[0].selectedIndex;
if(txtV.length>0&&selS==0){alert('If you enter a quantity you must select a reason!');return false}
}
}


function change_uids(uid){
var uids = document.getElementById("uids");
for (var i=0; i<uids.options.length; i++){
if (uids.options[i].value == uid.value){
uids.options[i].selected = true;
break;
}
}
}


</script>
<form method="POST" onsubmit="return validateReason(this) ;" action="" name="theForm" >
<table>
<tr id='Child1'>
<td><input type = 'text' MAXLENGTH='3' 
style = 'width:40px'; class='textfield' name='quantity[]' ></td> 
<td><input type = 'text' MAXLENGTH='6' 
style = 'width:60px'; class='textfield' onkeyup='change_uids(this)' id='uid' name='wic[]' ></td>
<td>
<select size='1' STYLE='width: 270px' class='smallDrop' id='uids' name='itemid[]'>
<option value='' > - Choose Equipment - </option>
<option value='112233' > ZENTIH - </option>
<option value='332244' > EMERSON - </option>
<option value='0949' >LG</option>
<option value='99623' >SONY</option>
</select>
</td> <td>
<select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
</td></tr>
<tr id='Child2'>
<td><input type = 'text' MAXLENGTH='3' 
style = 'width:40px'; class='textfield' name='quantity[]' ></td> 
<td><input type = 'text' MAXLENGTH='6' 
style = 'width:60px'; class='textfield' onkeyup='change_uids(this)' id='uid' name='num[]' ></td>
<td> 
<select size='1' STYLE='width: 270px' class='smallDrop' id='uids' name='itemid[]'>
<option value='' > - Choose Equipment - </option>
<option value='112233' > ZENTIH - </option>
<option value='332244' > EMERSON - </option>
<option value='0949' >LG</option>
<option value='99623' >SONY</option>
</select>
</td> <td>
<select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
</td></tr>
<tr id='Child3'>
<td><input type = 'text' MAXLENGTH='3' 
style = 'width:40px'; class='textfield' name='quantity[]' ></td> 
<td><input type = 'text' MAXLENGTH='6' 
style = 'width:60px'; class='textfield' onkeyup='change_uids(this)' id='uid' name='wic[]' ></td>
<td>
<select size='1' STYLE='width: 270px' class='smallDrop' id='uids' name='itemid[]'>
<option value='' > - Choose Equipment - </option>
<option value='112233' > ZENTIH - </option>
<option value='332244' > EMERSON - </option>
<option value='0949' >LG</option>
<option value='99623' >SONY</option>
</select>
</td>
<td>
<select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
</td></tr>
</table>
<input type="submit" value="SUBMIT" name="submit">
</form>

Thanks for all the help Old Pedant. You're nice enough to lend people a hand when you don't have to, and this makes the second or third time you've helped me solve a problem I've had with my website.
Thanks so much.

So I'm making a page where when someone clicks on the second drop list, then it carrys out a function first, and it calculates it based on what the first droplist is picked.
Here's the code I have:

Code:

<html>
<head>
<title></title>
<script type="text/javascript">
function first()
{
	var gold = 4;
	var green = 6;
	var red = 30;
	var blue = 0;
	var total = 100;
	
if (calculate.color.GetElementById('gold').select)
{
	var depends = gold/total
};
if (calculate.color.GetElementById('green').select)
{
	var depends = green/total
};
if (calculate.color.GetElementById('red').select)
{
	var depends = red/total
};
if (calculate.color.GetElementById('blue').select)
{
	var depends = blue/total
};

if (calculate.choice1.GetElementById('first').select)
{
	calculate.results.value = 1 * calculate.howmany.value * depends;
}
}
</script>
</head>
<body>
<form name="calculate">
<table>
<td>
I need: <input type="text" name="howmany" />
<br />
My choice is: 
</td>
<td>
<select name="color">
<option selected id="gold">Gold</option>
<option id="green">Green</option>
<option id="red">Red</option>
<option id="blue">Blue Charms</option>
</select>
<br />
<select name="choice1">
<option id="first" onClick="first()">
First
</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center" valign="top">
You will need <input type="text" name="results" />
</td>
</tr>
</table>
</form>
</body>
</html>

Any help is well appreciated.
Thanks.

Hello, I'm pretty new to JS but I can script a few things. I'm using a pre-written script, but trying to add a functionality that uses my + and - images to indicate whats whether the list is expanded or not.


It works on the first click. The symbol starts as a plus, you click it and it expands and goes to minus. After that the list maintains functionality (for the most part) but doesn't continue changing symbols back and forth. I've pored over the script for HOURS but I can't find the solution.

Working Link Example

My written JS:
Code:

// JavaScript Document

var expandables = new Array();
expandables[0] = "expand_northeast";
expandables[1] = "expand_southeast";
expandables[2] = "expand_midwest";
expandables[3] = "expand_southwest";
expandables[4] = "expand_west";

var clickCounter = 0;

function expand(current) {

	//add height to the containing div
	if(clickCounter<=1) {
		var newHeight = document.getElementById('region_us').offsetHeight + 187;
		document.getElementById('region_us').style.height = newHeight.toString() + 'px'; 
		clickCounter+=1;
		}
	
		
	//get the section name
	var section = current.split('_')[1];
	
	for ( var i=0; i<expandables.length; i++ ){
		if(document.getElementById(expandables[i]).id.indexOf('collapse') != -1){ //if it has collapse in id string
		  var tempSection = expandables[i].split('_')[1]; 							//parse just the region
		  
		  document.getElementById(expandables[i]).id='expand_' + tempSection; 		//change the id to expand / plus symbol
		  expandables[i] = document.getElementById('expand_' + tempSection).id;		//make the change in the array as well
		  }
	}
	
	
	
	document.getElementById(current).href='javascript:animatedcollapse.show(\'stats_'+ section + '\');';
	document.getElementById(current).onclick=function() {collapse('\'collapse_'+section +'\'');};
	document.getElementById(current).id="collapse_" + section + "";
	
	for (x in expandables)
	{
		if(expandables[x] == current){
			expandables[x] = document.getElementById('collapse_' + section).id;
		}
		
	}
//alert(expandables);


}



function collapse(current) {
var section = current.split('_')[1];
//alert(current);
current = ("expand_"+section);


	
document.getElementById(current).href='javascript:animatedcollapse.hide(\'stats_'+ section + ');';
document.getElementById(current).onclick=function() {expand('"expand_'+section+'"');};
document.getElementById(current).id='expand_' + section;

for (x in expandables)
{
	if(expandables[x] == current){
		expandables[x] = document.getElementById('expand_' + section).id;
	}
	
}

}

Relevant HTML:

Code:

<a id="expand_northeast" href="javascript://" onclick="expand('expand_northeast');"></a>
                            <span class="state_title">Northeast</span>
                            <span class="state_title_num">2,749</span>
                            <span class="state_title_perc">62.5%</span>
                            
                                <div id="stats_northeast" style="display:none;">
                                
                                <span class="state colored">Maine</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                                <span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                                <span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                                <span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                                <span class="state colored">Maryland</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">Pennsylvania</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                            
                            
                                </div>

Thanks guys!

Hi all,
I have a JavaScript map of different regions (which are basically just seperate images merged together) and I want them to load different drop down list boxes according to which images/area of the map is clicked. There doesn't seem to be much on the net about loading specific elements on the page onClick like this(perhaps I'm barking up the wrong tree)... Can anyone provide an example of drop down boxes only loading on a page after an image is clicked? Or perhaps some way to populate an already loaded drop down list with an array, where different arrays are loaded into this drop down list depending on the image clicked?
Cheers in advance.

Tom

Hi, I have a large e-commerce site that runs on a database. There are many products on the site which have 'variables' attached to them, e.g. colour, width, height etc.
I have a script in place to sort the products depending on these variables.
Apologies for the length of the code.

Code:

(function(i) {var u =navigator.userAgent;var e=/*@cc_on!@*/false; var st =
setTimeout;if(/webkit/i.test(u)){st(function(){var dr=document.readyState;
if(dr=="loaded"||dr=="complete"){i()}else{st(arguments.callee,10);}},10);}
else if((/mozilla/i.test(u)&&!/(compati)/.test(u)) || (/opera/i.test(u))){
document.addEventListener("DOMContentLoaded",i,false); } else if(e){     (
function(){var t=document.createElement('doc:rdy');try{t.doScroll('left');
i();t=null;}catch(e){st(arguments.callee,0);}})();}})(sortinit);


var prodlines = new Array();		// for Products
var spanids = new Array();
var lastsorttype = 'default';
var bReadyToSort = false;

var searchlines = new Array();		// for Search Results
var searchspanids = new Array();
var searchlastsorttype = 'default';
var bSearchReadyToSort = false;

var sectlines = new Array();		// for Sections
var sectspanids = new Array();
var sectlastsorttype = 'default';
var bSectReadyToSort = false;

var bSortInitalised = false;

//  Search Results Related
function searchreseq(seqtype){			// resequence search results
	if ( ! (bSearchReadyToSort || bPageIsLoaded) )
		{
		alert('Please wait until the page has fully loaded. (SRC)');
		return false;
		}
	searchlines.length = 0;
	searchspanids.length = 0;
	var spans = document.getElementsByTagName('span');
	for ( var i=0; i<spans.length; i++ )
		{
		if ( spans[i].id.indexOf('searchsortline_') == 0 )
			{
			searchspanids.push(spans[i]);
			searchlines.push({
				id: spans[i].id, 
				price: spans[i].getAttribute('price').replace(/[^\d\.]/g,''), 
				seq: spans[i].getAttribute('seq'), 
				pname: spans[i].getAttribute('pname'),
				phtml: spans[i].innerHTML
				});
			}
		}
	
		
	if ( seqtype == 'lowhigh' ) searchlines.sort(function(a,b){return a.price - b.price});
	if ( seqtype == 'highlow' ) searchlines.sort(function(a,b){return b.price - a.price});
	if ( seqtype == 'default' ) searchlines.sort(function(a,b){return a.seq - b.seq});
	if ( seqtype == 'alpha' )   searchlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;});
	if ( seqtype == 'reverse' ) searchlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;});
	searchlastsorttype = seqtype;
	setCookie('SEARCHSORTTYPE', searchlastsorttype);
	searchshowsorttype();
	for ( var i=0; i<searchlines.length; i++ )
		{
		searchspanids[i].innerHTML = searchlines[i].phtml;
		searchspanids[i].id = searchlines[i].id; 
		searchspanids[i].setAttribute('price', searchlines[i].price); 
		searchspanids[i].setAttribute('seq', searchlines[i].seq); 
		searchspanids[i].setAttribute('pname', searchlines[i].pname); 
		}
	return false;
}

function searchshowsorttype(){		// highlight the type of sort that's currently in use
	if ( document.getElementById('searchsortdropdown') )	// see if we're using drop-downs
		{
		var dropdowns = document.getElementsByTagName('select');	// all drop-downs		
		for ( var i=0; i<dropdowns.length; i++ )
			{
			if ( dropdowns[i].name == 'searchsortdropdown' )		// relevant one
				{
				var sdd = dropdowns[i];
				for ( var j=0; j<sdd.options.length; j++ )
					{
					if ( sdd.options[j].value == searchlastsorttype ) sdd.selectedIndex = j;
					}
				}
			}	
		}	
	else								
		{
		var buttonlinks = document.getElementsByTagName('input');	// looking for buttons
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'searchsortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == searchlastsorttype ) ? 'searchsortactive' : 'searchsortinactive';
				}	
			}
		var buttonlinks = document.getElementsByTagName('a');		// looking for A tags
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'searchsortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == searchlastsorttype ) ? 'searchsortactive' : 'searchsortinactive';
				}	
			}
		}
}


// Section Related
function sectionseq(seqtype){			// resequence Sections
	if ( ! (bSectReadyToSort || bPageIsLoaded) )
		{
		alert('Please wait until the page has fully loaded. (SECT)');
		return false;
		}
	sectlines.length = 0; 
	sectspanids.length = 0;					
	var spans = document.getElementsByTagName('span');
	for ( var i=0; i<spans.length; i++ )
		{
		if ( spans[i].id.indexOf('sectionline_') == 0 )
			{
			sectspanids.push(spans[i]);
			sectlines.push({	
				id: spans[i].id, 
				price: spans[i].getAttribute('price'), 
				seq: spans[i].getAttribute('seq'), 
				pname: spans[i].getAttribute('pname'),
				phtml: spans[i].innerHTML
				});
			}
		}
	
	if ( seqtype == 'lowhigh' ) sectlines.sort(function(a,b){return a.price - b.price});
	if ( seqtype == 'highlow' ) sectlines.sort(function(a,b){return b.price - a.price});
	if ( seqtype == 'default' ) sectlines.sort(function(a,b){return a.seq - b.seq});
	if ( seqtype == 'alpha' )   sectlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;});
	if ( seqtype == 'reverse' ) sectlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;});
	sectlastsorttype = seqtype;
	setCookie('SECTSORTTYPE', sectlastsorttype);
	sectshowsorttype();
	for ( var i=0; i<sectlines.length; i++ )
		{
		sectspanids[i].innerHTML = sectlines[i].phtml;
		sectspanids[i].id = sectlines[i].id; 
		sectspanids[i].setAttribute('price', sectlines[i].price); 
		sectspanids[i].setAttribute('seq', sectlines[i].seq); 
		sectspanids[i].setAttribute('pname', sectlines[i].pname); 
		}
	return false;
}

function sectshowsorttype(){		// highlight the type of sort that's currently in use
	if ( document.getElementById('sectionsortdropdown') )	// see if we're using drop-downs
		{
		var dropdowns = document.getElementsByTagName('select');	// all drop-downs		
		for ( var i=0; i<dropdowns.length; i++ )
			{
			if ( dropdowns[i].name == 'sectionsortdropdown' )		// relevant one
				{
				var sdd = dropdowns[i];
				for ( var j=0; j<sdd.options.length; j++ )
					{
					if ( sdd.options[j].value == sectlastsorttype ) sdd.selectedIndex = j;
					}
				}
			}	
		}	
	else								
		{
		var buttonlinks = document.getElementsByTagName('input');	// looking for buttons
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'sectsortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == sectlastsorttype ) ? 'sectsortactive' : 'sectsortinactive';
				}	
			}
		var buttonlinks = document.getElementsByTagName('a');		// looking for A tags
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'sectsortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == sectlastsorttype ) ? 'sectsortactive' : 'sectsortinactive';
				}	
			}
		}
}

// Product Related
function reseq(seqtype, gotoanchor){			// resequence products
	if ( ! (bReadyToSort || bPageIsLoaded) )
		{
		alert('Please wait until the page has fully loaded. (PROD)');
		return false;
		}
	prodlines.length = 0;
	spanids.length = 0;
	var spans = document.getElementsByTagName('span');
	for ( var i=0; i<spans.length; i++ )
		{
		if ( spans[i].id.indexOf('sortline_') == 0 )
			{
			spanids.push(spans[i]);
			prodlines.push({
				id: spans[i].id, 
				price: spans[i].getAttribute('price'), 
				seq: spans[i].getAttribute('seq'), 
				pname: spans[i].getAttribute('pname'),
				brand: spans[i].getAttribute('brand'),
				capacity: spans[i].getAttribute('capacity'),
				height: spans[i].getAttribute('height'),
				width: spans[i].getAttribute('width'),
				depth: spans[i].getAttribute('depth'),
				colour: spans[i].getAttribute('colour'),
				energyrating: spans[i].getAttribute('energyrating'),
				spinspeed: spans[i].getAttribute('spinspeed'),
				phtml: spans[i].innerHTML
				});
			}
		}
		
	if ( seqtype == 'lowhigh' ) prodlines.sort(function(a,b){return a.price - b.price});
	if ( seqtype == 'highlow' ) prodlines.sort(function(a,b){return b.price - a.price});
	if ( seqtype == 'default' ) prodlines.sort(function(a,b){return a.seq - b.seq});
	if ( seqtype == 'alpha' )   prodlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;});
	if ( seqtype == 'reverse' ) prodlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;});
	if ( seqtype == 'brand' )  prodlines.sort(function(a,b){return (a.brand <= b.brand) ? -1 : 1;});
	if ( seqtype == 'capacity' )  prodlines.sort(function(a,b){return (b.capacity <= a.capacity) ? -1 : 1;});
	if ( seqtype == 'height' )  prodlines.sort(function(a,b){return (a.height <= b.height) ? -1 : 1;});
	if ( seqtype == 'width' )  prodlines.sort(function(a,b){return (a.width <= b.width) ? -1 : 1;});
	if ( seqtype == 'depth' )  prodlines.sort(function(a,b){return (a.depth <= b.depth) ? -1 : 1;});
	if ( seqtype == 'colour' )  prodlines.sort(function(a,b){return (a.colour <= b.colour) ? -1 : 1;});
	if ( seqtype == 'energyrating' )  prodlines.sort(function(a,b){return (a.energyrating <= b.energyrating) ? -1 : 1;});
	if ( seqtype == 'spinspeed' )  prodlines.sort(function(a,b){return (b.spinspeed <= a.spinspeed) ? -1 : 1;});
	lastsorttype = seqtype;
	setCookie('SORTTYPE', lastsorttype);
	showsorttype();
	for ( var i=0; i<prodlines.length; i++ )
		{
		spanids[i].innerHTML = prodlines[i].phtml;
		spanids[i].id = prodlines[i].id; 
		spanids[i].setAttribute('price', prodlines[i].price); 
		spanids[i].setAttribute('seq', prodlines[i].seq); 
		spanids[i].setAttribute('pname', prodlines[i].pname);
		spanids[i].setAttribute('brand', prodlines[i].brand);
		spanids[i].setAttribute('capacity', prodlines[i].capacity);
		spanids[i].setAttribute('height', prodlines[i].height);
		spanids[i].setAttribute('width', prodlines[i].width);
		spanids[i].setAttribute('depth', prodlines[i].depth);
		spanids[i].setAttribute('colour', prodlines[i].colour);
		spanids[i].setAttribute('energyrating', prodlines[i].energyrating);
		spanids[i].setAttribute('spinspeed', prodlines[i].spinspeed); 
		}
	if ( gotoanchor && location.hash ) scrolltoanchor(location.hash);	// Product Page just loaded and Anchor so we need to reposition

	//
	//  Some Drillpine add-ons need reactivated after the DOM has been fiddled with
	//
	
	// Tabber (needs V210 onwards) - reset Tabber
	if ( window.resetallpanes ) resetallpanes();
	
	// Tabber V3
	if ( window.jqinittabber ) jqinittabber();
	

	// Lightbox / Slimbox
	if ( window.Slimbox && window.Slimbox.scanPage ) Slimbox.scanPage();
	
	// Lightbox / Slimbox2
	if ( (typeof(jQuery) == 'function') && (typeof(jQuery.slimbox) == 'function') )
		{
		$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
		return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
		});
		}
		
	return false;
}
	
function showsorttype(){		// highlight the type of sort that's currently in use
	if ( document.getElementById('sortdropdown') )	// see if we're using drop-downs
		{
		var dropdowns = document.getElementsByTagName('select');	// all drop-downs		
		for ( var i=0; i<dropdowns.length; i++ )
			{
			if ( dropdowns[i].name == 'sortdropdown' )		// relevant one
				{
				var sdd = dropdowns[i];
				for ( var j=0; j<sdd.options.length; j++ )
					{
					if ( sdd.options[j].value == lastsorttype ) sdd.selectedIndex = j;
					}
				}
			}	
		}	
	else								
		{
		var buttonlinks = document.getElementsByTagName('input');	// looking for buttons
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'sortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == lastsorttype ) ? 'sortactive' : 'sortinactive';
				}	
			}
		var buttonlinks = document.getElementsByTagName('a');		// looking for A tags
		for ( var i=0; i<buttonlinks.length; i++ )
			{
			if ( buttonlinks[i].name == 'sortlink' )
				{
				buttonlinks[i].className = ( buttonlinks[i].id == lastsorttype ) ? 'sortactive' : 'sortinactive';
				}	
			}
		}
}

// General code

function hidetagswithid(tag, id){	// hide all tags with ID
	var alltags = document.getElementsByTagName(tag);  		// all such tags
	for ( var i=0; i<alltags.length; i++ )
		{
		if ( alltags[i].id == id )				// with ID
			{
			alltags[i].style.display = 'none'; 			// hide entire control
			alltags[i].style.visibility = 'hidden';			// hide entire control
			}
		}
}

function scrolltoanchor(anc){	// reposition to display anchor
	var ancs = document.getElementsByTagName('a');
	anc = anc.replace(/.*\#/,'');		// Search highlight passes duplicate anchors - lose one
	if ( ancs[anc] ) ancs[anc].scrollIntoView(true);
}

function sortinit(){				// called when DOM is loaded
	if (arguments.callee.done) return;
	arguments.callee.done = true;
	bSortInitialised = true;
	// Products
	if ( document.getElementById('sortwidget') ) 
		{
		bReadyToSort = true;
		lastsorttype = getCookie('SORTTYPE');
		if ( lastsorttype == null ) lastsorttype = 'default';
		setCookie('SORTTYPE', lastsorttype);
		showsorttype();		
		if ( lastsorttype != 'default' ) 
			{
			reseq(lastsorttype, true);
			}
		}	

	// Search Results
	if ( document.getElementById('searchsortwidget') ) 
		{
		bSearchReadyToSort = true;
		searchlastsorttype = getCookie('SEARCHSORTTYPE');
		if ( searchlastsorttype == null ) searchlastsorttype = 'default';
		setCookie('SEARCHSORTTYPE', searchlastsorttype);
		searchshowsorttype();		
		if ( searchlastsorttype != 'default' ) 
			{
			searchreseq(searchlastsorttype);
			}
		}	
		
	// Sections
	if ( document.getElementById('sectsortwidget') ) 
		{
		// check for no prices available and hide buttons if so	
		var spans = document.getElementsByTagName('span');
		var rtot = 0;	
		for ( var i=0; i<spans.length; i++ )
			{
			if ( spans[i].id.indexOf('sectionline_') == 0 )
				{
				var price = spans[i].getAttribute('price');
				rtot += (price != null) ? price - 0 : 0;
				}
			}
		if ( rtot == 0 )
			{
			if ( SectionSortLinksFinalOnly )					// do we only show links on final Sections
				{
				hidetagswithid('span', 'sectsortwidget');			// hide all sort widgets
				}
			else
				{	
				if ( document.getElementById('sectpricelinks') )		// button or text links
					{
					hidetagswithid('span', 'sectpricelinks');
					}
				if ( document.getElementById('sectionsortdropdown') )		// drop-down list
					{
					var dropdowns = document.getElementsByTagName('select');	// all drop-downs		
					for ( var i=0; i<dropdowns.length; i++ )
						{
						if ( dropdowns[i].id == 'sectionsortdropdown' )		// relevant one
							{
							var opts = dropdowns[i].options;
							for ( var j=opts.length; j>0; j-- )		// scan backwards as we're deleting items
								{
								if ( (opts[j - 1].value == "lowhigh") || (opts[j - 1].value == "highlow") )
									{
									opts[j - 1] = null;
									}
								}
							}
						}			
					}
				}	
			}			

		bSectReadyToSort = true;
		sectlastsorttype = getCookie('SECTSORTTYPE');
		if ( sectlastsorttype == null ) sectlastsorttype = 'default';
		setCookie('SECTSORTTYPE', sectlastsorttype);
		sectshowsorttype();
		// only resequence if button showing and we've a non default sequence		
		if ( (document.getElementById('sectsortwidget').style.display != 'none') && (sectlastsorttype != 'default') ) 
			{
			sectionseq(sectlastsorttype);
			}
			
		}
}

function onloadsortinit(){			// optionally called on onload
	if ( ! bSortInitalised ) sortinit();				// only init if it's not already run
}

// in case we cannot activate on DOM loaded
if (window.attachEvent) 						// IE 
	{ 
	window.attachEvent("onload", onloadsortinit); 
	} 
else 									// DOM
	{  
	window.addEventListener("load", onloadsortinit, false); 
	}

I didn't write this script and I'm not a JavaScript expert, so i don't know how to edit it properly. I want to change it's function from sorting to filtering, i.e. something along the lines of a slice function. Any advice would be much appreciated.

hello everybody

I have a list like this

Code:

<ul id="main_menu">
        <li><a href="#">Comments</a></li>
        <li><a href="#"> Advertising </a>
            <ul>
                <li><a href="#">edit/delete ads</a></li>
                <li><a href="#">Add Ads</a></li>
            </ul>
        </li>
        <li><a href="#">Groups</a></li>
        <li><a href="#">Members</a>
            <ul>
                <li><a href="#">Edit /  Delete Member</a></li>
                <li><a href="#">Add Member</a></li>
            </ul>
        </li>
        <li><a href="#">Photo</a>
            <ul>
                <li><a href="#">edit /  Delete Photo</a></li>
                <li><a href="#">Add a  picture</a></li>
            </ul>
        </li>
        <li><a href="#">Sections</a>
            <ul>
                <li><a href="#">Edit / Delete section</a></li>
                <li><a href="#">Add Section</a></li>
            </ul>
        </li>
        <li><a href="#">General Settings</a></li>
        <li><a href="#">Home</a></li>
    </ul>

This list contains lists of 8, including 4 lists contain children (Advertising , Members,Photo,Sections)

And I've written this code but did not work very well

Code:

function MainMenu(item){
    var MenuItems = document.getElementById('main_menu');
    for (var i = 0; i < MenuItems.children.length; i++) {
        MenuItems.children[i].children[1].style.display = "none";
    }
    item.children[1].style.display = "block";
}

What i needed is when i press a list containing the submenus Close all open lists Then open this menu

Hi,

I have two dropdown lists, and I want to have each option from the first dropdown list to give the specific options on the second dropdown list. For instance,

<select name="module">
<option value="pic1.jpg>TM1</option>
<option value="pic2.jpg>TM2</option>
<option value="pic3.jpg>TM3</option>
</select>

<select name="location">
<option value="loc_1">Box1</option>
<option value="loc_2">Box2</option>
<option value="loc_3">Box3</option>

Note: The option values are just examples, but each option must have a value in order for other things to work.

Here is what I need to do:

If TM1 is selected, only Box1 and Box 2 are available (Box3 is removed from the dropdown "location" list);

If TM2 is selected, only Box 2 is available (Box 1 and 3 are removed from the dropdown "location" list);

If TM3 is selected, all options in the dropdown "location" list are available.


My javascript knowledge is very limited. Any help is greatly appreciated.



Thanks in advance,

JW