JavaScript - Dropdowns, Sort Of

Hi,

I've currently got a group of dropdowns that update a price total on my site. I want to add an 'add to cart' button too but this requires each drop down having 2 values (one to update total and one to go towards the 'add to cart button'). I've researched this but still have no idea how to go about getting 2 values from one dropdown though.

What I've done is create an explanation page where I have one form for the running total, and then a completely seperate form for the add to cart. Both work independanly, but I want to effectively combine them. Here's the page:
tigerfrog.co.uk/merge_codes.html

code for running total is:
Head Code:

<script language="JavaScript" type="text/javascript">

function calc2(){
var totalStr = ''; // for testing only
var totalValue=0;
var DDL;
var cnt = 0; // for testing only
for (var j=1; j<=2; j++) {
DDL = document.getElementById('dropDownList'+j);
temp = DDL.options[DDL.selectedIndex].value;
totalValue += Number(temp);
if (DDL.selectedIndex != 0) { totalStr += '|'+temp; cnt++; } // cnt++ is for testing only
}
document.forms[0].total.value=totalValue;
}
</script>

Body Code:

<form id="dropDownForm2" name="dropDownForm2">
<td class="style14">&nbsp;<select id="dropDownList1" class="style10" name="D10" onchange="calc2();">
<option selected="" value="10">item1</option>
<option value="20">item2</option>
<option value="30">item3</option>
</select> <br />
</td>
<td class="style14">&nbsp;<select id="dropDownList2" class="style10" name="D11" onchange="calc2();">
<option href="alloy.htm" selected="" value="11">item4</option>
<option value="12">item5</option>
<option value="13">item6</option>
</select><br />
total </td>
<input class="style10" name="total" onfocus="blur()" readonly="" size="4" style="width: 46px; height: 22px;" type="text" value="958" /></form>

The code for the add to cart is:
Code:

<form action="http://www.romancart.com/cart.asp" method="post">
<input name="storeid" type="hidden" value="43579" />
<input name="itemcode" type="hidden" value="TF Series" />Frameset
<select name="itemname2">
<option value="TF100" value="TF100">item1</option>
<option value="TF300C" value="TF300">item2</option>
<option value="TF400C" value="TF400">item3</option>
</select><br />
Groupset <select name="itemname5">
<option value="SL T1" value1="SL T1">item4</option>
<option value="SLR T1" value1="SLR T1">item5</option>
</select><br />
<input type="submit" value="Add to basket" />
</form>

If I had 2 values from each drop down in the first group of dropdowns then I could get it working, but I'm not sure how to do this.

Any help will be great,

Phil

I'm looking for four level connected drop down boxes. Unlike all the scripts I have seen on the internet I need all the options to be available if nothing is selected in the previous drop down. So I want something like combination of connected drop downs and ordinary drop down. If the selection is made, display appropriate options in other drop downs... Hope I'm clear...

Ex: If I had three properties in Spain,

-----------------------------------------------------------------------------------------------------------
| -------- Country: Spain --------- | -------- Country: Spain --------- | -------- Country: Spain ---------- |
| -------- State: Andalusia ------- | -------- State: Andalusia -------- | -------- State: Catalonia --------- |
| -------- District: Malaga -------- | -------- District: Granada ------- | -------- District: Barcelona ------- |
| -------- Town: Marbella --------- | -------- Town: Motril ----------- | --------- Town: Badalona -------- |
-----------------------------------------------------------------------------------------------------------

it should show me all the list of available locations, but when I choose Andalusia, it would only show two rest locations – Malaga and Granada, and the same rule when choosing district – Malaga->Marbella

Can anyone please help? I need it very much...

Thanks in advance!

Hi,
I have mutiple dropdowns in my HTML table in one of the columns.The dropdowns have three values 'Blank','Approve' and 'Reject'.What I want is when user changes the values in any of the dropdown,It will ask for the confirmation from user.If user click OK ,it will change the value in dropdown and calls another function else it will be reset to previous value.e.g, Suppose previous value is 'Reject' and user tries to change it to 'Approve'.When confirm window comes up and user clicks cancel it will reset to Reject.On OK it will change to 'Approve'. How can I handle this in Javascript? Please help.

Thanks,
Anil

I have a page with 6 dependant drop down boxes. I also have a text field with a copy to clipboard button.

What I need it to do is send the drop down selections to the text field to be copied along with some static text. The resulting text field would look something like this after the selections are made.

"Per Wizard: Choice 0: Selection 2, Choice 1: Selection 2, Choice 2: Selection 4 ..."

Can this be done on each line as a second onChange event?

Code:

<html>

<head>
<HEAD>

<script type="text/javascript">
<!--
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[1] = "Selection 1";
arrItemsGrp1[1] = 1;
arrItems1[2] = "Selection 2";
arrItemsGrp1[2] = 1;
arrItems1[3] = "Selection 3";
arrItemsGrp1[3] = 1;

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[12] = "Selection 1";
arrItemsGrp2[12] = 1
arrItems2[13] = "Selection 2";
arrItemsGrp2[13] = 1
arrItems2[14] = "Selection 3";
arrItemsGrp2[14] = 1
arrItems2[15] = "Selection 4";
arrItemsGrp2[15] = 1
arrItems2[16] = "Selection 5";
arrItemsGrp2[16] = 1
arrItems2[17] = "Selection 6";
arrItemsGrp2[17] = 1

var arrItems3 = new Array();
var arrItemsGrp3 = new Array();

arrItems3[42] = "Selection 1";
arrItemsGrp3[42] = 12
arrItems3[43] = "Selection 2";
arrItemsGrp3[43] = 12
arrItems3[44] = "Selection 3";
arrItemsGrp3[44] = 12

var arrItems4 = new Array();
var arrItemsGrp4 = new Array();

arrItems4[133] = "Selection 1";
arrItemsGrp4[133] = 42

var arrItems5 = new Array();
var arrItemsGrp5 = new Array();

arrItems5[244] = "Selection 1";
arrItemsGrp5[244] = 133
arrItems5[245] = "Selection 2";
arrItemsGrp5[245] = 133

function selectChange(control,nu){
var frm=control.form;
var sel=frm['Choice'+nu];
var iary=window['arrItems'+nu];
var gary=window['arrItemsGrp'+nu];
var cnt=1;
while (frm['Choice'+cnt]){
if (cnt>=nu){
while (frm['Choice'+cnt].firstChild){
frm['Choice'+cnt].removeChild(frm['Choice'+cnt].firstChild);
}
}
cnt++;
}
var myEle=document.createElement("option");
myEle.appendChild(document.createTextNode("[SELECT ONE]"));
myEle.setAttribute("value","0");
sel.appendChild(myEle);
for (var x = 0 ; x < iary.length ; x++ ) {
if ( gary[x]==control.value ) {
myEle = document.createElement("option");
myEle.setAttribute("value",x);
myEle.appendChild(document.createTextNode(iary[x]));
sel.appendChild(myEle);
}
}
}
// -->
</script>
<script language='Javascript'>
function doact(d)
{
var doc = eval("document.form."+d);
cp = doc.createTextRange();
doc.focus();
doc.select();
cp.execCommand("Copy");
}

function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
</script>
</HEAD>

<BODY>

<form name=form>
<div align="center">
<table border="2" width="790" id="table1" bordercolor="#64367C">
<tr>
<td width="778" align="left" colspan="2">
&nbsp;</td>
<tr>
<td width="305" align="left">
<font size="2" face="MS Sans Serif">&nbsp;Choice 1:<font size="2" face="MS Sans Serif">
<select id="Choice0" name="Choice0" onchange="selectChange(this, 1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Selection 1</option>
<option value="2">Selection 2</option>
<option value="3">Selection 3</option>
</select></font></font></td>
<td width="225" align="center" onclick="FP_popUpMsg('More Info')">
<font face="MS Sans Serif" size="2" color="#FF0000">*</font><font face="MS Sans Serif" size="2" color="#0000FF">
<u>
Tell me more</u></font></td>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif">&nbsp;&nbsp;&nbsp; Code 2: 
<select id="secondChoice" name="Choice1" onchange="selectChange(this, 2); "></select></font></td>
<td width="225" align="center" rowspan="4">
<TEXTAREA name="text1" cols="25" rows="5">
Selections will populate here.
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy">
</td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif">&nbsp;&nbsp;&nbsp; Code 3: 
<select id="thirdChoice" name="Choice2" onchange="selectChange(this, 3);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font size="2" face="MS Sans Serif">&nbsp;&nbsp;&nbsp; Code 4: 
<select id="fourthChoice" name="Choice3" onchange="selectChange(this, 4);"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<font face="MS Sans Serif" size="2">&nbsp;&nbsp;&nbsp;&nbsp;Code 5: </font> <font size="3" face="Courier">
<select id="fifthChoice" name="Choice4" onchange="selectChange(this, 5);" size="1"></select></font></td>
</tr>
<tr>
<td width="547" align="left">
<p><font face="MS Sans Serif" size="2">&nbsp;&nbsp;&nbsp; Answer: </font>
<font size="3" face="Courier">
<select id="sixthChoice" name="Choice5" onChange="alert('Reminder')" size="1"></select>
</font></p></td>
<td width="225" align="center">
<font size="2" face="MS Sans Serif">
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td>
</tr>
<tr>
<td width="778" align="left" colspan="2">
&nbsp;</td>
</tr>
</table>
</div>
</form>

</body>

</html>

Hi,
Ive been days searching posting, trying to find a solution to my pure css hover menu that works perfect, except in toucscreens.
Ive been today to apples shop to test, and yes sometimes it opens on click other it wont open, something strange.
So the best is to serve another menu to toucsreens such as smartphones and tablets, or make the menu work on both.
I have tried my menu (Peterneds whateverhover) but cant manage, also have no touchscreen to do tests on.

Searching I found Suckerfish Dropdowns and the dropdown have a script for ie6 as ie6 does not support hover.
This is the script:
Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

I wonder, isnt it posible to change the onmouseover and onmouseout to touchstart and touchend?
I imagine that sounds just to easy, suppose if that were the case it would already been done, however I read that touchstart is for iphone etc...
Any help please, I do understand javascript when I read it, but am not able to do my own functions.
Thanks
Helen

I'd like to create two dropdown (select) lists with a search button next to it so if the user chooses A in the first list and C in the second list and clicks 'search', the results return items that relate to both A and C.

Practical Example:

User chooses "London" in the first dropdown and "Middle Schools" in the second.

Result returns the middle schools I've listed for London.

How can this be done or if it can't, is there another way to achieve what I want?

-edit- I found what I wanted he http://www.alistapart.com/d/complexd...ts&de=Pancakes

However, now my question is what would I put in for the form "action" to populate the results?

Hi,

OK, I know a bubble sort is very inefficient for sorting values but I have to do it as part of some coursework.
I have the code working, i.e. it produces a sorted list of numeric values but the process of sorting the values is wrong.

Below is my complete script.
Code:

<HTML>
    <HEAD>
        <TITLE>
        A program to sort an array using a bubble sort
        </TITLE>
    		<SCRIPT>
    		
		/*A function to sort an array.
		Function takes an array of numbers as an argument.
		Function returns a new array with the same
		elements as the argument array, sorted
		into ascending order*/
		
    	function bubbleSort(arrayToSort)
		{
			// declare and initialise a variable to hold the length of the argument array
			var length = arrayToSort.length;
			
			//declare an array to be returned by the function
			var returnArray = new Array(length);
			//copy each element of the argument array to the return array
			for (var i = 0; i < length; i = i + 1)
			{
				returnArray[i] = arrayToSort[i];
			}
									
			//  PLACE YOUR CODE FOR THE FUNCTION HERE
			/* */
			for (var j = 0; j < returnArray.length - 1; j = j + 1)
			{
				for (var k = j + 1; k < returnArray.length; k = k + 1)
				if (returnArray[j] > returnArray[k])
                {
                    var temp;
                    temp = returnArray[j];
                    returnArray[j] = returnArray[k];
                    returnArray[k] = temp;
                    document.write('Array after each swap ' + returnArray + '<BR>')
                }					
			}
            return returnArray;
		}
		

		
		/* a function for testing the bubbleSort() function.
		Function assigns an array to a variable
		Displays elements of unsorted array in order
		Invokes bubbleSort() function with the array as the argument
		Displays elements of sorted array in order
		Function takes no arguments.
		Function returns no value.*/
		function bubbleTest()
		{
			var unsortedArray; //array to accept numbers to be sorted
			var sortedArray; //array to show sorted numbers

			// the array of values to be sorted
			unsortedArray = [4,3,2,1];
			
			// TO DO TASK 3 (iv)
			// PLACE YOUR FUNCTION CODE HERE
			/*Write out the array 'unsortedArray'*/
			document.write('A program to sort a series of numbers using the Bubble Sort method.' + '<BR>' + 'Unsorted array ' + unsortedArray + '<BR>');
			/*Assign the results of the 'bubbleSort' function to the array 'sortedArray'*/
			sortedArray = bubbleSort(unsortedArray);
			/*Write out the array 'sortedArray'*/
			document.write('Sorted array ' + sortedArray + '<BR>');
			
			
			/* The arrays below are for use in Task 4 (iii) and Task 5(iii) and can be ignored in Task 3
			
			DATA SET 1
			[8,4,6,2,10,5,3,7,1,9]
			DATA SET 2
			[1,5,2,8,6,7,10,9,4,3]
			DATA SET 3
			[ 6,3,8,7,2,9,10,4,5,1]
			DATA SET 4
			[7,5,2,10,6,8,4,3,9,1]
			DATA SET 5
			[9,4,1,10,5,2,3,8,7,6]	
			*/
		}
		
		/*Test area for bubbelSort array*/
		//var unsortedArray = [9,7,2,10,1,4,8,6,5,3]; //Test arguments
		//bubbleSort(unsortedArray);
		
		// invoke bubbleTest() to test the bubbleSort() function
       	bubbleTest();
				

		</SCRIPT>
    </HEAD>
    <BODY>
        
    </BODY>
</HTML>

OK, the problem is that on after the first pass, the numbers should be as follows:
3,2,1,4
The biggest number always ends up in it's place after each pass. My code above outputs the numbers after the first pass:
3,4,2,1

You will notice it is probably an inefficient way of writing the code. We have to only use code we have learnt

Sorry for the long post!!

Hi I'm working on displaying a list of events on my site and need to display them in ascending order. i've got an xml document that looks like this(with multiple events obviously, i've just put one here):

Code:

<EventList>
  <Event>
    <Title>title example</Title>
    <myDescription>description example</myDescription>
    <myLink>http://www.example.com</myLink>
    <dayDate>10</dayDate>
    <monthDate>5</monthDate>
    <yearDate>2010</yearDate>
    <EventPic>Event.gif</EventPic>
  </Event>
</EventList>

Then on my html page, I have this javascript:

Code:

<script type="text/javascript">
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else // Internet Explorer
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET","Events.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML; 

  var jDate=new Date();
  var jYear=jDate.getFullYear();
  var jYearStr=jYear.toString();
  var jMonth=jDate.getMonth()+1;
  var jMonthStr=jMonth.toString();
  var jDay=jDate.getDate();
  var jDayStr=jDay.toString();
  var currentDate=jYearStr+jMonthStr+jDayStr;

document.write("<div>");
var x=xmlDoc.getElementsByTagName("Event");

for (i=0;i<x.length;i++)
  { 
  var theMonthDate=x[i].getElementsByTagName("monthDate")[0].childNodes[0].nodeValue;
  var theDayDate=x[i].getElementsByTagName("dayDate")[0].childNodes[0].nodeValue;
  var theYearDate=x[i].getElementsByTagName("yearDate")[0].childNodes[0].nodeValue;
  var theDate=theYearDate+theMonthDate+theDayDate;
  if (theDate>=currentDate)
  {
  document.write("<br>");
  document.write("<a href='");
  document.write(x[i].getElementsByTagName("myLink")[0].childNodes[0].nodeValue);
  document.write("'>");
  document.write(x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue);
  document.write("</a>");
  document.write("<br>");
  document.write(x[i].getElementsByTagName("myDescription")[0].childNodes[0].nodeValue);
  document.write("<br>");
  document.write(x[i].getElementsByTagName("monthDate")[0].childNodes[0].nodeValue);
  document.write("/");
  document.write(x[i].getElementsByTagName("dayDate")[0].childNodes[0].nodeValue);
  document.write("/");
  document.write(x[i].getElementsByTagName("yearDate")[0].childNodes[0].nodeValue);
  document.write("<br>");
  }
  }
document.write("</div>");
</script>

Can anyone help me with sorting this? So far I have it displaying only events that are occuring after the present date(currentDate). How would I go about displaying them so that the events displayed will be in the order of the earliest date displaying first?

Thanks so much,
Alex

Hello JS experts:

I simply want to sort this output by date:

Code:

document.write(x[i].getElementsByTagName("cdate")[0].childNodes[0].nodeValue);

Why can't I simply just do this?
Code:

document.write((x[i].getElementsByTagName("cdate")[0].childNodes[0].nodeValue).sort());

XML :
Code:

<item>
<number>10-0057-FW</number>
<title>Supervisory Contract Specialist</title>
<link>http://test.usaid.com/careers/TESTgscover.html#1826296</link> 
<guid>http://test.usaid.com/careers/TESTgscover.html#1826296</guid>
<description>10-0057-FW, Grade: GS-1102-15, Office: OAA, Opening Date: 02/26/10, Closing Date: 03/09/10, USAID Employees Only</description>
<opp>1826296</opp>
<office>OAA</office>
<grade>SS-1102-15</grade>
<odate>02/26/10</odate>
<cdate>03/09/10</cdate> 
<eligibility>Employees Only</eligibility>
<pubDate>Fri, 26 Feb 2010 09:35:42 -0500 </pubDate>
</item>

Partial JS:
Code:

var x=xmlDoc.getElementsByTagName("item");

for (i=0;i<x.length;i++)
  {
			 . . .

document.write(x[i].getElementsByTagName("cdate")[0].childNodes[0].nodeValue);
document.write("</td><td>");
			. . .

I already have a sort function that but wish to provide my users with the ability to specify custom sorts - days of the week, months etc.

Assuming that I have a function that will return day of week (ie 'Mon' = 0, "Tue" = 1, "Wed" = 2 ... etc) can anyone show me how I would incorporate this into a sort routine?

Many thanks in advance should you respond to this.

I check the web and they only show you how to sort the whole array. I would like to be able to sort the subset of the 2D array. Here's my array.

Code:

var myArray=new Array(
new Array("af","ad","az","ab"),
new Array("bc","bd","bg","bb","bx"),
new Array("cf","ck","ca","cv","co"),
new Array("dd"));

How would I sort the sub array independently. So only the a's together, then only the b's together, etc.

thanks

Hey guys

my question is related to sort table

This is the code for the table:

PHP Code:
$result = $conn->query("SELECT query, link, pro,pro_update,ana,ana_update,cell,cell_update,cellother,cellother_update,gen,gen_update,genother,genother_update,author,author_update,other,other_update,date,id
FROM mailing_list
WHERE email = '$email'
ORDER BY $order LIMIT $start_row, $max_per_page;");

echo "<table class=\"sortable\" id=\"query_quick2\" width=\"100%\" >\r\n";
echo "\t<tr><th class=\"sorttable_alpha\" >Updated Query</th><th width=\"10\" class=\"sorttable_alpha\" >Link</th>
<th class=\"sorttable_alpha\" >Promoter Locus</th><th class=\"sorttable_alpha\" >Update</th>
<th class=\"sorttable_alpha\" >Anatomical Area</th><th class=\"sorttable_alpha\" >Update</th>
<th class=\"sorttable_alpha\" >Cell Type</th><th class=\"sorttable_alpha\" >Update</th>
<th class=\"sorttable_alpha\" >Other Cell Type</th><th class=\"sorttable_alpha\" >Update</th>
<th class=\"sorttable_alpha\" >Genetic Background</th><th class=\"sorttable_alpha\" >Update</th>
<th class=\"sorttable_alpha\" >Other Gen. Back.</th><th class=\"sorttable_alpha\" >Update</th>
<th class=\"sorttable_alpha\" >Author</th><th class=\"sorttable_alpha\" >Update</th>
<th class=\"sorttable_alpha\" >Other</th><th class=\"sorttable_alpha\" >Update</th>
<th class=\"sorttable_mmdd\" >Date</th><th class=\"sorttable_nosort\" ></th><th class=\"sorttable_nosort\" ></th>\r\n";

if($result->num_rows){
while ($row = $result->fetch_array()){
$RowCount ++;
$row_color = ($RowCount % 2) ? $color1 : $color2;
echo "<form method = \"post\" action=\"{$_SERVER['PHP_SELF']}\">";
echo "\t<tr id=\"{$row['id']}\" class=\"$row_color\" >
<td>{$row['query']}</td><td>{$row['link']}</td>
<td>{$row['pro']}</td><td>{$row['pro_update']}</td><td>{$row['ana']}</td>
<td>{$row['ana_update']}</td><td>{$row['cell']}</td><td>{$row['cell_update']}</td><td>{$row['cellother']}</td>
<td>{$row['cellother_update']}</td><td>{$row['gen']}</td><td>{$row['gen_update']}</td><td>{$row['genother']}</td>
<td>{$row['genother_update']}</td><td>{$row['author']}</td><td>{$row['author_update']}</td><td>{$row['other']}</td><td>{$row['other_update']}</td>
<td>{$row['date']}</td>
<td><input type=\"submit\" name=\"edit_mail\" value = \"Edit\"/></td>
<td><input type =\"hidden\" name = \"id\" value=\"{$row['id']}\"/></td>
<td><input type=\"submit\" name=\"delete_mail\" value =\"Delete\"/></td>
</tr>";
echo "</form>";


}
}

echo "</table>"; 



This is an excerpt of the script which deletes the specific entry:


PHP Code:
} elseif(isset($_SESSION['user_id']) AND isset($_POST['delete_mail'])){
//user is deleting existing queries
$connect=db_connect_2();
$id = mysqli_real_escape_string($connect, $_POST['id']);


$sql2 = "DELETE FROM mailing_list WHERE id='$id'";
$result = mysqli_query($connect, $sql2) or mysqli_error($conn);

$msgs[] = "Queries DELETED successfully.";
$body = "account.php";
} 



I can delete the specific entry like usual at the beginning

but right AFTER i sort the table by clicking a column heading, say, promoter locus, (using sortable.js)

and then when i try to delete a specific entry, problem arises.

Instead of deleting the entry i want, it always deletes the LAST entry.

Now as you can see, i select a specific value for $id, using post method from a form

But shouldn't the value of $id point to the entry i want to delete when i click the "delete" button near it? (i mean it works fine before i sort the table)

Any help would be greatly appreciated

Thanks.

My problem is in the drop down menus for site names, we have hundreds of sites and unfortunately the menu is not sorted 0-1 then A-Z and I would love it to be sorted like that.

I have tried to do my homework and understand java / javascript but I just can't stand it and I feel it is too complicated for me. The good news is I used to be a good ASP/vbscript programmer about 12 years ago so I have the "common sense" of understanding how to apply something similar on other pages, because I have lots of drop down menus that I need to sort.

I need your help in the attached file please. I need someone to simply highlight for me where in the javascript is fetching the site names from the DB and what needs to be added to sort them.
Please identify it inside the file by either different color or bold font. Once I see it i will be able to figure out how to apply it in general to the other menus in the other pages.

Thank you in advance.

http://jsfiddle.net/FZ44M/3/

Thats my jsfiddle.

I'm trying to get the gallerynav to sort the thumbnails based on their class.
It does not work at all.
I've gone over line by line but I can't see the mistake.

When I run JSLink i get the error:
Error:
Problem at line 37 character 14: Cannot set property 'first' of undefined
Implied global: $data 13,14, arr 14,15,25, jQuery 28, $ 30
Unused variable: read_button 30 "$", r 32 "read_button"

I appreciate any help.

Hello, I have the following object:

Code:

		var layers = {			
			photo1 : {
				index : 1,
				xPos : 63,
				yPos : 48,
				angle : 0
			},
			background : {
				index : 0,
				xPos : 278,
				yPos : 163,
				angle : 0
			}
		}

How can I sort the objects by the index property?

Code:

for(var layer in layers.sort(???))
{
}

Thx Very Much!