[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Selecting two DIV's to switch places w/ animation

Posted on 2008-06-17
5
Medium Priority
?
883 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
[X]
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
  • 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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?
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)
Starting up a Project
Suggested Courses

656 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