Scrolling banner

grudz

05-30-2005, 03:38 PM

Hi,

I've done some searching about this topic, but I don't even know how it's called, so if i'm repeating the same question, I'm sorry.

Basically, I would like a banner that works like this banner (http://www.goldentigercasino.com/).

I figure it's in JavaScript, but I'm honestly a big newbie. If anyone can at least give me the proper name as to what this is, I'll find some free scripts.

thank you

Crake

05-30-2005, 05:02 PM

i am using opera and i cant see anything superb about it it just looks like any outher banner :confused:

grudz

05-30-2005, 05:29 PM

this one scrolls down to the center of the page, and its not a popup so the blockers don't catch it

coothead

05-30-2005, 11:39 PM

Hi there grudz,

here is a very simple working example, for you to try...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>drop down div</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<base href="http://coothead.mysite.wanadoo-members.co.uk/"/>

<style type="text/css">
/*<![CDATA[*/

body {
background-color:#8c8c8c;
}
#container {
width:330px;
height:400px;
background-color:#b9bad9;
position:absolute;
top:-420px;
left:50%;
margin-left:-165px;
}
#left {
width:25px;
height:400px;
background-image:url(left.jpg);
float:left;
}
#center {
width:280px;
height:400px;
float:left;
}
#topc {
width:280px;
height:30px;
background-image:url(topc.jpg);
}
#midc{
width:280px;
height:350px;
font-family:verdana,arial,hevetica,sans-serif;
font-size:16px;
color:#262626;
text-align:center;
line-height:350px;
}
#botc {
width:280px;
height:20px;
background-image:url(botc.jpg);
}
#right {
width:25px;
height:400px;
float:left;
}
#topr {
width:25px;
height:30px;
background-image:url(topr.jpg);
}
#topr a {
display:block;
width:25px;
height:30px;
}
#botr{
width:25px;
height:370px;
background-image:url(botr.jpg);
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var i=-420;
var speed=50;

function dropDiv() {
document.getElementById("container").style.top=i+"px";
i+=8;
if(i<20) {
dropper=setTimeout("dropDiv()",speed);
}
else clearTimeout(dropper);
}

function removeDiv() {
document.getElementById("container").style.display="none";
}

onload=dropDiv;

//]]>
</script>

</head>
<body>

<div id="container">

<div id="left"></div>

<div id="center">
<div id="topc"></div>
<div id="midc">this is the drop down div.</div>
<div id="botc"></div>
</div>

<div id="right">
<div id="topr"><a name="x" onclick="removeDiv()"></a></div>
<div id="botr"></div>
</div>

</div>

</body>
</html>

coothead

grudz

05-31-2005, 05:58 PM

Hey coothead,

I'm having some trouble if I want to put an image 330px in the <div id="midc"> , if it's at 280px, it's ok, but I would like it at 330px, so that i takes the whole width of the div

#container {
width:330px;
height:400px;
background-color:#003333;
position:absolute;
top:-420px;
left:25%;
margin-left:-115px;
}
#left {
height:400px;
float:left;
}
#center {
width:330px;
height:400px;
float:left;
}
#topc {
width:330px;
height:30px;
}
#midc{
width:330px;
height:161px;
font-family:verdana,arial,hevetica,sans-serif;
font-size:11px;
color:#ffffff;
text-align:center;
line-height:350px;
}
#botc {
width:330px;
height:20px;
font-family:verdana,arial,hevetica,sans-serif;
font-weight:bolder;
font-size:11px;
color:#ffffff;

}
#right {
height:400px;
float:left;
}
#topr {
height:30px;
}
#topr a {
display:block;
width:25px;
height:30px;
}
#botr{
height:370px;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var i=-320;
var speed=10;

function dropDiv() {
document.getElementById("container").style.top=i+"px";
i+=8;
if(i<20) {
dropper=setTimeout("dropDiv()",speed);
}
else clearTimeout(dropper);
}

function removeDiv() {
document.getElementById("container").style.display="none";
}

onload=dropDiv;

//]]>
</script>

</head>
<body>

<div id="container">

<div id="left"></div>

<div id="center">
<div id="topc"></div>
<div id="midc"><img src="images/banner_logo_scroll.jpg" width="330" height="161"></div>
<div id="botc">sadfdsa</div>
</div>

<div id="right">
<div id="topr"><a name="x" onclick="removeDiv()"></a></div>
<div id="botr"></div>
</div>

</div>

coothead

05-31-2005, 08:12 PM

Hi there grudz,

unfortunately, for you anyway :), you can not put a 330px image in a 280px div and expect the
layout not to be adversely effected. You will need to use an absolutely positioned div to achieve this.

Have a look at this amended version to see how it works - I have highlighted the relevant additions...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>drop down div</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<base href="http://coothead.mysite.wanadoo-members.co.uk/"/>

<style type="text/css">
/*<![CDATA[*/

body {
background-color:#8c8c8c;
}
#container {
width:330px;
height:400px;
background-color:#b9bad9;
position:absolute;
top:-420px;
left:50%;
margin-left:-165px;
}
#left {
width:25px;
height:400px;
background-image:url(left.jpg);
float:left;
}
#center {
width:280px;
height:400px;
float:left;
}
#topc {
width:280px;
height:30px;
background-image:url(topc.jpg);
}
#midc{
width:280px;
height:350px;
font-family:verdana,arial,hevetica,sans-serif;
font-size:16px;
color:#262626;
text-align:center;
line-height:350px;
}
#botc {
width:280px;
height:20px;
background-image:url(botc.jpg);
}
#right {
width:25px;
height:400px;
float:left;
}
#topr {
width:25px;
height:30px;
background-image:url(topr.jpg);
}
#topr a {
display:block;
width:25px;
height:30px;
}
#botr{
width:25px;
height:370px;
background-image:url(botr.jpg);
}
#firefox {
width:324px;
height:161px;
position:absolute;
top:32px;
left:3px;
background-image:url(firefox.gif);
clear:both;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var i=-420;
var speed=50;

function dropDiv() {
document.getElementById("container").style.top=i+"px";
i+=8;
if(i<20) {
dropper=setTimeout("dropDiv()",speed);
}
else clearTimeout(dropper);
}

function removeDiv() {
document.getElementById("container").style.display="none";
}

onload=dropDiv;

//]]>
</script>

</head>
<body>

<div id="container">

<div id="left"></div>

<div id="center">
<div id="topc"></div>
<div id="midc">above is the firefox logo div.</div>
<div id="botc"></div>
</div>

<div id="right">
<div id="topr"><a name="x" onclick="removeDiv()"></a></div>
<div id="botr"></div>
</div>

<div id="firefox"></div>

</div>

</body>
</html>

I hope that this helps.

coothead