Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Can you get this script to run?

Status
Not open for further replies.
Guest_imported

Guest_imported

New member
Jan 1, 1970
0
Here is the full script for a scroller. I am trying to make multiple scroll containers on the same page but cant get it to work. When i add more lines such as: var test = new ypSimpleScroll("myScroll", 20, 50, 150, 250, 40, 200) and number them with "myScroll1, "myScroll2 etc it stops the rest from working. Can anyone show me how to do it? PLEASE!!! Need urgent help

<html>
<head>

<script language=&quot;javascript&quot;>
ypSimpleScroll.prototype.scrollNorth = function() { this.startScroll(90) }
ypSimpleScroll.prototype.scrollSouth = function() { this.startScroll(270) }
ypSimpleScroll.prototype.scrollWest = function() { this.startScroll(180) }
ypSimpleScroll.prototype.scrollEast = function() { this.startScroll(0) }
ypSimpleScroll.prototype.startScroll = function(deg, speed) {
if (this.loaded)
{
if (this.aniTimer) window.clearTimeout(this.aniTimer)
this.overrideScrollAngle(deg)
this.speed = speed ? speed : this.origSpeed
this.lastTime = (new Date()).getTime() - this.y.minRes
this.aniTimer = window.setTimeout(this.gRef + &quot;.scroll()&quot;, this.y.minRes)
}
}
ypSimpleScroll.prototype.endScroll = function() {
if (this.loaded)
{
window.clearTimeout(this.aniTimer)
this.aniTimer = 0;
this.speed = this.origSpeed
}
}
ypSimpleScroll.prototype.overrideScrollAngle = function(deg) {
if (this.loaded)
{
deg = deg % 360
if (deg % 90 == 0) {
var cos = deg == 0 ? 1 : deg == 180 ? -1 : 0
var sin = deg == 90 ? -1 : deg == 270 ? 1 : 0
} else {
var angle = deg * Math.PI / 180
var cos = Math.cos(angle)
var sin = Math.sin(angle)
sin = -sin
}
this.fx = cos / (Math.abs(cos) + Math.abs(sin))
this.fy = sin / (Math.abs(cos) + Math.abs(sin))
this.stopH = deg == 90 || deg == 270 ? this.scrollLeft : deg < 90 || deg > 270 ? this.scrollW : 0
this.stopV = deg == 0 || deg == 180 ? this.scrollTop : deg < 180 ? 0 : this.scrollH
}
}
ypSimpleScroll.prototype.overrideScrollSpeed = function(speed) {
if (this.loaded) this.speed = speed
}
ypSimpleScroll.prototype.scrollTo = function(stopH, stopV, aniLen) {
if (this.loaded)
{
if (stopH != this.scrollLeft || stopV != this.scrollTop) {
if (this.aniTimer) window.clearTimeout(this.aniTimer)
this.lastTime = (new Date()).getTime()
var dx = Math.abs(stopH - this.scrollLeft)
var dy = Math.abs(stopV - this.scrollTop)
var d = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2))
this.fx = (stopH - this.scrollLeft) / (dx + dy)
this.fy = (stopV - this.scrollTop) / (dx + dy)
this.stopH = stopH
this.stopV = stopV
this.speed = d / aniLen * 1000
window.setTimeout(this.gRef + &quot;.scroll()&quot;, this.y.minRes)
}
}
}
ypSimpleScroll.prototype.jumpTo = function(nx, ny) {
if (this.loaded)
{
nx = Math.min(Math.max(nx, 0), this.scrollW)
ny = Math.min(Math.max(ny, 0), this.scrollH)
this.scrollLeft = nx
this.scrollTop = ny
if (this.y.ns4)this.content.moveTo(-nx, -ny)
else {
this.content.style.left = -nx + &quot;px&quot;
this.content.style.top = -ny + &quot;px&quot;
}
}
}
ypSimpleScroll.minRes = 10
ypSimpleScroll.ie = document.all ? 1 : 0
ypSimpleScroll.ns4 = document.layers ? 1 : 0
ypSimpleScroll.dom = document.getElementById ? 1 : 0
ypSimpleScroll.mac = navigator.platform == &quot;MacPPC&quot;
ypSimpleScroll.mo5 = document.getElementById && !document.all ? 1 : 0
ypSimpleScroll.prototype.scroll = function() {
this.aniTimer = window.setTimeout(this.gRef + &quot;.scroll()&quot;, this.y.minRes)
var nt = (new Date()).getTime()
var d = Math.round((nt - this.lastTime) / 1000 * this.speed)
if (d > 0)
{
var nx = d * this.fx + this.scrollLeft
var ny = d * this.fy + this.scrollTop
var xOut = (nx >= this.scrollLeft && nx >= this.stopH) || (nx <= this.scrollLeft && nx <= this.stopH)
var yOut = (ny >= this.scrollTop && ny >= this.stopV) || (ny <= this.scrollTop && ny <= this.stopV)
if (nt - this.lastTime != 0 &&
((this.fx == 0 && this.fy == 0) ||
(this.fy == 0 && xOut) ||
(this.fx == 0 && yOut) ||
(this.fx != 0 && this.fy != 0 && xOut && yOut)))
{
this.jumpTo(this.stopH, this.stopV)
this.endScroll()
}
else {
this.jumpTo(nx, ny)
this.lastTime = nt
}
}
}
function ypSimpleScroll(id, left, top, width, height, speed, contentWidth, initLeft, initTop)
{
var y = this.y = ypSimpleScroll
if (!initLeft) initLeft = 0
if (!initTop) initTop = 0
if (!contentWidth) contentWidth = width
if (document.layers && !y.ns4) history.go(0)
if (y.ie || y.ns4 || y.dom) {
this.loaded = false
this.id = id
this.origSpeed = speed
this.aniTimer = false
this.op = &quot;&quot;
this.lastTime = 0
this.clipH = height
this.clipW = width
this.scrollTop = initTop
this.scrollLeft = initLeft
this.gRef = &quot;ypSimpleScroll_&quot;+id
eval(this.gRef+&quot;=this&quot;)
var d = document
d.write('<style type=&quot;text/css&quot;>')
d.write('#' + this.id + 'Container { left:' + left + 'px; top:' + top + 'px; width:' + width + 'px; height:' + height + 'px; clip:rect(0 ' + width + ' ' + height + ' 0); overflow:hidden; }')
d.write('#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; }')
d.write('#' + this.id + 'Content { left:' + (-initLeft) + 'px; top:' + (-initTop) + 'px; width:' + contentWidth + 'px; }')
d.write('</style>')
}
}
ypSimpleScroll.prototype.load = function() {
var d, lyrId1, lyrId2
d = document
lyrId1 = this.id + &quot;Container&quot;
lyrId2 = this.id + &quot;Content&quot;
this.container = this.y.dom ? d.getElementById(lyrId1) : this.y.ie ? d.all[lyrId1] : d.layers[lyrId1]
this.content = obj2 = this.y.ns4 ? this.container.layers[lyrId2] : this.y.ie ? d.all[lyrId2] : d.getElementById(lyrId2)
this.docH = Math.max(this.y.ns4 ? this.content.document.height : this.content.offsetHeight, this.clipH)
this.docW = Math.max(this.y.ns4 ? this.content.document.width : this.content.offsetWidth, this.clipW)
this.scrollH = this.docH - this.clipH
this.scrollW = this.docW - this.clipW
this.loaded = true
this.scrollLeft = Math.max(Math.min(this.scrollLeft, this.scrollW),0)
this.scrollTop = Math.max(Math.min(this.scrollTop, this.scrollH),0)
this.jumpTo(this.scrollLeft, this.scrollTop)
}
</script>

<script language=&quot;javascript&quot;>
var test = new ypSimpleScroll(&quot;myScroll&quot;, 20, 50, 150, 250, 40, 200)
</script>


</head>

<body onload=&quot;test.load()&quot;>
<a href=&quot;#&quot; onmouseover=&quot;test.scrollNorth()&quot; onmouseout=&quot;test.endScroll()&quot;>up</a>
<a href=&quot;#&quot; onmouseover=&quot;test.scrollSouth()&quot; onmouseout=&quot;test.endScroll()&quot;>down</a>
<a href=&quot;#&quot; onmouseover=&quot;test.scrollWest()&quot; onmouseout=&quot;test.endScroll()&quot;>left</a>
<a href=&quot;#&quot; onmouseover=&quot;test.scrollEast()&quot; onmouseout=&quot;test.endScroll()&quot;>right</a>
&nbsp;&nbsp;&nbsp; &lt;- <b>mouseover</b> these links to activate the
scroller.<br />
<div id=&quot;myScrollContainer&quot;>
<div id=&quot;myScrollContent&quot;>
<!-- this nested table is only necessary if you're using horizontal scrolling, and are targeting navigator 4 -->
<table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;>
<tr><td>
<p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
<p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
<p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
<p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
<p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
<p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
<p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
<p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
<p>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
</td><td>
</td></tr>
</table>
</div>
</body>

</html>
 
Sort by date Sort by votes
Like in the opening Remark.........I need to create multiple scrolling containers......such as myScroll 1, myScroll 2 etc. When i add extra script for them it wont allow more than one of them to work...Can someone try the code and add extra code and post it in here....thanks
 
Upvote 0 Downvote
So what you basically want, I tried your script and it works
nicely!, is to have extra scrolling interfaces for
scrolling both horizontally and vertically at the same
time ??? [bobafett] BobbaFet [bobafett]

Everyone has a right to my opinion.
E-mail me at caswegkamp@hotmail.com
 
Upvote 0 Downvote
<script language=&quot;javascript&quot;>
var test = new ypSimpleScroll(&quot;myScroll&quot;, 20, 50, 150, 250, 40, 200)
</script>
When i place extra lines such as the one above it will only allow the first one to work. The others just won't scroll.
For example if i add the following code:

<script language=&quot;javascript&quot;>
var test = new ypSimpleScroll(&quot;myScroll&quot;, 20, 50, 150, 250, 40, 200)
var test = new ypSimpleScroll(&quot;myScroll2&quot;, 400, 50, 150, 250, 40, 200)
</script>

This will create 2x scrolling boxes but only the first will scroll...........Note: I also change the ContainerID for myScroll1 etc. but still no go.

If you can get two seperate scrolling boxes to work can you post the code here?....Thanks
 
Upvote 0 Downvote
Can anyone give their ICQ number so i can hget this problem fixed quickly????
 
Upvote 0 Downvote
Hi,

Let me get this striaght, you want to have multiple boxs of scrolls on the screen yes?

James
 
Upvote 0 Downvote
Yes...I want to have more than one sroller box on each web page.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
686
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
725
pmonett
pmonett
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
tyutghf
  • Locked
  • Question
Which website accessibility tool do you use?
Replies
0
Views
109
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top