PDA

View Full Version : changing images directories



geebee2008
01-21-2009, 07:04 PM
Hi
I'm a little confused with an old youngpup script, hoping it's a quick fix and someone can help me out.
I'm changing an image directory for a site. For some reason the image path breaks in this script, but I'm not sure what I'm missing. Here's the script:



var Scroller = {
speed : 100,
aniLen : 1000,
clipH : 390,
thumbMax : 230,
thumbH : 14,
scrollbarH : 380,
scrollTop : 0,
scrollLeft : 0,
minRes : 10,
ie4 : navigator.appName == "Microsoft Internet Explorer" && !document.getElementById,
ns4 : document.layers ? 1 : 0,
dom : document.getElementById ? 1 : 0,
mac : navigator.platform == "MacPPC",
mo5 : navigator.userAgent.indexOf("Gecko") != -1,

imgElevBack1 : ypImage("elevator1.gif"),
imgElevBack2 : ypImage("elevator2.gif"),
imgElevBack3 : ypImage("elevator3.gif"),

imgThumb1 : ypImage("thumb1.gif"),
imgThumb2 : ypImage("thumb2.gif"),

imgUp1 : ypImage("scrollUp1.gif"),
imgUp2 : ypImage("scrollUp2.gif"),
imgUp3 : ypImage("scrollUp3.gif"),
imgDn1 : ypImage("scrollDn1.gif"),
imgDn2 : ypImage("scrollDn2.gif"),
imgDn3 : ypImage("scrollDn3.gif"),

dir:0,lastTime:0,aniTimer:0,dragActive:0,dragLastY:0,dragStartOffset:0,
startPos:0,startTime:0,accel:0,endPos:0,dist:0
}

Scroller.init = function() {
with (this) {
// gather pieces
this.lyrFrame = getLyr("scroller", document)
this.lyrScrollbar = getLyr("scrollbar", lyrFrame)
this.lyrThumb = getLyr("thumb", lyrScrollbar)
this.lyrMarker = getLyr("marker", lyrScrollbar)
this.lyrElevUp = getLyr("elevUp", lyrScrollbar)
this.lyrElevDn = getLyr("elevDn", lyrScrollbar)
this.lyrScrollUp = getLyr("scrollUp", lyrFrame)
this.lyrScrollDn = getLyr("scrollDn", lyrFrame)
this.lyrThumbArrowUp = getLyr("thumbArrowUp", lyrScrollbar)
this.lyrThumbArrowDn = getLyr("thumbArrowDn", lyrScrollbar)
this.lyrContainer = getLyr("scrollcontainer", lyrFrame)
this.lyrContent = getLyr("scrollcontent", lyrContainer)

// calculate some values
this.docH = Math.max(ns4 ? lyrContent.document.height : lyrContent.offsetHeight, clipH)
this.scrollH = docH - clipH

if (this.docH > clipH) {
// hook events
lyrElevUp.onmousedown = slideTo
lyrElevDn.onmousedown = slideTo
lyrThumb.onmousedown = startDrag
lyrThumb.onmouseover = function() { Scroller.toggleThumb(true) }
lyrThumb.onmouseout = function() { Scroller.toggleThumb(false) }
lyrThumb.ondragstart = function() { return false; }
lyrElevUp.onmouseover = function() { Scroller.toggleElev(Scroller.lyrElevUp, 2) }
lyrElevUp.onmouseout = function() { Scroller.toggleElev(Scroller.lyrElevUp, 1) }
lyrElevDn.onmouseover = function() { Scroller.toggleElev(Scroller.lyrElevDn, 2) }
lyrElevDn.onmouseout = function() { Scroller.toggleElev(Scroller.lyrElevDn, 1) }
lyrScrollDn.onmouseover = function() { Scroller.toggleButton("Dn", 2); Scroller.startScroll('+'); }
lyrScrollDn.onmousedown = function() { Scroller.toggleButton("Dn", 3); Scroller.speed = 350; return false }
lyrScrollDn.onmouseup = function() { Scroller.toggleButton("Dn", 2); Scroller.speed = 100 }
lyrScrollDn.onmouseout = function() { Scroller.toggleButton("Dn", 1); Scroller.endScroll() }
lyrScrollUp.onmouseover = function() { Scroller.toggleButton("Up", 2); Scroller.startScroll('-') }
lyrScrollUp.onmousedown = function() { Scroller.toggleButton("Up", 3); Scroller.speed = 350; return false }
lyrScrollUp.onmouseup = function() { Scroller.toggleButton("Up", 2); Scroller.speed = 100 }
lyrScrollUp.onmouseout = function() { Scroller.toggleButton("Up", 1); Scroller.endScroll() }

// initialize some settings
lyrThumb.s.top = 0


Scroller.startScroll = function(dir) {
if (this.aniTimer) window.clearTimeout(this.aniTimer)

this.dir = dir
this.lastTime = (new Date()).getTime() - this.minRes
this.startPos = this.scrollTop
this.aniTimer = window.setTimeout("Scroller.scroll()", this.minRes)
}

Scroller.scroll = function() {
this.aniTimer = window.setTimeout("Scroller.scroll()", this.minRes)
var now = (new Date()).getTime()
var elapsed = now - this.lastTime
var ny = eval(this.scrollTop + this.dir + (elapsed * this.speed / 1000))
this.lastTime = now
if (ny > this.scrollH && this.dir == "+" || ny < 0 && this.dir == "-") {
this.endScroll()
this.jumpTo(this.dir == "+" ? this.scrollH : 0)
}
else this.jumpTo(ny)
}

Scroller.endScroll = function() {
if (this.aniTimer) this.aniTimer = window.clearTimeout(this.aniTimer)
}

Scroller.startDrag = function(e) {
if (!e) e = window.event
with (Scroller) {
if (aniTimer) window.clearTimeout(aniTimer)
var ey = e.pageY ? e.pageY : e.y
dragLastY = ey
dragStartOffset = ey - parseInt(lyrThumb.s.top)
dragActive = true
if (ns4) window.document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP)
window.document.onmousemove = doDrag
window.document.onmouseup = stopDrag
}
return false
}

Scroller.doDrag = function(e) {
if (!e) e = window.event
var s = Scroller
var ey = (e.pageY ? e.pageY : e.y)
var dy = ey - s.dragLastY
var ny = parseInt(Scroller.lyrThumb.s.top) + dy

// constrain
if (ny >= s.thumbMax) s.dragLastY = s.thumbMax + s.dragStartOffset
else if (ny < 0) s.dragLastY = s.dragStartOffset
else s.dragLastY = ey
ny = Math.min(Math.max(ny, 0), s.thumbMax)

s.jumpTo(ny * s.scrollH / s.thumbMax)
return false;
}

Scroller.positionThumbArrows = function(ny) {
this.lyrThumbArrowUp.s.top = ny - 6
this.lyrThumbArrowDn.s.top = ny + 151
}

Scroller.stopDrag = function() {
Scroller.dragActive = false
Scroller.toggleThumb(false)
if (Scroller.ns4) window.document.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP)
window.document.onmousemove = null
window.document.onmouseup = null
}

// slideTo gets called in the scope of lyrElevUp or lyrElevDn
Scroller.slideTo = function(e) {
if (!e) e = window.event
var ey = e.offsetY ? e.offsetY : e.layerY
if (typeof ey == "undefined") ey = 0
var ny = (this.id == "elevDn") ? ey-14 : ey
ny += this.s.top == "" ? 0 : parseInt(this.s.top)
ny *= Scroller.scrollH / Scroller.thumbMax
ny = Math.min(ny, Scroller.scrollH)

with (Scroller) {
startTime = (new Date()).getTime()
startPos = scrollTop
endPos = ny
dist = endPos - startPos
accel = dist / 1000 / 1000
if (aniTimer) aniTimer = window.clearInterval(aniTimer)
aniTimer = window.setInterval("Scroller.slide()", 10)
}
}

Scroller.slide = function() {
with (this) {
var now = (new Date()).getTime()
var elapsed = now - startTime
if (elapsed > 1000) endScroll()
else {
var t = 1000 - elapsed
var ny = endPos - t * t * accel
jumpTo(ny)
}
}
}

Scroller.jumpTo = function(ny) {
var thumbTop = ny * this.thumbMax / this.scrollH
this.lyrElevUp[document.layers ? "clip" : "style"].height = thumbTop
this.lyrElevDn[document.layers ? "clip" : "style"].height = this.scrollbarH - thumbTop
this.lyrElevDn.s.top = thumbTop
this.lyrThumb.s.top = thumbTop
this.lyrContent.s.top = -ny
this.positionThumbArrows(ny * this.thumbMax / this.scrollH)
this.scrollTop = ny
}

Scroller.toggleThumb = function(bOn) {
var img = this.getFirstImage(this.lyrThumb)
img.src = !bOn && !this.dragActive ? this.imgThumb1.src : this.imgThumb2.src
if (!bOn && !this.dragActive) this.toggleThumbArrows(false)
else {
this.positionThumbArrows(parseInt(this.lyrThumb.s.top))
this.toggleThumbArrows(true)
}
}

Scroller.toggleThumbArrows = function(bOn) {
this.lyrThumbArrowUp.s.visibility = bOn ? "visible" : "hidden"
this.lyrThumbArrowDn.s.visibility = bOn ? "visible" : "hidden"
}

Scroller.toggleElev = function(lyr, iState) {
var img = this["imgElevBack" + iState];
with (this) {
if (document.layers) lyr.document.images[0].src = img.src;
else lyr.firstChild.src = img.src;
lyr.onmousemove = iState == 2 ? moveMarker : null
if (iState == 1) lyrMarker.s.visibility = "hidden"
}
}

Scroller.moveMarker = function(e) {
with (Scroller) {
if (!lyrThumb.active) {
if (!e) e = window.event
var ey = e.layerY ? e.layerY : e.offsetY
if (isNaN(ey)) ey = 0
var ny = Math.round(ey / 2) * 2
ny += (this.s.top == "" ? 0 : parseInt(this.s.top))
ny -= 1
lyrMarker.s.top = ny
lyrMarker.s.visibility = "visible"
}
}
}

Scroller.toggleButton = function(suffix, iState) {
var lyr = eval("Scroller.lyrScroll" + suffix)
var img = this.getFirstImage(lyr)
img.src = "scroll"+suffix+iState+".gif"
}

Scroller.getLyr = function(sLyrId, oNestRef) {
var o
if (document.all) o = oNestRef.all[sLyrId]
else if (document.layers) o = oNestRef.layers[sLyrId]
else o = this.recursiveNs6Get(sLyrId, oNestRef)
o.s = document.layers ? o : o.style
return o
}

// this is kinda slow for ns6 ->
// but best way I could think of w/o totally bloating the code.
Scroller.recursiveNs6Get = function(id, p) {
if (p.childNodes) {
for (var i = 0; i < p.childNodes.length; i++) {
if (p.childNodes[i].id == id) return p.childNodes[i]
else if (p.childNodes[i].childNodes.length > 0) {
var obj = Scroller.recursiveNs6Get(id, p.childNodes[i])
if (obj && obj != null) return obj
}
}
}
return false
}

Scroller.getFirstImage = function(lyr) {
return document.layers ? lyr.document.images[0] : document.all ? lyr.all.tags("IMG")[0] : lyr.getElementsByTagName("IMG")[0]
}

function ypImage(s) {
var oImg = new Image()
oImg.src = s
return oImg
}

function dbg(obj) {
var s = ""
for (prop in obj) s += prop + ":" + obj[prop] + "\n"
alert(s)
}


the obvious change is in this part of the code, adding the appropriate changes to the image path.



imgDn3 : ypImage("scrollDn3.gif"),


but it's not enough. can anyone tell me what i'm missing?

thanks much

geebee2008
01-22-2009, 01:12 AM
no ideas huh?

jscheuer1
01-22-2009, 04:49 AM
the obvious change is in this part of the code, adding the appropriate changes to the image path.


imgDn3 : ypImage("scrollDn3.gif"),

Not obvious here, as we never saw it the way it was before. I can tell you that there is no path there, only a property:

imgDn3

and its value:

ypImage("scrollDn3.gif")

The value itself is the return value of the ypImage() function when it is fed the scrollDn3.gif filename.

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.