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
Animated content edit controls
Moderator: General Moderators
Re: Animated content edit controls
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
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>
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
Re: Animated content edit controls
.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.
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
Thanks John,
That was helpful.
That was helpful.
-
bestwebdesigner
- Forum Newbie
- Posts: 9
- Joined: Mon Jan 31, 2011 4:38 am
Re: Animated content edit controls
Hi,
You have to use this code for animating your content or you can use jquery plugin.
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 );
});
});