|
JavaScript - Filter Box - Html/javascript
Hello
I am working on a site for work and on the page http://www.australianvisitor.co.uk/holidayfinder.htm I have a box with several options for the customer to tick to filter a selection of holidays according to destination. With thanks to thecssguy I found some code to do so. The only problem I have is that all the options are ticked by default, resulting in all holidays being displayed. It would be easier if they were all unticked by default allowing the customer to start from scratch so to speak. If i remove the line 'checked=checked' from the input box then: in firefox - the options are unticked but all results are still displayed in ie - the option box itself disappears. Does anyone have any suggestions? Thanks for taking the time to read this. Similar TutorialsI got no idea how to create a filter based on multiple drop menus to filter & sort data from php mysql query. Can anyone help me to write javascipt for this problem? My php mysql query as below:- mysql_select_db($database_winwin, $winwin); $query_rsMobile = "SELECT product_detail.product_Id, product_detail.product, product_detail.product_category, product_detail.product_brand, product_detail.product_name, product_detail.product_price, product_detail.thumbnail_url, product_detail.product_url, product_detail.product_status, product_detail.commission, product_detail.product_added_date FROM product_detail WHERE product_detail.product='Mobile Devices' AND product_detail.product_status='For sales'"; $rsMobile = mysql_query($query_rsMobile, $winwin) or die(mysql_error()); $row_rsMobile = mysql_fetch_assoc($rsMobile); $totalRows_rsMobile = mysql_num_rows($rsMobile); Whereby:- Product Brand: product_brand Product price: product_price Commission: commission Product name: product_name Product Thumbnail: thumbnail_url Product URL: product_url HTML for filters & sorter:- <div id="filters"> <form action="" method="post" name="form_filters" id="form_filters"> <table width="750" border="0"> <tr> <td>Brand:</td> <td><select name="productBrand" id="productBrand"> <option value="All Brands">All Brands</option> <option value="Sony Ericsson">Sony Ericsson</option> <option value="Samsung">Samsung</option> <option value="Nokia">Nokia</option> </select></td> <td>Price:</td> <td><select name="priceRange" id="priceRange"> <option value="All Price">All Price</option> <option value="Below RM1000">Below RM1000</option> <option value="RM1000-RM1999">RM1000-RM1999</option> <option value="RM2000 & Above">RM2000 & Above</option> </select></td> <td>Sort by:</td> <td><select name="productSort" id="productSort"> <option value="Sort By Name">Name</option> <option value="Sort By Price">Price</option> </select></td> <td><input name="Apply Filters" type="submit" value="Apply Filters"/></td> <td><input name="Reset Filters" type="Reset" value="Reset Filters"/></td> </tr> </table> </form> </div> Once user click on "Apply Filters" javascript has to sort list the product items. HTML for Pager (Value for total items, display some page numbers with hyperlink (1,2,3....10,11,12), hyperlink to previous page, hyperlink to next page) :- <div id="pager"> No. of items per page: <select name="NumOfItem" id="NumOfItem"> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> </select> Total Item: Pages ... Next... Previous </div> Javascript has to manage pager column. HTML for Product display:- <div id="product"> <div id="Thumbnail"> Here Javascript has to display Thumbnail image based on filters & sorter drop menus inputs. When click on this image page must redirect to "Product URL". </div> <div id="Price"> Here Javascript has to display "Price" based on filters & sorter drop menus inputs. When click on this "Price" page must redirect to "Product URL". </div> <div id="Commission"> Here Javascript has to display "Commission" image based on filters & sorter drop menus inputs. When click on this "Commission" page must redirect to "Product URL". </div> </div> Javascript has to repeat regions (<div id="product"></div>)based on "NumOfItem" drop menu (number of items display per page) and also update the pager column I want to alert the user if he enters only dots without any alphabets or numerals in a textbox using javascript. If the input contains dots in between alphabets and numerals the javascript should not alert the user.I have a javascript which alerts the user even if dots are present in between alphabets and numerals. Can any1 Help me..Below is my script: function addressValidation(obj) { var regex = new RegExp("[.]"); if(obj.value.match(regex)) { alert("Dot is not allowed"); obj.focus(); return false; } } I want to alert the user if he enters only dots without any alphabets or numerals in a textbox using javascript. If the input contains dots in between alphabets and numerals the javascript should not alert the user.I have a javascript which alerts the user even if dots are present in between alphabets and numerals. Can any1 Help me..Below is my script: Code: function addressValidation(obj)
{
var regex = new RegExp("[.]");
if(obj.value.match(regex))
{
alert("Dot is not allowed");
obj.focus();
return false;
}
}
favorite I'd like to modify a form on www.formsite.com (form builder app): username: testuser password: password I would like to use the nicedit.com's inline content editor's js to transform my textarea's into a richtext area. At present the nicedit editor works well in creating the richtextarea. However, the KEY point is that I would like formsite's form to pipe in the the created html and render it with the html component of formsite. Currently, the pipe function in formsite will only put out the html syntax in it's html module. action seen he http://fs8.formsite.com/testform/form1/index.html So this would be: 1. checking out my form on formsite.com 2. the script from nicedit.com is already installed in an html component. 3. changing or telling me the scripts/tags/or whatever for formsite form using formsites form builder (which allows some html/script editing). 4. changed so as to render the rich text entered on page 1 in page 2 instead of the html syntax. Any other solutions using formsite and any other richtextarea solutions would be great too! Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks Ok will update
Hello, I'm trying to use the following code to create a transitional effect for my navigation buttins: <html> <head> <style type="text/css"> <!-- #menu2 { width: auto; } #menu2 ul { margin: 0; padding: 0; list-style-type: none; font-family: verdana, arial, sanf-serif; font-size: 12px; } #menu2 li { margin: 0 20px; /*display: inline;*/ } #menu2 a { width:120px; padding: 2px 10px 2px 10px; border: 1px solid #000000; background: #dcdcdc; text-decoration: none; filter:blendTrans(duration=0.75); } #menu2 a:link, #menu2 a:active, #menu2 a:visited { color: #000000; } #menu2 a:hover { border: 1px solid #000000; background: #333333; color: #ffffff; } --> </style> <script type="text/javascript"> <!-- function lite(obj) { if(document.all&&!window.opera) { obj.filters.blendTrans.apply(); obj.filters.blendTrans.play(); } } --> </script> </head> <body> <div id="menu2"> <ul> <li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Home</a></li> <li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Products</a></li> <li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Services</a></li> <li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Solutions</a></li> <li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Support</a></li> <li><a href="#" onmouseover="lite(this)" onmouseout="lite(this)">Contact</a></li> </ul> </div> </body> </html> If you launch this in IE it works a treat and provides the exact effect I require. That is, until you add a DTD to it. Then everything to do with the filter doesn't work. I know nothing about javascript and I've spent over 12 hours trying to find a method to make this work but to no avail. If there is a javascript expert out there who knows how to rectify the problem, if you are male and I was a female, I'd have your children!!! Hope someone can help. Thank you. OK I am wanting to build a table that I can enter data in to and have people sort by a drop down box like the 4th table down on this list -- http://www.javascriptkit.com/script/...lefilter.shtml But I have followed those instructions step by step and it never works. I was told to use .asp I have changed my page to a .asp and now have no clue where to go from here. In searching this site I have found this code -- [CODE] <script> function Filter(table){ var f=document.getElementById('f').value.toUpperCase(); for (a=1; a<table.rows.length; a++) { if (table.rows[a].cells[0].innerHTML.toUpperCase().indexOf(f)!=0) table.rows[a].style.display="none"; else table.rows[a].style.display="table-row"; } } </script> <table id="states" border=1> <tr><td>State</td><td>Code</td></tr> <tr><td>ALABAMA</td><td>AL</td></tr> <tr><td>ALASKA</td><td>AK</td></tr> <tr><td>MAINE</td><td>ME</td></tr> <tr><td>MARSHALL ISLANDS</td><td>MH</td></tr> </table> <form> <input type="text" name="f" id="f"> <input type="button" value="Filter" onclick="Filter(document.getElementById('states'));"> </form> [CODE] But it gives me a filter that I have to type in. I am looking for drop downs that allow me to filter so say you select drop down for fields that contain "A" then another drop down for a field that contains "B" so the results show fields that contain "A" and "B" And PS I am semi new to the code world so please don't assume I know some stuff dumb it down a little HAHA Hello! I am trying to validate name, email and comment inputs! I did the following! Code: $("#CmtSub").click(function(event){
var email = $("#CmtEmail").val();
var filter = /'^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$'/;
if( $("#CmtName").val() == "" ){
$("#CmtName").css({'background-position': '0 -45px'}, 0);
return event.preventDefault(event);
}else{
$("#CmtName").css({'background-position': '0 -90px'}, 0);
}
if(filter.test(email) && email != "") {
$("#CmtName").css({'background-position': '0 -45px'}, 0);
return event.preventDefault(event);
}else{
$("#CmtName").css({'background-position': '0 -90px'}, 0);
}
//just to debug
console.log("the value and the email ("+ email +")");
if( $("#CmtTxtArea").val() == "" ){
$("#CmtTxtArea").css({'border': 'red 1px solid'}, 0);
return event.preventDefault(event);
}else{
$("#CmtTxtArea").css({'border': 'white 1px solid'}, 0);
}
// then proceed !
});
this code here isn't working! any help please ?: Code: if(filter.test(email) && email != "") {
//passme = false;
$("#CmtName").css({'background-position': '0 -45px'}, 0);
return event.preventDefault(event);
}else{
//passme = true;
$("#CmtName").css({'background-position': '0 -90px'}, 0);
}
help is greatly appreciated ! Fixed! The thing I have started to realize is if a downloaded tutorial on a specific website function isn't working out so great...then just look for a better one :) This filtering image setup works PERFECTLY: http://www.htmldrive.net/items/show/...ages-Portfolio Original Message: Man I have officially run out of ideas here. I grabbed the code from this tutorial: Demo I tailored it to accommodate larger images in this portfolio page. At first glance it appears to work, but it actually is messed up and I CANT figure out why...especially since there is such little code. :confused: Hey all, I have a script below, which I hope will generate query strings passed back to server using ajax depending on whether user selects an option from dropdown or enters content in a text field. Nevertheless, the issue I'm having at the moment is the firebug error: missing : after property id drop-filter: {\n It's telling me something is syntactically wrong with the drop-filter constructed in object notation below. But to me it looks correct: Code: <script>
(function($){
var listview = $('#listview');
var lists = (function(){
var criteria = {
drop-filter: {
insert: function(value){
if(value)
return handleFilter("filter", value);
},
msg: "Filtering..."
},
search-filter: {
insert: function(value){
if(value)
return handleFilter("search", value);
},
msg: "Searching..."
}
}
var handleFilter = function(key,value){
return {key: value};
}
return {
create: function(component){
var component = component.href.substring(component.href.lastIndexOf('#') + 1);
return component;
},
setDefaults: function(component){
var parameter = {};
switch(component){
case "sites":
parameter = {
'order': 'site_num',
'per_page': '20',
'url': '/sites'
}
}
return parameter;
},
getCriteria: function(criterion){
return criteria[criterion];
},
addCriteria: function(criterion, method){
criteria[criterion] = method;
}
}
})();
var Form = function(form){
var fields = [];
$(form[0].elements).each(function(){
var field = $(this);
if(typeof field.attr('alter-data') !== 'undefined') fields.push(new Field(field));
})
}
Form.prototype = {
initiate: function(){
for(field in this.fields){
this.fields[field].calculate(); // THIS DOESN"T MAKE SENSE WHY WE CALL CALCULATE HERE WHEN WE DIDN"T EVEN CALL ATTACH YET AND HENCE DONT KNOW WHAT TYPE OF EVENT TO RESPOND TO
}
},
isCalculable: function(){
for(field in this.fields){
if(!this.fields[field].alterData){
return false;
}
}
return true;
}
}
var Field = function(field){
this.field = field;
this.alterData = false;
this.attach("change");
this.attach("keyup");
}
Field.prototype = {
attach: function(event){
var obj = this;
if(event == "change"){
obj.field.bind("change", function(){
return obj.calculate();
})
}
if(event == "keyup"){
obj.field.bind("keyup", function(e){
return obj.calculate();
})
}
},
calculate: function(){
var obj = this,
field = obj.field,
msgClass = "msgClass",
msgList = $(document.createElement("ul")).addClass("msgClass"),
types = field.attr("alter-data").split(" "),
container = field.parent(),
messages = [];
field.next(".msgClass").remove();
for(var type in types){
var criterion = lists.getCriteria(types[type]);
if(field.val()){
var result = criterion.insert(field.val());
container.addClass("waitingMsg");
messages.push(criterion.msg);
obj.alterData = true;
initializeTable(result);
}
else {
return false;
obj.alterData = false;
}
}
if(messages.length){
for(msg in messages){
msgList.append("<li>" + messages[msg] + "</li");
}
}
else{
msgList.remove();
}
}
}
$('#dashboard a').click(function(){
var currentComponent = lists.create(this);
var defaults = lists.setDefaults(currentComponent);
initializeTable(defaults);
});
var initializeTable = function(custom){
var defaults = {}
var custom = custom || {};
var query_string = $.extend(defaults, custom);
var params = [];
$.each(query_string, function(key,value){
params += key + ': ' + value;
})
$.ajax({
type: 'GET',
url: '/' + url,
data: params,
dataType: 'html',
error: function(){},
beforeSend: function(){},
complete: function() {},
success: function(response) {
listview.html(response);
}
})
}
$.extend($.fn, {
calculation: function(){
var formReady = new Form($(this));
if(formReady.isCalculable) {
formReady.initiate();
}
})
var form = $(listview + ' fieldset');
form.calculation();
})(jQuery)
</script>
Thanks for response. This is my first posting to this forum. I have list of about a thousand applications for which various outsourcing companies are supporting at different levels. I want to use the attached code to filter. For example, if I type "SOX", every row with "SOX" appears. The filter works well but when I type "S" and the information appears on row, the height of the row changes. When I type "O" it changes more. What must I change to keep the height of the rows consistent. Thank you <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Filter applications</title> </head> <body> <table style="width: 646px; height: 926px;" id="content"> <tbody> <tr> <td id="main"> <div class="node"> <div class="content"><img style="width: 636px; height: 183px;" alt="" src="../Common%20Graphics/header.png" /><br /> <big><span style="font-family: Arial;">Governing outsourcing companies servicing applications</span></big><br /> <br /> <script type="text/javascript"> function filter (phrase, _id){ var words = phrase.value.toLowerCase().split(" "); var table = document.getElementById(_id); var ele; for (var r = 1; r < table.rows.length; r++){ ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,""); var displayStyle = 'none'; for (var i = 0; i < words.length; i++) { if (ele.toLowerCase().indexOf(words[i])>=0) displayStyle = ''; else { displayStyle = 'none'; break; } } table.rows[r].style.display = displayStyle; } } </script> <form><b style="font-family: Arial;">Filter:</b> <input name="filt" onkeyup="filter(this, 'sf')" type="text" /></form> <br /> <hr style="width: 100%; height: 2px;" /> <table id="sf" style="width: 636px; height: 994px;" border="0" cellpadding="2" cellspacing="1"> <tbody> <tr> <td style="font-family: Arial; background-color: rgb(255, 255, 153);"><font color="">Application</font></td> <td style="font-family: Arial; background-color: rgb(255, 255, 153);"><font color="">Outsourcing company</font></td> <td style="font-family: Arial; background-color: rgb(255, 255, 153);"><font color="">Support</font></td> </tr> <tr> <td style="font-family: Arial;"><a href="HTML/index.html" target="_blank">432 Reports Prod</a></td> <td style="font-family: Arial;">InfoSys </td> <td style="font-family: Arial;">Gold</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">Accomodation Reservation System</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Silver</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial; height: 30px;">ACL - Audit Command Language</td> <td style="width: 223px; font-family: Arial;">Accenture </td> <td style="width: 133px; font-family: Arial;">Gold SOX</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">Actions Tracker</td> <td style="width: 223px; font-family: Arial;">Tata </td> <td style="width: 133px; font-family: Arial;">Gold SOX Critical</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">Air Quality Public Website and Dispersion Forecast</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Silver SOX</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">Airport Management System</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Bronze</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">All Mines Grade Control</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Gold</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">ALLDATA</td> <td style="width: 223px; font-family: Arial;">Tata</td> <td style="width: 133px; font-family: Arial;">Gold Critical</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">AppAdmin</td> <td style="width: 223px; font-family: Arial;">Accenture</td> <td style="width: 133px; font-family: Arial;">Gold SOX</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">APPSRS</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Silver SOX</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">ArcGIS</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Silver</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">ASGLIB</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Gold Critical</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">Asset Integrity</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Bronze</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">Asset Integrity - FLPS QA Survey</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Silver</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">Asset Management Framework (FLPS)</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Gold</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">Auto Cad (MB)</td> <td style="width: 223px; font-family: Arial;">InfoSys</td> <td style="width: 133px; font-family: Arial;">Gold SOX</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">Autocad</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Gold SOX Critical</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">AutoMod</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Silver</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">AutoSkills</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Bronze</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">B Cleaner Circuit Control Summary (BCLDIS)</td> <td style="width: 223px; font-family: Arial;">InfoSys </td> <td style="width: 133px; font-family: Arial;">Silver SOX</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">BACCESS (Acton)</td> <td style="width: 223px; font-family: Arial;">Tata </td> <td style="width: 133px; font-family: Arial;">Bronze</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">BACSESS-IP</td> <td style="width: 223px; font-family: Arial;">Tata</td> <td style="width: 133px; font-family: Arial;">Gold</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">Bank deposit</td> <td style="width: 223px; font-family: Arial;">Accenture </td> <td style="width: 133px; font-family: Arial;">Gold SOX Critical</td> </tr> <tr bgcolor="#eaecef"> <td style="color: black; width: 256px; font-family: Arial;">Barometer Display</td> <td style="width: 223px; font-family: Arial;">Accenture </td> <td style="width: 133px; font-family: Arial;">Gold Critical</td> </tr> <tr bgcolor="#ffffff"> <td style="color: black; width: 256px; font-family: Arial;">Batch & Print Pro</td> <td style="width: 223px; font-family: Arial;">Tata </td> <td style="width: 133px; font-family: Arial;">Silver</td> </tr> </tbody> </table> </div> <br /> </div> </td> </tr> </tbody> </table> </body> </html> Hi, I have an image slider that uses the: jquery.min.js file this basically slides up and down smoothly when clicked. I then added a Jquery accordian menu. When I put the 2 together the menu doesn't work it just stays fully expanded. As soon as I remove jquery.min.js it works fine but then the slider doesn't. What could this be please? Thanks alot Joe Hey there everyone. I'm a bit of a newb with javascript and php so apologies if this question is a bit simple, although I can't get my head round how to go about doing it. I have a search page where a user can type in a search box, or they can use an alphabetical list to search for the record they're looking for. Eg they click 'a' and all the records beginning with the letter 'a' appear. I'd also like to have it so that each record has a number of tags, and I'd then like to be able to filter records according to which tags have been selected - preferably using checkboxes. For example, perhaps the tags would be colours and the records represented shoes. There'd be checkboxes for blue, yellow, black, brown and so on. At first all colours would be shown, but if the user clicks on brown the all but the brown shoes dissappear. like I say, I'm new to learning php so please be gentle. Also I'm using Cakephp so if there's anyway to make it easier using Cake then I'd love to know. thanks Using Javascript / jQuery, I'm trying to produce a series of dropdowns ("<select>") that have their options filtered as the user selects from them. For example: DROPDOWNS Field 1: - value_1 - value_2 Field 2: - value_3 Field 3: - value_4 - value_5 COMBINATIONS - value_1, value_3, value_5 - value_1, value_3, value_4 - value_2, value_3, value_5 When a user selects Field 3 - value_4, the unavailable options will be removed - ie, Field 1 - value_2 (there is no combination that allows value_2 and value_4 to be selected together). I have an array of the allowed combinations like this (although I can tweak the structure if necessary): Code: var combinations = [["value_1", "value_3", "value_5"], ["value_1", "value_3", "value_4"], ["value_2", "value_3", "value_5"]]; When a option is changed all the current entries are removed and only the allowed combinations added back in. Where I'm struggling is with how to find which combinations are acceptable based on what has already been selected. I'd really appreciate any pointers or just a fresh perspective on this because I seem to be going round in circles! Thanks! I am making an webpage where you get two random photos and you click using the arrow keys which one you like best and that one stays and goes on the versus the next random photo. I got it so far when you start the page it sets two random pictures but i dont know how to do key inputs on html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Which Is better?</title>
<h1 align = center>Which is better?</h1>
<script language="JavaScript">
var theImages = new Array()
var thePictures = new Array()
thePictures[1] = 'untitled-1.jpg'
thePictures[2] = 'untitled-2.jpg'
thePictures[3] = 'untitled-3.jpg'
thePictures[4] = 'untitled-4.jpg'
thePictures[5] = 'untitled-5.jpg'
thePictures[6] = 'untitled-6.jpg'
thePictures[7] = 'untitled-7.jpg'
thePictures[8] = 'untitled-8.jpg'
thePictures[9] = 'untitled-9.jpg'
thePictures[10] = 'untitled-10.jpg'
thePictures[11] = 'untitled-11.jpg'
thePictures[12] = 'untitled-12.jpg'
thePictures[13] = 'untitled-13.jpg'
thePictures[14] = 'untitled-14.jpg'
thePictures[15] = 'untitled-15.jpg'
thePictures[16] = 'untitled-16.jpg'
thePictures[17] = 'untitled-17.jpg'
thePictures[18] = 'untitled-18.jpg'
thePictures[19] = 'untitled-19.jpg'
thePictures[20] = 'untitled-20.jpg'
thePictures[21] = 'untitled-21.jpg'
thePictures[22] = 'untitled-22.jpg'
thePictures[23] = 'untitled-23.jpg'
thePictures[24] = 'untitled-24.jpg'
thePictures[25] = 'untitled-25.jpg'
thePictures[26] = 'untitled-26.jpg'
thePictures[27] = 'untitled-27.jpg'
thePictures[28] = 'untitled-28.jpg'
thePictures[29] = 'untitled-29.jpg'
thePictures[30] = 'untitled-30.jpg'
thePictures[31] = 'untitled-31.jpg'
thePictures[32] = 'untitled-32.jpg'
thePictures[33] = 'untitled-33.jpg'
thePictures[34] = 'untitled-34.jpg'
thePictures[35] = 'untitled-35.jpg'
thePictures[36] = 'untitled-36.jpg'
thePictures[37] = 'untitled-37.jpg'
thePictures[38] = 'untitled-38.jpg'
thePictures[39] = 'untitled-39.jpg'
thePictures[40] = 'untitled-40.jpg'
thePictures[41] = 'untitled-41.jpg'
thePictures[42] = 'untitled-42.jpg'
thePictures[43] = 'untitled-43.jpg'
thePictures[44] = 'untitled-44.jpg'
thePictures[45] = 'untitled-45.jpg'
thePictures[46] = 'untitled-46.jpg'
thePictures[47] = 'untitled-47.jpg'
thePictures[48] = 'untitled-48.jpg'
thePictures[49] = 'untitled-49.jpg'
thePictures[50] = 'untitled-50.jpg'
thePictures[51] = 'untitled-51.jpg'
thePictures[52] = 'untitled-52.jpg'
thePictures[53] = 'untitled-53.jpg'
thePictures[54] = 'untitled-54.jpg'
thePictures[55] = 'untitled-55.jpg'
thePictures[56] = 'untitled-56.jpg'
thePictures[57] = 'untitled-57.jpg'
thePictures[58] = 'untitled-58.jpg'
thePictures[59] = 'untitled-59.jpg'
thePictures[60] = 'untitled-60.jpg'
thePictures[61] = 'untitled-61.jpg'
thePictures[62] = 'untitled-62.jpg'
thePictures[63] = 'untitled-63.jpg'
thePictures[64] = 'untitled-64.jpg'
thePictures[65] = 'untitled-65.jpg'
thePictures[66] = 'untitled-66.jpg'
thePictures[67] = 'untitled-67jpg'
thePictures[68] = 'untitled-68.jpg'
thePictures[69] = 'untitled-69.jpg'
thePictures[70] = 'untitled-70.jpg'
thePictures[71] = 'untitled-71.jpg'
thePictures[72] = 'untitled-72.jpg'
thePictures[73] = 'untitled-73.jpg'
thePictures[74] = 'untitled-74.jpg'
thePictures[75] = 'untitled-1.jpg'
thePictures[76] = 'untitled-2.jpg'
thePictures[77] = 'untitled-77.jpg'
thePictures[78] = 'untitled-78.jpg'
thePictures[79] = 'untitled-79.jpg'
thePictures[80] = 'untitled-80.jpg'
thePictures[81] = 'untitled-81.jpg'
thePictures[82] = 'untitled-82.jpg'
thePictures[83] = 'untitled-83.jpg'
thePictures[84] = 'untitled-84.jpg'
thePictures[85] = 'untitled-85.jpg'
thePictures[86] = 'untitled-86.jpg'
thePictures[87] = 'untitled-87.jpg'
thePictures[88] = 'untitled-88.jpg'
thePictures[89] = 'untitled-89.jpg'
thePictures[90] = 'untitled-90.jpg'
thePictures[91] = 'untitled-91.jpg'
thePictures[92] = 'untitled-92.jpg'
thePictures[93] = 'untitled-93.jpg'
thePictures[94] = 'untitled-94.jpg'
thePictures[95] = 'untitled-95.jpg'
thePictures[96] = 'untitled-96.jpg'
thePictures[97] = 'untitled-97.jpg'
thePictures[98] = 'untitled-98.jpg'
thePictures[99] = 'untitled-99.jpg'
thePictures[100] = 'untitled-100.jpg'
thePictures[101] = 'untitled-101.jpg'
thePictures[102] = 'untitled-102.jpg'
thePictures[103] = 'untitled-103.jpg'
thePictures[104] = 'untitled-104.jpg'
thePictures[105] = 'untitled-105.jpg'
thePictures[106] = 'untitled-106.jpg'
thePictures[107] = 'untitled-107.jpg'
thePictures[108] = 'untitled-108.jpg'
thePictures[109] = 'untitled-109.jpg'
thePictures[110] = 'untitled-110.jpg'
thePictures[111] = 'untitled-111.jpg'
thePictures[112] = 'untitled-112.jpg'
thePictures[113] = 'untitled-113.jpg'
thePictures[114] = 'untitled-114.jpg'
thePictures[115] = 'untitled-115.jpg'
thePictures[116] = 'untitled-116.jpg'
thePictures[117] = 'untitled-117.jpg'
thePictures[118] = 'untitled-118.jpg'
thePictures[119] = 'untitled-119.jpg'
thePictures[120] = 'untitled-120.jpg'
thePictures[121] = 'untitled-121.jpg'
thePictures[122] = 'untitled-122.jpg'
thePictures[123] = 'untitled-123.jpg'
thePictures[124] = 'untitled-124.jpg'
thePictures[125] = 'untitled-125.jpg'
thePictures[126] = 'untitled-126.jpg'
thePictures[127] = 'untitled-127.jpg'
thePictures[128] = 'untitled-128.jpg'
thePictures[129] = 'untitled-129.jpg'
thePictures[130] = 'untitled-130.jpg'
thePictures[131] = 'untitled-131.jpg'
thePictures[132] = 'untitled-132.jpg'
thePictures[133] = 'untitled-133.jpg'
thePictures[134] = 'untitled-134.jpg'
thePictures[135] = 'untitled-135.jpg'
thePictures[136] = 'untitled-136.jpg'
thePictures[137] = 'untitled-137.jpg'
thePictures[138] = 'untitled-138.jpg'
thePictures[139] = 'untitled-139.jpg'
thePictures[140] = 'untitled-140.jpg'
thePictures[141] = 'untitled-141.jpg'
thePictures[142] = 'untitled-142.jpg'
thePictures[143] = 'untitled-143.jpg'
thePictures[144] = 'untitled-144.jpg'
thePictures[145] = 'untitled-145.jpg'
thePictures[146] = 'untitled-146.jpg'
thePictures[147] = 'untitled-147.jpg'
thePictures[148] = 'untitled-148.jpg'
thePictures[149] = 'untitled-149.jpg'
thePictures[150] = 'untitled-150.jpg'
theImages[1] = 'untitled-1.jpg'
theImages[2] = 'untitled-2.jpg'
theImages[3] = 'untitled-3.jpg'
theImages[4] = 'untitled-4.jpg'
theImages[5] = 'untitled-5.jpg'
theImages[6] = 'untitled-6.jpg'
theImages[7] = 'untitled-7.jpg'
theImages[8] = 'untitled-8.jpg'
theImages[9] = 'untitled-9.jpg'
theImages[10] = 'untitled-10.jpg'
theImages[11] = 'untitled-11.jpg'
theImages[12] = 'untitled-12.jpg'
theImages[13] = 'untitled-13.jpg'
theImages[14] = 'untitled-14.jpg'
theImages[15] = 'untitled-15.jpg'
theImages[16] = 'untitled-16.jpg'
theImages[17] = 'untitled-17.jpg'
theImages[18] = 'untitled-18.jpg'
theImages[19] = 'untitled-19.jpg'
theImages[20] = 'untitled-20.jpg'
theImages[21] = 'untitled-21.jpg'
theImages[22] = 'untitled-22.jpg'
theImages[23] = 'untitled-23.jpg'
theImages[24] = 'untitled-24.jpg'
theImages[25] = 'untitled-25.jpg'
theImages[26] = 'untitled-26.jpg'
theImages[27] = 'untitled-27.jpg'
theImages[28] = 'untitled-28.jpg'
theImages[29] = 'untitled-29.jpg'
theImages[30] = 'untitled-30.jpg'
theImages[31] = 'untitled-31.jpg'
theImages[32] = 'untitled-32.jpg'
theImages[33] = 'untitled-33.jpg'
theImages[34] = 'untitled-34.jpg'
theImages[35] = 'untitled-35.jpg'
theImages[36] = 'untitled-36.jpg'
theImages[37] = 'untitled-37.jpg'
theImages[38] = 'untitled-38.jpg'
theImages[39] = 'untitled-39.jpg'
theImages[40] = 'untitled-40.jpg'
theImages[41] = 'untitled-41.jpg'
theImages[42] = 'untitled-42.jpg'
theImages[43] = 'untitled-43.jpg'
theImages[44] = 'untitled-44.jpg'
theImages[45] = 'untitled-45.jpg'
theImages[46] = 'untitled-46.jpg'
theImages[47] = 'untitled-47.jpg'
theImages[48] = 'untitled-48.jpg'
theImages[49] = 'untitled-49.jpg'
theImages[50] = 'untitled-50.jpg'
theImages[51] = 'untitled-51.jpg'
theImages[52] = 'untitled-52.jpg'
theImages[53] = 'untitled-53.jpg'
theImages[54] = 'untitled-54.jpg'
theImages[55] = 'untitled-55.jpg'
theImages[56] = 'untitled-56.jpg'
theImages[57] = 'untitled-57.jpg'
theImages[58] = 'untitled-58.jpg'
theImages[59] = 'untitled-59.jpg'
theImages[60] = 'untitled-60.jpg'
theImages[61] = 'untitled-61.jpg'
theImages[62] = 'untitled-62.jpg'
theImages[63] = 'untitled-63.jpg'
theImages[64] = 'untitled-64.jpg'
theImages[65] = 'untitled-65.jpg'
theImages[66] = 'untitled-66.jpg'
theImages[67] = 'untitled-67.jpg'
theImages[68] = 'untitled-68.jpg'
theImages[69] = 'untitled-69.jpg'
theImages[70] = 'untitled-70.jpg'
theImages[71] = 'untitled-71.jpg'
theImages[72] = 'untitled-72.jpg'
theImages[73] = 'untitled-73.jpg'
theImages[74] = 'untitled-74.jpg'
theImages[75] = 'untitled-75.jpg'
theImages[76] = 'untitled-76.jpg'
theImages[77] = 'untitled-77.jpg'
theImages[78] = 'untitled-78.jpg'
theImages[79] = 'untitled-79.jpg'
theImages[80] = 'untitled-80.jpg'
theImages[81] = 'untitled-81.jpg'
theImages[82] = 'untitled-82.jpg'
theImages[83] = 'untitled-83.jpg'
theImages[84] = 'untitled-84.jpg'
theImages[85] = 'untitled-85.jpg'
theImages[86] = 'untitled-86.jpg'
theImages[87] = 'untitled-87.jpg'
theImages[88] = 'untitled-88.jpg'
theImages[89] = 'untitled-89.jpg'
theImages[90] = 'untitled-90.jpg'
theImages[91] = 'untitled-91.jpg'
theImages[92] = 'untitled-92.jpg'
theImages[93] = 'untitled-93.jpg'
theImages[94] = 'untitled-94.jpg'
theImages[95] = 'untitled-95.jpg'
theImages[96] = 'untitled-96.jpg'
theImages[97] = 'untitled-97.jpg'
theImages[98] = 'untitled-98.jpg'
theImages[99] = 'untitled-99.jpg'
theImages[100] = 'untitled-100.jpg'
theImages[101] = 'untitled-101.jpg'
theImages[102] = 'untitled-102.jpg'
theImages[103] = 'untitled-103.jpg'
theImages[104] = 'untitled-104.jpg'
theImages[105] = 'untitled-105.jpg'
theImages[106] = 'untitled-106.jpg'
theImages[107] = 'untitled-107.jpg'
theImages[108] = 'untitled-108.jpg'
theImages[109] = 'untitled-109.jpg'
theImages[110] = 'untitled-110.jpg'
theImages[111] = 'untitled-111.jpg'
theImages[112] = 'untitled-112.jpg'
theImages[113] = 'untitled-113.jpg'
theImages[114] = 'untitled-114.jpg'
theImages[115] = 'untitled-115.jpg'
theImages[116] = 'untitled-116.jpg'
theImages[117] = 'untitled-117.jpg'
theImages[118] = 'untitled-118.jpg'
theImages[119] = 'untitled-119.jpg'
theImages[120] = 'untitled-120.jpg'
theImages[121] = 'untitled-121.jpg'
theImages[122] = 'untitled-122.jpg'
theImages[123] = 'untitled-123.jpg'
theImages[124] = 'untitled-124.jpg'
theImages[125] = 'untitled-125.jpg'
theImages[126] = 'untitled-126.jpg'
theImages[127] = 'untitled-127.jpg'
theImages[128] = 'untitled-128.jpg'
theImages[129] = 'untitled-129.jpg'
theImages[130] = 'untitled-130.jpg'
theImages[131] = 'untitled-131.jpg'
theImages[132] = 'untitled-132.jpg'
theImages[133] = 'untitled-133.jpg'
theImages[134] = 'untitled-134.jpg'
theImages[135] = 'untitled-135.jpg'
theImages[136] = 'untitled-136.jpg'
theImages[137] = 'untitled-137.jpg'
theImages[138] = 'untitled-138.jpg'
theImages[139] = 'untitled-139.jpg'
theImages[140] = 'untitled-140.jpg'
theImages[141] = 'untitled-141.jpg'
theImages[142] = 'untitled-142.jpg'
theImages[143] = 'untitled-143.jpg'
theImages[144] = 'untitled-144.jpg'
theImages[145] = 'untitled-145.jpg'
theImages[146] = 'untitled-146.jpg'
theImages[147] = 'untitled-147.jpg'
theImages[148] = 'untitled-148.jpg'
theImages[149] = 'untitled-149.jpg'
theImages[150] = 'untitled-150.jpg'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
var j = 0
var p = thePictures.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = thePictures[i]
}
var whichPicture = Math.round(Math.random()*(p-1));
function showPicture(){
document.write('<img src="'+thePictures[whichPicture]+'"align = right >');
}
// End -->
</script>
</head>
<body>
<script language="JavaScript">
showImage();
</script>
<script language="JavaScript">
showPicture();
</script>
<h4 align = center> Click Left or Right arrow key to select which one is better. </h4>
</body>
</html>
Two things: I'm making a website for my online portfolio for Uni... 1. I want to make a prev|next (preferably with the numbers after too if possible) to flick through my work so I don't have to scroll around the page. 2. I want to create a slide down menu that stays open when an option is selected. Hope I've explained it well! Thanks in advance |
|||||||