• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 884
  • Last Modified:

Selecting two DIV's to switch places w/ animation

I know that its a confusing question but this is what i nedd.  I have a column of 10 "divs". Each has a small 75X75 picture.  I need to find an example or tutorial on how i can select "2" of the images and have them switch, almost like a memory game look.  I need them to animates from one to the other(not real important).

ex.

select div1
then
select div4
as soon as div 4 is selected the divs switch with each other.

thanks, i can give more info if needed, and i will attach my code justincase u need it.
<!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>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
 
body {
background-color:#f2f2f2;
}
 
#pictrueContainer {
width:300px;
text-align:center;
margin:10px;
border:1px solid #666666;
background-color:#FFFFFF;
padding-bottom:3px;
}
 
.pictureEven {
height:75px;
width:295px;
background-color:#CCCCCC;
border:1px solid #000000;
margin-top:3px;
text-align:left;
}
 
.pictureEven a img {
height:75px;
width:75px;
background-color:#CCCCCC;
border-right:1px solid #000000;
border-bottom:0px;
border-left:0px;
border-top:0px;
}
 
.pictureEven a:hover img {
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
 
.pictureOdd {
height:75px;
width:295px;
background-color:#CCCCCC;
border:1px solid #000000;
margin-top:3px;
text-align:left;
}
 
.pictureOdd a img {
height:75px;
width:75px;
background-color:#CCCCCC;
border-right:1px solid #000000;
border-bottom:0px;
border-left:0px;
border-top:0px;
}
 
.pictureOdd a:hover img {
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
 
.link_style {
position:relative;
vertical-align:top;
left:60px;
top:27px;
font-family:"Courier New", Courier, monospace;
font-size:12px;
color:#333333;
}
 
</style>
 
 
 
</head>
 
<body>
<div id="pictrueContainer">
<div class="pictureOdd"  id="one"><a href="#" > <img src="picUpload/pic1.jpg" alt="1" /></a> <a href="#" class="link_style">Listing_11.jpg</a> </div>
<div class="pictureEven"><a href="#"><img src="picUpload/pic2.jpg" alt="2" /></a> <a href="#" class="link_style">Listing_21.jpg</a> </div>
<div class="pictureOdd"><a href="#"><img src="picUpload/pic3.jpg" alt="3" /></a> <a href="#" class="link_style">Listing_22.jpg</a></div>
<div class="pictureEven"><a href="#"><img src="picUpload/pic4.jpg" alt="4" /></a> <a href="#" class="link_style">Listing_23.jpg</a></div>
<div class="pictureOdd"><a href="#"><img src="picUpload/pic5.jpg" alt="5" /></a> <a href="#" class="link_style">Listing_24.jpg</a></div>
<div class="pictureEven"><a href="#"><img src="picUpload/pic6.jpg" alt="6"/></a> <a href="#" class="link_style">Listing_25.jpg</a></div>
<div class="pictureOdd"><a href="#"><img src="picUpload/pic7.jpg" alt="7" /></a> <a href="#" class="link_style">Listing_26.jpg</a></div>
<div class="pictureEven"><a href="#"><img src="picUpload/pic8.jpg" alt="8" /></a> <a href="#" class="link_style">Listing_27.jpg</a></div>
<div class="pictureOdd"><a href="#"><img src="picUpload/pic9.jpg" alt="9" /></a> <a href="#" class="link_style">Listing_28.jpg</a></div>
<div class="pictureEven"><a href="#"><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>

Open in new window

0
chuckbeats
Asked:
chuckbeats
  • 3
  • 2
1 Solution
 
rowejdCommented:
If you're pretty savvy with javascript & comfortable playing around with a library - you could modify the scriptaculous scripts to work this way, even using a "drag and drop" type functionality.

It wouldn't be practical for me to give you step-by-step instructions for this, but can direct you to that site if you may be interested:

http://github.com/madrobby/scriptaculous/wikis/draggable 

There you'll find the code & the libraries you need as well as tutorials to learn how to drag and drop elements - and then to have them react in a certain way (this is where you'd tweak it to switch out the divs) once you drop them in a "drop zone".  So the memory game scenario you could basically create a draggable div with droppable areas that trigger a switch functionality depending on where you dropped it.
0
 
chuckbeatsAuthor Commented:
Thanks, i will look into it, im trying to avoid a drop area. I just need a quick two select div process then they switch, but i forgot about scriptaculous.  I will look into it.
0
 
rowejdCommented:
Without writing the entire script for you...here's the idea of how you can accomplish this.

You need an onclick event triggered with ever single div.  When a div is clicked, it needs to record the div's ID.  The onclick event also needs to trigger a counter to keep up with whether this is the first div clicked or the second.  When the onclick event is called, it will test the counter -- if it's the second one called, it would do your switch something like this:

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

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

Someone may wish to come along and write it for you to solve this right away -- but it's usually better to give you the elements and let you work out the kinks based on your code since you can test it.

Hope that helps.
0
 
chuckbeatsAuthor Commented:
No, i dont want anyone to write it, im trying to learn this.  Thanks that helps alot.  I have figured out the animation part so now i need to figure out how to track these bad boys.  Thanks you very much this gets me in the right direction!!
0
 
chuckbeatsAuthor Commented:
Thanks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now