JavaScript - Shuffle Index Values Down As Needed
basically what i want to do is this
array[0] = 'hello'; array[1] = 'world'; array[2] = 'foo'; array[3] = 'bar'; delete array[1]; array.fillindex() /* new array value array[0] = 'hello'; array[1] = 'foo'; array[2] = 'bar'; notice how the key values shifted them self to compensate for the missing value. /* Similar TutorialsI am now working on a utility function that will gather the indexes for substring matches found in a string. There is an academic mystery I am puzzling over Code: function getMatchIndex(a, b) // a: sting to search b: what to search for { var out = new Array(); if(a.lastIndexOf(b) > -1) // at least two matches, ****! there could be more { if( (a.substr(a.indexOf(b) + b.length, a.lastIndexOf(b))).length > b.length ) { var stp = parseInt(a.lastIndexOf(b)) - (parseInt(a.indexOf(b)) + parseInt(b.length)); alert(stp) alert( (a.substr(a.indexOf(b) + b.length, stp)).length+' : '+a.substr(a.indexOf(b) + b.length, stp)); } else { out[out.length] = a.indexOf(b); out[out.length] = a.lastIndexOf(b); return out; } } else if(a.indexOf(b) > - 1 && a.lastIndexOf(b) == -1) { out[out.length] = a.indexOf(b); return out; } else if(a.indexOf(b) == -1) { out = 'no matches'; return out; } else { var splitStr = new Array(); splitStr = a.split(b); /* possibilities: 1: one match at the begining or end -- leaves one significant item 2: one match somewhere after the beginning and before the end. -- gives two matches. */ for(var i = 0; i < splitStr.length - 1; i++) // don't want the last segment length { out[out.length] = splitStr[i].length } } } getMatchIndex('xxxi5ixxxxxxxi5ixx', 'i5i'); in the following code snippet: Code: if( (a.substr(a.indexOf(b) + b.length, a.lastIndexOf(b))).length > b.length ) { var stp = parseInt(a.lastIndexOf(b)) - (parseInt(a.indexOf(b)) + parseInt(b.length)); alert(stp) alert( (a.substr(a.indexOf(b) + b.length, stp)).length+' : '+a.substr(a.indexOf(b) + b.length, stp)); I am trying to get the sub string between the end of the first match to the beginning of the last match. The 'if' test passes, but I have to parseInt the values to get the proper value for stp. SO, the question is, what is the actual data type of an index value obtained from a string. (It would appear to be a string; having to use it an a math expression doesn't work without parseInt). (I hope I haven't posted too much code) Thank you in advance. is there a way to take my random shuffle script that displays the array like this red, yellow, blue, green, black, grey and make it so that it would list them like this red yellow blue green black grey Code: <script type="text/javascript"> function myFunction() { document.getElementById("demo").style.display="block"; var myarray=["red","blue", "yellow", "green","black", "grey"] myarray.sort(function() {return 0.5 - Math.random()}) var x=document.getElementById("demo").innerHTML=myarray; var t=setTimeout(alertMsg,10000); } function alertMsg() { document.getElementById("demo").style.display="none"; } </script> <button onclick="myFunction()">Twister Drill</button> <font size="5" color="white"> <p id="demo"><br/></p> </font> OKay, I preface this with : "I am not new to code, but have only limited experience with JS." That said, I want to use JS to shuffle elements on a page. Not randomize them (as iPods have redefined the word shuffle.). For example, I have divs A B C D E. When you visit the page they are in this order: A B C D E when you click the button for "E" I want it to come to the front. Causing the display to be: E A B C D If you then clicked the button for "B" it would end up: B E A C D I hope thats clear enough, its a difficult concept to articulate. So, depending on the order in which the user clicks the buttons, the stack is shuffled. Now, I've successfully been able to 1) set them in the page using CSS in a stack with zIndex. So, when first visiting the page they have a zIndex of A=z5 B=z4 C=z3 etc. 2) I've used the following code on a button to bring to front when clicked. Code: <input type="image" src="A Image" alt="A alt TXT" value="Change A's zIndex" onclick="document.getElementById('A').style.zIndex='6';" > This will bring any of the divs to the front when clicked. But say I click B, then C. Since this function is assigning a specific zIndex they wont overlap anymore. I think what I need is some sort of add 5 to zIndex function. (Has to be 5 in the event that the item you click is on the bottom of the stack of 5) So far I've tried: Code: <input type="image" src="A Image" alt="A alt TXT" value="Change A's zIndex" onclick="document.getElementById('A').style.zIndex=parseInt(k.zIndex) + 1;" > and Code: <input type="image" src="A Image" alt="A alt TXT" value="Change A's zIndex" onclick="document.getElementById('A').style.zIndex='z++';" > I imagine that first one is way off base, but I really thought the second one would work. Found it while searching here. If someone could point me in the right direction, or better yet EXPLICITLY explain what to do, I'd be forever indebted. Thanks. Hi gud mng, I have one problem... How to process textbox values/ call textbox values in JS through a Java program. My text box values are dates. I have to process these dates. Like in online banking we select day to know our transactions. After submitting we get results. remember my files are in my directory only. No need of database. My files are look like 20100929, 20100930, 20101001 For epoch_classes.js, epoch_styles.css u can download coding from this link : http://www.javascriptkit.com/script/...ch/index.shtml Code: Code: <html> <table width="900" border="0" cellpadding="10" cellspacing="10" style="padding:0"> <tr><td id="leftcolumn" width="170" align="left" valign="top"> <div style="margin-left:0px;margin-top:0px"><h3 class="left"><span class="left_h2">Select Option</span></h3> <a rel="nofollow" target="_top" href="day_wise.htm" >Day-wise</a><br /> <br /> <a rel="nofollow" target="_top" href="between.htm" >Between Days</a> <link rel="stylesheet" type="text/css" href="epoch_styles.css" /> <script type="text/javascript" src="epoch_classes.js"></script> <script type="text/javascript"> var cal1, cal2; window.onload = function () { cal1= new Epoch('epoch_popup','popup',document.getElementById('popup_container1')); cal2= new Epoch('epoch_popup','popup',document.getElementById('popup_container2')); }; /*............*/ function confirmation(f) { var startdate = f.fromdate.value var enddate = f.todate.value var myday=new Date() var yr=myday.getFullYear() var mn=myday.getMonth()+1 var dt=myday.getDate() var today="" var present, ys, ms, ds, ye,me,de, start, end if(mn < 10) { mn = "0" + mn } if(dt <10) { dt = "0" + dt } today= yr + "/" + mn + "/" + dt present=yr + "/" + mn + "/" +dt if (today < startdate ) { alert (" Start date should not be exceed to-day's date " + present ) startdate.focus() return false } if (today < enddate ) { alert (" End date should not be exceed to-day's date " + present ) enddate.focus() return false } if (today == startdate ) { alert(" You are selected to-days date as Starting day" ); } var answer = confirm("Do you want to continue ?") if (answer) { if( startdate < enddate) alert("Dates between " + startdate + " to " + enddate + " are confirmed" ) else alert("Dates between " + enddate + " to " + startdate + " are confirmed" ) } else { alert("Date not confirmed") window.location="to_date.htm"; } ys= startdate.substring(0,4); ms= startdate.substring(5,7); ds= startdate.substring(8,10); start=ys + "" + ms + "" +ds ye= enddate.substring(0,4); me= enddate.substring(5,7); de= enddate.substring(8,10); end=ye + "" + me + "" +de } /*.......................................................*/ </script> <div style="margin-left:100px;"> <body> <style type="text/css"> #conf { margin-left:115px; } </style> <td align="left" valign="top"> <table width="100" border="0" cellpadding="0" cellspacing="0"> <td style="padding-top:0px"> </table> <h4>From Date</h4> <form name= "formbet" id="placeholder" method="post" action="#" > <input id="popup_container1" type="text" name= "fromdate" maxlength="10" size="20"/> <td align="left" valign="top"> <table width="300" border="0" cellpadding="0" cellspacing="0"> <td style="padding-top:20px"> <h4>To Date</h4> <input id="popup_container2" type="text" name= "todate" maxlength="10" size="20"/> <br /> <br /> <input id="conf" type="button" onclick="confirmation(this.form)" value="Submit"> </form> </body> </html> In my coding, ys, ms, ds represents year starting, month starting, starting day... ye, me, de represents end... start,end gives file names in the format of yyyymmdd now i want to process files from 20100101 to 20100930 means from date is 2010/01/01 and to date is 2010/09/30 if i press submit button the files from 20100101 to 20100930 are processes here ys=2010 ms=01 ds =01 and ye=2010 me=09 de= 30 For this how do i call these textbox values (from date text box and todate) to another program (java) Thanks in advance. I have a bunch of checkboxes like below that the user can check some or all and click the button and see the values of all the selected checkboxes. How can I do that? Code: <script> function alertValues(){ } </script> <input type="checkbox" class ="normal2" value="131971" name="list[]" > <input type="checkbox" class ="normal2" value="131973" name="list[]" > <input type="checkbox" class ="normal2" value="131975" name="list[]" > <input type="checkbox" class ="normal2" value="131977" name="list[]" > <input type="button" onClick="alertValues()" Hi, What's a good way/ideal data structure to achieve this? The objective of the code/function is to map user-inputted strings into a pair of specific, hard-coded strings. For example, say the user types "firefox" or "ff", or "fx". The output would be the pair ["browser", "mozilla"], for example. I'm currently using a multidimensional array, but it feels inefficient and I'm having trouble mapping an arbitrary number of inputs into 2 outputs. Code: var strings = [ ["input1", "output1a"], ["input2", "output1a"], ["input3", "output1a"], ["input1", "output1b"], ["input2", "output1b"], ["input3", "output1b"] ]; How should I map the elements ["input1", "input2", "input3"] => ["output1a", "output1b"] ? Another method I used previously was a massive switch statement. This fulfills my needs, but I'm not sure about the efficiency (though if I remember correctly, switch statements become more efficient as size grows, since it uses a hash table?). Code: switch (input) { case "ff": case "firefox": case "fx" : case "ffox": return ["browser", "mozilla"]; case "ie": case "internet explorer": return ["browser", "microsoft"]; ... } Here is some code i use in one of my functions. I was wondering if the text would be found by google and indexed? (It replaces text with another piece of text and a link) Code: $("#replace").html('<a href="javascript:location.reload(true)">Back Home</a>Apparently, Voynich wanted to have the mysterious manuscript deciphered and provided photographic copies to a number of experts.'); Hi all.. I have a modal window I'm working on, but the flash below it comes over the top of the modal window. I'm assuming it's a z-index issue. I'm using Tinybox2 for the modal window, and it's CSS styles use 800 and 900 for z-index. Code: .tbox {position:absolute; display:none; padding:14px 17px; z-index:900} .tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333} .tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800} .tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(images/close.png) no-repeat} .tclose:hover {background-position:0 -30px} The flash itself isn't in a div but in a table. Is there a way to give it a lower z-index? Thanks in advance! carrie i want to find the index of array through user defined function . my function is. Code: var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'); function index() { var p=-1; for(i=0;i<Month_Label.length;i++) { if(Month_Label[i]=="February") { p=i; break; } } alert(p); } but it is not working. any body can help me. what is wrong with my code Hi i can't seem to get a drop downs selected index. This is my drop down box: Code: <select name="queba" id="queeba"> <option value="ban1">Bank1 <option value="ban2">Bank2 <option value="ban3">Bank3 <option value="ban4">Bank4 </select> thanks Hi All, I have this table with a repeat region (this pulls a series of records from my database and displays them in the table). I have a button in one of the table cells that calls a function to delete the current row where the button is pressed (I am trying to pass the row index to the function). Here is what I have which is clearly wrong but I am hoping someone can offer an option that will work. Code: <script type="text/javascript> function deleteRow(tableID,tr) { //alert('tableID is '+tableID+' and rowCount is '+tr); if (document.getElementById(tableID)) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; //alert ("row is "+i); if(i == tr) { table.deleteRow(i); i++; if(rowCount==0){ table.parentNode.removeChild(table); } } } }catch(e) { alert(e); } } } </script> <table id="dataTable" width="100%" border="0"> <?php do { ?> <tr> <td width="33%"><?php echo $row_rstRequestedEquip['EquipNeeded']; ?></td> <td width="33%"><?php echo $row_rstRequestedEquip['Quantity']; ?></td> <td width="33%"><input type="button" name="remove" value="Remove" class="button" onclick = "deleteRow(dataTable,this.rowIndex)" /></td> </tr> <?php } while ($row_rstRequestedEquip = mysql_fetch_assoc($rstRequestedEquip)); ?> </table> Thanks in advance for any help. Kind regards, Ken I have three images nested in three divs that I want to change size on mouseover, but since they're each in their own div, I can't effect their z-indexes relative to one another without targeting their parent divs. I thought I'd be able to contain the images in an <a> tag with z-index style in a mouseover, but I can get it to work. What am I doing wrong here? CSS: Code: .thumb img{ height: 75px; } .thumb img:hover{ height: 150px; } JS: Code: function thmbOver(){ this.style.zIndex = "1000"; } HTML: Code: <div id="div1"><a onmouseover='thmbOver();'><span class='thumb'><img src='thmbs/image1.jpg'></span></a></div> <div id="div2"><a onmouseover='thmbOver();'><span class='thumb'><img src='thmbs/image2.jpg'></span></a></div> <div id="div3"><a onmouseover='thmbOver();'><span class='thumb'><img src='thmbs/image3.jpg'></span></a></div> I've tried a few approaches to the function's targeting, like document.getElementById(this.parent.id).style.zIndex, etc, but still nothing. Any ideas? Thanks, ~gyz I am trying to "swap" the contents of a div(#right_top) depending on which line item you hover over. Awkward, but does work, but.... the problem is that although I can get the code to work, the "right_top" div gets longer (physically on the page) even though each div is supposed to be a different "z-index". I don't know how to correct this, or is there better code? I would appreciate any help! Thank you. Complete code below..... ------------------------------------------------------------------- Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <script language="javascript" type="text/javascript"> <!-- Hide script from older browsers function MM_findObj(n, d) { //v4.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && document.getElementById) x=document.getElementById(n); return x; } function MM_showHideLayers() { //v3.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> <!-------------------------------------------------------------> <style type="text/css"> #wrapper{ width:800px; } #left_top{ background-color:#66FFFF; width:270px; padding-top:60px; padding-left:30px; float:left; } #right_top{ background-color:#66FF33; padding-top:60px; width:480px; padding-left:20px; float:left; } #first_div{ position:relative; width:450px; height:300px; z-index:1; visibility: hidden; left:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:italic; color:#FFFFFF; } #second_div{ position:relative; font-size:16px; width:450px; height:300px; z-index:2; top: -320px; visibility: hidden; left:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:italic; color:#FFFFFF; } #third_div{ position:relative; font-size:16px; width:450px; height:300px; z-index:3; top: -640px; visibility: hidden; left:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:italic; color:#FFFFFF; } </style> </head> <body> <div id="wrapper"> <div id="left_top"> <table width="210" height="483"> <tr><td width="210" height="477" valign="top"> <div><a title="first div" href="#" class="style1" onClick="return false" onMouseOver="MM_showHideLayers('Initial','','hide','first_div','','show')" onMouseOut="MM_showHideLayers('Initial','','show','first_div','','hide')">show first div</a></div> <div><a title="second div" href="#" class="style1" onClick="return false" onMouseOver="MM_showHideLayers('Initial','','hide','second_div','','show')" onMouseOut="MM_showHideLayers('Initial','','show','second_div','','hide')">show second div</a></div> <div><a title="third div" href="#" class="style1" onClick="return false" onMouseOver="MM_showHideLayers('Initial','','hide','third_div','','show')" onMouseOut="MM_showHideLayers('Initial','','show','third_div','','hide')">show third div</a></div> </td></tr> </table> </div><!-- end of left_top --> <div id="right_top"> <div id="first_div"> <p align="justify"><b>first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </b></p></div> <div id="second_div"> <p align="justify"><b>second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second </b></p></div> <div id="third_div"> <p align="justify"><b>third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third </b></p></div> </div><!-- end of right_top div --> </div><!-- end of wrapper --> </body> </html> OK so say I have something like this: <TD> <p>Item A</p> <p>Item B</p> <p>Item C</p> <p>Item D</p> </TD> So TD would be the parent and all of the <P>'s would be childNodes. I want to be able to click on each child and have it alert me its index # relative to the parent node. So 'Item A' should alert "0", 'Item B' - "1", 'Item C' - "2", etc. Thanks in advance. Javascript I have 3 combolist fields ( A, B and C ) each of which has just "No" and "Confirmed" as their only options. I have one final combolist ( D ) which has just "Yes" and "No" as options. "No" is the default selected item and Index0 in the list. The user must select "Confirm" all three ( A, B and C ) lists before they should be allowed to select "Yes" in the final list ( D ). I want to be able to have the system to automatically select and display "No" in list ( D ) if any of the first 3 selections ( A, B or C ) are "No". I don't have a problem validating if any of the 3 lists ( A, B or C ) are "No" but I cannot get the final combolist to change from "Yes" ( if previously selected ) to "No". I have tried setting the selected index of (D) to 0 and tried setting the selected value of (D) to "No" but if (D) currently displays "Yes" when any of the ( A, B or C ) are changed to "No" nothing happens to (D). Am I trying to do something that cannot be done ? Any help will be gratefully received. Tony Just to let you know if you don't know how to do this is the code I use: It will solve the problem of the clip scrolling over text etc. <embed wmode="transparent" src="youtube URL" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="280" height="240"></embed> (mods, do with this as you please). Hi.. i have a login page and it is separately in my index.php now i need my login page become a pop up form when I open my index.php here is my login.php Code: <?php include 'config.php'; session_start(); //if (isset($_SESSION['logged_in'])) { // header('Location:index.php'); // die(); // } if (isset($_POST['submit'])) { $username=$_POST['username']; $password=($_POST['password']); $sql = "SELECT username, password FROM pay_login WHERE username='$username' AND password='$password'"; $rs = $conn2->Execute($sql); if($rs==1){ $_SESSION['logged_in'] = true; header("location:index.php"); } else { echo "<center>"; echo "Wrong Username or Password"; echo "</center>"; } } $smarty->display('login.tpl'); ?> and here is my index.php Code: <?php session_regenerate_id(true); /*include 'config.php'; if (!isset($_SESSION['empID'])) { $sql = "SELECT EMP_ID FROM PERSONAL"; $recPersonal = $conn->Execute($sql); if (!$recPersonal->BOF) { $recPersonal->MoveFirst(); } session_register('empID'); $_SESSION['empID'] = $recPersonal->fields['EMP_ID']; } */ include 'config.php'; $currentEmpID = $_SESSION['empID']; if (!isset($_SESSION['empID'])) { $sql = "SELECT EMP_ID, CONCAT(LNAME, ', ' , FNAME, ' ', MI) AS FULLNAME FROM PERSONAL ORDER BY LNAME ASC"; $recPersonal = $conn->Execute($sql); session_register('empID'); $_SESSION['empID'] = $recPersonal->fields['EMP_ID']; } $sql = "SELECT EMP_ID, CONCAT(LNAME, ', ' , FNAME, ' ', MI) AS FULLNAME FROM PERSONAL ORDER BY LNAME ASC"; $recPersonalNav = $conn->GetAll($sql); $smarty->assign('personalAll', $recPersonalNav); // ======================================================================================================================== $sql = "SELECT EMP_ID, CONCAT(LNAME, ', ', FNAME, ' ', MI, '.') AS FULLNAME FROM PERSONAL WHERE EMP_ID='$currentEmpID'"; $recPersonalHead = $conn->Execute($sql); $fullName = $recPersonalHead->fields["FULLNAME"]; $smarty->assign('empid', $currentEmpID); $smarty->assign('fullname', $fullName); session_write_close(); $smarty->display('header.tpl'); $smarty->display('left.tpl'); $smarty->display('empPayroll.tpl'); $smarty->display('footer.tpl'); exit(); ?> and I found a sample pop up code in internet but this pop needs a button befre it was displayed..I want is it will display when i run my index.php here is the link of sample pop up form http://www.nigraphic.com/blog/java-s...-center-screen Thank you Hello I have the code below and I am trying to add another index id to be checked to the two that I already have. I have tried changing the line: var anotherTab = (indx.indexOf('a') >= 0) ? id + 'b' : id + 'a'; to var anotherTab = (indx.indexOf('a') >= 0) ? id + 'b' : id + 'a' : id + 'c'; but I just get a javascript error what would be the correct syntax for a third index id? Code: var groupId=obj.id.substring(0, 1); var indx=obj.id.substring(obj.id.indexOf('_')+1); var id=indx.substring(0, indx.length-1); var anotherTab = (indx.indexOf('a') >= 0) ? id + 'b' : id + 'a'; document.getElementById(groupId+'tab_' + indx).className = 'selected'; document.getElementById(groupId+'tab_' + anotherTab).className = ''; if (indx==id+'a') { show (groupId+'baseballInfo_'+id); hide (groupId+'footballInfo_'+id); hide (groupId+'soccerInfo_'+id); } else if (if (indx==id+'a') { hide (groupId+'baseballInfo_'+id); show (groupId+'footballInfo_'+id); hide (groupId+'soccerInfo_'+id); } else { hide(groupId+'baseballInfo_'+id); hide (groupId+'footballInfo_'+id); show(groupId+'soccerInfo_'+id); } |