Expandable/Collapsable Ad WITHOUT Flash?

**wdfadude** · Jul 9, 2004 06:44

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!

**Nick** · Jul 9, 2004 07:36

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>

**wdfadude** · Jul 9, 2004 10:14

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

**Vincent Puglia** · Jul 9, 2004 11:17

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

**adios** · Jul 9, 2004 11:39

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>

**Vincent Puglia** · Jul 9, 2004 11:55

you do realize what you've posted, right adios?
A blank check for circumventing popup blockers
-- naughty, naughty

Vinny

**Nick** · Jul 9, 2004 12:00

Ah I see now, well if they above posts don't cover what you need, I will try more

**wdfadude** · Jul 12, 2004 10:11

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.

**Vincent Puglia** · Jul 12, 2004 10:29

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

**funk999** · Oct 5, 2004 12:39

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

**biju708** · Sep 9, 2005 06:31

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?

**kkaus** · May 17, 2006 19:14

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

**dschlaegel** · Jun 28, 2006 15:20

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

**dschlaegel** · Jun 28, 2006 17:36

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;x <= 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.

**dschlaegel** · Jun 29, 2006 12:01

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



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; I would have this if we choose to make it float on top of the content.*/ 

    top: 5px;

    background: #bca8bc;

}

.content {

    font: normal 12px verdana;

    padding: 0 6px;

    text-align: justify;

}



</style>



<script type="text/javascript">



var c;

var t;

var original_size;



function init(){

  setTimeout("adStart()",5000);

  c = 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>

User Tag List

Thread: Expandable/Collapsable Ad WITHOUT Flash?

Thread Tools

Display

Expandable/Collapsable Ad WITHOUT Flash?

Start hidden

Sliding Effect

Almost

Bookmarks

Bookmarks

Posting Permissions