Question

You know, the menu that pops up when you get to the site and you can click the ‘x’ to the right to remove it. What technology is this (I assume AJAX) and what terms do I need to search for to use this?

Answer 1

Here is the code to do it with JQuery.

Html:

<div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
    The floating message goes here
</div>

<div>
  ..............
  other content goes here
  ..................
</div>

CSS:

#message_box {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
}

JQuery (javascript):

$(window).scroll(function()
{
  $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});

//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
  //the messagebox gets scrool down with top property and gets hidden with zero opacity
  $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
});

You can see a Live Demo here.

Result: