|
JavaScript - Filter Based On Multiple Drop Menus To Filter & Sort Data From Php Mysql Query
I 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 Similar TutorialsHey 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> Hey all, I'm in process of writing my own script (I don't want to use any jquery plugins) to render a table and allow for filtering/searching. So when user clicks on link, by default there will be parameters passed in query string as you can see in the setDefaults private method below. However, I'm stuck trying to figure out the best way to append values selected from filter dropdown to the query string. I know it will involve something along the lines of $("select").change(function(){var option = $(this).val()}). But I am having difficulty figuring out how to incorporate it with this. I would like to make use of the below buildFilter function somehow: Code: (function($){
var listview = $('#listview');
var lists = (function(){
var criteria = {
drop_filter: {
check: function(value){
if(value)
return
},
msg: "Loading..."
},
search_filter: {
check: function(value){
if(value)
return
},
msg: "Loading..."
}
}
var handleFilter = function(){
}
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;
},
buildFilter: function(){
if(event == "change")
return criteria.drop_filter();
}
}
})();
$('#dashboard a').click(function(){
var currentComponent = lists.create(this);
var custom = lists.setDefaults(currentComponent);
initializeTable(custom);
});
var initializeTable = function(custom){
var defaults = {};
var query_string = $.extend(defaults, custom);
var params = [];
$.each(query_string, function(key,value){
params += key + ': ' + value;
})
alert(params);
}
})(jQuery)
Thanks for any response. Ok will update
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: 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 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. First off, I'd like to say that I do not know much javascript. I am building a rather intensive website for tutorial purposes, and so far it has required me to become quite familiar with html5, css, php, and mysql. However, I've avoided javascript like the plague due to how different it seems from the rest. Lets just say, I'm confused. I've scoured the net looking for a similar tutorial on how to create a pop-up window onclick for a link. This is what I currently have it doing: Firstly, I query and display the DB, referencing images based on an incremental variable. I really want to make it all automatic...in the sense, that when I update the database with a new "Structure" it will automatically apply itself to the page without me having to edit html/css/js/php/etc. It all seems to be working fine, except when I click on the second listing. It refers to the same div (Town Center), because, I assume, the divs are identically labeled, and it refers to the first. Here is my code: This is my Callstructures.php file. Code: <?php
$query = "SELECT str_name, str_imageloc, str_infoloc FROM structures";
$result = mysql_query($query) or die ("Error in query: $query. ".mysql_error());
$i = 0;
if (mysql_num_rows($result) > 0) {
while(list($str_name, $str_imageloc, $str_infoloc) = mysql_fetch_row($result)) {
echo "<li>";
echo "<a href='#' onClick='javascript: loadPopup()';>";
echo "<img src='$str_imageloc' title='$str_name' longdesc='$str_infoloc' alt='stralt text' class='image$i'>";
echo "</a>";
echo "</li>";
echo "<div id='popupContact'>";
include ($str_infoloc);
echo "</div>";
$i++;
}
}
?>
This is my main page: Structures.php Code: <body> <div id =allstr> <ul> <?php include 'gamephp/callstructures.php'; ?> </ul> <div id="backgroundPopup"></div> </div> </body> </div> </html> And here is the JavaScript I am using, popup.js: Code: /***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
centerPopup();
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
And the CSS for the popup: Code: /* pop up css */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}
Should I keep this code? Is there anyway to make it work? My thought process is to change "callstructures" to include a variable ($i is already there) that creates a bunch of unique div ids Code: echo "<div id='popupContact$i'>"; Then in the JS, somehow alter it so it recognizes the change. If not, are there any tips, or possible links to tutorials and info on how I can figure this out. With much appreciation, Thanks! 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;
}
}
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! Hi guys. I'm a mediocre website designer i know html , at JS i'm to noob to actualy make something of my own just Edit, i'm still learning and atm i'm working on a web project and I'm struggling to find a way to Filter email addresses to redirect my New Members to their e-mail provider, for example if they would register newmmember@hotmail.com to be forwarded to www.hotmail.com so they would login and activate their account, or if they enter @yahoo.com to be forwarded there . Can you please point out a few things i'm eager to learn how to Forward User to email provider after he creates his account . Or how can i forward email to URL inside my webpage , this could help me with another ideea i have, again this would have to be filtered @yahoo.com , @hotmail.com etc , to be forwarded to a local URL inside the site depending on what Email Provider they enter . I know this is a lot to ask but if you could point me out on the right path i would really appreciate all your help . Cheers
Hi, i am building a website form which I would like the user to select a product of interest. Some products are three tiered and some are two tiered. 1. Example of three tier (3 dropdowns required only): Scooters (dropdown 1) Three Wheel Scooters (dropdown 2) Delux 503S Bird Scooter (dropdown 3) 2. Example of two tier (2 dropdowns required only): Standing Bikes (dropdown 1) Children 300 Series (dropdown 2) If the user wants to submit their interest for one of the products, I need to have at most 3 dropdown menus. So in Example 1, I would have 3 dropdowns in my form. Dropdown 1: Scooters Dropdown 2: Three Wheel Scooters Dropdown 3: Delux 503S Bird Scooter In Example 2, I would only need to use the first 2 dropdown menus. (Obviously the first dropdown would contain 'Scooters' and 'Standing Bikes' in the menu list) The below code is perfect except, I would like to alter the code so that the second and third dropdowns are hidden until a selection from the first drop down is made. Once for example, 'Standing Bikes' is selected from the first dropdown menu, the second dropdown menu appears and the third remains hidden due to the fact that it is not required. If I selected Scooters from the first dropdown menu, the second dropdown would appear listing all items associated with this and at this point the third dropdown menu is hidden. If i select 'Three Wheel Scooter' from the second dropdown the third dropdown menu now appears listing all Three wheel Scooters such as 'Delux 503S Bird Scooter'. I hope this makes sense. Let me know if you require clarrification. Here is the code: Code: <script language="JavaScript" type="text/javascript">
<!--
/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/
// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected
// first combo box
data_1 = new Option("1", "$");
data_2 = new Option("2", "$$");
// second combo box
data_1_1 = new Option("11", "-");
data_1_2 = new Option("12", "-");
data_2_1 = new Option("21", "--");
data_2_2 = new Option("22", "--");
data_2_3 = new Option("23", "--");
data_2_4 = new Option("24", "--");
data_2_5 = new Option("25", "--");
// third combo box
data_1_1_1 = new Option("111", "*");
data_1_1_2 = new Option("112", "*");
data_1_1_3 = new Option("113", "*");
data_1_2_1 = new Option("121", "*");
data_1_2_2 = new Option("122", "*");
data_1_2_3 = new Option("123", "*");
data_1_2_4 = new Option("124", "*");
data_2_1_1 = new Option("211", "**");
data_2_1_2 = new Option("212", "**");
data_2_2_1 = new Option("221", "**");
data_2_2_2 = new Option("222", "**");
data_2_3_1 = new Option("231", "***");
data_2_3_2 = new Option("232", "***");
// fourth combo box
data_2_2_1_1 = new Option("2211","%")
data_2_2_1_2 = new Option("2212","%%")
// other parameters
displaywhenempty=""
valuewhenempty=-1
displaywhennotempty="-select-"
valuewhennotempty=0
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1
if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}
//-->
</script>
<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="value1">-select-</option>
<option value="value2">1</option>
<option value="value3">2</option>
</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value="value1"> </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
<BR><BR>
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
</form>
<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>
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. |
|||||||