Menu
Hello again
I have a script that was written for me that I need an alteration to it which I can’t do. At the moment, it uses the second record in the data to create a menu which, when an selection is made, displays the required filtered data and in price order.
I now need to be able to use the sixth record in the data as the menu item and filter the results that way. Unfortunately, if you change it to the sixth record, the menu is created correctly but instead of filtering, say, for example, by 2 bedroom properties, it displays all the records.
Here is a version of script and data:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Menu and Search using data in an External File</title>
<style type=”text/css”>
#myOpts {
float: left;
width: 150px;
}
#firstSortLink {
float: left;
}
#secondSortLink {
float: right;
}
</style>
<script type=”text/javascript”>
var data = new Array();
data[0] = “Westhaven | Davenport | Disney World Resort Area | S4594636 | 355,000 | Single Family Home | 4 | 3 | 1,824 | 2003 | This 4 bed, 3.5 bath home is in a short term rental community. Tastefully decorated and in excellent condition, the home backs onto a large field. Vaulted ceilings, a nice sized pool with covered lanai complete this very nice home”;
data[1] = “Glenbrook Resort | Clermont | Disney World Resort Area | G4594396 | 435,000 | Single Family Home | 5 | 3 | 2,430 | 2005 | This lovely 5 bed pool home with jacuzzi is located on the popular resort community of Glenbrook, just a 5 minute drive to the Animal Kingdom entrance to Disney World.”;
data[2] = “Terra Verde | Kissimmee | Disney World Resort Area | S4596699 | 399,900 | Single Family Home | 4 | 3 | 1,940 | 2004 | Terra Verde is a highly desirable resort with a mix of private homes and townhomes. Guests have a wealth of activities and amenities all surrounding a huge clubhouse. This lovely 4 bedroom, 3 bathroom home includes a private pool and spa backing onto conservation area.”;
data[3] = “Calabay Parc | Davenport | Disney World Resort Area | s4588662 | 453,000 | Single Family Home | 5 | 4 | 2,835 | 2003 | Wonderfully bright and open floorplan on beautiful Calabay Parc. This 5 bed, 4 bath two storey home includes extra features such as a cloakroom, games room and very nice landscaping where the pool is not overlooked.”;
data[4] = “Highlands Reserve | Davenport | Disney World Resort Area | O4613397 | 499,000 | Single Family Home | 5 | 4 | 2,786 | 2001 | Beautiful pool home with spa backing onto conservation land and situated on the popular golf course community of Highlands Reserve. This house is of contemporary design and is extremely spacious at 2,786 sq ft.”;
data[5] = “Westhaven | Davenport | Disney World Resort Area | S4590256 | 365,000 | Single Family Home | 4 | 3 | 1,998 | 2003 | Yet another lovely four bedroom pool home with spa located at the gated community of Westhaven and adjacent to Champions Gate Golf Course.”;
data[6] = “Emerald Island Resort | Kissimmee | Disney World Resort Area | S4586468 | 224,900 | Town Home | 3 | 2½ | 1,277 | 2003 | This lovely town home is situated in a gated community with plenty of resort facilities. Sought after by visitors, particularly because of its proximity to Disney World and the facilities on site. 4 minute drive time to Disney Maingate and only minutes from Formosa Gardens Plaza with its bars, shops, restaurants and supermarket.”;
data[7] = “Clear Creek | Clermont | Disney World Resort Area | O4620972 | 275,000 | Single Family Home | 3 | 2 | 1,437 | 2001 | This contemporary 3 bedroom south facing home with swimming pool overlooks conservation area and a pond and features two master suites. Just a 10 minute drive to the Disney Theme Parks, this home is ready for short term rentals”;
var opts = new Array();
var sortType = “ascending”; // CHANGE THIS IF WANT DIFFERENT SORT
for(i=0, n=data.length; i < n; i++)
{
// first get parts of array
var parts = data[i].split(” | “);
// create new entry for data[i]
var temp = new Array();
temp[0] = “<table align=’left’ cellspacing=’0′ cellpadding=’0′ border=’0′ width=’415′ height=’22’><td width=’66%’ class=’headline’ align=’left’>”+ parts[0] +”, “+ parts[1] +”</td><td width=’33%’ class=’headline’ align=’right’>Ref: “+ parts[3] +”</td></table>”;
temp[1] = “$”+ parts[4] + ” – ” + parts[5];
temp[2] = “<p style=’margin-top:5px;margin-bottom:5px’ align=’left’>”+ parts[6] +” bedroom(s), “+ parts[7] +” bathroom(s) – “+ parts[8] +” sq. feet – built in “+ parts[9] +”</p>”;
temp[3] = “<p style=’margin-bottom:10px’ align=’left’>”+ parts[10] +”</p>”;
temp[4] = “<hr>”;
// store temp back into data
data[i] = temp;
// store unique options for drop down
opts[parts[1]] = 1;
}
function createTable(arr) {
var numcols=1;
var numrows=arr[0].length, trow, tcell;
tbl=document.getElementById(“container”).firstChild;
// sort array by price
if (sortType == “ascending”)
arr.sort(mySort);
else if (sortType == “descending”)
arr.sort(myReverseSort);
// first clear all rows except sorter row
for (var i = 0, n = tbl.rows.length; i < n; i ++)
tbl.removeChild(tbl.rows[0]);
// now re-build table
for(var n=0;n<arr.length;n+=numcols){
for(var i=0;i<numrows;i++){
trow=document.createElement(“tr”);
for(var j=0;j<numcols;j++){
tcell=document.createElement(“td”);
if(!arr[n+j]){tcell.innerHTML=””;}
else{tcell.innerHTML=arr[n+j][i];}
trow.appendChild(tcell);
}
tbl.appendChild(trow);
}
}
// hide the welcome message
document.getElementById(“welcome”).style.display = “none”;
}
function createOptions()
{
var obj = document.getElementById(“myOpts”).getElementsByTagName(“tbody”)[0];
var temp = new Array();
for (var i in opts)
temp[temp.length] = i;
temp.sort();
for (var i = 0, n = temp.length; i < n; i++)
{
var myRow = document.createElement(“tr”);
var myCell = document.createElement(“td”);
var myAnchor = document.createElement(“a”);
myAnchor.href = “#”;
myAnchor.className = “theClassName”;
myAnchor.innerHTML = temp[i];
myAnchor.onclick = filter;
myCell.appendChild(myAnchor);
myRow.appendChild(myCell);
obj.appendChild(myRow);
}
// add in last link for “ALL”
var myRow = document.createElement(“tr”);
var myCell = document.createElement(“td”);
var myAnchor = document.createElement(“a”);
myAnchor.href = “#”;
myAnchor.className = “theClassName”;
myAnchor.innerHTML = “ALL”;
myAnchor.onclick = function() {includeArr = data; createTable(data);};
myCell.appendChild(myAnchor);
myRow.appendChild(myCell);
obj.appendChild(myRow);
}
function filter()
{
var key = this.innerHTML;
includeArr = new Array();
for (var i = 0, n = data.length; i < n; i ++)
{
var location = data[i][0];
if (location.indexOf(key) > -1)
includeArr[includeArr.length] = data[i];
}
createTable(includeArr);
}
function priceIt(p)
{
price = new String(p);
rEx = new RegExp(“£[0-9,]*”, “i”);
price = new String(price.match(rEx));
return parseInt(price.replace(/£|,/g,””));
}
function mySort(a, b)
{
var priceStrA = a[1].split(“-“)[0].substr(1);
priceStrA = priceStrA.split(“,”).join(“”);
var priceA = parseInt(priceStrA);
var priceStrB = b[1].split(“-“)[0].substr(1);
priceStrB = priceStrB.split(“,”).join(“”);
var priceB = parseInt(priceStr?;
if (priceA > price?
return 1;
else if (priceA == price?
return 0;
else
return -1;
}
function myReverseSort(a, b)
{
return (-1 * mySort(a, b));
}
</script>
</head>
<body onload=”includeArr = data; createOptions();”>
<table id=”myOpts”><tbody></tbody></table>
<table id=”container” align=”center” cellspacing=”0″ cellpadding=”0″ border=”0″ width=”400″><tbody></tbody></table>
<div id=”welcome”>Hello, this is a quick welcome message. It’s mission, which it has chosen to accept, is to to illustrate the behavior of this page. It is not much to look at it, as it is trying to keep a low profile. This message will self-destruct (disappear) when you click on one of the links on the left. G’luck.</div>
</body>
</html>
The part that selects the record that creates the menu is:
opts[parts[1]] = 1;
If you change this to read:
opts[parts[6]] = 1;
and run it you see the problem.
Basically, I need to be able to use numbers.
Hope you can help.
Many thanks in advance
Martin ?