Creating a Basic Pop-out Panel with ASP.NET MVC and jQuery

At the time of this posting I am using VS2010 RC.

There is a simple effect that adds a little jump to your site without having to be too in-your-face about it: a pop-out panel.

Pop-out panels allow you to hide information or parts of your UI that do not

There are three things that I wanted to achieve:

1. Have an animation that ‘slides’ the panel out
2. Have a tab that is always visible and positioned statically on the page. When hovered over it begins the animation effect on the content panel
3. Allow the panel to grow with the content.

I am building the pop-out panel with jQuery and will enrich it with ASP.NET MVC.

Side note: For this demo I used solid, easily recognizable colored DIVs so that it was easy to make out where things were landing. Because they are simply DIVs, you can use whatever you like for the design.

The HTML Layout

The template for this concept is quite simple:

    <div
   id="theFrame">
       <div id="theContent"> ...
       </div> <div id="theHandle"></div> </div> 

In the above screenies, the frame DIV is used to wrap the elements, the handle is the teal bar on the left hand side, and the content is the grey box with the links that is displayed when the teal bar is hovered over.

Teal is all the rage.

The CSS Setup

The styles are almost as easy as the HTML markup.

#theFrame { width:225px; position:fixed; left:-200px; top:150px; }

#theContent { width:180px; position:relative; left:0px; top:0px; padding: 10px; }

#theHandle { width:35px; position:absolute; left: 200px; top:0px; }

Here, we’re simply setting up the width and position of the pop-out box. Notice that the handle is not sized for height, but it will display as the full size height of the content box by the time we’re through with it. ;o)

jQuery for Animating the pop-out

I’m going to stick with my ‘simple’ theme here.

<script language="javascript" type="text/javascript">
   $(function () {
       $("#theHandle").height($("#theFrame").height());

       $("#theFrame").mouseenter(function () {
           $("#theFrame").stop(true, true);
           $("#theFrame").animate({ "left": "0px" }, "fast");
       });

       $("#theFrame").mouseleave(function () {
           $("#theFrame").stop(true, true);
           $("#theFrame").animate({ "left": "-200px" }, "fast");
       });


   });
</script>

There are really only two parts to this:

1. Setting the size of the handle to match the rendered height of the content area.
   
   
   
   
   



2. Creating the event handlers for the hover effect to create the animated fly-out (mouseenter and mouseleave).
   
   

I’m using jQuery’s .stop(true, true) here; the first true tells jQuery to clear out the animation queue, the second tells it to skip to the last entry added to the animation queue and play it out. This prevents the anonying cyclic animation that starts to happen if a user flies the mouse over the handle 15 times quickly. Comment out the .stop() if you want to see what I’m taking about.

Adding ASP.NET MVC to the mix

Finally, I’m going to get it integrated into the ASP.NET MVC view engine. The idea here is straightforward: if you want to have the list of items dynamically generated, or customized per-user or such, you’ll want this thing to be easily rendered and self-contained.

To do this, I simply extracted the code required to output the pop-out control, including the jQuery script, into a partial view.

The content can then easily be generated or pulled from a database. You can use models/repositories for this and pull from LINQ to SQL or use entity framework to retrieve the content.

Now I have a simple way to inject the pop-out into a page:

<% Html.RenderPartial("PopoutFrame", contentData); %>

Did I say ‘finally’?

Actually, I do have one last thing to try out, and this idea has given me a simple way to get into plugin development in jQuery.

There are a couple of other features that I’d like to implement:

• Covert this to a UL/LI setup
  
  
  
  
  



• Create a plugin that accepts either a UL element or a DIV and some JSON data (provided by a function/get/post)
  
  
  
  
  



• Use the new jQuery UI position() methods and allow the pop-out to come from anywhere on the page
  
  
  
  
  



• Switch to a non-overflowing frame to hide the contents when the widget is not in pop-out mode
  
  
  
  
  



• Allow the contents to be loaded via AJAX when the pop-out is invoked (but load the contents before starting the animation)
  
  

This was fairly simple to implement but I hope it gives someone a start if they are trying to achieve a similar effect.