Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

mint.com javascript dropdown effect

I need to recreate an effect that mint.com has on another website. When you go to the transactions page and click on one of your transactions a tab pops up underneath that says edit details. When you click on that tab a div will drop down exposing more details about the transaction. I don't even know what this kind of effect this is called but I need to know to recreate something like this preferably with jquery.

There are some screenshots of what I'm talking about below.

closed

open

like image 215
Adam McMahon Avatar asked May 19 '10 21:05

Adam McMahon


2 Answers

only thing you would need to do is get the position of the clicked element and display a div bellow it .. of course you need to have something that gets all the extra information and displays it .. so first thing I would do is create a div somewhere on the page and hide it

<div id="myEditRecordContainer" style="position:absolute; top: 0px; left: 0px; display: none"></div>

then I would set the click handler

$('.recordDiv').click(function(e){
   //get the position of the clicked element
   var position = $(e.target).position();

   //set position of the div bellow the current element
   $('div#myEditRecordContainer').css({"top" : position.top() + $(this).height() + "px", "left": position.left()});

   //some kind of method that will get or populate the extra information 
   //you can use the $.ajax() to get the html from a web service or something along those lines
   var detailsHtml = GetExtraRecordDetails();
   $("div#myEditRecordContainer").html(detailsHtml);

   //now display the div - we already set the css for the position 
   //correctly so it should just display where you wanted it
   $("div#myEditRecordContainer").show();
});

and the only thing you would need to do on the "I'm done" button is call

$("div#myEditRecordContainer").hide();

after submitting the changes of course :)

I didn't have a whole lot of time to give maybe a more detailed example but this was just of the top of my head what I would do in this case ..

I really hope this at least gives you an idea as to what you can do.

like image 149
drusnov Avatar answered Oct 23 '22 14:10

drusnov


Here is a jQuery plugin that does just that: http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx

like image 45
Lance Fisher Avatar answered Oct 23 '22 15:10

Lance Fisher