Solved

Selecting two DIV's to switch places w/ animation

Posted on 2008-06-17
5
875 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Computer science students often experience many of the same frustrations when going through their engineering courses. This article presents seven tips I found useful when completing a bachelors and masters degree in computing which I believe may he…
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
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…

912 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

26 Experts available now in Live!

Get 1:1 Help Now