Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Posts
    245
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Scrolling banner

    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.

    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

  • #2
    Regular Coder Crake's Avatar
    Join Date
    Dec 2004
    Location
    Loose, Maidstone, KENT
    Posts
    577
    Thanks
    0
    Thanked 3 Times in 3 Posts
    i am using opera and i cant see anything superb about it it just looks like any outher banner
    SteveO

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Posts
    245
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this one scrolls down to the center of the page, and its not a popup so the blockers don't catch it

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there grudz,

    here is a very simple working example, for you to try...
    Code:
    
    <!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

  • #5
    Regular Coder
    Join Date
    Jan 2004
    Posts
    245
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

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

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    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...
    Code:
    
    <!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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •