Superimpose a banner div over another div, with jQuery if possible - php

Question

I have a "news" div and a "banner" div.
I want user to see the "banner" div when page loads. This "banner" div should show over the "news" div, exactly over the position, covering the "news" div. So:
How should I do to detect position of "news" div and show the "banner" div over, floating, without affecting the grid structure?
Any jQuery plugin that allows user to hide that div and never show again? w/ cookie?
Hope you've understood my idea. I leave an image:

Answer 1

use the jquery's offset
http://api.jquery.com/offset/
and the jquery's show and hide
http://api.jquery.com/show/
you can use hte negative margin for the banner to come over to the news...div.
Let me know if you need anything...
use absolute postioning for news banner.

Answer 2

I've written a script for you which should help.
It uses the Cookie plugin for jQuery.
I've put some comments in the code so hopefully it should be pretty self-explanatory.
Feel free to come back with other questions you may have.
Usage
You should see a banner on first load, then click run again and it should dissapear.
The banner will be positioned exactly above the news-list using absolute positioning, the width/height and the top/left offset of the newslist.

Answer 3

I realise this question has already been answered, but I thought I'd offer a slight alternative, using CSS, jQuery and the jQuery cookie plugin:
html:
<div class="container">
<div class="news">
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="banner">
<p>Yet more text, this time it's the banner.</p>
<span class="close">X</span>
</div>
</div>
<div id="clear">Remove the cookie</div>
css:
.container {
width: 80%;
min-height: 400px;
position: relative;
border: 4px solid #000;
}
.news {
width: 100%;
height: 100%;
}
.banner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f00;
}
.close {
position: absolute;
top: 0;
right: 0;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
width: 2em;
line-height: 2em;
text-align: center;
display: block;
cursor: pointer;
}
#clear {
width: 80%;
text-align: right;
color: #fff;
background-color: #999;
border: 4px solid #000;
border-top-width: 0;
font-family: arial, sans-serif;
cursor: pointer;
}
jQuery:
$(document).ready(
function(){
if ($.cookie('closed')){
$('.banner').remove();
}
$('.close').click(
function(){
$(this).closest('.banner').remove();
$.cookie('closed',true, {expires: 30});
});
$('#clear').click(
function(){
$.cookie('closed',false, {expires: -200});
});
});
JS Fiddle demo.
A slightly more pleasing demo, with animate():
$(document).ready(
function(){
if ($.cookie('closed')){
$('.banner').remove();
}
$('.close').click(
function(){
$(this)
.closest('.banner')
.animate(
{
'top':'120%'
}, 1500,
function(){
$(this).remove();
}
);
$.cookie('closed',true, {expires: 30});
});
$('#clear').click(
function(){
$.cookie('closed',false, {expires: -200});
});
});
Demo at JS Fiddle
Edited with an afterthought, assuming that you get repeat visitors, it might be worth re-setting the cookie in the initial if check, to ensure that they don't see the banner ever again (unless they leave more than 30 days between visits), changing it to:
if ($.cookie('closed')){
$('.banner').remove();
$.cookie('closed',true,{expires: 30});
}