PDA

View Full Version : Image Moving Along With Scroll


CpW
07-12-03, 02:30 AM
I'm trying to find a script that will keep an image attached to a certin part of the screen. I see it in many ad's where it will always be at the bottom no matter if you scroll up and down or not. Any ideas? Thanks in advance...

Henry
07-21-03, 05:23 AM
ok dude i know what your saying but having a pic there is a little hard but i have a good script here so that you can sorta have a scrolling box.

Put this in a js file called "floatingscroller.js"

//EDIT THE VARIABLES BELOW:

// messages. Add as many messages as you like
var message=new Array()
message[0]="Hello Web freak! Still going strong?"
message[1]="Download 400 free funscripts from our scriptcenter!"
message[2]="Spice up your website with our crazy scripts!"

// links of the messages (you need to set up link for each message)
var messageurl=new Array()
messageurl[0]="http://www.google.com"
messageurl[1]="http://www.yahoo.com"
messageurl[2]="http://www.altavista.com"

// targets of the links (you need to set up a target for each message)
// accepted values are '_blank' or '_top' or '_parent' or '_self'
// or the name of your target-window (for instance 'main')
var messagetarget=new Array()
messagetarget[0]="_blank"
messagetarget[1]="_blank"
messagetarget[2]="_blank"

// color of the messages (you need to set up a color for each message)
var messagecolor= new Array()
messagecolor[0]="black"
messagecolor[1]="black"
messagecolor[2]="black"

// width of scroller (pixels)
var scrollerwidth=200

// height of scroller (pixels)
var scrollerheight=18

// speed 1: lower means faster
var pause=15

// speed 2: higher means faster
var step=2

// font-size of messages
var fntsize=8

// font-family of messages
var fntfamily="Arial"

// font-weight: 1 means bold, 0 means normal
var fntweight=0

// backgroundcolor of scroller
var backgroundcolor="white"

// borderwidth of scroller (pixels)
var borderwidth=1

// width of scrollerpadding (pixels)
var cellpad=2

// DO NOT EDIT ANYTHING BELOW THIS LINE!!!!
var scrollerleft
var scrollertop
var screenwidth
var clipleft,clipright,cliptop,clipbottom
var i_message=0
var timer
var textwidth
var textcontent=""
var bgcontent=""
if (fntweight==1) {fntweight="700"}
else {fntweight="100"}

function init() {
getbgcontent()
gettextcontent()
if (document.all) {
screenwidth=document.body.clientWidth
scrollertop=document.body.clientHeight+document.bo dy.scrollTop-(scrollerheight+2*cellpad)
scrollerleft=screenwidth/2-scrollerwidth/2
text.innerHTML=textcontent
bgscroller.innerHTML=bgcontent
textwidth=text.offsetWidth
document.all.bgscroller.style.posTop=scrollertop-cellpad
document.all.bgscroller.style.posLeft=scrollerleft-cellpad
document.all.text.style.posTop=scrollertop
document.all.text.style.posLeft=scrollerleft+scrol lerwidth
clipleft=0
clipright=0
cliptop=0
clipbottom=scrollerheight
document.all.text.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
scrolltext()
}
if (document.layers) {
screenwidth=window.innerWidth
scrollertop=pageYOffset+window.innerHeight-(scrollerheight+2*cellpad)
scrollerleft=screenwidth/2-scrollerwidth/2
document.text.document.write(textcontent)
document.text.document.close()
document.bgscroller.document.write(bgcontent)
document.bgscroller.document.close()

textwidth=document.text.document.width

document.bgscroller.top=scrollertop-cellpad
document.bgscroller.left=scrollerleft-cellpad
document.text.top=scrollertop
document.text.left=scrollerleft+scrollerwidth

document.text.clip.left=0
document.text.clip.right=0
document.text.clip.top=0
document.text.clip.bottom=scrollerheight

scrolltext()
}
}

function scrolltext() {
if (document.all) {
if (document.all.text.style.posLeft>=scrollerleft-textwidth) {
document.all.text.style.posLeft-=step
clipright+=step
if (clipright>scrollerwidth) {
clipleft+=step
}
document.all.text.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
scrollertop=document.body.clientHeight+document.bo dy.scrollTop-(scrollerheight+2*cellpad)
document.all.bgscroller.style.posTop=scrollertop-cellpad
document.all.text.style.posTop=scrollertop
var timer=setTimeout("scrolltext()",pause)
}
else {
changetext()
}
}
if (document.layers) {
if (document.text.left>=scrollerleft-textwidth) {
document.text.left-=step
document.text.clip.right+=step
if (document.text.clip.right>scrollerwidth) {
document.text.clip.left+=step
}
scrollertop=pageYOffset+window.innerHeight-(scrollerheight+2*cellpad)
document.bgscroller.top=scrollertop-cellpad
document.text.top=scrollertop
var timer=setTimeout("scrolltext()",pause)
}
else {
changetext()
}
}
}

function changetext() {
i_message++
if (i_message>message.length-1) {i_message=0}
gettextcontent()
if (document.all) {
text.innerHTML=textcontent
textwidth=text.offsetWidth

document.all.text.style.posLeft=scrollerleft+scrol lerwidth
clipleft=0
clipright=0
document.all.text.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

scrolltext()
}

if (document.layers) {
document.text.document.write(textcontent)
document.text.document.close()
textwidth=document.text.document.width

document.text.left=scrollerleft+scrollerwidth
document.text.clip.left=0
document.text.clip.right=0

scrolltext()
}
}

function gettextcontent() {
textcontent="<span style='position:relative;font-size:"+fntsize+"pt;font-family:"+fntfamily+";font-weight:"+fntweight+";overflow-x:hidden'>"
textcontent+="<a href="+messageurl[i_message]+" target="+messagetarget[i_message]+">"
textcontent+="<nobr><font color="+messagecolor[i_message]+">"+message[i_message]+"</font></nobr></a></span>"
}

function getbgcontent() {
var bgwidth=scrollerwidth+2*cellpad
var bgheight=scrollerheight+2*cellpad
bgcontent="<table border="+borderwidth+" width="+bgwidth+" height="+bgheight+" cellpadding=0 cellspacing=0>"
bgcontent+="<tr><td bgcolor="+backgroundcolor+"> "
bgcontent+="</td></tr></table>"
}

window.onresize=init;
window.onload=init;

And this in any place you want your box to be NOTE: IT ALLWAYS HAS TO BE AT THE BASE OF ALL HTML CODE!!!!!!!!!!!!


<STYLE>
body{
overflow-x:hidden;
overflow-y:scroll;
}
</STYLE>
<SCRIPT SRC="floatingscroller.js"></script>
<DIV ID="bgscroller" style="position:absolute;"></DIV>
<DIV ID="text" style="position:absolute;"></DIV>:)