Current location: Hot Scripts Forums » General Web Coding » JavaScript » Image Moving Along With Scroll


Image Moving Along With Scroll

Reply
  #1 (permalink)  
Old 07-12-03, 01:30 AM
CpW CpW is offline
New Member
 
Join Date: Jul 2003
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Image Moving Along With Scroll

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...
Reply With Quote
  #2 (permalink)  
Old 07-21-03, 04:23 AM
Henry's Avatar
Henry Henry is offline
Wannabe Coder
 
Join Date: Jul 2003
Location: Brisbane, Australia
Posts: 218
Thanks: 0
Thanked 0 Times in 0 Posts
Wink

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>
__________________
henerz
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
dynamic image src = Newbie question clintre PHP 1 10-07-03 09:56 AM
camera phone image poster apt2 Script Requests 2 08-29-03 07:20 PM
Rotate an image (CW, CCW) in php? borgo PHP 4 08-16-03 03:47 AM
A different kind of image counter Stix Script Requests 1 08-11-03 11:50 PM
Skript to convert email to image spade PHP 1 06-11-03 09:28 AM


All times are GMT -5. The time now is 02:15 AM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.