Solved

Selecting two DIV's to switch places w/ animation

Posted on 2008-06-17
5
872 Views
Last Modified: 2010-08-05
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
Comment
Question by:chuckbeats
  • 3
  • 2
5 Comments
 
LVL 12

Expert Comment

by:rowejd
ID: 21804846
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
 

Author Comment

by:chuckbeats
ID: 21805016
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
 
LVL 12

Accepted Solution

by:
rowejd earned 500 total points
ID: 21805312
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
 

Author Comment

by:chuckbeats
ID: 21805421
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
 

Author Closing Comment

by:chuckbeats
ID: 31468021
Thanks
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Displaying an arrayList in a listView using the default adapter is rarely the best solution. To get full control of your display data, and to be able to refresh it after editing, requires the use of a custom adapter.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now