Welcome to WebmasterWorld Guest from 18.207.136.184

Forum Moderators: open

Message Too Old, No Replies

Click to slide image from center to top?

     
4:07 am on Aug 31, 2011 (gmt 0)

New User

5+ Year Member

joined:Sept 30, 2010
posts: 13
votes: 0


I can't figure out how to script an image so that it slides to another area on the page when clicked on. For example, a logo that appears in the center of a blank page (vertical-align: middle), but when clicked slides smoothly to the top (vertical-align: top). Alternatively, it could be that clicking the image changes the vertical-align property of the entire table or cell. Either way, I can't figure out how to do this with a smooth animation.

A fantastic example of this--where I got the idea, in fact--is the front page of tumblr.com, where clicking "Log in" smoothly slides the tumblr logo from the top of the page to the center. How is this done?

I'm sorry if the solution is mind-bogglingly simple, I'm kind of a noob. But I've racked the web and I can't seem to find a script that does this. Can somebody please help? Thanks so much.
4:37 pm on Aug 31, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


There are about a <exag>half million ways</exag> to do this. :-) I'd probably skip the vertical align and use absolute positioning inside a relatively positioned element with jQuery (and also use tables for tabular data, not layout.) Second, I'd assign the click to an anchor, the natural "click object," not the image itself. here's a tested example, create your own 300 X 120 image and use any version of jQuery:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Animate me</title>
<style type="text/css">
#container {
width: 600px;
height: 400px;
margin: 100px auto;
position: relative;
border: 1px solid #000;
}
#container a {
display: block;
width: 300px;
height: 120px; position:
absolute;
top: 140px;
left: 150px;
outline:none;
}
img { border: none; }
</style>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('#container a').click(function() { return move_box(); });
});
//
function move_box() {
var curr_top=$('#container a').css('top');
var move_to=(parseInt(curr_top)==0)?140:0;
// Change 140 above to match whatever you have in CSS
//experiment with 'fast','medium','slow', or millisecond values for the speed
$('#container a').animate({top: move_to+'px'}, 1000);
return false;
}
</script>
</head>
<body>
<p id="container">
<a href="some-meaningful-url-if-JS-is-disabled.html"><img src="some-image.jpg" alt="slide-me"></a>
</p>
</body>
</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members