Comments on: CSS and jQuery Tutorial: Overlay with Slide Out Box

By: Gurumoorthy

Gurumoorthy — Fri, 20 Jan 2012 09:18:57 +0000

Update on my question – I have got the answer to my question from this website – http://flowplayer.org/

By: Gurumoorthy

Gurumoorthy — Wed, 18 Jan 2012 10:31:07 +0000

How do I create an overlay like this in one corner of the page where this pop up comes up automatically, but does not block the functionality of the background main page? Like, interested people could answer a simple question there with bullet options. If they are not interested, they can let that overlay be there and navigate through the rest of the page.

By: Rashi

Rashi — Wed, 21 Dec 2011 18:44:13 +0000

Firstly its a great tutorial.I am facing just one problem and hoping if someone can help me with the same.I am using the above code in google chome and my white box doesnot appear no matter how much i change the location of the box.

By: skeeran

skeeran — Sat, 29 Oct 2011 14:16:49 +0000

sorry had a mistake this is current tested

replace keydown with keyup

$(document).keyup(function(e){
//om when the ESC(27) is pressed will also close
if(e.which == ’27′){

$(‘#box’).animate({‘top’:'-200px’},500,function(){
$(‘#overlay’).fadeOut(‘fast’);
});

}

});

By: skeeran

skeeran — Sat, 29 Oct 2011 13:50:30 +0000

Hi to all a great tut,

to all who want that this box also close
when you press the ‘ESC’ key. Then this function would do it.

just put this function as additional..

$(document).keydown(function(e){

if(e.which == ’27′){
//om when the ESC(27) key is pressed then will also close.

$(‘#box’).animate({‘top’:'-200px’},500,function(){
$(‘#overlay’).fadeOut(‘fast’);
});
}

});

By: Eric

Eric — Tue, 18 Oct 2011 18:55:05 +0000

Thanks for an amazing tutorial. I’ve only 1 issue with the code and its that it doesn’t seem to work in Firefox 3.6. Has anyone come across this problem and know any fixes for it?

By: Leonir

Leonir — Wed, 05 Oct 2011 19:59:01 +0000

how do I load it automatically when you enter the page?

By: Joe

Joe — Sat, 13 Aug 2011 15:19:16 +0000

Hi Mary Lou,

Great tutorial and it’s looking and working great for me in Firefox and Chrome.

With IE, it works well, except there is a small flicker where the screen goes completely black for a tenth of a second at the very beginning and the very end of the animation.

Do you have any idea what that could be?

Many thanks

By: Aseem

Aseem — Thu, 21 Jul 2011 13:57:03 +0000

Gr8 article. Great reference. Thank you so much.

By: esther

esther — Wed, 22 Jun 2011 11:10:07 +0000

Hi Mary Lou
I really liked this tutorial. I wanted to change the width of the box that pops up. But when I do, the box shows immediatly and you can’t click it away.
Please help, what am i doing wrong?

tnx in advance

(BTW a 2nd box works fine, just change the classes.)