JavaScript - Revealing Hidden Div Via Drop-down & Search Button
Hi all,
Only recently started, self-teaching, html and Java in order to get a project idea of mine up and running. First barrier I've come across is trying to sort out a drop down with search button that will then reveal the connected hidden div, I've mangled together some code from a couple of sources with what I've learnt, but not really sure how to tie in the "Search" button to the showDiv(divname) function. Wondering if anyone could help out. Many thanks in advance Code: <head> <title>Untitled</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <script type="text/javascript"><!-- var lastDiv = ""; function showDiv(divname) { if (lastDiv) { document.getElementById(lastDiv).className = "hiddenDiv"; } if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName; } } </script> </head> <body> <h1> <form name="form" > <select name="select"> <option selected>Choose <option value="one"> one <option value="two"> two <option value="other"> other </select> <input type="button" value="Search" onClick="showDiv(this.value)"> </form> </h1></br> <h2> Results: <p id="one" class="hiddenDiv">one</p> <p id="two" class="hiddenDiv">two</p> <p id="other" class="hiddenDiv">other</p> </h2> </body> </html> From my stylesheet: Code: .hiddenDiv { display: none; } .visibleDiv { display: block; } Similar TutorialsIn this case, Let's take Google Search as example: The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question. This code is used in Fiddler(It's a Man-in-the-middle proxy) Code: if (oSession.uriContains("&q=")) // oSession is a Fiddler object session // uriContains() function, checks for case-insensitive string from the URI { var str = oSession.fullUrl; var sAppend = "test1+test2+test3"; if (!oSession.uriContains(sAppend)) { oSession.fullUrl = str.replace( "&q=","&q="+sAppend); } } For those who are confused, It says, If &q= is present in the URI, replace/append &q= with &q=test1+test2+test3 Problem: It appends test1+test2+test3 instantly, when it sees &q= in the URL. Basically, how do I make it wait until I click the submit/search button Thank you. Update: I heard about Onsubmit() event, but not really familiar with it. How do I use it? like, should I go to google source page and edit the form id? Also, Any other methods besides Onsubmit()? Hello all, hope all is well. I have a search function that displays hidden divs based on what the user has searched for. I would like the "search results" to be opened onto a new page; I have a feeling the results page would contain all the hidden divs and a form of JS would need to be used to "pass" the search data to the new page and thus perform the search and display the corresponding div. - Any help is appreciated here code and demo site below. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <LINK rel="stylesheet" type="text/css" href="<?php $path = $_SERVER['DOCUMENT_ROOT']; $path .= "/php/fleet/includes/website.php"; include_once($path); ?>/php/font.css"></style> </head> <body> <script type="text/javascript"> var showndiv=false; function show() { document.getElementById('fleet1').innerHTML=""; if (showndiv){document.getElementById(showndiv).style.display = 'none'; } theval=Number(document.getElementById('tb').value); switch (theval){ case 120: showndiv='fleet2' break; case 121: showndiv='fleet3' break; case 122: showndiv='fleet4' break; default: document.getElementById('fleet1').innerHTML="Sorry, nothing found" return; } document.getElementById(showndiv).style.display = 'block'; } </script> <script type="text/javascript"> ///////////////////////////////////////////////////// // Between the quotation marks, list the id values of each div. var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4"; ///////////////////////////////////////////////////// IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," "); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,""); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,""); IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," "); var IDlist = IDvaluesOfEachDiv.split(" "); function ShowAllDivs() { for(var i=0; i<IDlist.length; i++) { document.getElementById(IDlist[i]).style.display = ""; } } function HideAllDivs() { for(var i=0; i<IDlist.length; i++) { document.getElementById(IDlist[i]).style.display = "none"; } } </script> <form name="myForm"> <input type="text" id="tb"> <input type="button" value="Search" onclick="show()"> </form> <div id="fleet1" style="display:block"> </div> <div id="fleet2" style="display:none" class="fleetdiv"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W599 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table> <table align="right"> <TR> <TD> <a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr> </table> <div id="fleet3" style="display:none"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W601 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table></div> <div id="fleet4" style="display:none"> <br> <table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699"> <TR border="0" bordercolor="#FFFFFF"> <TD valign="top"> <TR> <TD> <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable"> <TR> <TH class="titlebg" bgcolor="#336699" width="16%"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="17%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="19%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="13%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT> </TH> <TH class="titlebg" bgcolor="#336699" width="15%" align="center"> <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT> </TH> </TR> <TR> <TD align="left" width="14%" bgcolor="#FFFFFF"> <FONT class="font">122</FONT></TD> <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> <FONT class="font">W602 PTO</FONT> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">M920</TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <FONT class="font">OPTARE</font> </TD> <TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> <FONT class="font">B33F</font> </TD> <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> </TD> </tr></table> </td> </tr> </table></div> </body> </html> http://nctfleetlist.co.uk/div3.php I have a slideshow of quotes based on the "Ultimate Fade-in slideshow (v2.1)" at Dynamic Drive: http://www.dynamicdrive.com/dynamici...nslideshow.htm This is right under my navigation bar, and the drop-down menu items are hidden behind the javascript slideshow. You can see it he http://brookenelson.com/upticon/draft3/index.html Some background: The reason I did it this way because I first started out with a Flash banner with quotes fading in and out, and I ran into the problem with the drop-down menu items hiding behind the Flash... of course I Googled that and found the solution ( see he http://brookenelson.com/upticon/draft3/index2.html ) But in the meantime I played with the javascript slideshow and it worked better for me because it was easier to add new quotes just within the html, without having to go back and edit the Flash item. Anyway, so is there a solution to the drop-downs being hidden behind the .js slideshow? Or should I go back to the Flash? Or is there some other sort of solution or script that would fit my needs better? Many many many thanks in advance. p.s. I personally do not like the little quote slideshow I am using, in either form, but the client is insisting on it!! Hello, I am trying to have my print button appear only once the script for my validation button has gone through without any errors. To do this, I used the following script in my validation button (I've truncated most of it since you get the point after two lines): // hidden field var lrcf = this.getField("LastRCFalse"); var ei = this.getField("Employee ID number"); if ( lrcf.value != ""){ var tempname = lrcf.value; if (tempname == "Employee ID number") {ei.setFocus();}} else { var ei = this.getField("Employee ID number"); if (ei.value != "" && (ei.value == "0000000" || ei.value < 1259)){ app.alert("Employee ID number, if entered, must be between 0001259 and 0999999") ei.setFocus();} else { var city = this.getField("Effective date"); if (city.value == ""){ app.alert("Please enter Effective date") city.setFocus();} else { var gmf = this.getField("Gender"); if (gmf.value != "M" && gmf.value != "F" ){ app.alert("Please select gender of employee") gmf.setFocus();} else { // Making fields visible for printing VisibleToPrint(); app.alert("Your form is ready to print. Please press the PRINT button on this form.",3) The red part is where it all seems to be breaking apart. I've verified that none of the script before is incorrect and it all goes smoothly except that my print button does not appear afterwards. (The print button doesn't have any complicated script just a "execute a menu item" and is put as hidden in common properties so that no one can print before having gone through the verification). Should I have created another print button which sits on top of the other one? I am really new to this so any help would be greatly appreciated. I checked the code for hours and I can't figure out why the form doesn't work. Please, I need help, I need to finish this page. Inside the input form there is a div using visibility:hidden. The div works perfectly when it is selected (show or hide), not problem. The problem is when press the send button the form doesn't send anything, not respond, do nothing!. Any help? I thought this would have been fairly simple but it appears the onchange event isn't triggered when a hidden field is populated by other javascript without user input. I have a simple search box and autocomplete/suggestion ajax thingie going on. What I want to do is have my "Go" submit button disbled until AFTER a user has populated the hidden field "cid". A user populates this field automatically when they click on a suggested option from the ajax autocomplete doofer. Here's what I've tried at the moment but failed on. Code: <form action="index.php" method="GET" name="qsform" id="qsform"> <input type="hidden" name="p" id="p" value="compdetails" style="border:1px solid #000000;" /> <input type="text" name="quicksearch" id="quicksearch" value="Find Company" style="border:1px solid #000000;" onFocus="clearText(this)" onBlur="clearText(this)" /> <input type="hidden" name="cid" id="cid" value="" style="border:1px solid #000000;" /> <input type="submit" name="go" id="go" value="Go" disabled="true" onmouseover="if (document.qsform.cid.value!='') { document.qsform.go.disabled=false; }" /> </form> Hello, I am pretty new at javascript and I am trying to create a payment form that has both fields for payment by check and payment by credit card. I am wondering how I would go about having a radio button that asks the user how they would like to pay "credit card" or "check" and depending on which one they pick it shows the fields pertaining to that type of payment. the fields in the form look like this: Credit Card Fields: Code: <select name="card_type" size="1"> <option value="">- Card Type - </option> <option value="1">Visa</option> <option value="2">Mastercard</option> <option value="3">Discover</option> <option value="4">American Express</option> </select> Expiration Date<input type="text" name="exp_date" value="" id="exp_date"> CVC Code<input type="text" name="cvc" value="" id="cvc"> Card Number<input type="text" name="card_number" value="" id="card_number"> Amount On Credit Card<input type="text" name="card_amount" value="" id="card_amount"> Name On Card<input type="text" name="name_on_card" value="" id="name_on_card"> Billing Address<input type="text" name="billing_address" value="" id="billing_address"> Billing City<input type="text" name="billing_city" value="" id="billing_city"> <select name="billing_state" size="1"> <option value="">- Billing State -</option> </select> Check Fields: Code: Name (as printed on check)<input type="text" name="check_name" value="" id="check_name"> Address On Check<input type="text" name="check_address" value="" id="check_address"> Amount On Check<input type="text" name="check_amount" value="" id="check_amount"> Checking Account Number<input type="text" name="check_acc_number" value="" id="check_acc_number"> Routing Number<input type="text" name="routing_number" value="" id="routing_number"> Check Number<input type="text" name="check_number" value="" id="check_number"> Dear Javascript programmers, Do you have an example of a Javascript something like this: A dropdownlist with values "one" and "two". The radio button is not visible (as a start). - If you have selected "one" from the dropdown list, then a radio button will appear. - If you have selected "two" from the dropdown list, then a radio button will NOT appear. Thanks, Cornelis Gouda - The Netherlands Hi, I'm looking for a javascript/css code that can do the following, for a click button: - When mouse is not over the click-button, a text should be displayed at the right of the button, in a bordered textbox - 85% transparency (hardly visible) (- when mouse hovers over the button, the button image changes to a different one <- I know how to do this) - When the button is clicked the text shows up normaly (0% transparency) - When clicking again the button OR anywhere else on the page, the text goes back to 85% transparency. If have any ideas where I could find such a code please let me know. Thanks. I am using a content revealing script, it is functioning pefectly except for one small issue. I have the content being shown on mouseover, but I would not like it to display right away - i need a delay on the mouseover. meaning that only if mouseover for a set time (say 3000ms.) it will show. the purpose of this is to not accidently open the content when travelling with the mouse around the page.. the content will show ONLY if the user wants it to open it ie. holding the mouse on there for a few seconds. The script I am using is from featured content slider. contentslider.js I marked areas of interest in the code in RED Code: //** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com. //** May 2nd, 08'- Script rewritten and updated to 2.0. //** June 12th, 08'- Script updated to v 2.3, which adds the following features: //1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later. //2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former). //3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example. //** July 11th, 08'- Script updated to v 2.4: //1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider") //2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads. //** Dec 20th, 12'- v 2.41: Fixed bug with slider failing to load if the same script is used on different pages with different # of contents var featuredcontentslider={ //3 variables below you can customize if desired: ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>', bustajaxcache: true, //bust caching of external ajax page after 1st request? enablepersist: true, //persist to last content viewed when returning to page? settingcaches: {}, //object to cache "setting" object of each script instance jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually. this.turnpage(this.settingcaches[fcsid], pagenumber) }, ajaxconnect:function(setting){ var page_request = false if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else return false var pageurl=setting.contentsource[1] page_request.onreadystatechange=function(){ featuredcontentslider.ajaxpopulate(page_request, setting) } document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', pageurl+bustcache, true) page_request.send(null) }, ajaxpopulate:function(page_request, setting){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){ document.getElementById(setting.id).innerHTML=page_request.responseText this.buildpaginate(setting) } }, buildcontentdivs:function(setting){ var alldivs=document.getElementById(setting.id).getElementsByTagName("div") for (var i=0; i<alldivs.length; i++){ if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv" setting.contentdivs.push(alldivs[i]) alldivs[i].style.display="none" //collapse all content DIVs to begin with } } if (setting.currentpage > setting.contentdivs.length){ setting.currentpage=1 setting.prevpage=1 } }, buildpaginate:function(setting){ this.buildcontentdivs(setting) var sliderdiv=document.getElementById(setting.id) var pdiv=document.getElementById("paginate-"+setting.id) var phtml="" var toc=setting.toc var nextprev=setting.nextprev if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){ for (var i=1; i<=setting.contentdivs.length; i++){ phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> ' } phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '') pdiv.innerHTML=phtml } var pdivlinks=pdiv.getElementsByTagName("a") var toclinkscount=0 //var to keep track of actual # of toc links for (var i=0; i<pdivlinks.length; i++){ if (this.css(pdivlinks[i], "toc", "check")){ if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents) pdivlinks[i].style.display="none" //hide this toc link continue } pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link pdivlinks[i][setting.revealtype]=function(){ featuredcontentslider.turnpage(setting, this.getAttribute("rel")) return false } setting.toclinks.push(pdivlinks[i]) } else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next" pdivlinks[i].onclick=function(){ featuredcontentslider.turnpage(setting, this.className) return false } } } this.turnpage(setting, setting.currentpage, true) if (setting.autorotate[0]){ //if auto rotate enabled pdiv[setting.revealtype]=function(){ featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id]) } sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id]) } setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation this.autorotate(setting) } }, urlparamselect:function(fcsid){ var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index }, turnpage:function(setting, thepage, autocall){ var currentpage=setting.currentpage //current page # before change var totalpages=setting.contentdivs.length var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage) turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly return setting.currentpage=turntopage setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex this.cleartimer(setting, window["fcsfade"+setting.id]) setting.cacheprevpage=setting.prevpage if (setting.enablefade[0]==true){ setting.curopacity=0 this.fadeup(setting) } if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete) setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block") setting.onChange(setting.prevpage, setting.currentpage) } setting.contentdivs[turntopage-1].style.visibility="visible" setting.contentdivs[turntopage-1].style.display="block" if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted) this.css(setting.toclinks[setting.prevpage-1], "selected", "remove") if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted) this.css(setting.toclinks[turntopage-1], "selected", "add") setting.prevpage=turntopage if (this.enablepersist) this.setCookie("fcspersist"+setting.id, turntopage) }, setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between) var targetobject=setting.contentdivs[setting.currentpage-1] if (targetobject.filters && targetobject.filters[0]){ //IE syntax if (typeof targetobject.filters[0].opacity=="number") //IE6 targetobject.filters[0].opacity=value*100 else //IE 5.5 targetobject.style.filter="alpha(opacity="+value*100+")" } else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax targetobject.style.MozOpacity=value else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax targetobject.style.opacity=value setting.curopacity=value }, fadeup:function(setting){ if (setting.curopacity<1){ this.setopacity(setting, setting.curopacity+setting.enablefade[1]) window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50) } else{ //when fade is complete if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run) setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block") setting.onChange(setting.cacheprevpage, setting.currentpage) } }, cleartimer:function(setting, timervar){ if (typeof timervar!="undefined"){ clearTimeout(timervar) clearInterval(timervar) if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div setting.contentdivs[setting.cacheprevpage-1].style.display="none" } } }, css:function(el, targetclass, action){ var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig") if (action=="check") return needle.test(el.className) else if (action=="remove") el.className=el.className.replace(needle, "") else if (action=="add") el.className+=" "+targetclass }, autorotate:function(setting){ window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1]) }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value){ document.cookie = name+"="+value }, init:function(setting){ var persistedpage=this.getCookie("fcspersist"+setting.id) || 1 var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index this.settingcaches[setting.id]=setting //cache "setting" object setting.contentdivs=[] setting.toclinks=[] setting.topzindex=0 setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1) setting.prevpage=setting.currentpage setting.revealtype="on"+(setting.revealtype || "click") setting.curopacity=0 setting.onChange=setting.onChange || function(){} if (setting.contentsource[0]=="inline") this.buildpaginate(setting) if (setting.contentsource[0]=="ajax") this.ajaxconnect(setting) } } This is the code you embed in the webpage: Code: <h2>Example 1</h2> <!--Inner content DIVs should always carry "contentdiv" CSS class--> <!--Pagination DIV should always carry "paginate-SLIDERID" CSS class--> <div id="slider1" class="sliderwrapper"> <div class="contentdiv"> Content 1 Here. <br /> <p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p> </div> <div class="contentdiv"> Content 2 Here. </div> <div class="contentdiv"> Content 3 Here. </div> </div> <div id="paginate-slider1" class="pagination"> </div> <script type="text/javascript"> featuredcontentslider.init({ id: "slider1", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.2], //[true/false, fadedegree] autorotate: [false, 3000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script> I am having trouble with the following code. Right now the user clicks the button and it shows all of the blogs from the blog array. However I want it to just reveal 2 then two more and two more and so on as the user clicks button. I have tried multiple things but can't seem to get it right. Most of the things i try either reveal the entire blog on start or when the user clicks hides all of them. Code: function showBlog(numEntries) { // Show the list of blog entries blog.sort(Blog.blogSorter); // First sort the blog if (!numEntries) // Adjust the number of entries to show the full blog, if necessary function showBlog(numEntries) { // Show the list of blog entries blog.sort(Blog.blogSorter); // First sort the blog if (!numEntries) // Adjust the number of entries to show the full blog, if necessary numEntries = blog.length; // Show the blog entries var blogListHTML = ""; for (var i = 0; i < blog.length && i < numEntries; i++ ) { blogListHTML += blog[i].toHTML(i % 2 == 0); } document.getElementById("blog").innerHTML = blogListHTML; // Set the blog HTML code on the page } // Show the blog entries var blogListHTML = ""; for (var i = 0; i < blog.length && i < numEntries; i++ ) { blogListHTML += blog[i].toHTML(i % 2 == 0); } document.getElementById("blog").innerHTML = blogListHTML; // Set the blog HTML code on the page } Hi I'm Terbinafine I do online school, and it utilizies a popular, virtual education system known as "OdysseyWare". I found a javascript 'cheat' per se, online, which is supposed to reveal the answers to your questions. Here's an example of the source code for a multiple choice question: Code: [EDIT] OdysseyWare Code removed. The code that was removed was a very small javascript piece of code, totaling less than 70 lines. The javascript that was removed here could be recreated by an individual inside of a day, or even 30 minutes or less. It is the Editor’s opinion that, given the ease with which one is able to, apparently, find the answers to the OdysseyWare testing software, the OdysseyWare software is not fit for educational use. What good is testing software that, apparently, allows the user to be able to find all of the answers to the questions by using simple code that they can find on the internet or make themselves? As an educator for many years, I would NOT and will NEVER use this software and cannot recommend that anyone else use it. Hi Guys, A couple of years ago I came across a Javascript drop down search facility which I used for an eBay shop I built. I don't really have any knowledge at all of Javascript but I did manage to get it to work the way I wanted, somehow! Basically at the moment with the drop down you have to select the product type, your make of vehicle and then your model. This then searches the ebay shop for any relevant listings. However, I now want to add a forth drop down box which also searches the engine size. How would I go about adding another drop down list? Any help would be much appreciated. I've had to split the code into two lots and there is too many characters to fit in one thread! Code: <script type="text/javascript"> product = new Array ("CATALYTIC-CONVERTER","CENTRAL-SILENCER","FRONT-PIPE","Rear-Assembly"); make = new Array ("ALFA_ROMEO","AUDI","BMW","CITROEN","DAEWOO","FIAT","FORD","HONDA","HYUNDAI","JAGUAR","LAND_ROVER","LEXUS","MAZDA","MERCEDES","MG","MITSUBISHI","NISSAN","PEUGEOT","RENAULT","ROVER","SAAB","SEAT","SKODA","SUBARU","SUZUKI","TOYOTA","VAUXHALL","VOLKSWAGEN","VOLVO"); ALFA_ROMEO = new Array ("ALFA ROMEO 145", "145", "ALFA ROMEO 146", "146", "ALFA ROMEO 147", "147", "ALFA ROMEO 155", "155", "ALFA ROMEO 156", "156", "ALFA ROMEO 164", "164","ALFA ROMEO 166", "166","ALFA ROMEO 75", "75","ALFA ROMEO 33","33","ALFA ROMEO GTV", "GTV","ALFA ROMEO SPIDER","SPIDER"); AUDI = new Array ("AUDI 80","80","AUDI 90","90","AUDI 100","100","AUDI 200","200","AUDI A2","A2","AUDI A3","A3","AUDI A4","A4","AUDI A6","A6","AUDI A8","A8","AUDI CABRIOLET","AUDI COUPE","COUPE","AUDI S3","S3","AUDI S4","S4","AUDI S6","S6", "AUDI S8","S8","AUDI TT","TT"); BMW = new Array ("BMW 316","316","BMW 318","318","BMW 320","320","BMW 323","323","BMW 325","325","BMW 328","328","BMW 518","518","BMW 520","520","BMW 523","523","BMW 525","525","BMW 528","528","BMW 530","530","BMW 535","535","BMW 540","540","BMW 728","728","BMW 730","730","BMW 735","735","BMW 750","750","BMW 840","840","BMW 850","850","BMW M3","M3","BMW M5","M5","BMW Z3","Z3","BMW MINI","MINI"); CITROEN = new Array("CITROEN AX","AX","CITROEN BERLINGO","BERLINGO","CITROEN BX","BX","CITROEN C15","C15","CITROEN C5","C5","CITROEN DISPATCH","DISPATCH","CITROEN RELAY","RELAY","CITROEN SAXO","SAXO","CITROEN SYNERGIE","SYNERGIE","CITROEN XANTIA","XANTIA","CITROEN XM","XM","CITROEN XSARA","XSARA","CITROEN ZX","ZX"); DAEWOO = new Array("DAEWOO ESPERO","ESPERO","DAEWOO KORANDO","KORANDO","DAEWOO LANOS","LANOS","DAEWOO LEGANZA","LEGANZA","DAEWOO MATIZ","MATIZ","DAEWOO MUSSO","MUSSO","DAEWOO","NEXIA","DAEWOO","NUBIRA","DAEWOO TACUMA","TACUMA"); FIAT = new Array("FIAT BARCHETTA","BARCHETTA","FIAT BRAVA","BRAVA","FIAT BRAVO","BRAVO","FIAT CINQUECENTO","CINQUECENTO","FIAT COUPE","COUPE","FIAT CROMA","CROMA","FIAT DOBLO","DOBLO","FIAT DUCATO","DUCATO","FIAT FIORINO","FIORINO","FIAT MAREA","MAREA","FIAT MULTIPLA","MULTIPLA","FIAT PANDA","PANDA","FIAT PUNTO","PUNTO","FIAT SCUDO","SCUDO","FIAT SEICENTO","SEICENTO","FIAT TEMPRA","TEMPRA","FIAT TIPO","TIPO","FIAT ULYSSE","ULYSSE","FIAT UNO","UNO"); FORD = new Array("FORD COUGAR","COUGAR","FORD ESCORT","ESCORT","FORD EXPLORER","EXPLORER","FORD FIESTA","FIESTA","FORD FOCUS","FOCUS","FORD GALAXY","GALAXY","FORD GRANADA","GRANADA","FORD KA","KA","FORD MAVERICK","MAVERICK","FORD MONDEO","MONDEO","FORD ORION","ORION","FORD PROBE","PROBE","FORD PUMA","PUMA","FORD SCORPIO","SCORPIO","FORD SIERRA","SIERRA","FORD TOURNEO","TOURNEO","FORD TRANSIT","TRANSIT"); HONDA = new Array("HONDA ACCORD","ACCORD","HONDA CIVIC","CIVIC","HONDA CONCERTO","CONCERTO","HONDA CRV","CRV","HONDA HRV","HRV","HONDA INTEGRA","INTEGRA","HONDA JAZZ","JAZZ","HONDA LEGEND","LEGEND","HONDA PRELUDE","PRELUDE","HONDA SHUTTLE","SHUTTLE","HONDA STREAM","STREAM"); HYUNDAI = new Array("HYUNDAI ACCENT","ACCENT","HYUNDAI ATOS","ATOS","HYUNDAI COUPE","COUPE","HYUNDAI LANTRA","LANTRA","HYUNDAI PONY","PONY","HYUNDAI S COUPE","S COUPE","HYUNDAI SONATA","SONATA"); JAGUAR = new Array("JAGUAR S TYPE","S TYPE","JAGUAR XJ12","XJ12","JAGUAR XJ6","XJ6","JAGUAR XJ8","XJ8","JAGUAR XJR","XJR","JAGUAR XJS","XJS","JAGUAR XK8","XK8"); LAND_ROVER = new Array("LAND-ROVER 110","110","LAND-ROVER 90","90","LAND-ROVER DEFENDER","DEFENDER","LAND-ROVER DISCOVERY","DISCOVERY","LAND-ROVER FREELANDER","FREELANDER","RANGE-ROVER","RANGE ROVER"); LEXUS = new Array("LEXUS ES","ES SERIES","LEXUS GS","GS SERIES","LEXUS IS","IS SERIES","LEXUS LS","LS SERIES","LEXUS LX","LX SERIES","LEXUS RX","RX SERIES","LEXUS SC","SC SERIES","LEXUS SOARER","SOARER"); MAZDA = new Array("MAZDA 121","121","MAZDA 2","2","MAZDA 323","323","MAZDA 323F","323F","MAZDA 6","6","MAZDA 616","616","MAZDA 626","626","MAZDA 929","929","MAZDA DEMIO","DEMIO","MAZDA MPV","MPV","MAZDA MX3","MX3","MAZDA MX5","MX5","MAZDA MX6","MX6","MAZDA PREMACY","PREMACY","MAZDA RX7","RX7","MAZDA RX8","RX8","MAZDA TRIBUTE","TRIBUTE","MAZDA XEDOS","XEDOS"); MERCEDES = new Array("MERCEDES 180","180","MERCEDES 190","190","MERCEDES 200","200","MERCEDES 220","220","MERCEDES 230","230","MERCEDES 240","240","MERCEDES 280","280","MERCEDES 300","300","MERCEDES 320","320","MERCEDES 400","400","MERCEDES 420","420","MERCEDES 430","430","MERCEDES 500","500","MERCEDES 600","600","MERCEDES A CLASS","A CLASS","MERCEDES C CLASS","C CLASS","MERCEDES E CLASS","E CLASS","MERCEDES G WAGON","G WAGON","MERCEDES ML","ML","MERCEDES SPRINTER","SPRINTER","MERCEDES V","V","MERCEDES VITO","VITO"); MG = new Array("MG 25","25","MG MGF","MGF","MG RV8","RV8","MG TF","TF","MG ZR","ZR","MG ZS","ZS","MG ZT","ZT"); MITSUBISHI = new Array("MITSUBISHI 3000","3000","MITSUBISHI CARISMA","CARISMA","MITSUBISHI COLT","COLT","MITSUBISHI ECLIPSE","ECLIPSE","MITSUBISHI EVO","EVO","MITSUBISHI FTO","FTO","MITSUBISHI GALANT","GALANT","MITSUBISHI GTO","GTO","MITSUBISHI L200","L200","MITSUBISHI L300","L300","MITSUBISHI L400","L400","MITSUBISHI LANCER","LANCER","MITSUBISHI PAJERO","PAJERO","MITSUBISHI SHOGUN","SHOGUN","MITSUBISHI SIGMA","SIGMA","MITSUBISHI SPACE STAR","SPACE STAR","MITSUBISHI SPACEWAGON","SPACEWAGON"); NISSAN = new Array("NISSAN 100 NX","100 NX","NISSAN 200 SX","200 SX","NISSAN 300 ZX","300 ZX","NISSAN 350 Z","350 Z","NISSAN 1800 SX","1800 SX","NISSAN ALMERA","ALMERA","NISSAN BLUEBIRD","BLUEBIRD","NISSAN CABSTAR","CABSTAR","NISSAN CHERRY","CHERRY","NISSAN MICRA","MICRA","NISSAN MAXIMA","MAXIMA","NISSAN PRIMERA","PRIMERA","NISSAN SERENA","SERENA","NISSAN SKYLINE","SKYLINE","NISSAN SUNNY","SUNNY","NISSAN TERRANO","TERRANO","NISSAN X TRAIL","X TRAIL"); PEUGEOT = new Array("PEUGEOT 106","106","PEUGEOT 107","107","PEUGEOT 205","205","PEUGEOT 206","206","PEUGEOT 306","306","PEUGEOT 307","307","PEUGEOT 309","309","PEUGEOT 405","405","PEUGEOT 406","406","PEUGEOT 407","407","PEUGEOT 605","605","PEUGEOT 607","607","PEUGEOT 806","806","PEUGEOT 807","807","PEUGEOT 1007","1007","PEUGEOT BOXER","BOXER","PEUGEOT EXPERT","EXPERT","PEUGEOT PARTNER","PARTNER"); RENAULT = new Array("RENAULT CLIO","CLIO","RENAULT ESPACE","ESPACE","RENAULT KANGOO","KANGOO","RENAULT LAGUNA","LAGUNA","RENAULT MEGANE","MEGANE","RENAULT SAFRANE","SAFRANE","RENAULT SCENIC","SCENIC","RENAULT R19","R19","RENAULT R21","R21"); ROVER = new Array("ROVER 111","111","ROVER 114","114","ROVER 211","211","ROVER 214","214","ROVER 216","216","ROVER 218","218","ROVER 220","220","ROVER 25","25","ROVER 323","323","ROVER 414","414","ROVER 416","416","ROVER 420","420","ROVER 45","45","ROVER 618","618","ROVER 620","620","ROVER 623","623","ROVER 75","75","ROVER 820","820","ROVER 825","825","ROVER 827","827","ROVER MAESTRO","MAESTRO","ROVER METRO","METRO","ROVER MG","MG","ROVER MGF","MGF","ROVER MINI","MINI","ROVER MONTEGO","MONTEGO","ROVER STREETWISE","STREETWISE"); SAAB = new Array("SAAB 9-3","9-3","SAAB 9-4","9-4","SAAB 9-5","9-5","SAAB 90","90","SAAB 99","99","SAAB","900","SAAB 9000","9000"); SEAT = new Array("SEAT ALHAMBRA","ALHAMBRA","19AUK35","ALTEA","SEAT AROSA","AROSA","SEAT CORDOBA","CORDOBA","SEAT IBIZA","IBIZA","SEAT INCA","INCA","SEAT LEON","LEON","SEAT MALAGA","MALAGA","SEAT MARBELLA","MARBELLA","SEAT TERRA","TERRA","SEAT TOLEDO","TOLEDO"); SKODA = new Array("SKODA FABIA","FABIA","SKODA FAVORIT","FAVORIT","SKODA FELICIA","FELICIA","SKODA OCTAVIA","OCTAVIA","SKODA SUPERB","SUPERB","SKODA TAVRIA","TAVRIA"); SUBARU = new Array("SUBARU FORESTER","FORESTER","SUBARU IMPREZA","IMPREZA","SUBARU JUSTY","JUSTY","SUBARU LEGACY","LEGACY","SUBARU LIBERO","LIBERO","SUBARU SVX","SVX","SUBARU VIVIO","VIVIO"); SUZUKI = new Array("SUZUKI ALTO","ALTO","SUZUKI BALENO","BALENO","SUZUKI CARRY","CARRY","SUZUKI GRAND VITARA","GRAND VITARA","SUZUKI JIMMY","JIMMY","SUZUKI ESTEEM","ESTEEM","SUZUKI IGNIS","IGNIS","SUZUKI LIANA","LIANA","SUZUKI SAMURAI","SAMURAI","SUZUKI SWIFT","SWIFT","SUZUKI VITARA","VITARA","SUZUKI WAGON","WAGON"); TOYOTA = new Array("TOYOTA AVENSIS","AVENSIS","TOYOTA CAMRY","CAMRY","TOYOTA CARINA","CARINA","TOYOTA CELCIA","CELICA","TOYOTA COROLLA","COROLLA","19S35","ESTIMA","TOYOTA HI-ACE","HI-ACE","TOYOTA HI-LUX","HI-LUX","TOYOTA LAND CRUISER","LAND CRUISER","TOYOTA MR2","MR2","TOYOTA PASEO","PASEO","TOYOTA PICNIC","PICNIC","TOYOTA PREVIA","PREVIA","TOYOTA PRIUS","PRIUS","TOYOTA RAV 4","RAV 4","TOYOTA SPACECRUISER","SPACECRUISER","TOYOTA STARLET","STARLET","TOYOTA SUPRA","SUPRA","TOYOTA YARIS","YARIS"); </script> <script type="text/javascript"> VAUXHALL = new Array("VAUXHALL ASTRA","ASTRA","VAUXHALL BRAVA","BRAVA","VAUXHALL CALIBRA","CALIBRA","VAUXHALL CAVALIER","CAVALIER","VAUXHALL COMBO","COMBO","VAUXHALL CORSA","CORSA","VAUXHALL FRONTERA","FRONTERA","VAUXHALL MERIVA","MERIVA","VAUXHALL MONTERRY","MONTERRY","VAUXHALL NOVA","NOVA","VAUXHALL OMEGA","OMEGA","VAUXHALL SENATOR","SENATOR","VAUXHALL SIGNUM","SIGNUM","VAUXHALL SINTRA","SINTRA","VAUXHALL TIGRA","TIGRA","VAUXHALL VECTRA","VECTRA","VAUXHALL ZAFIRA","ZAFIRA"); VOLKSWAGEN = new Array("VOLKSWAGEN BEETLE","BEETLE","VOLKSWAGEN BORA","BORA","VOLKSWAGEN CADDY","CADDY","VOLKSWAGEN CARAVELLE","CARAVELLE","VOLKSWAGEN CORRADO","CORRADO","VOLKSWAGEN GOLF","GOLF","VOLKSWAGEN JETTA","JETTA","VOLKSWAGEN LUPO","LUPO","VOLKSWAGEN PASSAT","PASSAT","VOLKSWAGEN POLO","POLO","VOLKSWAGEN SANTANA","SANTANA","VOLKSWAGEN SCIROCCO","SCIROCCO","VOLKSWAGEN SHARAN","SHARAN","VOLKSWAGEN TRANSPORTER","TRANSPORTER","VOLKSWAGEN VENTO","VENTO"); VOLVO = new Array("VOLVO 240","240","VOLVO 340","340","VOLVO 440","440","VOLVO 460","460","VOLVO 480","480","VOLVO 740","740","VOLVO 760","760","VOLVO 850","850","VOLVO 940","940","VOLVO 960","960","VOLVO C70","C70","VOLVO S40","S40","VOLVO S60","S60","VOLVO S70","S70","VOLVO S80","S80","VOLVO S90","S90","VOLVO V40","V40","VOLVO V50","V50","VOLVO V70","V70","VOLVO V90","V90"); function writeoptions(selectname) { var arr = selectname; var k=arr.length; for (i=0; i<k; i++) { if (arr[i] == "REAR_SILENCER") { document.write ("<OPTION value=\"\">"+arr[i]+"</OPTION>"); } else { document.write ("<OPTION value="+arr[i]+">"+arr[i]+"</OPTION>"); } } } function writeselect(selectedoption) { var opt = selectedoption; var optarray = window[opt] var frm1 = document.myForm; frm1.model.disabled=(frm1.make.selectedIndex==0 || frm1.product.selectedIndex==0); frm1.model.selectedIndex = 0; frm1.model.length = 1; count=1 if(frm1.make.selectedIndex > 0) for(i=0;i<optarray.length;i=i+2) { frm1.model.options[count] = new Option(optarray[i+1],optarray[i]); count++ }} </script> Hi all, I was just wondering if there is a JavaScript tutorial online that shows you how to do similar hover effect to what Twitter does with the trending topics. Such as Inception. When you hover over it and a black bubble appears. Also I'm not sure what it is called. If anyone knows how to do it, It would be appreciated. Thanks! I would like to make an ordered list, for example: 1. Airplane 2. Boat 3. Car I'd like one of the words to be displayed on my webpage, for example: Boat Then I'd want an up button, and a down button. The up button would display Airplane instead of Boat, and the down button would display Car instead of Boat. Once it got to Car, the same up button would change it back to boat. How do I do this? Thanks. Hi there, I have a search function on my website. When a user types something, options (including his characters) are displayed in a box (layer) as hyperlinks using Ajax, a very common feature these days. My problem is that if the user clicks somewhere else in page the links display stays on screen. I tried to fix the issue by adding an onBlur event to the search box (different id that the "display" div): Code: document.getElementById('livesearch').style.display = 'none'; where livesearch is the id of the hyperlinks displaying div. Job done but...the hyperlink "box" dissapear and the problem now is that the links are not working (if you click on one, the div dissapear first (I SUPPOSE) and no redirection to link is made....) I tried a couple of if else tricks I could think of with no success. No need to say that I am not a javascript wizz....hope you like the js1 username Any help will be appreciated. Thank you in advance, Julian I'd like to create two dropdown (select) lists with a search button next to it so if the user chooses A in the first list and C in the second list and clicks 'search', the results return items that relate to both A and C. Practical Example: User chooses "London" in the first dropdown and "Middle Schools" in the second. Result returns the middle schools I've listed for London. How can this be done or if it can't, is there another way to achieve what I want? -edit- I found what I wanted he http://www.alistapart.com/d/complexd...ts&de=Pancakes However, now my question is what would I put in for the form "action" to populate the results? I have a button given like this: <a href="test.php"><input class="test" type="test"></a> I have a CSS that defined the button as an image, and on hover the button changes. However, on hover, I'd like there to come a drop down that for example link to test 1, test 2, test 3. Is this possible? Thank you! Ok so im new to javascript and I have a button in an interface for an app. It's like drag and drop and i want this button to link you to a certain website searching for what the user types in the searchField1 box. The button is button16. Such as you type dogs into the text box and you click the google button among other search engines and it will redirect you to a google search doing a search for dogs. But how do I make this button search google and search for whats in searchField1. I would really appreciate the help. Im looking everywhere to learn this but just cant find it. If you could tell me how or send me a link to a tutorial that would be great. Thanks! Here is the code: I don't know where and what to add to do that. Please help. I have a radio button that asks Does your URL exist or need to be purchased? and a drop down menu that lists different types of web projects (i.e. new website and website redesign). What I'm trying to achieve is, if the user selects that the URL exists, I would like the drop down menu option new website to be removed from the list. Form: Code: <form> <input type="radio" name="website_status" value="exists"/> Exists <input type="radio" name="website_status" value="purchase_required"/> Needs to be purchased <select name="projects"> <option></option> <option value="new_website">New Website</option> <option value="website_redesign">Website Redesign</option> </select> </form> JavaScript: [CODE] <script> window.onload = initForms; function initForms() { for (var i=0; i<document.forms.length; i++) { document.forms[i].onsubmit = function() {return validForm();} } } function validForm() { var inputarray = document.getElementsByTagName("input"); var selectarray = document.getElementsByTagName("select"); var textarea = document.getElementsByTagName("textarea"); if (inputarray[0].checked == true) { selectarray[0].remove(options[1]); return false; } </script> I've been experimenting with this for the last couple hours and am getting nothing! Could someone please point me in the right direction? |