Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Selecting two DIV's to switch places w/ animation

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

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.

Question has a verified solution.

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

Entering a date in Microsoft Access can be tricky. A typo can cause month and day to be shuffled, entering the day only causes an error, as does entering, say, day 31 in June. This article shows how an inputmask supported by code can help the user a…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

791 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