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

How to scroll a page or a element using css

I want to know if there is any way to scroll a page/element using any of css property. We are able to do it with javascript with scrollTo and scrollBy, but I want to scroll using css transition properties to make an slider that will scrollleft after a given timestamp. I tried using the jquery plugin http://ricostacruz.com/jquery.transit/, but it doesn't support scrollLeft or any scroll.

You can replicate scrolling in CSS like this:
#parent{
overflow: hidden;
}
#child{
margin-left: -250px; /* Move across the page 250px (x axis) */
}
However, that probably isn't what you want.
The best and most common way to achieve animated scrolling is using the jQuery Javascript library:
$("#parent").animate({
scrollLeft: 250
}, 1000);

The only solution I found is to transform by changing x,
For example:
$('.box').transition({ x: '-40px' });
Make sure that overflow of box is not hidden.
http://ricostacruz.com/jquery.transit/

What i got from your question is basically you need a plugin to slide from left to right with time interval use carousel plugin in jquery it will solve your problem.
You can customize it according to your requirements. And the same effect can be done with css also but for the time interval you have to touch jquery. And you didn't mentioned that you need the slide onload or on event trigger.

Twitter-Bootstrap affix

I am trying the affix feature on twitter-bootstrap, what this js method does, cause as i see it just puts the element choosed to:
position:fixed;
Or i'm mistaking and it also controls the element window offsets TOP,BOTTOM,LEFT,RIGHT .. ?
The main method i'm referring to is the :
$('.element').affix();
thanks

An example of the use of affix is the menu in the bootstrap documentation.
At the top of the place the menu is just on it's normal position. However if you scroll down, the position of the menu changes so it stays on screen.
You might need to set top for a specific element in CSS.
.bs-docs-sidenav.affix {
top: 40px;
}

Hover over a hidden element to show it

Is there any way to hover over an element that's already hidden. I am trying to mimic what Steam does with their arrow navigation on their home page. You'll notice that when you first get to the page, there are no arrows showing:
Then when you hover over the area where there should be an arrow, it shows itself:
I've tried setting my divs that contain the arrow images to display: none and have also tried visibility: hidden but neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hidden would make it work, but that doesn't seem to be the case. Is there any other way I can hide these divs from the start but still be able to have hover events work on them?

Set it to zero opacity instead:
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
http://jsfiddle.net/mblase75/bzaax/

You cannot hover over an invisible element or an undisplayed element. You can hover over a visible element and then use that to show a different previously hidden element. Or you can hover over a transparent element and make it opaque.
Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.
CSS:
#it {
opacity: 0;
width: 500px;
height:500px;
}
#it:hover {
opacity: 1;
}
Here is an example of showing one element when another is hovered over:
HTML:
<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>
jQuery:
$("#me").hover(function(){
$("#else").show();
},function(){
$("#else").hide();
});

Use the .fadeTo jQuery method to change the opacity of the element on hover state.
The jQuery site contains an example but something like this should suffice
$("element").hover(//On Hover Callback
function() {$(this).fadeOut(100);} ,
//Off Hover Callback
function() {$(this).fadeIn(500);})
From the jQuery Hover page.

You could set it to opacity: 0.
In order to make it cross-browser you probably would like to do it with jQuery tho.

One way to do this is by using an alternate hit-test div, such that it has no content, but when hovered over it shows the "arrow" div. When the "arrow" div (or the hit-test div) is exited, then the "arrow" div would be hidden once again.
Alternatively, you could use the same div for the hit-test and the "arrow", such that a background image is used for the visual elements of the div. When hovered, you could instruct the image's offset to be set to a position which would show the "arrow". When exited, you would set the offset of the background to a position where the arrow image would not longer be shown.
And, finally, if the content will always be in the same position as the hit-test area, you could set the opacity of the div to zero, and toggle accordingly.

You could set the opacity of the elements to 0. That would allow them to receive the hover events (actually mouseenter and mouseleave), but as a practical matter, make them invisible to users.

jquery animating accordion header

I am trying to animate my accordion headers to simulate a ribbon dragged on to the wrapper on hover, and on hover out its dragged out of the wrapper.
Now if you check this first jsFiddle everything works fine, but when I try to animate the width of the h2 the ribbon bit outside of the wrapper disappears for a second and returns when the width animation is done. Check this jsFiddle to see the problem.
Am I doing this wrong? Is there a way to animate both the h2 and the span at the exact same time?

H2 gets an 'overflow:hidden' while animating, that's why your ribbon disappears. It seems that jQuery does this automagically, when animating a width.
What you could do is to use a different animation library like emile, or to animate an emtpy property set and use the step callback of $.fn.animate to set the width.
Or you can modify your css that an overflow hidden on the H2 does not affect you.