PDA

View Full Version : 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
<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.. :D


<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:



<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 :cool:

mburt
08-01-2006, 04:13 PM
Maybe this won't be so intrusive (with the margins)


<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.