JavaScript - How To Show Random Elements From A List
Hi,
I have a dynamically generated list of which contain div's with a class of product. I want to only display 6 random products out of the whole list on page load and hide the rest. I am quite new to javascript so some help would be much appreciated. Thanks Similar TutorialsHi. Now I know this is a fairly easy task, but I need to show the random div from a selection of 10 which all have the same class. I am not able to do this using unique IDs as the divs will be created by the end user as a repeating region from Adobe contribute. So I'll have a list looking something like the following but I only want one to show. Any ideas? Code: <div class="mydiv">Line Number One</div> <div class="mydiv">Line Number Two</div> <div class="mydiv">Line Number Three</div> <div class="mydiv">Line Number Four</div> <div class="mydiv">Line Number Five</div> <div class="mydiv">Line Number Six</div> <div class="mydiv">Line Number Seven</div> <div class="mydiv">Line Number Eight</div> <div class="mydiv">Line Number Nine</div> <div class="mydiv">Line Number Ten</div> hi, I am now building my website as a final project for my year. I am doing graphic design, so the website is actually some kind of portfolio. The idea of this website (which is not yet online) is this : it is some kind of big pasteboard on which i will display all the work i have done in my academy since a couple of years. The pasteboard is at the moment a background image/color field of given dimension (i figure that was the only way to do what i wanted...see further) Every works/image load on a random place and then can be dragged, and dropped (this part i already figured out). At the moment, every image (for every project), is inside a <div>. What i need help for is this: at the moment, my function successfully load 1 element at random position. I now want this function to work separately, for every <div>, so that every image is randomly placed on load, on the background image (and not the browser window, which is smaller). Here is the code i have for the moment (sorry for the mess, i really am just beginning! and truely, i don't get half of this, i just know it is working at the moment): Code: <head> <!--// function random start position--> <script> var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM = document.getElementById; if (stdDOM) aDOM = 1; else {ieDOM = document.all; if (ieDOM) aDOM = 1; else { var nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;}} function xDOM(objectId, wS) { if (stdDOM) return wS ? document.getElementById(objectId).style: document.getElementById(objectId); if (ieDOM) return wS ? document.all[objectId].style: document.all[objectId]; if (nsDOM) return document.layers[objectId]; } // More Object Functions function setObjVis(objectID,vis) {var objs = xDOM(objectID,1); objs.visibility = vis;} function moveObjTo(objectID,x,y) {var objs = xDOM(objectID,1); objs.left = x; objs.top = y;} // Browser Window Size and Position function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;} function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;} function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;} function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;} // Random Position Script var xxx = Math.floor(Math.random()* (pageWidth()-230)); var yyy = Math.floor(Math.random()* (pageHeight()-50)); function start() {var x = (posLeft()+xxx) + 'px'; var y = (posTop()+yyy) + 'px'; moveObjTo('myobj',x,y); setObjVis('myobj','visible');} window.onload = start; window.onscroll = start;// JavaScript Document </script> </head> <body bgcolor="#9A9B95" background="../website/background.jpg"> <div id="myobj" style="position:absolute" > <img src="oblique strategies holes.jpg" width="595" height="842" style="position:absolute" class="dragme"/> </div> <div id="div2"> <img src="oblique strategies choices.jpg" width="842" height="595" style="position:absolute" class="dragme" /> </div> </body> now, what i really want is this function to work for every <div> but i know there are also some flaws (that i'm unfortunately unable to fix myself): the integers "230 and 50" in the "random position script" should be replaced byt the width and heigh of the image/div (so i guess i should find a function that can get those numbers, name them "ImgWeidth" and "ImgHeigh" so that those integer can be called in this "random position" function. also, once the div 'myobj' is loaded, randomly, it behaves like if position=fixed (so stays on the spot when i scroll down the window). I think this is because it calculates the position according to the browser window and not my background. this has be fixed, because i don't want all my images to load only in the browser window (but on the whole pasteboard/background image). well, i guess this is already 3 questions in one. so i will let it like that for the moment. Sorry if i'm saying too much/not enough... beginners mistake!:confused: thanks in advance for any help you will give me! Hi, onClick on a select element, I am trying to hide or show two different table rows. It does not seem to be working on internet explorer Thanks for any help! Code: function showMe (a, box) { document.getElementById(a).style.display = "table-row"; document.getElementById(a+"2").style.display = "table-row"; } function hideMe (a, box) { document.getElementById(a).style.display = "none"; document.getElementById(a+"2").style.display = "none"; } Code: <tr><td><b>Account Type:</b><br><small>(If you are both a club and college coach, please select college coach)</small>:</td><td><SELECT NAME="type" size="3"><OPTION VALUE="coach" onClick="hideMe('hide', this)" >Coach/Manager</OPTION><OPTION VALUE="college_coach" onClick="showMe('hide', this)">College Coach</OPTION> </SELECT></div> </td></tr> <tr id="hide" style="display:none;"><td><b>College:</b></td><td colspan="2"><input type="text" name="college" value=""></td></tr> <tr id="hide2" style="display:none;"><td><b>Title:</b></td> <td><select name="gender" size="1"> <option VALUE="men" >Men's</option><option VALUE="women" >Women's</option><option VALUE="both" >Men's and Women's</option> </select></div> </td> <td><select name="title" size="1"><OPTION VALUE="head" >Head Coach</OPTION><OPTION VALUE="assistant" >Assistant Coach</OPTION> </select></div> </td></tr> here is the live demo if you would like to see it: http://new.maddogmania.com/application/register.php I have a page that is generated using php. Below, the pdf newsletter for each month is embedded directly into the page. What I want to do is have some javascript that when the link for a month is clicked, the embedded pdf expands below and when the user clicks on another month, that newsletter is hidden then the one they clicked on gets displayed; so only one newsletter is displayed at a time. I have searched all over the internet and I havn't found anything that will solve my problem. PHP Code: $listmonth=array("January","February","March","April","May","June","August","September","October","November","December"); foreach ($listmonth as $month) { if (file_exists($year2.'-'.$month.'.pdf')) { echo '<embed src="'.$year2 .'-'.$month.'.pdf#toolbar=0&navpanes=0" width="500" height="375">' ;} else {echo $month;} echo '<br />'; } Hi, I have been here before and was responded to quickly with professional results, and you guys have managed to bring me back! Anyway, I am horrible at coding, and I need to know how to write this, basically when the page loads a random number is generated <script type="text/javascript"> window.onload=function() { var random = Math.rand() * (6 + 1); Then later in the page if (random = 1) { document.write("1") //I'm not sure if thats the code to show simple text, but I'm pretty sure it is, correct me if I'm wrong } if (random = 2) { document.write("2") } if (random = 3) { document.write("3") } and so on so forth. I will be changing the numbers in the script to my accord and use of the script, so please use the //notes to mark where and what things is, with a brief explanation, so I don't have to unscramble the code to find out what it is. Thanks fellow nerds! hi, the following function shows a list of Counties populates by a PHP page: Code: $.getJSON('http://www.mypubspace.com/dashtest/countyjson.php', function(data){ var myhtml = '<ul>'; for(i=0; i<data.length; i++) { myhtml += '<li>' + data[i].County + '</li>'; } myhtml += '</ul>'; $("#countyshow").html(myhtml); }); I would like to now, when a user clicks on a County, they are shown a list of pubs based on that County (so, I'll create a new PHP page WHERE County = 'County' or something?!) at the moment, when a user clicks on a County this function is passed: Code: function gopublist(event) { var stackLayout = document.getElementById('stackLayout').object; // Replace with id of StackLayout stackLayout.setCurrentView('view4'); } So, passing a value through so I can modify the SQL in the PHP page to filter the counties?! Please help? Hi, I'm trying to find out the min and max values of randomly generated values in a array list. Its a checkout system that randomly add a customer to a queue and does the same to remove a customer depending on a randomly generated number. Ive managed to figure out the mean of the queue but can only display the total values added to the list rather than display when the queue was at it biggest value. If anyone can point me in the right direction it would be greatly appreciated. ___________________________________________________________________ import java.io.BufferedWriter; import java.io.FileWriter; import java.io.IOException; import java.util.ArrayList; import java.util.LinkedList; import java.util.ListIterator; import java.util.Queue; import java.util.Random; public class Checkout { private Queue<String> tillQueue; private int rndNumber; private int currentLen; private ArrayList <Integer>lengthList; private Random r; public Checkout() { tillQueue = new LinkedList<String>(); currentLen = 0; //current queue length lengthList = new ArrayList <Integer>(); r= new Random(); } public void simulation() { System.out.println("Time" + "\t" + "Rnd" + "\t" +"Queue Status"); for (int t=2; t<10; t++) { rndNumber =r.nextInt(6)+1; if (rndNumber==2 || rndNumber==4 || rndNumber==6) { tillQueue.add(String.valueOf(t)); currentLen++; } else if ((rndNumber==1 || rndNumber==3) && !tillQueue.isEmpty()) { tillQueue.remove(); currentLen--; } else if(rndNumber==5) { //do nothing } if(tillQueue.isEmpty()) { System.out.println(t + "\t" + rndNumber + "\t" + "Queue is empty"); } else { System.out.println(t + "\t" + rndNumber + "\t" + tillQueue.toString()); } lengthList.add(new Integer(currentLen)); } } public double CalculateMeanLength() { double mean=0.0; int sumOfLengths = 0; for (int i = 0; i<lengthList.size();i++) { sumOfLengths=sumOfLengths+(Integer)lengthList.get(i).intValue(); } mean = (double)sumOfLengths/lengthList.size(); return mean; } public int ShowMax() { int max = 0; //i know its going to be a for loop of some kind but not sure how to do it// } ----------------------------output via controller================ Time Rnd Queue Status 2 6 [2] 3 5 [2] 4 3 Queue is empty 5 5 Queue is empty 6 1 Queue is empty 7 5 Queue is empty 8 5 Queue is empty 9 4 [9] mean length = 0.375 max length = 3 //the max length here should be 1 =========================================== Thanks in advance for your help Hi Chaps, I have a dynamic list menu: PHP Code: <?php $currentCat = ''; $first = true ;?> <ul> <?php do { if ($currentCat != $row_rsCategory['catname']) { if (!$first) { echo "\n</ul>\n</li>\n"; } $currentCat = $row_rsCategory['catname']; ?> <li><?php echo $row_rsCategory['catname']; ?> <ul> <?php }?> <li><?php echo $row_rsCategory['galleryname']; ?></li> <?php $first = false; } while ($row_rsCategory = mysql_fetch_assoc($rsCategory)); ?> </ul> </li> </ul> I've tried looking for a show/hide script, to toggle category names/gallery names, but could only find ones that have static menu options, and have failed to edit existing code to fit....any help or guidence would be appreciated! hi, I would like to show a list of pubs in a town that the user has selected from the drop down list http://www.mypubspace.com/dashtest/order.html it is all there working but in a different way If you type Brighton into the Town search, it shows a list of pubs in that town, GREAT! If you click the 'show towns list' link, a drop down appears, (this is where my problem is) When you click the town, I would like to get the list of pubs in that town basically get rid of the form where you type in the box and click the button here is my code HTML and Javascript Code: <html> <body> <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function ajaxFunction(){ var townRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari townRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ townRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ townRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server townRequest.onreadystatechange = function(){ if(townRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = townRequest.responseText; } } var name = document.getElementById('name').value; var county = document.getElementById('county').value; var town = document.getElementById('town').value; var queryString = "?name=" + name + "&county=" + county + "&town=" + town; townRequest.open("GET", "http://www.mypubspace.com/dashtest/pubs.php" + queryString, true); townRequest.send(null); } function townlistFunction(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxTownlist'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true); ajaxRequest.send(null); } function countylistFunction(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxCountylist'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/county-select.php", true); ajaxRequest.send(null); } function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } //--> </script> <a href="#" onClick="townlistFunction();">show towns list</a> <a href="#" onClick="countylistFunction();">show counties list</a> <div id="ajaxTownlist"></div> <div id="ajaxCountylist"></div> <form name='myForm'> Pub Name: <input type='text' id='name' /> <br /> County: <input type='text' id='county' /> <br /> Town: <input type='text' id='town' /> <input type='button' onclick='ajaxFunction()' value='Query MySQL' /> </form> <div id='ajaxDiv'></div> </body> </html> here is my pubs.php code Code: <?php $dbhost = "xxx"; $dbuser = "xxx"; $dbpass = "xxx"; $dbname = "xxx"; //Connect to MySQL Server mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error()); // Retrieve data from Query String $name = $_GET['rsPubName']; $sex = $_GET['rsTown']; $wpm = $_GET['rsCounty']; // Escape User Input to help prevent SQL Injection $name = mysql_real_escape_string($name); $town = mysql_real_escape_string($town); $county = mysql_real_escape_string($county); //build query $query = "SELECT * FROM pubs WHERE rsTown = '$town'"; $qry_result = mysql_query($query) or die(mysql_error()); //Build Result String $display_string = "<table>"; $display_string .= "<tr>"; $display_string .= "<th>Region</th>"; $display_string .= "<th>Pub Name</th>"; $display_string .= "<th>Town</th>"; $display_string .= "<th>County</th>"; $display_string .= "</tr>"; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)){ $display_string .= "<tr>"; $display_string .= "<td>$row[Region]</td>"; $display_string .= "<td>$row[rsPubName]</td>"; $display_string .= "<td>$row[rsTown]</td>"; $display_string .= "<td>$row[rsCounty]</td>"; $display_string .= "</tr>"; } $display_string .= "</table>"; echo $display_string; ?> here is my town_select.php code Code: <?php $dbhost = "xxx"; $dbuser = "xxx"; $dbpass = "xxx"; $dbname = "xxx"; //Connect to MySQL Server mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error()); // Retrieve data from Query String $town = $_GET['rsTown']; // Escape User Input to help prevent SQL Injection $town = mysql_real_escape_string($town); //build query $query = "SELECT DISTINCT rsTown, COUNT(PUBID) As PubCount FROM pubs GROUP BY rsTown ORDER BY rsTown ASC"; $qry_result = mysql_query($query) or die(mysql_error()); // Insert a new row in the table for each person returned $display_string .= "<form name=\"form3\" method=\"post\" action=\"\">"; $display_string .= "<select name=\"menu2\" onChange=\"MM_jumpMenu('parent',this,0)\" class=\"textbox\">"; $display_string .= "<option value=\"\">Search by Town...</option>"; while($row = mysql_fetch_array($qry_result)){ $display_string .= '<option value="rsTown='.$row['rsTown'].'" onclick=\"ajaxFunction()\" id=\"town\">'.$row['rsTown'].' ('.$row['PubCount'].')</option>'; } $display_string .= "</select>"; $display_string .= "</form>"; echo $display_string; ?> Hi Everyone! I would genuinely appreciate some help on this one. I'm trying to combine a chained drop down list with the ability for the last selection to show/hide a div. I've researched and found ways to do both individually, but I'm hitting the wall when it comes to combining the javascript. This is how I'd like it to work: -- User selects from DropDown List 1. -- DropDown List 2 options appear based on the selection in 1. -- User selects from DropDown List 2, -- Appropriate div is shown. Here's the Javascript I'm using to show/hide a div: Code: function showDiv(divID) { var div = document.getElementById(divID); div.style.display = ""; //display div } function hideDiv(divID) { var div = document.getElementById(divID); div.style.display = "none"; // hide } function hideAllDivs() { //Loop through the seclect menu values and hide all var courseSelect = document.getElementById("courseSelect"); for (var i=0; i<=courseSelect.options.length -1; i++) { hideDiv(courseSelect.options[i].value); } } function toggle(showID){ hideAllDivs(); // Hide all showDiv(showID); // Show the one we asked for } Here's the Javascript for the chained drop down lists: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" defer> function cascadeSelect(parent, child){ var childOptions = child.find('option:not(.static)'); child.data('options',childOptions); parent.change(function(){ childOptions.remove(); child .append(child.data('options').filter('.sub_' + this.value)) .change(); }) childOptions.not('.static, .sub_' + parent.val()).remove(); } $(function(){ cascadeForm = $('.cascadeTest'); deptartmentSelect = cascadeForm.find('.deptartmentSelect'); courseSelect = cascadeForm.find('.courseSelect'); cascadeSelect(deptartmentSelect, courseSelect); }); And lastly, my HTML (simplified) Code: <form action="#" class="cascadeTest"> <table> <tr> <th>Organization:</th> <td><select name="deptartmentSelect" class="deptartmentSelect"> <option value="0">Select a Department</option> <option value="1">Dept A</option> <option value="2">Dept B</option> <option value="3">Dept C</option> </select></td> </tr> <tr> <th>Territory:</th> <td><select name="courseSelect" class="courseSelect" onChange="toggle(this.options[this.options.selectedIndex].value)"> <option value="0" class="static">- Courses -</option> <option value="A1" class="sub_1">Course A1</option> <option value="B1" class="sub_2">Course B1</option> <option value="C1" class="sub_3">Course C1</option> </select></td> </tr> </table> </form> <div id="A1" style="display:none;">I am Course A1</div> <div id="B1" style="display:none;">I am Course B1</div> <div id="C1" style="display:none;">I am Course C1</div> Thanks again in advance! what can be the reasons for the same code which works perfectly in notepad to not show its result in a jsp application done using eclipse??anything to do with settings? I am not able to display the current date as default in dd/mm/yyyy format in drop down boxes..only dd and yyyy apears but month isnt apearing as default.. can u suggest alternative logic and its code to implement the same?? I've looked for a solution to this issue, but it seems like a little different scenario than other situations. I made a system for generating friend requests on Facebook. I have a grid that is 6 x 3, for a total of 18 cells. Each cell has a picture in it, and the picture is linked to the Facebook friend request page. My problem is that since each cell is populated at random from the array, I'm getting lots of repeats. For example, some picutures are in 5 cells, and some are in none. I'm trying to figure out how to make it so that once a picture is used once in the grid, it does not get used again in the same grid. I still want every cell filled at random on each page load, I just want to prevent the repeating. Here's my current code: Code: <script type="text/javascript"> var vip_list=new Array( new Array('http://profile.ak.fbcdn.net/v225/1616/88/s1220771654_2158.jpg','http://www.facebook.com/addfriend.php?id=1220771654'), new Array('http://profile.ak.fbcdn.net/v223/1233/29/s904885342_9055.jpg','http://www.facebook.com/addfriend.php?id=904885342'), new Array('http://profile.ak.fbcdn.net/v229/1574/66/s1752031238_626.jpg','http://www.facebook.com/addfriend.php?id=1752031238'), new Array('http://profile.ak.fbcdn.net/v223/768/71/n661155042_7325.jpg','http://www.facebook.com/addfriend.php?id=661155042'), new Array('http://profile.ak.fbcdn.net/v226/732/26/n1827289885_2478.jpg','http://www.facebook.com/addfriend.php?id=1827289885'), new Array('http://profile.ak.fbcdn.net/v229/1631/70/s1425313768_1140.jpg','http://www.facebook.com/addfriend.php?id=1425313768'), new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1667023416'), new Array('http://profile.ak.fbcdn.net/v225/1146/29/s506485704_9532.jpg','http://www.facebook.com/addfriend.php?id=506485704'), new Array('http://profile.ak.fbcdn.net/profile6/270/32/s692160490_8745.jpg','http://www.facebook.com/addfriend.php?id=692160490'), new Array('http://profile.ak.fbcdn.net/v229/114/83/s1218176198_7375.jpg','http://www.facebook.com/addfriend.php?id=1218176198'), new Array('http://profile.ak.fbcdn.net/v226/946/4/s1470171885_4973.jpg','http://www.facebook.com/addfriend.php?id=1470171885'), new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1329505888'), new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1325496968'), new Array('http://profile.ak.fbcdn.net/v223/1546/92/s1536913202_2017.jpg','http://www.facebook.com/addfriend.php?id=1536913202'), new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1624715433'), new Array('http://profile.ak.fbcdn.net/v228/1282/58/s713998257_3682.jpg','http://www.facebook.com/addfriend.php?id=713998257') ); var chosen_vip=Math.floor(vip_list.length*Math.random()); var chosen_vip1=Math.floor(vip_list.length*Math.random()); var chosen_vip2=Math.floor(vip_list.length*Math.random()); var chosen_vip3=Math.floor(vip_list.length*Math.random()); var chosen_vip4=Math.floor(vip_list.length*Math.random()); var chosen_vip5=Math.floor(vip_list.length*Math.random()); var chosen_vip6=Math.floor(vip_list.length*Math.random()); var chosen_vip7=Math.floor(vip_list.length*Math.random()); var chosen_vip8=Math.floor(vip_list.length*Math.random()); var chosen_vip9=Math.floor(vip_list.length*Math.random()); var chosen_vip10=Math.floor(vip_list.length*Math.random()); var chosen_vip11=Math.floor(vip_list.length*Math.random()); var chosen_vip12=Math.floor(vip_list.length*Math.random()); var chosen_vip13=Math.floor(vip_list.length*Math.random()); var chosen_vip14=Math.floor(vip_list.length*Math.random()); var chosen_vip15=Math.floor(vip_list.length*Math.random()); var chosen_vip16=Math.floor(vip_list.length*Math.random()); var chosen_vip17=Math.floor(vip_list.length*Math.random()); document.write('<center>'); document.write('<a href="',vip_list[chosen_vip][1],'" target="_blank"><img src="',vip_list[chosen_vip][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip1][1],'" target="_blank"><img src="',vip_list[chosen_vip1][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip2][1],'" target="_blank"><img src="',vip_list[chosen_vip2][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip3][1],'" target="_blank"><img src="',vip_list[chosen_vip3][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip4][1],'" target="_blank"><img src="',vip_list[chosen_vip4][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip5][1],'" target="_blank"><img src="',vip_list[chosen_vip5][0],'" height="60" width="60"></a>'); document.write('<br>'); document.write('<a href="',vip_list[chosen_vip6][1],'" target="_blank"><img src="',vip_list[chosen_vip6][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip7][1],'" target="_blank"><img src="',vip_list[chosen_vip7][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip8][1],'" target="_blank"><img src="',vip_list[chosen_vip8][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip9][1],'" target="_blank"><img src="',vip_list[chosen_vip9][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip10][1],'" target="_blank"><img src="',vip_list[chosen_vip10][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip11][1],'" target="_blank"><img src="',vip_list[chosen_vip11][0],'" height="60" width="60"></a>'); document.write('<br>'); document.write('<a href="',vip_list[chosen_vip12][1],'" target="_blank"><img src="',vip_list[chosen_vip12][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip13][1],'" target="_blank"><img src="',vip_list[chosen_vip13][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip14][1],'" target="_blank"><img src="',vip_list[chosen_vip14][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip15][1],'" target="_blank"><img src="',vip_list[chosen_vip15][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip16][1],'" target="_blank"><img src="',vip_list[chosen_vip16][0],'" height="60" width="60"></a>'); document.write('<a href="',vip_list[chosen_vip17][1],'" target="_blank"><img src="',vip_list[chosen_vip17][0],'" height="60" width="60"></a>'); document.write('<br>'); </script> Any suggestions? Thank you! Hi all, I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County). I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database. This piece of code is working well . . . . Code: <?php $link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error()); mysql_select_db('mydatabase') or die('Could not select database'); if(isset($_GET["County"]) && is_numeric($_GET["County"])) { $County = $_GET["County"]; } if(isset($_GET["Region"]) && is_numeric($_GET["Region"])) { $Region = $_GET["Region"]; } ?> <script language="JavaScript"> function autoSubmit() { var formObject = document.forms['theForm']; formObject.submit(); } </script> <form name="theForm" method="get"> <!-- County SELECTION BASED ON city VALUE --> <?php ?> <select name="County" onChange="autoSubmit();"> <option value=''</option> <?php //POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city $sql = "SELECT * FROM county_regions"; $counties = mysql_query($sql,$link); while($row = mysql_fetch_array($counties)) { echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>"); } ?> </select> <?php ?> <br><br> <?php if($County!= null && is_numeric($County)) { ?> <select name="Region" onChange="autoSubmit();"> <?php //POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County $sql = "SELECT * FROM county_regions WHERE CountyID = $County "; $Regions = mysql_query($sql,$link); while($row = mysql_fetch_array($Regions)) { echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>"); } ?> </select> <?php } ?> What follows is my form where the javascript is not working - edited quite a bit to save on space! Code: <head> <script language="JavaScript"> function autoSubmit() { var formObject = document.forms['subform']; formObject.submit(); } </script> </head> <form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName"> <input type="hidden" name="MAX_FILE_SIZE" value="32768" /> <label for="Business_name">Business Name</label> <input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;" <id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br /> <label for="StreetAddress">Address</label> <input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br /> <label for="Town">Town</label> <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br /> <?php $link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error()); mysql_select_db('mydatabase') or die('Could not select database'); if(isset($_GET["County"]) && is_numeric($_GET["County"])) { $County = $_GET["County"]; } if(isset($_GET["Region"]) && is_numeric($_GET["Region"])) { $Region = $_GET["Region"]; } ?> <form name = "subform" method="get"> <select name="County" onChange="autoSubmit();"> <option value=''</option> <?php $sql = "SELECT * FROM county_regions"; $counties = mysql_query($sql,$link); while($row = mysql_fetch_array($counties)) { echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>"); } ?> </select> <?php ?> <br><br> <?php if($County!= null && is_numeric($County)) { ?> <select name="Region" onChange="autoSubmit();"> <?php $sql = "SELECT * FROM county_regions WHERE CountyID = $County "; $Regions = mysql_query($sql,$link); while($row = mysql_fetch_array($Regions)) { echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>"); } ?> </select> <?php } ?> <input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br /> <br/> <input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/> </form> </body> </html> It's probably obvious to you guys!! Thanks in advance for your help. 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. 09-01-10 Not sure exactly where to post this thread as it involves HTML, Javascript and embedded media players. It probably would be more appropriate here as there is much Javascript involved.... Hello, I am trying to construct a Jukebox for my website. I have spent considerable time all over the WEB and at this forum which addressed the issue in a 50 page thread. Please see: http://codingforums.com/showthread.php?t=50666 I got a lot of ideas from this thread but still cannot figure a way to do the following within the Jukebox. These are my main two questions for everything below: 1. How can I have the Jukebox cycle through all tunes and then start over from the beginning? 2. How can I allow the user to select a tune from a list but not a drop down list, have the Jukebox start from the user’s selection and then play all songs to the end. Then as in #1, start over from the beginning? Per this thread I came away with basically two ways to assemble the jukebox. One uses links in a drop down list which the user can choose from. The other is to use an .m3u playlist. The user can only select a “playlist” from the drop down. Below, I have included the code for each Jukebox. To see the Jukeboxes in action please go to my website where I have posted some test pages exhibiting the jukeboxes that I am referring to. The following is the Jukebox which utilizes an .m3u playlist. If I end up using this idea I would like the tunes in the .m3u playlist to be displayed and allow the user to be able to choose a tune in the list. Then have the list play to the end of all tunes in the list. Then start over from the beginning of the list. After this code is the .m3u playlist. Go to url removed and click on the link that says: “Media Player Using an .M3U Playlist” Jukebox utilizing an .m3u playlist: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> body { text-align:center; } </style> <script type="text/javascript"> function PlayIt(what){ player.document.getElementById('music').innerHTML='<object width="300" height="300" ' +'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" ' +'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="url" value="'+what+'">' +'<param name="uiMode" value="full">' +'<param name="autoStart" value="true">' +'<param name="loop" value="true">' +'<embed type="application/x-mplayer2" ' +'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" ' +'showcontrols="true" uimode="full" width="300" height="45" ' +'src="'+what+'" autostart="true" loop="true">' +'</object>'; } </script> </head> <body> <div id="music"> <object width="300" height="300" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" 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="url" value=""> <param name="uiMode" value="full"> <param name="autoStart" value="true"> <param name="loop" value="true"> <embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showcontrols="true" uimode="full" width="300" height="45" src="" autostart="true" loop="true"> </object> </div> <br> <br> <select name="player" onchange="PlayIt(this.value)"> <option value="none">::Choose a Song::</option> <option value="JukeboxList.m3u">Jukebox List</option> </select><br> </html> Here is the .m3u playlist for the above code: Code: #EXTM3U #EXTINF:Bill Evans - G Waltz media/G Waltz.mp3 #EXTINF:Dan Pincus - In Your Time media/In Your Time.mp3 The following code is for the Jukebox that has a list of links in a dropdown list. If I go with this idea, I would like for the list not to be a dropdown list but just a list of tunes. The user should be able to click on any tune in the list and the player should start from that point, play all the remaining tunes in the list and then start from the beginning. Go to url removed and click on the link that says: “Media Player Using Links” Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> body { text-align:center; } </style> <script type="text/javascript"> function PlayIt(what){ player.document.getElementById('music').innerHTML='<object width="300" height="300" ' +'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" ' +'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="url" value="'+what+'">' +'<param name="uiMode" value="full">' +'<param name="autoStart" value="true">' +'<param name="loop" value="true">' +'<embed type="application/x-mplayer2" ' +'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" ' +'showcontrols="true" uimode="full" width="300" height="45" ' +'src="'+what+'" autostart="true" loop="true">' +'</object>'; } </script> </head> <body> <select name="player" onchange="PlayIt(this.value)"> <option value="none">::Choose a Song::</option> <option value="media/GWaltz.mp3">G Waltz</option> <option value="media/InYourTime.mp3">In Your Time</option> <option value="http://urltosong3.mp3">Song 3</option> <option value="http://urltosong4.mp3">Song 4</option> <option value="http://urltosong5.mp3">Song 5</option> </select><br> <div id="music"> <object width="300" height="300" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" 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="url" value=""> <param name="uiMode" value="full"> <param name="autoStart" value="true"> <param name="loop" value="true"> <embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showcontrols="true" uimode="full" width="300" height="45" src="" autostart="true" loop="true"> </object> </div> </html> Another idea I found on the WEB also uses an .m3u playlist. The good thing about it is that it lists all the tunes in the playlist which the user can then select from. This jukebox calls up an entire Windows Media Player. If I was to use this idea I would like to be able to disable the left side of the player where the user has options such as burning to CD, Media Guide, Radio Tuner etc… Go to url removed and click on the link that says: “Media Player Within an IFrame Using .m3u Playlist”” Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>JukeBox</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> </head> <body> <IFRAME name="frame" src="JukeboxList.m3u" width="100%" height="347" scrolling="no" frameborder="0"> [Your user agent does not support frames or is currently configured not to display frames.] </IFRAME> </body> </html> Thanks! Dan I have two lists/menus that are start and end times and I want to make the end time list/menu advance 2 hours from whatever is chosen in start list/menu. The values in both of the list/menu are [CODE] <select name="Time" class="Body" id="Time"> <option value="">Choose Start Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> <option value="07:30:00">7:30 am</option> ETC........ <select name="Time2" class="Body" id="Time2"> <option value="">Choose End Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> <option value="07:30:00">7:30 am</option> ETC........ [ICODE] any ideas on how to accomplish this? you can find my file at http://www.crazywayno.com/startend.php ---------------------------------------------------------------- I also tried this javascript but it doesn't add the additional 2 hours it just repeats the first value. [CODE] <script type="text/javascript"> function cfunc() { document.getElementById("Time2").value=document.ge tElementById("Time").value } </script> <select name="Time" type="text" id="Time" onmouseup="cfunc()"> <option value="">Choose Start Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> <option value="07:30:00">7:30 am</option> ETC.......... <select name="Time2" class="Body" id="Time2"> <option value="">Choose End Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> ETC........... [ICODE] You can find this at http://www.crazywayno.com/2fields.php Thanks How do I show the default icon for pdf, doc, etc... else show the image? Code: Show the default icon for pdf, doc, etc... else show image. Default icon: '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' + The image: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0"></a>' + Attempted javascript onError but only certain browsers support that or it's my code. Code: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0" onerror="this.src=images/icons/' + sIcon + '.gif"></a>' + Any ideas? Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) { if (val > 1) { var box = 'lie[' + field + ']'; document.form1.box.disabled == false; } else { document.form1.box.disabled == true; } } Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe |