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

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

hey gang, in case this helps:

here is js file i am using

Code:

---

///////////////////////////////////////////////////////////////////
/*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

Can you make this logo bottom center of page.

Quote:

---

Originally Posted by chrislhawkes

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:

Code:

---

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

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

Code:

---

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

---