JavaScript - Interactive Category Picker/selector?
I would appreciate if anyone could guide my point by point on how one could create a category picker just like gumtree (preferably in jquery):
http://www.gumtree.com/add_posting.html?location_id=uk Specifically the points How clicking on a category opens another to the right How clicking on a category appends a variable like "#cat-10201" into the url (and vice versa) How css lists are used instead of form select menus (making it easily styled) How clicking on a deep subcategory automatically preselects all parent categories I'm not looking for anyone to actually code it for me (that would be outrageous ) but tips on how it's actually structured and steps on how it can be coded would be highly appreciated. I can do PHP and I know CSS also. I don't know plain javascript but I'm sure I can do most of it in jQuery Similar TutorialsHi all, I was asked by a friend if I could help with a school kids website. The general website stuff I am fine with however they are looking for some interactive content. Stuff they seem interested in are e.g.quizes, like 10 questions and after you finish you see how many you got right and the correct answers perhaps. Are there Javascripts available that will do this? Any ideas on recommendations or any other scripts/content that could be good on a kids site is of interest. Thanks Hi everyone, I'm pretty new to JS and I was wondering if anyone could put me on the right track to developing a slideshow which you can flip between the images manually or let it run through itself (and preferably contain links to other pages). Basically, like the one at the top of the Valve website: http://www.valvesoftware.com/index.html Thanks all Hi there, for a site I'm working on I needed an interactive crossfading slideshow (one that doesn't just run automatically, but with 'previous' and 'next' links) and noticed that all the solutions I stumbled upon fall into one of two categories: 1.) the ones that in some way or other break if the user clicks too fast through the images (i.e. fast enough that the previous crossfade is not completely finished when triggering the next one) 2.) the ones that block any user interactions until the last crossfade is finished Obviously neither is very useful, so I wrote my own. I'm just wondering now, does anyone of you know of any good reusable crossfading slideshow that not only works as it should, but does so without blocking user interaction while fading? As a user, I don't have the patience for those time wasters any more. If there's nothing good out there, I'm tempted to make it a jQuery plugin, but I wouldn't much like to find out later that there has been a perfectly good plugin out there all along. So, if you know of one or have any other helpful suggestions, please tell me. Can anyone suggest a non-Flash USA map that allows for popup? I've only found one online.
I need to create an interactive map similar to the one on this site: http://viewers-guide.hbo.com/game-of-thrones/#!/map/ It is a map of a fictional area ( a real area but there are fictional buildings and characters on it) so I don't think google maps plugins are suitable. I don't want to reinvent the wheel, so if anybody has a good suggestion of a good jquery/javascript solution for interactive maps, please refer me to the relevant information. In other words, I need a map where by clicking the objects on the map, a popup window pops up with additional information about the 'scene' or a 'character'. In addition, the map will be dark from the beginning and more and more sites and characters will be revealed on it every week. Thanks for any tips! I'm looking for a good javascript time & date popup other than this one. It conflicts with Joomlas javascript code and causes problems in the back-end. Other than that, it's perfect. Does anyone know of any other free calendar popups that let you pick both date and time? Hi, I'm new to javascripts. I have a perl script that takes 2 sets of dates as input: http://myhost/perlscript.pl/?startda...ate=yyyy-mm-dd I would like to have a date picker for the 2 arguments and pass them as yyyy-mm-dd format . thanks, Sirjune Hi all , first let me just say I know incredibly little about JavaScript at all , I'm currently studying PHP however as part of a course and do occasionally use JavaScript here and there My problem is on a register page for example i have a JavaScript Date picker so users can select their D.O.B without me having to worry about if the date is valid ...etc through PHP checking. PHP Code: <tr> <th>Date of Birth :</th> <td input name="dob" id="dob"><?php $thisyear= getdate(); $myCalendar = new tc_calendar("date5", true, false); $myCalendar->setIcon("./images/iconCalendar.gif"); $myCalendar->setDate($thisyear['year'],$thisyear['month'],$thisyear['day']); $myCalendar->setPath("./"); $myCalendar->setYearInterval(1910, ($thisyear['year'])); $myCalendar->dateAllow('1910-05-13', ($thisyear['year']-18) ); $myCalendar->setDateFormat('j F Y'); //$myCalendar->setHeight(350); //$myCalendar->autoSubmit(true, "form1"); $myCalendar->writeScript(); ?></td> </tr> Now in the <head> tag of my page i do i my JavaScript validation , and was wondering what would i have to do for this to work Thus far i've tried .checked/.selected basically anything i can think of but since its not my forte there isn't a lot for me to think of PHP Code: <script type="text/javascript"> function validate(form) { if(!document.form1.agree.checked) { alert("Please check the terms and conditions"); return false; } if(!document.form1.dob.checked) { alert("Please select a date of birth"); return false; } return true; } </script> </script> Now i was wondering is there anyway to check if a valid date was selected ?? if you can offer any help it'd be much appreciated. hi folks.. how to start with color picker using a layered div? i would like to have idea about that.. if anyone have any code samples then let me know.. thank you I have been working on this picker calendar all day and I am completely stumped. The calendar will show. Any help with this code would be REALLY appreciated!! 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"> <head> <title>Central Valley Snowboarding</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="js_styles.css" type="text/css" /> </head> <body> <h1>Central Valley Snowboarding</h1> <h2>Group Reservations</h2><hr /> <form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded"> <h3>Snowboarding Date</h3> <p><input type="text" name="reservationDate" /> <a href="" onclick="displayCalendar()">Select Date</a></p> <h3>Group Leader</h3> <table border="0"> <tr valign="top"> <td>Last name<br /> <input type="text" name="leaderLastName" size="50" /> <br /> First name<br /> <input type="text" name="leaderFirstName" size="50" /> <br /> Telephone<br /> <input type="text" name="leaderTelephone" size="50" /> <br /> Address<br /> <input type="text" name="leaderAddress" size="50" /><br /> City, State, Zip<br /> <input type="text" name="leaderCity" size="34" /> <input type="text" name="leaderState" size="2" maxlength="2" /> <input type="text" name="leaderZip" size="5" maxlength="5" /></td> </tr></table> <script type="text/javascript"> /* <![CDATA[ */ var dateObject = new Date(); var month = dateObject.getMonth(); var monthArray = new Array("January","February","March","April","May","June", "July","August","September","October","November","December"); var dateToday = monthArray[month] + " " + dateObject.getDate() + ", " + dateObject.getFullYear(); document.forms[0].reservationDate.value = dateToday; function displayCalendar(whichMonth) { calendarWin = window.open("", "CalWindow", "status=no,resizable=yes,width=400,height=320,left=200, top=200"); calendarWin.focus(); calendarWin.document.write("<!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'> <head><title>Central Valley Snowboarding</title><meta http-equiv='content-type' content='text/html; charset=iso-8859-1' /> <link rel='stylesheet' href='js_styles.css' type='text/ css' /></head><body>"); calendarWin.document.write("<table cellspacing='0' border='1' width='100%'>"); } if (whichMonth == -1) dateObject.setMonth(dateObject.getMonth()-1); else if (whichMonth == 1) dateObject.setMonth(dateObject.getMonth()+1); var month = dateObject.getMonth(); calendarWin.document.write("<tr><td colspan='2'><a href='' onclick='self.opener.displayCalendar(-1);return false'> Previous</a></td><td colspan='3' align='center'><strong>" + monthArray[month] + " " + dateObject.getFullYear() + "</strong></td><td colspan='2' align='right'><a href='' onclick='self.opener.displayCalendar(1);return false'> Next</a></td></tr>"); + "</strong></td></td></tr>"); calendarWin.document.write("<tr align='center'><td>Sun</td> <td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td> <td>Sat</td></tr>"); calendarWin.document.write("<tr align='center'>"); dateObject.setDate(1); var dayOfWeek = dateObject.getDay(); for (var i=0; i<dayOfWeek; ++i) { calendarWin.document.write("<td> </td>"); } var daysWithDates = 7 - dayOfWeek; var dateCounter = 1; for(var i=0; i<daysWithDates; ++i) { var curDate = monthArray[month] + " " + dateCounter + ", " + dateObject.getFullYear(); calendarWin.document.write("<td><a href='' onclick='self.opener.document.forms[0] .reservationDate.value=\"" + curDate + "\";self.close()'>" + dateCounter + "</a></td>"); ++dateCounter; } var numDays = 0; // January, March, May, July, August, October, December if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11) numDays = 31; // February else if (month == 1) numDays = 28; // April, June, September, November else if (month == 3 || month == 5 || month == 8 || month == 10) numDays = 30; for (var rowCounter = 0; rowCounter < 5; ++rowCounter) { var weekDayCounter = 0; calendarWin.document.write("<tr align='center'>"); while (weekDayCounter < 7) { var curDate = monthArray[month] + " " + dateCounter + ", " + dateObject.getFullYear(); if (dateCounter <= numDays) calendarWin.document.write("<td><a href='' onclick='self.opener.document.forms[0]. reservationDate.value=\"" + curDate + "\";self.close()'>" + dateCounter + "</a></td>"); else calendarWin.document.write("<td> </td>"); ++weekDayCounter; ++dateCounter; } calendarWin.document.write("</tr>"); } calendarWin.document.write("</table></body></html>"); calendarWin.document.close(); /* ]]> */ </script> <p><input type="submit" value="Submit Group Reservation" /></p> </form> </body> </html> I have an issue with a javascript date picker. I need to figure out how to get the date to submit from the date picker into my database. Haven't been able to get any help from the maker of the date picker. I have a form which is collecting about 15 other items and I need the date to go in as well. Any help would be great.
Good day! I explore something so I used jquery in my date, without any knowledge about jquery. I research a sample Jquery Date Picker internet and I found one, my problem is the Year is started at 2001 , I don't know if I could change it so that the year would start atleast 1950's or 1990's here's the code that I add in my webpage to display the Jquery Date Picker Code: <link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#date").datepicker({ showOn: 'button', buttonText: "Select your Birthday" }); }); </script> I will attach the date picker that I get from internet. Thank you Hi to aLL CAN ANY BODY HELP ME OUT IN WRITING JAVASCRIPT CODE FOR MONTH PICKER HERE I DONT NEED DATE, I JUST WANT ALL THE MONTHS IN PLACE OF DATES AND AN OPTION FOR SELECTING YEARS, WHEN I SELECT MONTH AND CHOOSE YEAR, THEN TEXT FIELD GET JAN-2008 clearly, need a calender with out date in it, months and years.... colud you please give me any information regarding this thank you Hi All, i am having some difficulties to figure out how can i link get my calendar (datepicker) working with my dynamic generated textbox . I am using a Jquery file that i download form the net <!-- link calendar files --> <script language="JavaScript" src="calendar_us.js"></script> <link rel="stylesheet" href="calendar.css"> and here is my code to generate my dynamic controls which is working fine actually..i need to have : 1- option : the datepicker showing up once i click on StartDate textbox 2- in the future i ll use an img and i want to use it to populate the datepicker. below is my modest javascipt code i use to create dynamic textbox: <script type="text/javascript"> // Declare element id for different dynamic generated controls var elementid = 1; function addNew() { var elementrow = 1; // Get the main Div in which all the other divs will be added var mainContainer = document.getElementById('mainContainer'); // Create a new div for holding text and button input elements var newDiv = document.createElement('div'); var bgc ="##E2E2E2"; //"##b2d47e"; newStartDate = document.createElement( 'INPUT' ); newStartDate.id = 'id' + elementid + elementrow; newStartDate.setAttribute('id1','id'+ elementid+elementrow); newStartDate.setAttribute('name','StartDateName'+ elementid+elementrow); newStartDate.size=8; newStartDate.style.backgroundColor= bgc; // Create buttons for creating and removing inputs var newAddButton = document.createElement('input'); newAddButton.type = "button"; newAddButton.value = " + "; newAddButton.title = " Add new Project"; var newDelButton = document.createElement('input'); newDelButton.type = "button"; newDelButton.value = " - "; newDelButton.title = " Remove Project"; // Append new text input to the newDiv newDiv.appendChild(newStartDate); // Append new button inputs to the newDiv newDiv.appendChild(newAddButton); newDiv.appendChild(newDelButton); // Append newDiv input to the mainContainer div mainContainer.appendChild(newDiv); // Add a handler to button for deleting the newDiv from the mainContainer newAddButton.onclick = addNew; newDelButton.onclick = function() {mainContainer.removeChild(newDiv);}; elementid++; } </script> any help will be apprecited ! thanks dear all.... could you help me how to created database popup picker with javascript and php....i use mysql databse. best regards Hi, I'm trying to display a time clock in input text box. The time should display in Time utilization box after clicking on START BUTTON. I tried the below code and it is not starting the time. However, I tried the javascript individually and it worked. Any help? PHP Code: <script type="text/javascript"> var seconds = 0; var minutes = 0; var hours = 0; function zeroPad(time) { var numZeropad = time + ''; while(numZeropad.length < 2) { numZeropad = "0" + numZeropad; } return numZeropad; } function countSecs() { seconds++; if (seconds > 59) { minutes++; seconds = 0; } if (minutes > 59) { hours++ minutes = 0; } document.getElementById("time_utilization").innerHTML = zeroPad(hours) + ":" + zeroPad(minutes) + ":" + zeroPad(seconds); } function startTimer() { action = window.setInterval(countSecs,1000); } </script> </head> <body> <?php include("header.php"); ?> <div class="art-content-layout"> <div class="art-content-layout-row"> <div class="art-layout-cell art-content"> <div class="art-post"> <div class="art-post-body"> <div class="art-post-inner art-article"> <form name="tracker" method="post" action="processor.php" onsubmit="return formCheck(this);"> <ul> <li class="mainForm" id="fieldBox_8"> <label class="formFieldQuestion">Start Time *</label><input readonly class=mainForm type=text name=start_time id=start_time size='30' value=''> <input type="button" id="start1_time" style="width: 100px" Value="Start Time" onClick="startTimer()"></li> <li class="mainForm" id="fieldBox_12"> <label class="formFieldQuestion">Time Utilization</label><input class=mainForm type=text name="time_utilization" id="time_utilization" size='8' value='00:00:00' ></li> <br /> <br /> <li class="mainForm"> <input id="saveForm" class="mainForm" type="submit" value="Submit" style="width : 100px"/> </li> </form> I am getting "Unknown Runtime Error at line 43". However, code has below line at link 43: Code: document.getElementById("time_utilization").innerHTML = zeroPad(hours) + ":" + zeroPad(minutes) + ":" + zeroPad(seconds); I have been researching like crazy, and I can't find any information that seems to fit what I need! I am looking for a solution for the following problem: We have products that have multiple parts that can be colored separately from each other. In other words, if it was a shirt, the sleeves, graphic, front panel, pocket, and back panel could all be a different color. We have a range of color options available that can be up to 50. So, if I made a single image for each combination, we're looking at thousands of images here. How can I use scripts to build a page that can pick all of these options and combine them together in a product image for the customer? Is it even possible? I have tried layering 4 0r 5 images with relative and absolute positioning, and doing an image swap...but that is not something I can see us using on a regular basis. I must be missing something here. We've been looking around at other sites like Victorias Secret and Old Navy, and like their color changes....but theirs seem to only involve the single color layer. Thanks for any advice! does anyone know of a timepicker that i can disable weekends and bank holidays (or that at least easily has a place i can add code to disable days by making a call to my database of holidays in ajax?) |