|
JavaScript - Randomize/swap Td Cells
I've been banging my head for two days now trying to figure out how i can swap td cells. There are a lot of examples of how to order rows, but i can seem to find any on how to swap td cells. Has anyone a good referal for this.
Similar TutorialsOk. I'm going to start by saying I'm a complete novice. I am having a hell of time finding specific codes for the things I need. I'm pretty impressive I've gotten this far. So I am trying to make a portfolio website, for myself, which has thumbnails on the left(which I'll crop in photoshop because it is easier for me than having to do any coding) which will make the main image on the right change. At the same time, I want it to change the text below to correspond to the current image. Now I have the images swapping alright, except that the thumbnails that have the onClick function in them won't sit inside the table I have inside the table. I don't understand why that happens. I can work around this, and just get rid of that table. Another problem is that even though I defined the collumns as each being 20%, they are not all the same size. I am using percentages so that the site will function regardless of screen resolution. Anyway, here is my current code. Ignore the image names, I'm just using what random images I have at hand while I test things out. Code: <html>
<head>
<script type="text/javascript">
function swap(image) {
document.getElementById("main").src = image.href;
}
</script>
</head>
<body>
<table width="80%" align="center">
<tr><td colspan="5">I'll put a header image here.</td>
</tr>
<tr>
<td width="20%"><center>Print</center></td>
<td width="20%"><center>Motion</center></td>
<td width="20%"><center>Photo</center></td>
<td width="20%"><center>Misc</center></td>
<td width="20%"><center>Resume</center></td>
</tr>
<tr>
<td colspan="2"><table align="left">
<td colspan="100%">Catagory 1
</td>
<tr>
<a href="mario.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
<a href="../Jpg/cattits.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
<a href="bowie.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
</tr>
<td colspan="100%">Catagory 2
</td>
<tr>
<td><img src="../Jpg/sluticon.jpg" /></td>
<td><img src="../Jpg/sluticon.jpg" /></td>
</tr>
</table></td>
<td colspan="3">
<img id="main" src="bowie.jpg" width="400">
</td>
</tr><td colspan="5">
<p>Description goes here</p></td>
<tr>
</tr>
</table>
</body>
</html>
Hey Everybody, It has been a few years since I have dealt with coding in JavaScript. I will admit up-front that this is for a part of homework that I have been stuck on for about 2 weeks. I will apologize in advance for the length of this. The first portion is showing what I'm going for. The second portion is what I'm currently wanting help with. Here is what is happening: I'm in a Human Computer Interaction class and my group is developing a "Group Randomizer" web page. I figured using an ArrayList would be easiest rather than coding a database. My group is using Weebly.com to do our site. Things that the site will do (trying to keep this aspect to a single web page): 1) Add/Remove names to/from an ArrayList that is hidden in the background 2) Click a button to generate a randomized order of the ArrayList 3) Be able to split the list with line-breaks based on a number for "group size". Example: (adding names) name[0]=student1 name[1]=student2 name[2]=student3 ... ... ... Number of Groups: [User Input] ----> 3 (press generate button) (resulting random output) Group1: student2 student5 Group2: student1 student4 Group3: student3 student6 Then being able to remove the names as needed too. Now, I AM NOT looking for somebody to do all of this for me. What I am wanting at this time is help figuring out how to produce a randomized order output from an ArrayList such as follows: (temporary ArrayList) student[0]=student1 student[1]=student2 student[2]=student3 ... ... ... (generate output) student4 student2 student7 student1 student5 ... ... ... Any help with that portion would be helpful. Hi, I got following script + HTML: Code: <script type="text/javascript">
function tjek() {
if ((document.forms[0].spil.value=='HIDDENWORD')) {
alert('Correct message');
window.location.reload( true );
}
else if ((document.forms[0].spil)) {
alert('Wrong message');
}
}
function tastkontrol() {
document.forms[0].spil.value = document.forms[0].spil.value.toUpperCase();
}
</script>
<form method="post" onsubmit="tjek();return false;">
<input type="text" name="spil" onkeyup="tastkontrol();return false;">
<input type="submit" value="Send">
</form>
It's a game, were the person has to guess the hidden word. I know want to add this to the script, so the HIDDENWORD changes into either APPLE or HOUSE when refreshing page: Code: <script type="text/javascript">
code=new Array;
code[1]="APPLE";
code[2]="HOUSE";
function Show() {
num = Math.random();
num = 1 + ( num * ((code.length - 1)-1));
num = Math.round(num);
document.write("" + code[num] + "");
}
Show();
</script>
I've tried some stuff, but I don't got a clue, how to merge these to scripts into eachother. Thanks in Advance. I am bringing in twitter feed and appending it via a for loop to div( .container ) and assigning each "tweet" with a separate div(.content). I also have divs(.content) that I am manually placing in. All of these are being displayed through http://masonry.desandro.com/. The divs are being segregated (manually placed divs) and (for loop, appended divs). I would like to randomize all of the divs so they are not seperated and show in random orders on load. But it is only randomizing the "manually placed divs". Can and how do I go about fixing this? I am new(er) at jQuery so keep that in mind. I would paste code but it's very long. Any and all help is appreciated! Hi, I was hoping someone might have a solution to randomizing a URL in javascript... in this case for an embedded Simpleviewer link? At the moment the link is http://timperceval.com/guiran/intro1/ but I would like to have the site randomly choose from four URLs. The embedded code is as follows: <!--START SIMPLEVIEWER EMBED.--> <script type="text/javascript" src="http://timperceval.com/guiran/intro1/svcore/js/simpleviewer.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.baseURL = "http://timperceval.com/guiran/intro1/"; simpleviewer.ready(function () { simpleviewer.load("sv-container", "100%", "100%", "000000", true, flashvars); }); </script> <div id="sv-container"></div> <!-- END SIMPLEVIEWER EMBED -- Any ideas would really help! Thanks, Tim hi, i currently have an array of 20 images. on load a random selection of 15 are taken, then they ordered randomly on the page and doubled (to play a match the pairs memory game) clicking restart will reorder the images randomly, but will use the same 15 chosen on page load. i need the restart button to choose another random 15 images from the 20 in the array. here is the site: http://www.thebigappwall.com/test.htm and here is the code: Code: // Concentration Memory Game with Images - Head Script
// copyright Stephen Chapman, 28th February 2006, 24th December 2009
// you may copy this script provided that you retain the copyright notice
function randomOrd(){return (Math.round(Math.random())-0.5); }
var back = '/images/back.png';
var tile = ['/images/lij.png','/images/myh_appwall.png','/images/Tap-Forms-icon-40.png','/images/urban-rivals-app-40.png','/images/warshipicon.png','/images/www2pdf-40.png',
'/images/pandora.png','/images/preschoolicon.png','/images/my_virtual_girlfriend_40x40_01.jpg','/images/my_virtual_girlfriend_40x40_02.jpg','/images/my_virtual_girlfriend_40x40_03.jpg','/images/my_virtual_girlfriend_40x40_04.jpg','/images/www2pdf-40.png','/images/preschoolicon.png','/images/pandora.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png'];
tile.sort( randomOrd );
function randOrd(a, b){return (Math.round(Math.random())-0.5);} var im = []; for (var i = 0; i < 15; i++) {im[i] = new Image(); im[i].src = tile[i]; tile[i] = '<img src="'+tile[i]+'" width="40" height="40" alt="tile" \/>'; tile[i+15] = tile[i];} function displayBack(i) {document.getElementById('t'+i).innerHTML = '<div onclick="disp('+i+');return false;"><img src="'+back+'" width="40" height="40" onclick="addClick();" alt="back" \/><\/div>';} var ch1, ch2, tmr, tno, tid, cid, cnt; window.onload=start; function start() {for (var i = 0; i <= 29 ;i++) displayBack(i);clearInterval(tid);tmr = tno = cnt = 0;tile.sort( randOrd );cntr(); tid = setInterval('cntr()', 1000);} function cntr() {var min = Math.floor(tmr/60);var sec = tmr%60;document.getElementById('c-timer').innerHTML = min+':'+ (sec<10 ? '0' : '') + sec;tmr++;} function disp(sel) {if (tno>1) {clearTimeout(cid); conceal();}document.getElementById('t'+sel).innerHTML = tile[sel];if (tno==0) ch1 = sel;else {ch2 = sel; cid = setTimeout('conceal()', 900);}tno++;} function conceal() {tno = 0; if (tile[ch1] != tile[ch2]) {displayBack(ch1);displayBack(ch2);} else cnt++; if (cnt >= 15) clearInterval(tid); }
Thanks Hello guys, I am a js noobie really, and am looking for something specific. I have googled for quite some time now looking for a script to randomize a list of images on refresh. For example, If I have 8 images in a line in this order 12345678, when I refresh, I would like them to go into a new random order - 84567321, or anything. What I have found are scripts to allow random new images to appear in place of a single image, which is as close as I have gotten. Does anyone know of a script that can do this, or know how to make one? I have looked everywhere, and can't seem to locate one. Any help is greatly appreciated. Hey all, I have a simple form that looks something like this: Code: <div id="responses"> <input class="checkbox" type="checkbox" name="group1" value="1" id="option1"/><label class="label" for="option1">Option one text</label> <input class="checkbox" type="checkbox" name="group1" value="0" id="option2"/><label class="label" for="option2">Option two text</label> <input class="checkbox" type="checkbox" name="group1" value="1" id="option3"/><label class="label" for="option3">Option three text</label> </div> I am trying to figure out a way to use javascript to take these and randomize the order of them. For example, if you were looking at it and clicked a randomize button it would shuffle around the options. I am fairly new to javascript and don't really know where to start with something like this. I would greatly appreciate it if someone could get me started or point me in the right direction. Thanks! Hi, Im using a authoring tool to develop an elearning test course. The course is composed of several HTML pages with Buttons for the multiple choice test. The setup of the course is that it will only ask 10 questions out of a pool of 30 questions. When the HTML & JS files are online, the test takes 20-40seconds to load. I believe it is related to the code that selects the 10 questions from the 30. I've singled out the code that does the select random pages... Is there any way to optimize the code? I've attached the HTML (in txt format) page where the javascript can be found. Looking forward to your replies! could somebody plz tell me why this isnt working?? i want it specifically as it is because i need it in a bigger picture Code: <body>
<img id="down0" src="images/greentick.png" onclick="swap(0,1)" />
<br />
<table><tr><span id="0"><td>asdasdasd</td></span></tr></table>
<br />
<table><tr><span id="1"><td>ante gamisou re gyfto</td></span></tr></table>
<script type="text/javascript">
/*<![CDATA[*/
function swap(idA,idB){
var cellA=document.getElementById(idA);
var cellB=document.getElementById(idB);
if(cellA&&cellB){
var temp=cellA.innerHTML;
cellA.innerHTML=cellB.innerHTML;
cellB.innerHTML=temp;
}
alert(idB);
}
/*]]>*/
</script>
</body>
Here is the code I'm using: Code: <style type="text/css" rel="stylesheet" href="">
li#button {
cursor:pointer;
}
</style>
<script type="text/javascript">
var num = 6; // this is # of divs you have
function swap(what)
{
for(var i = 0; i < num; i++)
{
document.getElementById('swap'+i).style.display = 'none';
}
document.getElementById('swap'+what).style.display = 'block';
}
var createStyle = document.createElement('style');
var createStyleProp = document.createTextNode('.hidden { display:none; }');
createStyle.appendChild(createStyleProp);
document.getElementsByTagName('head')[0].appendChild(createStyle);
</script>
<body>
<div id="content">
<ul id="a-menu">
<li id="button" onClick="swap(0)"><b>button1</b></li>
<li id="button" onClick="swap(1)"><b>button2</b></li>
<li id="button" onClick="swap(2)"><b>button3</b></li>
</ul>
<div id="swap0" class="block">content 1</div>
<div id="swap1" class="hidden">
<ul id="submenu">
<li id="button" onClick="swap(3)">button1</li>
<li id="button" onClick="swap(4)">button2</li>
<li id="button" onClick="swap(5)">button3</li>
<li id="button" onClick="swap(6)">button4</li>
</ul>
<div id="swap3" class="block">content 2</div>
<div id="swap4" class="hidden">content 3</div>
<div id="swap5" class="hidden">content 4</div>
<div id="swap6" class="hidden">content 5</div>
</div>
<div id="swap2" class="hidden">content 6</div>
</div>
</body>
</html>
Is working fine for the first three buttons but the subdivs from swap1(div) are not working. Can anyone help me with this?? I want the text in a textbox to change to red when I click the box and back to blue when I click it again. I would prefer an inline solution like: <input type="text" value="CHANGE COLOR" onclick="this.style.color='red';"/> All, I have the following code: Code:
<div class="col-1">
<div id="swap">
<img src="images/gallery-img3-big.jpg" alt="" />
</div>
</div>
<div class="col-2">
<div class="list3">
<ul>
<li><a href="#"><img src="images/gallery-img1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/gallery-img2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/gallery-img3.jpg" alt="" /></a></li>
</ul>
</div>
</div>
When you click on any of the links with the <li> I'd like to put the image that was clicked in the <div id="swap"></div>. So I'm thinking this would have to be done with innerHTML and maybe pass a function the img src of the link that I would click on. Just not sure how to do that though. Any help would be greatly appreciated. Thanks in advance. In firefox Images 1 2 & 3 won't swap and in IE the img src(not PhotoBig) wont show pics 1 2 & 3 any reason why? I'm new to javascript so its probably a dumb reason? Please help if you can. Code: <script type="text/javascript">
function update(url,index,isSuper) {
document['PhotoBig'].src=url;
}
</script>
Code: <img src="graphics/travel/big/keysfish1.gif" name="PhotoBig" style="border:1px solid black">
<table>
<tr>
<td>
<a onMouseOver="update('graphics/travel/big/keysfish1.gif', 0, false); return false;">
<img src="graphics/travel/thumbnails/keysfish1.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('graphics/travel/big/keysfish2.gif', 1, true); return false;">
<img src="graphics/travel/thumbnails/keyfish2.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('graphics/travel/big/keysfish3.gif', 2, true); return false;">
<img src="graphics/travel/thumbnails/keyfish3.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('graphics/travel/big/keysfish4.gif', 3, true); return false;">
<img src="graphics/travel/thumbnails/keyfish4.gif" style="border:1px solid black">
</a>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center; font: .8em 'Comic Sans MS', Arial;">
Move the cursor over the images/picture you wish to preview.
</td>
</tr>
<tr>
<td>
<a onMouseOver="update('graphics/travel/big/keysturtle1.gif', 4, true); return false;">
<img src="graphics/travel/thumbnails/keysturtle1.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('graphics/travel/big/tyleranthony.gif', 5, true); return false;">
<img src="graphics/travel/thumbnails/tyleranthony.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('graphics/travel/big/uwdiver1.gif', 6, true); return false;">
<img src="graphics/travel/thumbnails/uwdiver1.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('graphics/travel/big/uwlou.gif', 7, true); return false;">
<img src="graphics/travel/thumbnails/uwlou.gif" style="border:1px solid black">
</a>
</td>
</tr>
</table>
How do I swap these two paragraphs at will by clicking the buttons? Demo at: http://aapress.com.au/demo/paragraphswap/demo.html At present, for some reason, clicking button 2 makes both paragraphs appear. The effect I am after is to toggle individual paragraphs on and off, with the option of displaying both at once. Code: <html>
<head>
<title>Paragraph swap</title>
<script>
with (document)
{
write("<STYLE TYPE='text/css'>");
write(".hiddentext {display:none;} .outline {cursor: hand; text-decoration:underline; font-family: Arial; font-size: 13px;}");
write("</STYLE>");
}
function expandIt(whichEl)
{
whichEl.style.display = (whichEl.style.display == "block" ) ? "none" : "block";
}
</script>
</head>
<body>
<div align="center">
<center>
<table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td bgcolor="#FFFF55" valign="top">
<div align="center">
<center>
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" bordercolor="#000000">
<tr>
<td width="100%" colspan="2"> </td>
</tr>
<tr>
<td width="40%"> </td>
<td width="60%">
<p onclick="expandIt(el1); return false;">
<img border="1" src="1.gif" width="23" height="15"> Click
buttons
<span onclick="expandIt(el2); return false">
<img border="1" src="2.gif" width="23" height="15"></a></p>
</span></td>
</tr>
<tr>
<td colspan="2"><br>
<div id="el1" class="hiddentext">
<div align="center">
<table border="0" cellpadding="10" style="border-collapse: collapse" width="65%" bordercolor="#000000" bgcolor="#CCFFFF">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="3" style="border-collapse: collapse" width="100%">
<tr>
<td valign="top">PARAGRAPH 1</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br>
<div id="el2" class="hiddentext">
<div align="center">
<table border="0" cellpadding="10" style="border-collapse: collapse" width="65%" bordercolor="#000000" bgcolor="#FFCCCC">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="3" style="border-collapse: collapse" width="100%" bordercolor="#000000">
<tr>
<td valign="top">PARAGRAPH
2</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<br>
</center></div>
</td>
</tr>
</table>
</center></div>
</body>
</html>
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
document.getElementById("t").innerHTML = "<table border='1' id='myTable'>" + "<tr><td>" + names.join("<tr><td>") + "</td></tr>" + "</table>";
}
var names = ["Marble","Jarque","Dino","Pineapple"];
function abc(){
if(document.getElementById('myTable').rows[0].cells[0].innerHTML==names[0]){names.sort()}
else if(document.getElementById('myTable').rows[0].cells[0].innerHTML==names[2]){names.sort().reverse()}
else {names.sort()}
document.getElementById("t").innerHTML = "<table border='1' id='myTable'>" + "<tr><td>" + names.join("<tr><td>") + "</td></tr>" + "</table>";
}
</script>
</head>
<body>
<div id="t"></div>
<input type="button" value="sort" onclick="abc()" />
</body>
</html>
First time sort: no problem But when it comes to the blue-highlighted parts It cannot do the sort().reserve() What's wrong with the codes? Hello, I'm trying to use a couple of radio buttons to toggle between text inputs being displayed, but although the code works well in IE and GC, it doesn't in FF. That's my code: 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>
<title>number</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<script type="text/javascript">
function toggle(){
if (Mailbox.style.display == "none") {
document.getElementById('Mailbox').removeAttribute('style');
document.getElementById('PhoneNum').removeAttribute('style');
// document.getElementById('Mailbox').setAttribute('style','display:block');
document.getElementById('PhoneNum').setAttribute( 'style', 'display:none');
} else {
document.getElementById('Mailbox').removeAttribute('style');
document.getElementById('PhoneNum').removeAttribute('style');
document.getElementById('Mailbox').setAttribute('style','display:none');
// document.getElementById('PhoneNum').setAttribute('style','display:block');
}
}
</script>
</head>
<body>
<input type="radio" name="type" value="Voicemail" onclick="toggle()" checked="checked"/> VoiceMail
<input type="radio" name="type" value="Phone" onclick="toggle()"/> Phone Number<br></br>
<div id="Mailbox">Mailbox: <input type="text" name="mailbox"/></div>
<div id="PhoneNum" style="display:none">Number: <input type="text" name="number"/></div>
</body>
</html>
Can anyone help me sort this out? Thanks a lot, David Hi there, I have this problem where I need to swap the content of two different elements every time i press the run button. The first element in the HTML code is called id="one" and the second is called id="two". so where element id = "one" is, id = "two" should replace it, and when i press run again id = "two" should be replaced by "id= "one", and so-forth.. I've tried putting the elements into a variable and then just basically typing code that basically looks like id two = id one id one = id two but that isn't working. Is there something more professional looking that someone could help me with??, thanks Reply With Quote 01-21-2015, 07:15 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts Swap Content Of Two Different Elements HELP - JavaScript | Dream.In.Code So what I have to do is have 1 image on my webpage and a button. When the button is clicked the image needs to toggle back and forth between img1 and img2. After searching I've found ways to do this using the image itself as a button. But I'm having trouble getting it to work with an input button. Any help would be greatly appreciated. Below is the routine I am using that when invoked swaps images for other images: Code: <script>
function swapImage(swapContName) {
if (swapContName == 'mainImage1') {
document.getElementById('mainImage1').src = 'L1Bswap.gif';
document.getElementById('hand1').src = 'handr.gif';
document.getElementById('help1_pic').src = 'answers2.gif';
document.getElementById('homework').src = 'spacer.gif';
document.getElementById('instruct').src = 'spacer.gif';
document.getElementById('instructflag').src = 'spacer.gif';
}
}
</script>
Fairly simple and works well. But one of the images I would like to vanish (using the empty spacer.gif) has a border: Code: <img id="instructflag" border="1" src="FLAG.gif" width="23" height="15" align="left"> It must have this black border, but when it gets swapped for a blank, I am left with the black square. Anyone have any idea how to vanish the border along with the graphic? (I have some vague idea that "border" is not used any more, but anyway...). |
|||||||