On the following link you will see a form that is doing ascending and descending of the items that have been added.
What I would like to do is to use this function for the boxes below
that means that my sort list should display the visual products
could you help me?
Thank you
Once the select list items are sorted, you can:
loop through that list, and for each option on the list:
[list][]find the appropriate box that relates to the option
[]use appendChild to move that box to the end of the box group[/list]
Sorry for not been accurate but I am rookie in javascript.
I have found the following script for sorting
[COLOR=“DarkRed”]<html>
<head>
<script type=“text/javascript”>
<!–
// sort function - ascending (case-insensitive)
function sortFuncAsc(record1, record2) {
var value1 = record1.optText.toLowerCase();
var value2 = record2.optText.toLowerCase();
if (value1 > value2) return(1);
if (value1 < value2) return(-1);
return(0);
}
// sort function - descending (case-insensitive)
function sortFuncDesc(record1, record2) {
var value1 = record1.optText.toLowerCase();
var value2 = record2.optText.toLowerCase();
if (value1 > value2) return(-1);
if (value1 < value2) return(1);
return(0);
}
function sortSelect(selectToSort, ascendingOrder) {
if (arguments.length == 1) ascendingOrder = true; // default to ascending sort
// copy options into an array
var myOptions = [];
for (var loop=0; loop<selectToSort.options.length; loop++) {
myOptions[loop] = { optText:selectToSort.options[loop].text, optValue:selectToSort.options[loop].value };
}
// sort array
if (ascendingOrder) {
myOptions.sort(sortFuncAsc);
} else {
myOptions.sort(sortFuncDesc);
}
// copy sorted options from array back to select box
selectToSort.options.length = 0;
for (var loop=0; loop<myOptions.length; loop++) {
var optObj = document.createElement('option');
optObj.text = myOptions[loop].optText;
optObj.value = myOptions[loop].optValue;
selectToSort.options.add(optObj);
}
}
//-->
</script>
</head>
<body>
<form>
<select name=“mySelect”>
<option value=“3”>Cat</option>
<option value=“4”>Dog</option>
<option value=“2”>Fish</option>
<option value=“1”>Bird</option>
</select>
<br />
<input type=“button” onclick=“sortSelect(this.form[‘mySelect’], true);” value=“Sort (Asc)”>
<input type=“button” onclick=“sortSelect(this.form[‘mySelect’], false);” value=“Sort (Desc)”>
</form>
</body>
</html>[/COLOR]
From what I can understand the following line of code
var optObj = document.createElement(‘option’);
the script is sorting the option values inside the form
I want to do something like this (to have one selection box with asc and desc sorting option and this in order to sort the elements that I have in ul list by price).
So I would like to know how to correlate these two things.
[COLOR=“DarkRed”]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“EN” lang=“EN” dir=“ltr”>
<head profile=“http://gmpg.org/xfn/11”>
<title>Avenue Chic</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<meta http-equiv=“imagetoolbar” content=“no” />
<script type=“text/javascript”>
<!–
// sort function - ascending (case-insensitive)
function sortFuncAsc(record1, record2) {
var value1 = record1.optText.toLowerCase();
var value2 = record2.optText.toLowerCase();
if (value1 > value2) return(1);
if (value1 < value2) return(-1);
return(0);
}
// sort function - descending (case-insensitive)
function sortFuncDesc(record1, record2) {
var value1 = record1.optText.toLowerCase();
var value2 = record2.optText.toLowerCase();
if (value1 > value2) return(-1);
if (value1 < value2) return(1);
return(0);
}
function sortSelect(selectToSort, ascendingOrder) {
if (arguments.length == 1) ascendingOrder = true; // default to ascending sort
// copy options into an array
var myOptions = [];
for (var loop=0; loop<selectToSort.options.length; loop++) {
myOptions[loop] = { optText:selectToSort.options[loop].text, optValue:selectToSort.options[loop].value };
}
// sort array
if (ascendingOrder) {
myOptions.sort(sortFuncAsc);
} else {
myOptions.sort(sortFuncDesc);
}
// copy sorted options from array back to select box
selectToSort.options.length = 0;
for (var loop=0; loop<myOptions.length; loop++) {
var optObj = document.createElement('option');
optObj.text = myOptions[loop].optText;
optObj.value = myOptions[loop].optValue;
selectToSort.options.add(optObj);
}
}
//-->
</script>
</head>
<body id=“top”>
<div class=“wrapper col2”>
<div id=“header”>
<div id=“logo”>
</div>
<br class=“clear” />
</div>
</div>
<div class=“wrapper col4”>
<div id=“container”>
<br/><br/>
<div id=“gallery”>
<form>
<select name=“mySelect”>
<option value=“asc”>Price asc</option>
<option value=“desc”>Price desc</option>
</select>
<br />
<input type="button" onclick="sortSelect(this.form['mySelect'], true);" value="Sort (Asc)">
<input type="button" onclick="sortSelect(this.form['mySelect'], false);" value="Sort (Desc)">
</form>
<ul>
<li><a href="photos/rings/AB10R02.jpg" title="Wooden ring with foil flower design on square resin top." rel="lightbox"><img src="photos/rings/AB10R02.jpg" width="234" height="240" alt="AB10N04 (34K)" /></a>
<p><strong>AB10R02:</strong> Wooden ring with foil flower design on square resin top. <br/><br/><b>Price: $18 </b><br />
<a class="viewproject" href="order_form.html" target="_blank">Buy Here »</a></p>
</li>
<li><a href="photos/rings/AV10R03.jpg" title="Resin ring with butterfly design." rel="lightbox"><img src="photos/rings/AV10R03.jpg" width="234" height="240" alt="AB10N04 (34K)" /></a>
<p><strong>AV10R03:</strong> Resin ring with butterfly design.<br/><br/><b>Price: $22 </b>
<a class="viewproject" href="order_form.html" target="_blank">Buy Here »</a></p>
</li>
<li><a href="photos/rings/AV10R07.jpg" title="Resin ring with blue and while floral design." rel="lightbox"><img src="photos/rings/AV10R07.jpg" width="234" height="240" alt="AB10N04 (34K)" /></a>
<p><strong>AV10R07:</strong> Resin ring with blue and while floral design.<br/><br/><b>Price: $19 </b><br />
<a class="viewproject" href="order_form.html" target="_blank">Buy Here »</a></p>
</li></ul></div>
<div class="clear"></div>
</div>
</div>
</body>
</html>[/COLOR]
Most of us here are happy to provide advice, and even to troubleshoot and advise people about issues in their code.
Where some of us toe the line though, is when people ask for someone else to do the work instead. This is not the case with me now.
Normally I would run up a test version, work out a valid solution and help the person towards that solution. I have to head off soon though, so good luck with this.