Animated content edit controls

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
MythX
Forum Commoner
Posts: 28
Joined: Mon Jan 11, 2010 8:28 pm

Animated content edit controls

Post 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
MythX
Forum Commoner
Posts: 28
Joined: Mon Jan 11, 2010 8:28 pm

Re: Animated content edit controls

Post 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>
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: Animated content edit controls

Post 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.
MythX
Forum Commoner
Posts: 28
Joined: Mon Jan 11, 2010 8:28 pm

Re: Animated content edit controls

Post by MythX »

Thanks John,
That was helpful.
bestwebdesigner
Forum Newbie
Posts: 9
Joined: Mon Jan 31, 2011 4:38 am

Re: Animated content edit controls

Post 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 );

  });
});
Post Reply