New Yahoo Home Page Drop-in box

**Gunter** · 08-01-2006, 03:02 PM

Hi All,
Does anyone know where could find the script that does a simular effect to new yahoo home page drop-in banner. It's cool - when banner drops, the whole page goes down.

Thanks

**mburt** · 08-01-2006, 03:14 PM

Code:

<html>
<head>
<script language="javascript">
var i=-100
function slide() {
i=i+2
banner.style.marginTop=i
if (i>0) {i=0}
setTimeout("slide()",0)
}
onload=slide
</script>
<style type="text/css">
body {
margin:0
}
#banner {
width:400px;
height:100px;
border:1px solid black;
padding:4px;
margin-top:-100px
}
</style>
</head>
<body>
<div id="banner">BANNER</div>
Page Content
<br>Blah... test 123
<br>More page content
</body>
</html>

**shachi** · 08-01-2006, 03:41 PM

Awesome job, mburt.

**mburt** · 08-01-2006, 04:01 PM

Oh, it gets better..

Code:

<html>
<head>
<script language="javascript">
var i=-100
function slide() {
i=i+2
banner.style.marginTop=i
if (i>0) {i=0}
t1=setTimeout("slide()",0)
}
function slideOut() {
clearTimeout(t1)
i=i-2
banner.style.marginTop=i
if (i<-100) {i=-100}
t2=setTimeout("slideOut()",0)
}
onload=slide
</script>
<style type="text/css">
body {
margin:0
}
#banner {
width:400px;
height:100px;
border:1px solid black;
padding:4px;
margin-top:-100px
}
#close {
position:absolute;
width:100%;
text-align:right;
left:0px
}
</style>
</head>
<body>
<div id="banner">BANNER
<a href="#" id="close" onclick="slideOut()">[X]</a>
</div>
Page Content
<br>Blah... test 123
<br>More page content
</body>
</html>

It has an [x] button at the top right hand corner of the banner, but it doesn't position right in Mozilla

**shachi** · 08-01-2006, 04:07 PM

Here even better, now it doesn't give me warnings:

Code:

<html>
<head>
<script language="javascript">
var i =- 100;
function slide() {
i = i + 2;
var element = document.getElementById("banner");
element.style.marginTop=i
if(i > 0) {
i = 0;
}
t1 = setTimeout("slide()",0);
}
function slideOut() {
clearTimeout(t1);
i = i - 2;
var element = document.getElementById("banner");
element.style.marginTop = i;
if(i <- 100) {
i =- 100;
}
t2 = setTimeout("slideOut()",0);
}
onload=slide
</script>
<style type="text/css">
body {
margin:0
}
#banner {
width:400px;
height:100px;
border:1px solid black;
padding:4px;
margin-top:-100px
}
#close {
position:absolute;
width:100%;
text-align:right;
left:0px
}
</style>
</head>
<body>
<div id="banner">BANNER
<a href="#" id="close" onclick="slideOut()">[X]</a>
</div>
Page Content
<br>Blah... test 123
<br>More page content
</body>
</html>

**mburt** · 08-01-2006, 04:09 PM

Warnings suck

**mburt** · 08-01-2006, 04:13 PM

Maybe this won't be so intrusive (with the margins)

Code:

<style type="text/css">
body {
margin-top:0px
}
#banner {
width:400px;
height:100px;
border:1px solid black;
padding:4px;
margin-top:-100px
}
#close {
position:absolute;
width:100%;
text-align:right;
left:0px
}
</style>

**Gunter** · 08-01-2006, 07:08 PM

Great!!!!!

**Gunter** · 08-01-2006, 07:09 PM

Any change to set a session so when you close the banner and refresh the page it wouldn't load untill new browser window is open?

**shachi** · 08-01-2006, 07:36 PM

You need to place some additional functions. Use cookies if needed.

Thread: New Yahoo Home Page Drop-in box

Thread Tools

Search Thread

New Yahoo Home Page Drop-in box

Bookmarks

Bookmarks

Posting Permissions