Corey Coogan

Python, .Net, C#, ASP.NET MVC, Architecture and Design

  • Subscribe

  • Archives

  • Blog Stats

    • 96,634 hits
  • Meta

Using jQuery to Dynamically Display a Slideout

Posted by coreycoogan on May 19, 2011

Here’s something I find myself needing to do often enough that it warrants a post. Here’s the situation…

I am dynamically displaying an unknown number of data items. The item itself is unimportant for this post, however, the item may contain some attributes that shouldn’t be displayed on the page all the time.  Perhaps it’s a  long description or information about how the item was last updated.  Whatever it is, this data is better to be hidden unless someone actually wants to see it.  This may be a good use case for some sort of panel that slides out when an “info” icon or “>>” button is clicked.

Making this happen with jQuery is pretty simple and consists of a few steps:

  1. Wire up a “click” event to the button or text from where the panel will slide.
  2. Using the clicked on element as an anchor, use jQuery’s offset() method to get the coordinates.
  3. Either clone an existing element, such as a DIV, or create one on the fly and assign the following CSS rules to it:
    1. Position – This should be set to absolute so the panel displays relative to its containing element.
    2. Top – The distance in pixels, from the top of the containing element, where the panel should be placed.
    3. Left – The distance in pixels, from the left of the containing element, where the panel should be placed.
  4. Append the new panel to the container that is holding the list of data items.
  5. Display the panel using a cool effect – or hide it.
 A couple of notes before we get to the example.  First, there are 2 ways to get an element’s position in jQuery – offset() and position().  You can read the descriptions to understand what they both do, but offset() typically works for me. I’m also using the ‘slide’ toggle effect from jQuery UI to slide my panel from left to right with the toggle() method.

Now for an example:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	//either get data from a service here or have it ready from server-side code

});

function showMoreInfo(anchor,itemId)
{
	//make a jQuery object
	anchor = $(anchor);

	//the dynamic ID of the moreInfo panel
	var panelId = 'moreInfo_' + itemId;
	//see if the panel already exists
	var info = anchor.parent().parent().find('#' + panelId);

	if(!info.length){
		//the panel doesn't exist, so create it

		//get the coordinates from our anchor
		var coords = anchor.offset();
		//clone our info panel, or use jQuery templates
		info = $('#moreInfoPanel').clone();

		info.find('#description').html('<b>Get this data based on the itemId</b>');
		info.find('#lastUpdated').html('<b>Get this data based on the itemId</b>');

		//set the new dynamic ID
		info.attr('id',panelId);

		//now set the CSS to make the panel display where we want
		info.css({
			position: 'absolute',
			top: coords.top-(info.height()),
			left: coords.left+anchor.width() + 15
		});
		//append the panel to the item div
		anchor.parent().parent().append(info);
	}

	//use the jquery UI slide definition
	info.toggle('slide',function(){
		//slide callback to change the button text depending on the state
		if(info.is(':visible')){
			anchor.html('<< Less'); 		}else{ 			anchor.html('More >>');
		}
	});

}
</script>

<body>

<div id='moreInfoPanel' style='display:none;background:silver;padding:20px;'>
	<div id='description'></div>
	<div id='lastUpdated'></div>
</div>

<div id='dataItems'>

	<!-- this is an example data item. this would be generated dynamically server side or from a web service -->
	<!-- jQuery Templates could be nice here -->
	<div id='dataItem_ITEMID' class='dataItem' style='border:1px solid black;width:200px'>
		<div style='text-align:right'>
			<!-- wire up the click event -->
			<button onclick='javascript:showMoreInfo(this,"ITEMID");'>More >></button>
		</div>
		<hr/>
		<div>
			Main content goes here
		</div>
		
	</div>
</div>

</body>

About these ads

Sorry, the comment form is closed at this time.

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: