We Keep Coding

Vertical expanding pop up window with javascript or jquery

I am trying to find a way to enable my pop up window expand in a similar fashion as the Facebook Birthday popup expands. If you login to your Facebook page and click the "others" link next to where it shows how many of your friends have birthdays today, you will notice the pop up window shows up very small and then grows in a vertical fashion.
How am I able to do this?
I created a fiddle to show what I have so far.
https://jsfiddle.net/05w8fpL5/
I have added..
.fadeIn("slow");
and
.fadeOut("slow");
So far which I like, but I wish I had some say so on how long it took to fadeIn and Out.
Does anyone know how I could accomplish this?

You can achieve this using the .slideUp() and .slideDown events in Jquery. This will provide the vertical expanding animation that you are looking for. So change your .fadeIn and fadeOut functions, an important note that the slide functions do not work with min-height, you will need to remove that CSS from .admin_help_popup for this to work:
$('.admin_popup').on('click',function(){
$(".light_admin,.white_overlay").slideDown("slow");
});
$('.close_admin_popup').on('click',function(){
$(".light_admin,.white_overlay").slideUp("slow");
});
If it's completely necessary you have that min-height property, you can set min-height back to it's default value after .slideDown. You can try and make it smoother by using .animate(). Make sure to set mine-height to 0px on the slide up:
$('.admin_popup').on('click',function(){
$(".light_admin,.white_overlay").slideDown("slow", function(){
$(".admin_help_popup").animate({"min-height": "380px"}, "fast");
});
});
$('.close_admin_popup').on('click',function(){
$(".admin_help_popup").css("min-height", "0px");
$(".light_admin,.white_overlay").slideUp("slow");
});
Basic SlideUp/Down Fiddle Example without min-height
Fiddle example with min-height

unable to move a div to right which is creating dynamically

I have 2 buttons in my div, left side and right side. When I click on right button it need to move to right and for left button it need to move to left. I used:
$('.left').click(function(e) {
$('#votersDetailsTable').animate({
'marginLeft': '30px'
});
});
can i use like
$('.left').click(function(e) {
$('#votersDetailsTable').live("animate",{
'marginLeft': '30px'
});
});
Here maindiv is also creating dynamically .I am unable to move the div.Please help me.Thanks in advance..

try to put the div's position to relative in your css file
#mainDiv{
position:relative;
}

We'll need to see more of your css and html that contain these buttons. However your issue is that you are animating the attribute left which will only do something if #mainDiv is positioned absolute (or fixed).
The attributes you can change inside jQuery.animate() are css attributes. So you'll probably want marginLeft.
Generally when I have to create elements dynamically and then animate them, I write out the html / css for the before and after and find differences in order to figure out what attributes to animate.

Put alert just before animate to check if control is coming into click function. If not
try using .on() instead of .live()

Working Demo
Refer to MDN Docs for left css property
left applies to only positioned element's
#mainDiv{
position:relative;
}

Scrolling a <div> to Specific Content

I'm creating a split page with a menu on the left, and the main content on the right. When I click on a menu item, I want to scroll the main content to that item.
I found JavaScript scrollTo(), which takes offset arguments.
Is there any way to determine the offset of a particular <p> or other element within a <div>? Or perhaps there is another way to scroll to an element without knowing its offset?
EDIT
Thanks for the replies. Looks like everyone gave similar answers. However, I ran into a problems with this. It seems that offset().top (or position().top) return different values depending on the current scroll position.
My jsFiddle is here: http://jsfiddle.net/gBTW9/4/embedded/result/
If I scroll to the top and selection Section 4, it works as expected. But once I've scrolled, it stops working correctly. Can anyone see what is happening.

There are jquery methods offset and position stat can help there.
Also there is good scrollTo plugin which accepts elements and much more.

You can get the vertical offset of an element using $('p').offset().top. You can combine this with scrollTop() using this:
$('div').scrollTop($('p').offset().top);

You need to use position() rather than offset(). If you know the id of that you can easily find the position of that paragraph tag
jQuery: Difference between position() and offset()

If i didn't misunderstood you just need an animated scrolling to a particular element, something similar on what I did on my portfolio.
Assuming that the menu on the left is fixed, then just scroll the page to the element you want to scroll to:
$("html, body").animate({
scrollTop: $('#element').offset().top
});
If you need to move a particular element over another element then:
$("#element1").animate({
top: $('#element2').offset().top
});

Why try it the hard way, when you can use a HTML native attribute??
call me old school, but i like to keep it simple.
within your menu:
use:
<ul>
<li>
Paragraph 1
</li>
</ul>
instead of
<ul>
<li>Paragraph 1</li>
</ul>
this will make your section jump to the # (id) that equals Paragraph1

Create Div with Absolute

I wanna order div like in the image below any one can help?
All div has specific width but they don't have Height restrict. There can be 4 div each column and next div (5th div) goes bottom of 1st div but space of top and bottom div must be same(margin:5px)
Thanks.

Nathan's suggestion is a good one - there is also Masonry, which relies on jQuery as well.

You can't do this in pure CSS, as it goes horizontal, as you progbably know. For a jQuery solution, check out a plugin like the Columnizer jQuery Plugin.

Check out https://stackexchange.com/sites it uses Isotope!

How to know when you scrolled down?

Just visit http://techcrunch.com/ and scroll down. How do they do it? How that top line appears with a new logo? Is there any jQuery trick? How to determine when person scrolled down certain amount of pixels and show to him new html?

They might just use jQuery-Waypoints which lets you trigger events if the user "passes" a certain HTML-Element.
Example ( taken from page ):
$('.entry').waypoint(function() {
alert('You have scrolled to an entry.');
});

They are using jquery sonar plugin[1] which defines special jquery events[2].
The trick is putting a static positioned top element, on a very high z-index layer, with the part to be occupied by the dynamic logo initially transparent. When the jquery event is thrown, they just make the new logo visible above any underlying content.
[1] http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js
[2] http://benalman.com/news/2010/03/jquery-special-events/#api

Maybe they use window.pageYOffset and there is also document.documentElement.scrollHeight and finally they use the window.onscroll event.

They use the window.scroll() function to listen for the scroll event, then use window.scrollTop() to determine the offset of the logo from the top of the page.
see: http://jsfiddle.net/XkMrc/2/