SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast wdfadude's Avatar
    Join Date
    Jun 2004
    Location
    U.S.A.
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Expandable/Collapsable Ad WITHOUT Flash?

    Any there any way to make the familiar expanding/collapsing banner ads found on sites like CNET, ZDNet, etc. in JavaScript without having to use Flash? The only thing on the web I've found is this: http://www.devarticles.com/c/a/HTML/...-Drop-Down-Ads, but I don't have access to PHP or MySQL and I don't have time to decipher the PHP into straight-ahead HTML/JavaScript. Could anybody help? Thanks!

  2. #2
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, there is. Do you want the ad to be fully hidden then fully shown when toggled, or something else? I notice CNet has like a preview of the ad shown.

    The basic process is changing the display value of the element that holds the ad, or the height, depending on what method you choose. For instance, say you have a <div> called "adbox", and you wanted it to be shown first, but then collapsed when the user clicks the collapse link.

    This example will fully show / fully hide the ad.
    Code:
    <html>
    <head>
    <title>A Test</title>
    <script language="javascript">
    function setAd() {
     var ad = document.getElementById('adbox');
     var adDisplay = ad.style.display;
      if(adDisplay != "none") {
       ad.style.display = 'none';
      } else {
       ad.style.display= '';
      }
    }
    </script>
    </head>
    
    <body>
    
    <a href="#" onClick="setAd(); return false;">hide/show ad</a>
    <div id="adbox" style="display: ; width: 500px; background-color: #999999;">
    add stuff here
    </div>
    
    </body>
    </html>
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  3. #3
    SitePoint Enthusiast wdfadude's Avatar
    Join Date
    Jun 2004
    Location
    U.S.A.
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Possibility, thanks for your reply. Looks nice, but:

    1. Is there any way to change graphically the "show/hide" link, where when someone clicks on "show" the ad expands but the image link changes to "hide", and vice versa?

    2. Is there a way to create a separate layer to cover any other page content when the ad is expanded, but reveals the content when collapsed?

    3. Can the expanded ad go UP instead of down? For example, the ad might be on the middle of the page and is expanded upwards to cover up the content above it?

    Maybe I should have specified these points in my first post.

    No answer your question, I would like the ad to be fully shown when the page loads and collapsed when someone clicks on the link, and possibly have the expanded ad collapse on its own after a certain amount of time, such as 5 seconds. (I know, these kinds of ads are irritating, but that's what the client wants...)

  4. #4
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    the display property expands/collapses the document's content -- it is not made for overlaying. If you want that, you need to use the visibility property. The problems with that are twofold:
    1) the div acts like a placeholder within the document
    2) it cannot 'hide' certain underlying content (specifically Flash, selection lists, and other elements that are created outside of the browser)

    the fixes are:
    1) initially set the div's top and/or left somewhere offscreen and then move it in when displayed
    2) place the offending elements in a different div and make its display toggle as needed:

    PHP Code:
    <html>
    <
    head>
    <
    title>A Test</title>
    <
    script language="javascript">
    function 
    setAd()
    {
    var 
    ad document.getElementById('adbox');
    var 
    adStyle ad.style;
    adStyle.visibility = (adStyle.visibility == 'hidden') ? 'visible' 'hidden';
    var 
    formStyle document.getElementById('theForm').style;
    formStyle.display = (adStyle.visibility == 'hidden') ? 'block' 'none'
    adStyle.top 100;
    }
    </script>
    </head>
    <body>
    <div id="adbox" style="position:absolute;visibility:hidden; 
    width: 500px; height:400;background-color: #999999;
    top:-100px">
    add stuff here
    This is content.<br>
    This is content.<br>
    This is content.<br>
    This is content.<br>
    </div>
    <a href="#" onclick=setAd()>toggle ad</a><br>
    This is content.<br>
    This is content.<br>
    This is content.<br>
    This is content.<br>
    <div id='theForm' style="display:block">
    <form >
    <select>
    <option>safdsf</option>
    <option>safdsf</option>
    <option>safdsf</option>
    </select>
    </form>
    </div>
    This is content.<br>
    This is content.<br>
    this is content.<br>
    </body>
    </html> 
    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tossed this together quickly...what the hey'
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    body, html {
    	margin: 0;
    	background: #fef;
    }
    table {
    	margin: 0 auto;
    	background: #bca8bc;
    	border: 1px #000 solid;
    }
    td {
    	text-align: center;
    	padding: 0;
    }
    #splashLayer {
    	position: absolute;
    	top: 5px;
    	background: #bca8bc;
    	border: 1px #000 solid;
    }
    .content {
    	font: normal 12px verdana;
    	padding: 0 6px;
    	text-align: justify;
    }
    
    </style>
    <script type="text/javascript">
    
    var collTimer = null;
    var expIMG = new Image();
    expIMG.src = 'http://i.i.com.com/cnwk.1d/Ads/common/ilu/esc_cl_cnet.gif';
    var colIMG = new Image();
    colIMG.src = 'http://adimg.com.com/Ads/common/ilu/esc_op_cnet.gif';
    
    function toggleAd(ad_id)
    {
    	clearTimeout(collTimer);
    	var el;
    	if (el = document.getElementById(ad_id))
    		el.style.display = (el.style.display == 'none') ? 'block' : 'none';
    	if (el = document.getElementById('label'))
    		el.src = (el.src == expIMG.src) ? colIMG.src : expIMG.src;
    }
    
    onload = function()
    {
    	collTimer = setTimeout('toggleAd("splashLayer")', 5000);
    }
    
    </script>
    </head>
    <body>
    <table width="740" cellpadding="0" cellspacing="4" border="0">
    <tr>
    <td width="33%" align="center"><img src="http://www.zdnet.com/b.gif" width="60" height="1"></td>
    <td width="33%" align="center"><img src="http://i.i.com.com/cnwk.1d/Ads/common/advertisement.gif" border="0" width="120" height="10"></td><td width="33%" align="right"><A HREF="javascript&#58;void toggleAd('splashLayer');" onclick="blur()" target="_self"><img id="label" src="http://adimg.com.com/Ads/common/ilu/esc_op_cnet.gif" width="60" height="15" border="0" alt="expand/collapse"></a></td>
    </tr><tr>
    <td colspan="3" align="center">
    <iframe id="lb" src="http://adimg.cnet.com/mac-ad?adfile=3316/14/ilu/20040524/1/leader_0615.html&SEGMENTID=561480&HOST=http://adimg.cnet.com&AKAMAIHOST=http://i.i.com.com/cnwk.1d&CHECKPOINTHOST=http://chkpt.zdnet.com&TRACK:CLICKURL=http%3A%2F%2Fadlog.com.com%2Fadlog%2Fc%2Fr%3D6489%26s%3D561480%26t%3D2004.07.09.17.19.53%26o%3D1:%26h%3Dcn%26p%3D2%26b%3D1%26l%3Den_US%26%26site%3D1%2F" width="100%" height="90" noresize scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe></td>
    </tr><tr>
    <td colspan="3" style="position:relative;text-align:left;">
    <div id="splashLayer">
    <iframe id="splashFrame" src="http://adimg.cnet.com/mac-ad?adfile=3316/14/ilu/20040524/1/splash.html&HOST=http://adimg.cnet.com&AKAMAIHOST=http://i.i.com.com/cnwk.1d" width="100%" height="210" noresize scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe>
    </div>
    </td>
    </tr>
    </table>
    <script type="text/javascript">
    for (x = 5; x != 0; --x)
    	document.write(
    
    			'<p class="content">' ,
    			'Lorem ipsum dolor sit amet, consectetur adipisicing elit, ' ,
    			'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' ,
    			'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ' ,
    			'nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ' ,
    			'reprehenderit in voluptate velit esse cillum dolore eu fugiat ' ,
    			'nulla pariatur. Excepteur sint occaecat cupidatat non proident, ' ,
    			'sunt in culpa qui officia deserunt mollit anim id est laborum.' ,
    			'</p>'
    
    			);
    
    </script>
    </body>
    </html>
    
    Last edited by adios; Jul 9, 2004 at 12:11.
    ::: certified wild guess :::

  6. #6
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you do realize what you've posted, right adios?
    A blank check for circumventing popup blockers
    -- naughty, naughty

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  7. #7
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I see now, well if they above posts don't cover what you need, I will try more
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  8. #8
    SitePoint Enthusiast wdfadude's Avatar
    Join Date
    Jun 2004
    Location
    U.S.A.
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vincent's solution worked best for what I was needing. Works great on a PC. But I am getting all sorts of positioning problems with a Mac: in IE the ad is too high and in Safari it over the middle of the page content.

  9. #9
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi wdfadude,

    Positioning for all browsers is not one of the things I like to do -- too tedious. You can try testing for the environment and/or using a known element's place holder (td, form element. etc.) as an anchor for the top and/or left position.

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  10. #10
    SitePoint Member
    Join Date
    Oct 2004
    Location
    erger
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi

    ive seen the way yahoo did it

    basically a flash image plays.. its about 300*300

    once the flash has completed playing it dissapears doing a fade out and fades in a gif/jpeg size 300*100

    the benefit of this is that the flash image is big... and once finished it closes away to a smaller image giving you more room to view other materials on the website, try going to yahoo

  11. #11
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Start hidden

    Hi Guys I tried this script and it works great, can you kindly help me to have the ad start up as hidden and not showing?

  12. #12
    SitePoint Member
    Join Date
    May 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry if this is really obvious but I am using the code adios posted to create and expandable/collapsable ad however I want my expandable image to expand to the right, not below ....

    how do i do this?

    thanks
    Katie

  13. #13
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Sliding Effect

    Very nice post. I have been looking for this information for a while now.

    Does anyone know how to give it the same effect as www.pgatour.com

    It starts full screen, then slides up smothly. When it is re-expanded, it then slides back down.

    Thanks in advance,
    Dave Schlaegel

  14. #14
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Almost

    So was thinking something like.
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <
    html>
    <
    head>
    <
    title>SL Ad Frame</title>
    <
    script type="text/javascript">

    function 
    init(){
      
    setTimeout("adStart()",5000);
    }

    function 
    adStart(){
      
    amount 1;
      
    height document.getElementById('splashFrame').height;
      
    new_height height;
      
    alert(height);
      for(
    x=1;<= height;x++){
        
    new_height=new_height-amount;
        
    document.getElementById('splashFrame').height new_height;
        
    /*alert(amount);*/
      
    }
    }

    </script>
    </head>
    <body onload="init()">
    <iframe id="splashFrame" src="http://adimg.cnet.com/mac-ad?adfile=3316/14/ilu/20040524/1/splash.html&HOST=http://adimg.cnet.com&AKAMAIHOST=http://i.i.com.com/cnwk.1d" width="100%" height="210" noresize scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe>
    </body>
    </html> 
    But now how can I have the delay after each loop, so that I can see it move?

    P.S. PHP developer new to JS.
    Last edited by dschlaegel; Jun 28, 2006 at 18:23.

  15. #15
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Must not be a very active forum. But for anyone who wants it. Here is the code for the functionality simular to pgatour.com (to make it slide out of sight instead of just abruptly dissapear).

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <
    html>
    <
    head>
    <
    title>SL Ad Frame</title>
    <
    style type="text/css">

    bodyhtml {
        
    margin0;
        
    background#fef;
    }
    table {
        
    margin0 auto;
        
    background#bca8bc;
        
    border1px #000 solid;
    }
    td {
        
    text-aligncenter;
        
    padding0;
    }
    #splashLayer {
        /*position: absolute; I would have this if we choose to make it float on top of the content.*/ 
        
    top5px;
        
    background#bca8bc;
    }
    .
    content {
        
    fontnormal 12px verdana;
        
    padding0 6px;
        
    text-alignjustify;
    }

    </
    style>

    <
    script type="text/javascript">

    var 
    c;
    var 
    t;
    var 
    original_size;

    function 
    init(){
      
    setTimeout("adStart()",5000);
      
    document.getElementById('splashFrame').height;
      
    original_size document.getElementById('splashFrame').height;
      
    /*alert(c);*/
    }

    var 
    collTimer null;
    var 
    expIMG = new Image();
    expIMG.src 'http://i.i.com.com/cnwk.1d/Ads/common/ilu/esc_cl_cnet.gif';
    var 
    colIMG = new Image();
    colIMG.src 'http://adimg.com.com/Ads/common/ilu/esc_op_cnet.gif';

    function 
    toggleAd(ad_id)
    {
        
    clearTimeout(collTimer);
        var 
    el;
        if (
    el document.getElementById(ad_id))
            
    el.style.display = (el.style.display == 'none') ? 'block' 'none';
        if (
    el document.getElementById('label'))
            
    el.src = (el.src == expIMG.src) ? colIMG.src expIMG.src;
    }

    function 
    adStart(){
      if(
    c<=0){
        
    toggleAd('splashFrame');
        
    document.getElementById('splashFrame').height original_size;
        
    stopCount();
      } else {
        
    c=c-1;
        
    document.getElementById('splashFrame').height c;
        
    t=setTimeout("adStart()",1);
      }
    }

    function 
    stopCount(){
      
    clearTimeout(t);
      
    /*alert('done at ' + c);*/
    }

    </script>
    </head>
    <body onload="init()">
    <table width="740" cellpadding="0" cellspacing="4" border="0">
    <tr>
    <td width="33%" align="center"><img src="http://www.zdnet.com/b.gif" width="60" height="1"></td>
    <td width="33%" align="center"><img src="http://i.i.com.com/cnwk.1d/Ads/common/advertisement.gif" border="0" width="120" height="10"></td><td width="33%" align="right"><A HREF="javascript:toggleAd('splashFrame')" onclick="blur()" target="_self"><img id="label" src="http://adimg.com.com/Ads/common/ilu/esc_op_cnet.gif" width="60" height="15" border="0" alt="expand/collapse"></a></td>
    </tr><tr>
    <td colspan="3" align="center">
    <iframe id="lb" src="http://adimg.cnet.com/mac-ad?adfile=3316/14/ilu/20040524/1/leader_0615.html&SEGMENTID=561480&HOST=http://adimg.cnet.com&AKAMAIHOST=http://i.i.com.com/cnwk.1d&CHECKPOINTHOST=http://chkpt.zdnet.com&TRACK:CLICKURL=http%3A%2F%2Fadlog.com.com%2Fadlog%2Fc%2Fr%3D6489%26s%3D561480%  26t%3D2004.07.09.17.19.53%26o%3D1:%26h%3Dcn%26p%3D2%26b%3D1%26l%3Den_US%26%26s  ite%3D1%2F" width="100%" height="90" noresize scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe></td>
    </tr><tr>
    <td colspan="3" style="position:relative;text-align:left;">
    <div id="splashLayer">
    <iframe id="splashFrame" src="http://adimg.cnet.com/mac-ad?adfile=3316/14/ilu/20040524/1/splash.html&HOST=http://adimg.cnet.com&AKAMAIHOST=http://i.i.com.com/cnwk.1d" width="100%" height="210" noresize scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe>
    </div>
    </td>
    </tr>
    </table>
    <script type="text/javascript">
    for (x = 5; x != 0; --x)
        document.write(
          '<p class="content">' ,
          'Lorem ipsum dolor sit amet, consectetur adipisicing elit, ' ,
          'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' ,
          'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ' ,
          'nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ' ,
          'reprehenderit in voluptate velit esse cillum dolore eu fugiat ' ,
          'nulla pariatur. Excepteur sint occaecat cupidatat non proident, ' ,
          'sunt in culpa qui officia deserunt mollit anim id est laborum.' ,
          '</p>'
          );
    </script>
    </body>
    </html> 


Bookmarks

Posting Permissions

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