Page 1 of 1
Animated content edit controls
Posted: Mon Jan 31, 2011 12:23 pm
by MythX
Hi, I have a site I've built for a friend. It's pretty basic, content is laid out in div's rather than tables. He would like it setup so he can edit content (which is all PHP/MySQL) inline. For instance, when you hover over a div that contains editable content, he wants controls to appear in the top row of that div (edit, delete, etc..). It's easy to edit the content and such, where I'm having difficulty is having these controls appear when the mouse hovers over a div, and then disappear when the mouse is pulled away. In my head I am picturing this using jQuery, I think it's the slideDown method. I would like to do it without having to make major changes to the existing site layout.
Thanks in advance.
Jason
Re: Animated content edit controls
Posted: Mon Jan 31, 2011 1:46 pm
by MythX
OK, I got most of this working. I would appreciate help with the following issue:
I placed a div in the right side of .controls. This is how I'd like the controls window to close. The problem is that once closed, it satisfies the mouseover check and opens up again. How do I prevent that? I'm thinking of maybe a 2 second delay, or making it mouseout before allowing the mouseover, but I'm not sure how to do that.
The code I'm using is below.
Thanks
Jason
Code: Select all
<!DOCTYPE html>
<html>
<head>
<style>
.controls
{
background:#de9a44;
width:100%;
height:20px;
display:none;
}
.controls_x
{
width:20px;
height:20px;
float:right;
background-color:#00FFFF;
}
#edit_me
{
width:500px;
height:100px;
background-color:#CCFFFF;
}
#no_edit
{
width:500px;
height:100px;
background-color:#CCFF33;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<div id='no_edit'>
No Edit Controls
</div>
<div id='edit_me'>
<div class='controls'><a href='edit.php'>Edit</a><div class='controls_x'>X</div></div>
Edit Controls
</div>
<script>
$('#edit_me').mouseover(function ()
{
$("div.controls").slideDown("slow");
});
</script>
<script>
$('.controls_x').click(function ()
{
$("div.controls").hide("slow");
});
</script>
</body>
</html>
Re: Animated content edit controls
Posted: Mon Jan 31, 2011 1:53 pm
by John Cartwright
.slideDown( [ duration ], [ callback ] )
You can attach callbacks that will run once the function is done processing. Add logic in the events to signal the element is being "used" and flag the element, and using the callback to set the flag to being unused to allow successive events to run normally. If the flag is shown to being used during an event, simply return false to cancel the event bubble.
Re: Animated content edit controls
Posted: Mon Jan 31, 2011 7:59 pm
by MythX
Thanks John,
That was helpful.
Re: Animated content edit controls
Posted: Tue Feb 01, 2011 1:22 am
by bestwebdesigner
Hi,
You have to use this code for animating your content or you can use jquery plugin.
Code: Select all
$(document).ready( function(){
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});