...

View Full Version : selecting two divs then calling a function



jcdevelopment
06-17-2008, 08:45 PM
Here is my problem, i have about 10 different divs that each have a different picture in them. What i want to do is have one div selected, by clicking on the picture and then another one, that you would click on the picture. Then once "2" are selected they change places. I have figured out how to change places, but im having trouble creating something that has to wait for two to be selected.

Not sure if anyone knows of a site or any idea how to do this. Sorry if this is confusing, let me know if you need more information.

Thanks!

Also i have been messing with this, just not sure how to create a code to make this work, so it knows "2" have been selected.



document.getElementByID(firstClickedDivID).innerHTML = document.getElementByID(secondClickedDivID).innerHTML;

document.getElementByID(secondClickedDivID).innerHTML = document.getElementByID(firstClickedDivID).innerHTML;

jcdevelopment
06-17-2008, 10:29 PM
ok, this may be more important to the fact of reaching my goal

How would i go about calling mulitple ids? Like if i have



pics = document.getElementById('one');


how could i work that to where and element is selected and instead of 'one' being hard coded in, it will select the id that i click on? Like if i selected id "3" then i need it to say



pics = document.getElementById('three');


how would i go about that?

tomws
06-17-2008, 10:33 PM
I just hacked this up and I think it's doing what you want, except for it being a generic tile-like game. The ugly colors and alerts are to help see what's happening.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<style type="text/css">
td
{
background-color: #ffffff;
color: #000000;
border: thin #000000 solid;
padding: 1em;
}
td:hover
{
background-color: yellow;
color: #0000ff;
}
</style>

<script type="text/javascript">
var selectedCount = 0;
var firstSelectedTile;
var secondSelectedTile;

function toggleTiles(tile)
{
switch (selectedCount)
{
case 0:
selectedCount = 1;
firstSelectedTile = document.getElementById(tile);
firstSelectedTile.style.backgroundColor = '#ff0000';
break;
case 1:
selectedCount = 2;
secondSelectedTile = document.getElementById(tile);
if ( secondSelectedTile == firstSelectedTile )
{
alert("don't touch that");
selectedCount = 1;

} // end: if
else //
{
secondSelectedTile.style.backgroundColor = '#00ff00';
toggleTiles(null);

} // end: else
break;
case 2:
var swapTileContents = firstSelectedTile.innerHTML;
firstSelectedTile.innerHTML = secondSelectedTile.innerHTML;
secondSelectedTile.innerHTML = swapTileContents;
alert('swapped');
firstSelectedTile.style.backgroundColor = '';
secondSelectedTile.style.backgroundColor = '';
// edit: blanked the two new background colors so they would revert to default for td
selectedCount = 0;
break;
}
}

</script>

</head>

<body>

<table>
<tr>
<td id="tile0x0" onclick="toggleTiles(this.id);">1</td>
<td id="tile0x1" onclick="toggleTiles(this.id);">2</td>
<td id="tile0x2" onclick="toggleTiles(this.id);">3</td>
</tr>
<tr>
<td id="tile1x0" onclick="toggleTiles(this.id);">4</td>
<td id="tile1x1" onclick="toggleTiles(this.id);">5</td>
<td id="tile1x2" onclick="toggleTiles(this.id);">6</td>
</tr>
<tr>
<td id="tile2x0" onclick="toggleTiles(this.id);">7</td>
<td id="tile2x1" onclick="toggleTiles(this.id);">8</td>
<td id="tile2x2" onclick="toggleTiles(this.id);">&nbsp;</td>
</tr>
</table>

</body>

</html>

jcdevelopment
06-17-2008, 10:41 PM
Good god, you are a genious, thats exactly the kind i neede. I have the animation that i need, i just need to be able to differ between the two. Thank you very much!

jcdevelopment
06-17-2008, 11:00 PM
ok, now my attempt to butcher your code has failed. I am trying to enable my animation with what you gave me and it keeps giving me the "alert". I added a new alert and seems to think that i am selecting the same div. not sure, here is my attempt(it includes a small animation)



<script type="text/javascript">

var foo = null; // object

function doMove() {
foo.style.top = parseInt(foo.style.top)+3+'px';
setTimeout(doMove,5); // call doMove in 20msec
}

function init() {
foo = document.getElementById('title'); // get the "foo" object
foo.style.top = '0px'; // set its initial position to 0px
foo.style.zIndex='100';
doMove(); // start animating
}

var selectedCount = 0;
var firstSelectedDiv;
var secondSelectedDiv;

function toggleTiles(tile)
{
switch (selectedCount)
{
case 0:
selectedCount = 1;
firstSelectedTile = document.getElementById(tile);
firstSelectedTile.style.opacity = '0.5';
break;
case 1:
selectedCount = 2;
secondSelectedDiv = document.getElementById(tile);
if ( secondSelectedDiv == firstSelectedDiv )
{
alert("Must Select Two images");
selectedCount = 1;

} // end: if
else //
{
secondSelectedDiv.style.opacity = '0.5';
init(null);

} // end: else
break;
case 2:
var swapTileContents = firstSelectedDiv.innerHTML;
firstSelectedDiv.innerHTML = secondSelectedDiv.innerHTML;
secondSelectedDiv.innerHTML = swapTileContents;
//alert('swapped');
//firstSelectedTile.style.backgroundColor = '#ffffff';
//secondSelectedTile.style.backgroundColor = '#ffffff';
selectedCount = 0;
break;
}
}


//window.onload = init;

</script>



</head>

<body>
<div id="pictrueContainer">
<div class="pictureOdd" id="tile0x0"><a href="#" onclick="toggleTiles(this.id);" > <img src="picUpload/pic1.jpg" alt="1" /></a> <a href="#" class="link_style">Listing_11.jpg</a> </div>
<div class="pictureEven" id="tile0x1"><a href="#" onclick="toggleTiles(this.id);"><img src="picUpload/pic2.jpg" alt="2" /></a> <a href="#" class="link_style">Listing_21.jpg</a> </div>
<div class="pictureOdd" id="tile0x2"><a href="#" onclick="toggleTiles(this.id);"><img src="picUpload/pic3.jpg" alt="3" /></a> <a href="#" class="link_style">Listing_22.jpg</a></div>
<div class="pictureEven" id="tile0x3"><a href="#" onclick="toggleTiles(this.id);"><img src="picUpload/pic4.jpg" alt="4" /></a> <a href="#" class="link_style">Listing_23.jpg</a></div>
<div class="pictureOdd" id="tile0x4"><a href="#" onclick="init()"><img src="picUpload/pic5.jpg" alt="5" /></a> <a href="#" class="link_style">Listing_24.jpg</a></div>
<div class="pictureEven" id="tile0x5"><a href="#" onclick="init()"><img src="picUpload/pic6.jpg" alt="6"/></a> <a href="#" class="link_style">Listing_25.jpg</a></div>
<div class="pictureOdd" id="tile0x6"><a href="#" onclick="init()"><img src="picUpload/pic7.jpg" alt="7" /></a> <a href="#" class="link_style">Listing_26.jpg</a></div>
<div class="pictureEven" id="tile0x7"><a href="#" onclick="init()"><img src="picUpload/pic8.jpg" alt="8" /></a> <a href="#" class="link_style">Listing_27.jpg</a></div>
<div class="pictureOdd" id="tile0x8"><a href="#" onclick="init()"><img src="picUpload/pic9.jpg" alt="9" /></a> <a href="#" class="link_style">Listing_28.jpg</a></div>
<div class="pictureEven" id="tile0x9"><a href="#" onclick="init()"><img src="picUpload/pic10.jpg" alt="10" /></a> <a href="#" class="link_style">Listing_29.jpg</a></div>


</div>
<img src="picUpload/pic11.jpg" />
</body>
</html>

tomws
06-17-2008, 11:02 PM
The first thing I notice is that case 0 and case 2 still have the 'Tile' portion of their name as opposed to 'Div' used in the rest of the converted code.

jcdevelopment
06-17-2008, 11:04 PM
Thanks, i didnt see that. Unfortunately it didnt do much of anything. I am still getting the 'alert'. I think it has to do with my little animation that i need to fix.

tomws
06-17-2008, 11:12 PM
Oh! I think I see something else. Here's one of your original code lines followed by a suggested revision:

// old
<div class="pictureOdd" id="tile0x0"><a href="#" onclick="toggleTiles(this.id);" > <img src="picUpload/pic1.jpg" alt="1" /></a> <a href="#" class="link_style">Listing_11.jpg</a> </div>
// new
<div class="pictureOdd" id="tile0x0" onclick="toggleTiles(this.id);"><img src="picUpload/pic1.jpg" alt="1" />Listing_11.jpg</div>


Note that the onclick event is applied to the div in the revision. The original has it applied to the anchor tag which doesn't have an ID. I completely removed the anchor assuming that you were using it to trigger an event. If you want the hand pointer to appear, too, you can achieve that with css on your div wrappers of cursor: pointer; I think.

jcdevelopment
06-17-2008, 11:18 PM
ahhh, i see what you mean, unfortunately its giving me an error on line
130 and 137

saying, "object expected". not too sure..

tomws
06-17-2008, 11:21 PM
Do you happen to have it up on a public server?

jcdevelopment
06-17-2008, 11:23 PM
sorry, i was able to get it, i took out my animation function and kept the original code. Then i forgot i had the function being called twice. So it swaps now. Now i need to figure out how to add the animation.. oh well thats part of learning JS i guess!! Thanks

EDIT** I do the only problem is that its an intranet!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum