static logo / site logo script: can i make it not move when page is scrolled

[chrislhawkes]

1) Script Title: staic logo/ site logo script: staiclogo.js

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/logo.htm

3) Describe problem: is there a way i can make this logo not move when the page is scrolled. i want to have a 40 x 40 logo stay static in a certain area of my page and i cant do it with basic <img src> tags due to the location i want it

[chrislhawkes]

hey gang, in case this helps:

here is js file i am using

///////////////////////////////////////////////////////////////////
/*Site Logo Script (Geocities Watermark)
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com/ */
///////////////////////////////////////////////////////////////////

//edit the below 5 steps

// 1) substitute 116 and 42 with the width and height of your logo image, respectively
var logowidth=50
var logoheight=50
var logoimage=new Image(logowidth,logoheight)

// 2) change the image path to reflect the path of your logo image
logoimage.src="http://dls.diamondlot.com/UserFiles/dog2.gif"

// 3) Change url below to the target URL of the logo
var logolink="http://dynamicdrive.com"

// 4) change the alttext variable to reflect the text used for the "alt" attribute of the image tag
var alttext="Dynamic Drive"

// 5) Finally, below variable determines the duration the logo should be visible after loading, in seconds. If you'd like the logo to appear for 20 seconds, for example, enter 20. Entering a value of 0 causes the logo to be perpectually visible. 
var visibleduration=12

// Optional parameters
var Hoffset=0 //Enter logo's offset from left edge of window (edit only if you don't like the default offset)
var Voffset=0 //Enter logo's offset from top edge of window (edit only if you don't like the default offset)


///////////////////////////Do not edit below this line/////////////////////////

var ie=document.all&&navigator.userAgent.indexOf("Opera")==-1

var watermark_obj=ie? document.all.watermarklogo : document.getElementById? document.getElementById("watermarklogo") : document.watermarklogo

function insertimage(){
if (ie||document.getElementById)
watermark_obj.innerHTML='<a href="'+logolink+'"><img src="'+logoimage.src+'" width="'+logowidth+'" height="'+logoheight+'" border=0 alt="'+alttext+'"></a>'
else if (document.layers){
watermark_obj.document.write('<a href="'+logolink+'"><img src="'+logoimage.src+'" width="'+logowidth+'" height="'+logoheight+'" border=0 alt="'+alttext+'"></a>')
watermark_obj.document.close()
}
}

function positionit(){
var dsocleft=ie? document.body.scrollLeft : pageXOffset
var dsoctop=ie? document.body.scrollTop : pageYOffset

if (ie||document.getElementById){
watermark_obj.style.left=parseInt(dsocleft)+20+Hoffset
watermark_obj.style.top=parseInt(dsoctop)+65+Voffset
}
else if (document.layers){
watermark_obj.left=dsocleft+5+Hoffset
watermark_obj.top=dsoctop+5+Voffset
}
}

function hidewatermark(){
if (document.layers)
watermark_obj.visibility="hide"
else
watermark_obj.style.visibility="hidden"
clearInterval(watermarkinterval)
}

function beingwatermark(){
watermarkinterval=setInterval("positionit()",50)
insertimage()
if (visibleduration!=0)
setTimeout("hidewatermark()",visibleduration*1000000000)
}

if (ie||document.getElementById||document.layers)
window.onload=beingwatermark

i am in a bind and need to have a form of javascript place an image in a certain spot as the html edit area i have access to is for the header, i want this logo to appear in the content section below the header column


if there any other easier ways to do this, i would greatly appreciate it.

i cant use basic <img src> locations as the area i want the logo to appear is out side of our html div's

[field]

Can you make this logo bottom center of page.

[jscheuer1]

i cant do it with basic <img src> tags due to the location i want it

Of course you can, just make it absolutely positioned, example:

<img src="logo.gif" style="position: absolute; left: 600px; top: 500px;" alt="logo">

Place it outside of everything else on the page. Like make it the last thing before the closing </body> tag.

[field]

We have modified this script to accept some html but how do you get the script to always center on page?

varLogoHTML = '<table width="940" border="0" cellpadding="0" cellspacing="0" >';
varLogoHTML = varLogoHTML + '<tr>';
varLogoHTML = varLogoHTML + '<td align="right" valign="bottom"><div align="center"><font face="Arial" size="3" color="#0000FF">call Phone</font></div></td>';
varLogoHTML = varLogoHTML + '<td align="right" valign="bottom"><div align="center">or <a href="">Email Us</a></div></td>';
varLogoHTML = varLogoHTML + '<td align="right></a></td>';
varLogoHTML = varLogoHTML + '</tr>';
varLogoHTML = varLogoHTML + '</table>';

var ddsitelogo={
	setting: {orientation:4, visibleduration:0, fadeduration:[1000, 500]}, //orientation=1|2|3|4, duration=millisec or 0, fadedurations=millisecs
	offsets: {x:1, y:1},//offset of logo relative to window corner
	logoHTML: varLogoHTML, //HTML for logo, which is auto wrapped in DIV w/ ID="mysitelogo"

	coord: {},

	keepfixed:function(){
		if (!this.cssfixedsupport){
			var $window=jQuery(window)
			var is1or3=/^[13]$/.test(this.setting.orientation)
			var is1or2=/^[12]$/.test(this.setting.orientation)
			var x=$window.scrollLeft() + (is1or3? this.offsets.x : $window.width()-this.$control.width()-this.offsets.x)
			var y=$window.scrollTop() + (is1or2? this.offsets.y : $window.height()-this.$control.height()-this.offsets.y)
			this.$control.css({left:x+'px', top:y+'px'})
		}
	},

	showlogo:function(){
		var mainobj=ddsitelogo
		this.$control.animate({opacity:1}, this.setting.fadeduration[0])
		if (this.setting.visibleduration>0){
			setTimeout(function(){
				mainobj.$control.stop().animate({opacity:0}, mainobj.setting.fadeduration[1], function(){
					jQuery(window).unbind('scroll.fixed resize.fixed')
				})
			}, this.setting.visibleduration+this.setting.fadeduration[0])
		}
	},
	
	init:function(){
		jQuery(document).ready(function($){
			var mainobj=ddsitelogo
			var iebrws=document.all
			mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
			if (mainobj.cssfixedsupport){
				mainobj.coord[(/^[13]$/.test(mainobj.setting.orientation))? 'left' : 'right']=mainobj.offsets.x
				mainobj.coord[(/^[12]$/.test(mainobj.setting.orientation))? 'top' : 'bottom']=mainobj.offsets.y
			}
			mainobj.$control=$('<div id="mysitelogo">'+mainobj.logoHTML+'</div>')
				.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', opacity:0})
				.css(mainobj.coord)
				.appendTo('body')
			if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
				mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
			mainobj.keepfixed()
			mainobj.showlogo()
			$(window).bind('scroll.fixed resize.fixed', function(){mainobj.keepfixed()})
		})
	}
}

ddsitelogo.init()