Floating Corner Banner

**chem3** · 08-06-2008, 01:33 PM

Hi,

I am looking for a FREE javascript that will show a floating banner at the bottom-right corner of a webpage each time that page is loaded.

Here's a close exampe of what I want to do.

I want it to display one static (not rotating as in the example above) banner and I want it to have a "close this ad" link so that it can be closed by clicking that link.

Any help?

**Medyman** · 08-06-2008, 01:40 PM

If you're not too worried about IE6, you can use position:fixed. You can even fake it in IE6.

Otherwise, take a look at some of DD's menu scripts. They're similar in function, you'll just have to switch out the HTML to use a banner instead of the menu.

**chem3** · 08-07-2008, 07:55 AM

Thanks for your reply!
I managed to find one javascript that does what I want, but there's another problem:

If the HTML document has a doctype specified, the script doesn't work! I have this at the top of the HTML page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

But when I remove it the script works fine! I tried other doctype's but the script doesn't work if this tag is present on the top of the HTML document.

What has JS to do with DOCTYPE?

**chem3** · 08-07-2008, 08:21 AM

It works when I use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

**Medyman** · 08-07-2008, 12:50 PM

Do you have a link to the script in question?

**chem3** · 08-08-2008, 05:03 AM

Originally Posted by Medyman

Do you have a link to the script in question?

See this link: http://www.dynamicdrive.com/dynamici...staticmenu.htm

The following is a test HTML code.
If you remove the doctype tag it'll work fine (I use IE7).
But the problem is that if I remove it or any part of it the style of my page will be messed up.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>test</title></head>
<body>
<h1>Test</h1>
<div style="height:2000px"></div>

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" bgcolor="#FFFFCC">
      <p align="center"><b><font size="4">Menu</font></b></td>
  </tr>
  <tr>
    <td width="100%" bgcolor="#FFFFFF">
      <p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
       <a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
       <a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
       <a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
       <a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
  </tr>
</table>
<!--END OF EDIT-->

</layer>


<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
	var startX = 3,
	startY = 150;
	var ns = (navigator.appName.indexOf("Netscape") != -1);
	var d = document;
	function ml(id)
	{
		var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x;this.style.top=y;};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else{
		el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function()
	{
		if (verticalpos=="fromtop"){
		var pY = ns ? pageYOffset : document.body.scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else{
		var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
</body>
</html>

Thread: Floating Corner Banner

Thread Tools

Search Thread

Floating Corner Banner

The Following User Says Thank You to Medyman For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions