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.
Source: Tips4all, CCNA FINAL EXAM
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
ReplyDelete<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.
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
ReplyDelete