JavaScript - Selecting Category Details And Products Linked With The Same Category.
Similar TutorialsHey Guys/gasl quick question or see if I could get some help please. When updating our agency's webpage daily, http://opc.deq.state.ms.us/aqi/aqi-msgulfcoastozone.htm I am looking for a shortcut to save time.. When I update air quality numbers. I have to put the conditions. Ex.. 50 = good 100= moderate etc etc. As you see here(bold and underlined) Code: <table class="output1" style="width: 785px"> <TABLE border=1 cellspacing=0 cellpadding=4 width=550> <!-- Column headers --> <TR class='DataColumnHeaderBG'> <TD align=center>AQI</TD> <TD align=center>Category</TD> </TR> <!-- AQI Values --> <TR class='Data'> <TD align=center>44</TD> <TD align=center class='good'>Good</TD> </TR> <TR class='Data'> </TABLE> <div id="divAQIHourly"> <p class="mainTitle"> Well instead of having to type good or moderate every-time to correlate with the numbers, I want to find a way the category can automatically default correctly when I put in just the number. Ex, if I put in the number 100, it automatically knows to issue/ put Moderate with out me having to type it. I semi wrote a code .. Yet can't seem to know how to execute. Seeing if Maybe I can get some assistance. Code: <SCRIPT language=JavaScript type=text/javascript> <table class="output1" style="width: 785px"> <TABLE border=1 cellspacing=0 cellpadding=4 width=550> <!-- Column headers --> <TR class='DataColumnHeaderBG'> <TD align=center>AQI</TD> <TD align=center>Category</TD> </TR> <!-- AQI Values --> <TR class='Data'> <TD align=center>44</TD> <TD align=center class='good'>Good</TD> </TR> <TR class='Data'> </TABLE> function AQICategory(AQIndex) { var AQI=parseFloat(AQIndex) var AQICategory; if (AQI<=50) { AQICategory="Good"; } else if (AQI>50 && AQI<=100) { AQICategory="Moderate"; } else if (AQI>100 && AQI<=150) { AQICategory="Unhealthy for Sensitive Groups"; } else if (AQI>150 && AQI<=200) { AQICategory="Unhealthy"; } else if (AQI>200 && AQI<=300) { AQICategory="Very Unhealthy"; } else if (AQI>300 && AQI<=400) { AQICategory="Hazardous"; } else if (AQI>400 && AQI<=500) { AQICategory="Hazardous"; } else { AQICategory="Out of Range"; } return AQICategory; } //316 function ClearColor() { document.write.outputbox2.style.backgroundColor="white"; } function UnitDetermin(form) { //var document.write document.write.txtunit.style.textAlign="center"; if (document.write.value == 'Good') { document.write.style.backgroundColor="#00e000"; } else if (document.write.value == 'Moderate') { document.write.style.backgroundColor="#ffff00"; } else if (document.write.outputbox2.value == 'Unhealthy for Sensitive Groups') { document.write.style.backgroundColor="#ff7600"; } else if (document.write.value == 'Unhealthy') { document.write.style.backgroundColor="#ff0000"; } else if (document.write.value == 'Very Unhealthy') { document.write.style.backgroundColor="#990049"; } else if (document.write.value == 'Hazardous') { document.write.style.backgroundColor="#7E0023"; } else { document.write.style.backgroundColor="#ffffff"; } return true; } </SCRIPT> Much thanks for any help! 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 Does anyone know the code/script that is used for the image slider and the category switcher (where it says Our Games) as seen on http://en.popmog.com/games? I have no idea how to create something similar on my own site.
I have search for about a week and still no luck. I need to dynamically display mutliple images using javascript, no hardcoding. The images have different categories. For ex. bellTower01.jpg, bellTower02.jpg...and fountain01.jpg, fountain02.jpg.... -Use JavaScript to display several images and scroll through them To display multiple thumbnails, arrange them into a small quantity (no more than 8 per page) Provide pagination I really really really need help. I have never done javascript before, so I'm still learning. I seriously checked out many threads and links but nothing works or is what I want. I hope someone can help me out and hopefully also allow me to become better at coding this kind of stuff. I am not allowed to code in php for this project. I can only use javascript to display the images. Also, I don't really need anything fancy, like slideshows or rotations, I just the image to appear when I select that specific category. I want to get the images from my folder/directory. Right now, I have it working as it just being hardcoded. Below is my code for my galleries page: <?php //creates a session..initializes session data session_start (); echo("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); ?> <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Scenes of Purdue</title> <!-- Styling of the Webpage --> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/lightbox.css"/> </head> <body> <div id="shadowContainer"> <div id="mainContainer"> <div id="mainHeader"></div> <div id="topNav"> <ul> <li><a href="index.php">Home</a></li> <li><a href="galleries.php">Galleries</a></li> </ul> </div><div id="content"> <br /> <div class="clearfix"><h1>Select a Category to View</h1> <br /> <div class="paginationBar" id="paginationBar"> <select id="catDropDown" onchange="javascript:getCategory()"> <option value="-" selected="selected">Select a Category</option> <option value="bellTower">Bell Tower</option> <option value="fountain">Fountain</option> </select> </div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /> <ul id="pagination"> </ul> <div id="r1c1"></div> <div id="r1c2"></div> <div id="r1c3"></div> <div id="r2c1"></div> <div id="r2c2"></div> <div id="r2c3"></div> <script type="text/javascript"><!-- var bellTowerArray = new Array(); bellTowerArray[0] = "bellTower01.jpg"; bellTowerArray[1] = "bellTower02.jpg"; bellTowerArray[2] = "bellTower03.jpg"; bellTowerArray[3] = "bellTower04.jpg"; bellTowerArray[4] = "bellTower05.jpg"; bellTowerArray[5] = "bellTower06.jpg"; bellTowerArray[6] = "bellTower07.jpg"; bellTowerArray[7] = "bellTower08.jpg"; bellTowerArray[8] = "bellTower09.jpg"; bellTowerArray[9] = "bellTower10.jpg"; bellTowerArray[10] = "bellTower11.jpg"; bellTowerArray[11] = "bellTower12.jpg"; bellTowerArray[12] = "bellTower13.jpg"; bellTowerArray[13] = "bellTower14.jpg"; bellTowerArray[14] = "bellTower15.jpg"; bellTowerArray[15] = "bellTower16.jpg"; var fountainArray = new Array(); fountainArray[0] = "fountain01.jpg"; fountainArray[1] = "fountain02.jpg"; fountainArray[2] = "fountain03.jpg"; fountainArray[3] = "fountain04.jpg"; fountainArray[4] = "fountain05.jpg"; fountainArray[5] = "fountain06.jpg"; fountainArray[6] = "fountain07.jpg"; fountainArray[7] = "fountain08.jpg"; fountainArray[8] = "fountain09.jpg"; fountainArray[9] = "fountain10.jpg"; fountainArray[10] = "fountain11.jpg"; fountainArray[11] = "fountain12.jpg"; fountainArray[12] = "fountain13.jpg"; fountainArray[13] = "fountain14.jpg"; fountainArray[14] = "fountain15.jpg"; fountainArray[15] = "fountain16.jpg"; fountainArray[16] = "fountain17.jpg"; fountainArray[17] = "fountain18.jpg"; var currentArray = new Array(); function getCategory() { if(document.getElementById("catDropDown").selectedIndex == 1) { currentArray = bellTowerArray; } else if(document.getElementById("catDropDown").selectedIndex == 2) { currentArray = fountainArray; }//if/else if(document.getElementById("catDropDown").selectedIndex > 0) { displayImages(0); doPagination(); } } function displayImages(start) { //r1c1 if(!(start > currentArray.length-1)) document.getElementById("r1c1").innerHTML = "<a id=\"r1c1_a\" href=\"images/regular/" + currentArray[start] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start] + "\" id=\"r1c1_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>"; else document.getElementById("r1c1").innerHTML = ""; //r1c2 if(!(start+1 > currentArray.length-1)) document.getElementById("r1c2").innerHTML = "<a id=\"r1c2_a\" href=\"images/regular/" + currentArray[start+1] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+1] + "\" id=\"r1c2_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>"; else document.getElementById("r1c2").innerHTML = ""; //r1c3 if(!(start+2 > currentArray.length-1)) document.getElementById("r1c3").innerHTML = "<a id=\"r1c3_a\" href=\"images/regular/" + currentArray[start+2] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+2] + "\" id=\"r1c3_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>"; else document.getElementById("r1c3").innerHTML = ""; //r2c1 if(!(start+3 > currentArray.length-1)) document.getElementById("r2c1").innerHTML = "<a id=\"r2c1_a\" href=\"images/regular/" + currentArray[start+3] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+3] + "\" id=\"r2c1_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>"; else document.getElementById("r2c1").innerHTML = ""; //r2c2 if(!(start+4 > currentArray.length-1)) document.getElementById("r2c2").innerHTML = "<a id=\"r2c2_a\" href=\"images/regular/" + currentArray[start+4] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+4] + "\" id=\"r2c2_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>"; else document.getElementById("r2c2").innerHTML = ""; //r2c3 if(!(start+5 > currentArray.length-1)) document.getElementById("r2c3").innerHTML = "<a id=\"r2c3_a\" href=\"images/regular/" + currentArray[start+5] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+5] + "\" id=\"r2c3_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>"; else document.getElementById("r2c3").innerHTML = ""; } function doPagination() { var numpages = (currentArray.length / 6) +1; var numleft = currentArray.length % 6; document.getElementById("pagination").innerHTML = ""; for(i=0; i<numpages-1; i++) { document.getElementById("pagination").innerHTML += "<span onclick='displayImages("+ i*6 +")'>"+ (i+1) + "<"+"/span> "; } if(numpages <=1) { document.getElementById("pagination").innerHTML = ""; } } document.getElementById("catDropDown").selectedIndex = 0; --> </script> </div> </div> </div> <div id="footer"><a href="readme.php">Readme</a><br /> <div class="clearfix"> <div style="float: left"><a href="adminLogin.php" title="Admin Login" class="adminLoginAjax">Admin login</a></div> </div> </div> </div> </div> </body> </html> Ultimately I'd like a set up resembling http://shop.lululemon.com/Swift_Tank...30/p/1230.html Where you're able to click a swatch color and get a thumbnail of it on the model and a thumbnail of a fabric detail that you could then enlarge. I'm not sure how to go about this. I'm able to do it with one thumbnail, where when you rollover the various swatch colors, the thumbnail of the model gets replaced. However I'm unable to add in the 2 other thumbnails (on that site they're using 3 but I would only need 2) that would change at the same time, where you could switch back and forth from at detail of the model and the fabric. I don't necessarily need the zoom function, but if it is possible to do all of those that would be good too. Otherwise I just need help coding how to at least get the swatches to change 3 images upon mouseover and that 2 of those images would be like the 3 thumbnails on the link above and would replace the larger thumbnail once clicked. 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! I am trying to implement a linked list in javascript. So far i have: Code: function linkedList(){ var llNode=function(value){ this.next=null; this.previues=null; this.value=value; } var that=this; this.length=0; this.head=null; this.tail=null; this.add=function(value){ if(length==0){ var tmp=new llNode(value) that.head=tmp; that.tail=tmp; } else{ var tmp=new llNode(value); tmp.previues=that.tail; that.tail.next=tmp; that.tail=that.tail.next; } that.length++; } } } When I use: Code: var ll=new linkedList(); ll.add(1); ll.add(2); both the head and tail of ll point to the node whose value is to, and the next and previues pointer on that node are both null. I have that image at the top of my website. What I want to do is have it be a link that toggles a div somewhere else on the board. I have been using this code: Code: <input type="checkbox" name="thebox" onclick="javascript:toggleDiv('block');">Toggle Block <div id="searchbock">*search form here, obviously*</div> <script language="javascript"> function toggleDiv(id) { var div = document.getElementById(id); var current = div.style.display; if (current == 'none') div.style.display = 'block'; else div.style.display = 'none'; } </script> But the checkbox is rather ugly and I would much rather use my custom image. Thoughts? Hi all: This script and code works great, but in order for me to finish, I need a way of passing to the next PHP page which check box is checked. Currently, it is just passing a single value (1, 2, 3, 4, 5, or 6) depending on the last box checked. I need a way to record which check boxes are selected. Code: <html> <head> <script type="text/javascript"> var majors = { "001 - Exchange" : [ 2, 6 ], "003 - Academic Foundations" : [ 2, 6 ], "005 - Pre-Engineering" : [ 2, 6 ], "006 - Pre-Business" : [ 2, 6 ], "008 - Pre-Nursing" : [ 2, 6 ], "010 - Accounting" : [ 3, 4 ], "014 - Afro-American Studies" : [ 2, 6 ], "050 - American Studies" : [ 2, 6 ], "070 - Anthropology" : [ 2, 6 ], "080 - Art" : [ 2, 6 ], "082 - Art History" : [ 2, 6 ], "090 - Arts and Sciences" : [ 2, 6 ], "100 - Astronomy" : [ 2, 6 ], "115 - Biochemistry" : [ 2, 6 ], "120 - Biology" : [ 2, 5, 6 ], "124 - Biomedical Technology" : [ 2, 6 ], "130 - Botany" : [ 2, 6 ], "135 - Business Administration" : [ 3, 4 ], "140 - Business Law" : [ 3, 4 ], "160 - Chemistry" : [ 2, 5, 6 ], "163 - Childhood Studies" : [ 2, 5, 6 ], "190 - Classics" : [ 2, 6 ], "198 - Computer Science" : [ 2, 5, 6 ], "200 - Creative Writing" : [ 5 ], "202 - Criminal Justice" : [ 2, 5, 6 ], "203 - Dance" : [ 2, 6 ], "220 - Economics" : [ 2, 6 ], "300 - Education" : [ 2, 6 ], "350 - English" : [ 2, 5, 6 ], "352 - English - American Literature" : [ 2, 5, 6 ], "354 - English - Film Studies" : [ 2, 5, 6 ], "360 - European Studies" : [ 2, 6 ], "387 - Film Studies" : [ 2, 6 ], "390 - Finance" : [ 3, 4 ], "415 - Foreign Languages" : [ 2, 6 ], "420 - French" : [ 2, 6 ], "460 - Geological Sciences" : [ 2, 6 ], "470 - German" : [ 2, 6 ], "490 - Greek" : [ 2, 6 ], "500 - Hebraic Studies" : [ 2, 6 ], "509 - Historical Methods and Skills" : [ 2, 6 ], "510 - History, General" : [ 2, 6 ], "512 - History, American" : [ 2, 5, 6 ], "516 - African Asian Latin American and World Hist" : [ 2, 6 ], "520 - Home Economics" : [ 2, 6 ], "525 - Honors Program" : [ 2, 6 ], "533 - Human Resource Development" : [ 3 ], "537 - Hospitality Management" : [ 3 ], "549 - International Studies" : [ 2, 6 ], "555 - Student Proposed Major" : [ 2, 6 ], "560 - Italian" : [ 2, 6 ], "565 - Japanese" : [ 2, 6 ], "570 - Journalism" : [ 2, 6 ], "580 - Latin" : [ 2, 6 ], "590 - Latin American Studies" : [ 2, 6 ], "601 - Law - Day Student" : [ 1 ], "602 - Law - Evening Student" : [ 1 ], "606 - Liberal Studies" : [ 2, 5, 6 ], "615 - Linguistics" : [ 2, 5, 6 ], "620 - Management" : [ 3, 4 ], "623 - Management Science and Info Systems" : [ 3, 4 ], "626 - Managerial Economics" : [ 4 ], "630 - Marketing" : [ 3, 4 ], "640 - Mathematics" : [ 2, 6 ], "645 - Mathematical Science" : [ 5 ], "660 - Medical Technology" : [ 2, 6 ], "680 - Microbiology" : [ 2, 6 ], "698 - Museum Studies" : [ 2, 6 ], "700 - Music" : [ 2, 6 ], "701 - Music, Applied" : [ 2, 6 ], "705 - Nursing" : [ 2, 6 ], "730 - Philosophy" : [ 2, 6 ], "740 - Physical Education" : [ 2, 6 ], "742 - Physical Therapy" : [ 5 ], "750 - Physics" : [ 2, 6 ], "760 - Physiology" : [ 2, 6 ], "780 - Plant Physiology" : [ 2, 6 ], "790 - Political Science" : [ 2, 6 ], "830 - Psychology" : [ 2, 5, 6 ], "834 - Public Administration" : [ 5 ], "840 - Religon" : [ 2, 6 ], "842 - Rhetoric" : [ 5 ], "860 - Russian" : [ 2, 6 ], "890 - General Science" : [ 2, 6 ], "910 - Social Work" : [ 2, 6 ], "920 - Sociology" : [ 2, 6 ], "940 - Spanish" : [ 2, 6 ], "950 - Speech" : [ 2, 6 ], "960 - Statistics" : [ 2, 6 ], "964 - Teacher Preparation" : [ 2, 6 ], "965 - Theater Arts" : [ 2, 6 ], "975 - Urban Studies and Community Development" : [ 2, 6 ], "976 - Urban Planning" : [ 2, 6 ], "981 - Volunteer Organization and Leadership" : [ 2, 6 ], "988 - Womens & Gender Studies" : [ 2, 6 ], "989 - Writing" : [ 2, 6 ], "990 - Zoology" : [ 2, 6 ] }; Array.prototype.isMember = function( find ) { for ( var i = 0; i < this.length; ++i ) { if ( this[i] == find ) return true; } return false; } function resetOptions( ) { var form = document.theForm; var sel = form.Majors; for ( var s = sel.options.length-1; s > 0; --s ) { sel.options[s] = null; } var checked = [ ]; for ( var cb = 0; cb < form.schools.length; ++cb ) { if ( form.schools[cb].checked ) checked.push( form.schools[cb].value ); } for( major in majors ) { var mschools = majors[major]; for ( var c = 0; c < checked.length; ++c ) { if ( mschools.isMember( checked[c] ) ) { sel.options[sel.options.length] = new Option( major, major ); break; } } } } </script> </head> <title>Search</title> <body bgcolor="99CCFF"> <center> <br> <center>Search:<table border='1'> <form name='theForm' action='display.php' method='post'> <tr><td>ID: </td><td><input type="text" name="ID"/></td></tr> <tr><td>Last Name: </td><td><input type="text" name="NAME_LAST"/></td></tr> <tr><td>First Name: </td><td><input type="text" name="NAME_FIRST"/></td></tr> <tr><td valign="top">School: </td> <td> <input type="checkbox" name="schools" value="1" onClick="resetOptions()"> Law School<br/> <input type="checkbox" name="schools" value="2" onClick="resetOptions()"> College of Arts and Sciences<br/> <input type="checkbox" name="schools" value="3" onClick="resetOptions()"> School of Business (Undergraduate)<br/> <input type="checkbox" name="schools" value="4" onClick="resetOptions()"> School of Business (Graduate)<br/> <input type="checkbox" name="schools" value="5" onClick="resetOptions()"> Graduate School<br/> <input type="checkbox" name="schools" value="6" onClick="resetOptions()"> University College </td> </tr> <tr><td>Major: </td><td><select name="Majors"> <option value="" selected>Select a major</option> </select></td></tr> <tr><td>Order By: </td><td> <select name="ORDER_BY"> <option value = "" selected> Select One </option> <option name="NAME_LAST" value = "NAME_LAST ASC"> Last Name </option> <option name="CURRIC_CD" value = "CURRIC_CD ASC"> Major </option> <option name="ID" value = "ID ASC"> RUID </option> <option name="UNIT_OF_REG_CD" value = "UNIT_OF_REG_CD ASC"> School </option> <option name="EMAIL_ADDR" value = "EMAIL_ADDR ASC"> Email Address </option> </select></td> </tr> </table> <br><br> <input type='submit'/> </form><br><br> </center> </body> </html> Thanks in advance. Hello, this is my very first post, and I hope to get some help, . Please dont take this as a code dump. The following script is a working script,, Which correctly displays a 2 level chain-linked select box My problem is I need to make a third box which option VALUE will be the same as the option CLASS of its parent item in the second box. Any pointers? PHP Code: <!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" lang="en" xml:lang="en"> <head> <title>Unobtrusive dynamic select boxes | Single dynamic selectbox example</title> <script type="text/javascript"> function dynamicSelect(id1, id2) { // Feature test to see if there is enough W3C DOM support if (document.getElementById && document.getElementsByTagName) { // Obtain references to both select boxes var sel1 = document.getElementById(id1); var sel2 = document.getElementById(id2); // Clone the dynamic select box var clone = sel2.cloneNode(true); // Obtain references to all cloned options var clonedOptions = clone.getElementsByTagName("option"); // Onload init: call a generic function to display the related options in the dynamic select box refreshDynamicSelectOptions(sel1, sel2, clonedOptions); // Onchange of the main select box: call a generic function to display the related options in the dynamic select box sel1.onchange = function() { refreshDynamicSelectOptions(sel1, sel2, clonedOptions); }; } } function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) { // Delete all options of the dynamic select box while (sel2.options.length) { sel2.remove(0); } // Create regular expression objects for "select" and the value of the selected option of the main select box as class names var pattern1 = /( |^)(select)( |$)/; var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)"); // Iterate through all cloned options for (var i = 0; i < clonedOptions.length; i++) { // If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) { // Clone the option from the hidden option pool and append it to the dynamic select box sel2.appendChild(clonedOptions[i].cloneNode(true)); } } } </script> <script type="text/javascript"> window.onload = function() { dynamicSelect("pda-brand", "pda-type"); } </script> </head> <body> <form action="#"> <div> <select id="pda-brand"> <option value="select">Select PDA brand...</option> <option value="dell">Dell</option> <option value="hp">HP</option> <option value="palmone">PalmOne</option> </select> <select id="pda-type"> <option class="select" value="select">Select PDA type...</option> <option class="dell" value="aximx30">Axim X30</option> <option class="dell" value="aximx50">Axim X50</option> <option class="hp" value="ipaqhx2750">iPAQ hx2750</option> <option class="hp" value="ipaqrx3715">iPAQ rx3715</option> <option class="palmone" value="tungstene2">Tungsten E2</option> <option class="palmone" value="zire72">Zire 72</option> </select> <select id="pda-amount"> <option class="select" value="select">Select PDA Amount...</option> <option class="aximx30" value="1">1</option> <option class="aximx30" value="2">2</option> <option class="aximx50" value="1">1</option> <option class="aximx50" value="2">2</option> <option class="aximx50" value="3">3</option> <option class="aximx50" value="4">4</option> <option class="ipaqhx2750" value="1">1</option> <option class="ipaqhx2750" value="2">2</option> <option class="ipaqhx2750" value="3">3</option> <option class="ipaqhx2750" value="4">4</option> <option class="ipaqhx2750" value="5">5</option> <option class="ipaqrx3715" value="1">1</option> <option class="ipaqrx3715" value="2">2</option> <option class="tungstene2" value="1">1</option> <option class="zire72" value="1">1</option> <option class="zire72" value="2">2</option> <option class="zire72" value="3">3</option> </select> </div> </form> </body> </html> I have been searching for an answer to this pretty much all day... I'm fed up. Can someone help? I want to be able to open wmv videos in an embedded windows movie player using javascript. Something identical to what you will find he http://www.hunlock.com/blogs/Everyth...ding#quickIDX2...go down to the heading :'How to make a video select list'. I am trying to emulate this but for wmv files and windows media player rather than for flsh files. I have tested this on one link and it does not open. i just get a black media screen and nothing. Here's my code: Here's the script within the head tag: Code: <script type="text/javascript">function playVideo(sourceId, targetId) { if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);} if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);} targetId.innerHTML=sourceId.innerHTML; return false;}</script> Here`s the link: Code: <a href="#" onclick='return playVideo("selectdemo1","videoPlayback")'> video 1</a> and here's the embedding and the play back code (The play back area is within the same page as the link): Code: div id="selectdemo1"> <OBJECT id='mediaPlayer' width="450" height="445" classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701' standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'> <param name='fileName' value="\\HOC\AdminPrivate\FS08U\TurgeL\Documents\Site Web\videos\Add_Documents.wmv"> <param name='animationatStart' value='true'> <param name='transparentatStart' value='true'> <param name='autoStart' value="false"> <param name='showControls' value="true"> <param name='loop' value="false"> <EMBED type='application/x-mplayer2' pluginspage='http://microsoft.com/windows/mediaplayer/en/download/' id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1' bgcolor='darkblue' showcontrols="true" showtracker='-1' showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="450" height="445" src="http://servername/\\\\HOC\\AdminPrivate\\FS08U\\TurgeL\\Documents\\Site Web\\videos\\Add_Documents.wmv&autoplay=1" autostart="false" designtimesp='5311' loop="false"> </EMBED> </OBJECT> </div> </div> Please help meeeeeeeeeeeeeeeeeeee! Hello everyone! First of all let me introduce myself as this is my first post on the coding forums! My name's Tom, I live in Sheffield, England and I'm 21 years old. Anyway, I have a little problem on a project I'm working on. I have a div set with an onclick link (onclick="location.href='http://www.google.com/';"). Thats not the problem, that works fine. The problem I'm having is that I then have another div inside this div that I don't want to be linked at all but the outer div's link seems to still be active on the inner one. Does anyone have any idea how to stop the link on the inner div whilst still keeping the outer div linked? Thanks alot for any help, Regards, Tom. I am trying to have a text link above Google Maps link to a marker on my map. When the link is clicked, the map will automatically center itself on the marker. I already have the custom markers and locations, I am just not that good with Javascript and jQuery to figure it out. I tried to use Code: <a href="javascript: map.panTo(new LatLng(25.2, 105.7))">Mexico</a> and the link shows up, but nothing happens. Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { font-family: Helvetica, Arial, sans-serif; font-size:10px; margin:0; } #content { } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(39.346246,-76.624446); var settings = { zoom: 15, center: latlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map(document.getElementById("map_canvas"), settings); var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<div id="bodyContent">'+ '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var loyolaImage = new google.maps.MarkerImage('images/Loyola.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var loyolaShadow = new google.maps.MarkerImage('images/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(65, 50)); var loyolaPos = new google.maps.LatLng(39.3462326,-76.624446); var loyolaMarker = new google.maps.Marker({ position: loyolaPos, map: map, icon: loyolaImage, shadow: loyolaShadow, title:"Loyola", zIndex: 3}); var jhuImage = new google.maps.MarkerImage('images/Jhu.png', new google.maps.Size(150,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var jhuShadow = new google.maps.MarkerImage('images/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(60, 50) ); var jhuPos = new google.maps.LatLng(39.329157,-76.620477); var jhuMarker = new google.maps.Marker({ position: jhuPos, map: map, icon: jhuImage, shadow: jhuShadow, title:"Johns Hopkins", zIndex: 2 }); var fellsImage = new google.maps.MarkerImage('images/FellsPoint.png', new google.maps.Size(150,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var fellsShadow = new google.maps.MarkerImage('images/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(60, 50) ); var fellsPos = new google.maps.LatLng(39.28231,-76.593611); var fellsMarker = new google.maps.Marker({ position: fellsPos, map: map, icon: fellsImage, shadow: fellsShadow, title:"Johns Hopkins", zIndex: 4 }); var towsonImage = new google.maps.MarkerImage('images/Towson.png', new google.maps.Size(150,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var towsonShadow = new google.maps.MarkerImage('images/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(60, 50) ); var towsonPos = new google.maps.LatLng(39.3322248,-76.610944); var towsonMarker = new google.maps.Marker({ position: towsonPos, map: map, icon: towsonImage, shadow: towsonShadow, title:"Towson", zIndex: 1 }); google.maps.event.addListener(companyMarker, 'click', function() { infowindow.open(map,companyMarker); }); } </script> <script> google.maps.event.addDomListener(controlUI, 'click', function() { map.setCenter(chicago) </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:500px; height:300px"></div> <a href="javascript: map.panTo(new LatLng(39.393248,-76.610944))">Towson</a> </body> </html> I have a form with a postcode field in it I want to add a button or text link next to this field which if clicked on goes to the google maps url querying that postcode i.e. if the postcode text in the field (form not submitted) was SW1A 1AA then without submitting that form there would be a button / link next to it which when clicked on went to "http://maps.google.co.uk/?q=SW1A1AA" Pretty sure Java should be able to do this ? Hi, I am working in Dreamweaver CS4 with both HTML and Javascript. I created a preview area and some thumbnails beneath. Each thumbnail is linked to a full size image. So far, so good. I'm attempting to follow a Javascript tutorial to make a lightbox. I added CSS rules and the javascript code (below) in the hopes of having my thumbnail show the image in the clickable preview area when hovering. However, my fullsize image does not display in the preview area. Interestingly, when I hover over the preview, I see at the bottom of my browser that it is still linked, just not displaying. The preview area is blank. Any ideas? I've put the site online artmarcsimon dot com Thanks! Javascript: Code: $(document).ready(function(){ $('.gallery_thumbnails a').click(function(e){ e.preventDefault(); $('.gallery_thumbnails a').removeClass('selected'); $('.gallery_thumbnails a').children().css('opacity','1'); $(this).addClass('selected'); var photo_caption = $(this).attr('title'); var photo_fullsize = $(this).attr('href'); var photo_preview = photo_fullsize.replace('_fullsize','_preview'); $('.gallery_preview').html('<a href="'+photo_fullsize+'" title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>'); }); }); Greetings, Does anyone know the code to create a function and form to make the position of a button change dynamically based on a mouseover event please? Whereby a viewer's cursor will chase the button around an IE page for infinity! I would prefer to do this without the need for any plugins if at all possible, and it does not need to be cross-platform, just IE is fine. Many thanks Hey there guys, I am building a site of which I would like the contact information and form to pop up from the button on the menu/header frame into the main frame as a lightbox ...no matter which page is loaded in the main frame. I was trying to experiment with the archived "jQuery Contact form for your website" tutorial from web devlopment blog . com. (I didnt want to post a link to it as I dont want to possibly flag the moderators) Any Ideas? Go to http://whitetailfantasies.com to see the layout and what I am going for. Thanks Hi guys, new to javascript and need some basic help or advice. I have this code which changes the the background postion of the parent(ul) Code: <ul> <li class="highways" onmouseover="if(this.parentNode) this.parentNode.style.background='transparent url(http://www.webaddress.co.uk/website/media/images/Sub_nav_img.jpg) no-repeat 0 -149px';" onmouseout="if(this.parentNode) this.parentNode.style.background='transparent url(http://www.webaddress.co.uk/website/media/images/Sub_nav_img.jpg) no-repeat 0 0';"><a href=" " title="Highways">Highways</a></li> </li> </ul> I would like to do the same thing change the backgroundpossition/images of the div (id="flash") on the hover of the a within the the (div="mySlides2" > div ) Code: <div id="flash"> <img src="images/img1.jpg" width="886" height="229" /> <div id="myController2"> <span class="jFlowControl2">No 1 </span> <span class="jFlowControl2">No 2 </span> </div> <div id="mySlides2"> <div> <a (would like to do somthing on the hover of this) class="vm" href="#" title="Vulnerability Management"></a> <a class="grc" href="#" title="grc"></a> <a class="pci" href="#" title="pci"></a> <a class="gcs" href="#" title="gcs"></a> <a class<div id="flash"> <img src="im="pt" href="#" title="Penetration Testing"> </a> <span class="jFlowNext2 NextFlash"> </span> </div> <div> <span class="jFlowPrev2 BackFlash"> </span> </div> </div> </div> any help of advice would b appricated Specifically i was wondering if anyone had any ideas on how to select the specific character when hovering over a word? I have not been able to find any documentation on this however, there is a demo site i found for a plugin that allows character selection. http://labs.bitmeister.jp/moamoa/demo.html i dont need anything that large and elaborate... Edit I'm pretty wel experinced with jquery, I know it's possible with jquery |