# Take a wonderful script to the next level

**URL:** <https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311>\
**Category:** Uncategorized\
**Created:** [August 4, 2004, 1:14pm UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311 "2004-08-04T13:14:11Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![raphaeld](https://avatars.discourse-cdn.com/v4/letter/r/e8c25b/32.png) [@raphaeld](https://forum.kirupa.com/u/raphaeld)\
**Post date:** [August 4, 2004, 1:14pm UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/1 "2004-08-04T13:14:11Z")

</div>

On this page:  
[http://raphaeld.dotgeek.org/notable/pages/projecten.php](http://raphaeld.dotgeek.org/notable/pages/projecten.php)

You can see a wonderful example of a javascript scrolling a div up and down. Just rollover the up and down arrows and watch the text scroll!  
It even stops scrolling when it has reached the end of the div. Meaning that you can actually put any quantity of content in it! It will always scroll 'till the end of the div.

The .js file can be found here:  
[http://raphaeld.dotgeek.org/notable/jscript/ASM\_Scroller2.js](http://raphaeld.dotgeek.org/notable/jscript/ASM_Scroller2.js)

So far so good, now I would like to use **two** of these scrollable DIVs in one page without using frames, in fact I’m trying to follow the standards by avoiding frames and tables. This means that there will be two identical javascripts on one page… leading to a conflict between these scripts.

Does anybody has any suggestions how to make this idea work?

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [August 4, 2004, 2:57pm UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/2 "2004-08-04T14:57:32Z")

</div>

I don’t know much about JS but here is one thing that made sense to me. Here is your html:

```php
<div id="sidescroll"><div id="scrollMeUp"><a href="#" onfocus="if(this.blur)this.blur()" onmouseover="scrollIt('Scroll Up',1); return true" onmouseout="scrollIt('',0); return true"><img src="../img/pijlboven.gif" width="18" height="18" border="0"></a></div>
    <div id="scrollMeDown"><a href="#" onfocus="if(this.blur)this.blur()" onmouseover="scrollIt('Scroll Down',2); return true" onmouseout="scrollIt('',0); return true"><img src="../img/pijlbeneden.gif"width="18" height="18" border="0"></a></div>
    </div>

```

Make a new var at the top. Under

```auto
var newsId = "news"; 

```

like

```auto
var newsId2 = "news2";

```

and prolly the same thing for var newsClipId.

In your JS make duplicate functions of scrollIT, scrollUp, and scrollDown. Obviously rename them, like scrollIT2, scrollUp2, etc.

Change your new scrollUp2 where it says newsId… to the new newsId2.

Last, in the function init() under  
theObj = getObject(newsClipId);  
theObj = getObject(newsId);

add  
theObj = getObject(newsClipId2);  
theObj = getObject(newsId2);

anyway… all theory… but I think it should work.

---

<div class="post-metadata">

**Author:** ![raphaeld](https://avatars.discourse-cdn.com/v4/letter/r/e8c25b/32.png) [@raphaeld](https://forum.kirupa.com/u/raphaeld)\
**Post date:** [August 5, 2004, 6:08am UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/3 "2004-08-05T06:08:35Z")

</div>

I have implemented your code  
on this page:  
[http://raphaeld.dotgeek.org/notable/pages/secondprojecten.php](http://raphaeld.dotgeek.org/notable/pages/secondprojecten.php)

the both DIVs scroll, but there still a conflict  
here’s the adapted .js file:  
[http://raphaeld.dotgeek.org/notable/jscript/second\_ASM\_Scroller2.js](http://raphaeld.dotgeek.org/notable/jscript/second_ASM_Scroller2.js)

any ideas?

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [August 5, 2004, 6:22am UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/4 "2004-08-05T06:22:36Z")

</div>

LoL, well it took me forever to figure out what error you were talkin about… but… I finally found it.

It seems the issue is

```auto
var yplace = 0;
var ymax = 0;
var ymin = 0;
var xplace = 0;

```

all that is being shared between your 2 version… since I dunno anything about JS I don’t know if those vars are common vars that can be changed. Anyway, what you can try to do is make a second version of those vars too… and in your duplicates change those vars to the new version.

```auto
var yplace2 = 0;
var ymax2 = 0;
var ymin2 = 0;
var xplace2 = 0;

```

But, again… I dunno if this will work… those look like common variables that may not be able to be changed… but I’d check it out.

or maybe change

```auto

function redrawScreen() {
  location.reload();
  return false
}

```

to true instead of false, LoL again I don’t know what that does. It’s just all theory.

Lemme know if that works.

---

<div class="post-metadata">

**Author:** ![raphaeld](https://avatars.discourse-cdn.com/v4/letter/r/e8c25b/32.png) [@raphaeld](https://forum.kirupa.com/u/raphaeld)\
**Post date:** [August 5, 2004, 7:43am UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/5 "2004-08-05T07:43:14Z")

</div>

Hi, thanks for the suggestions but now there’s only one DIV scrolling,  
so my guess is that it yplace and the other vars are common variables that can’t be changed.

---

<div class="post-metadata">

**Author:** ![raphaeld](https://avatars.discourse-cdn.com/v4/letter/r/e8c25b/32.png) [@raphaeld](https://forum.kirupa.com/u/raphaeld)\
**Post date:** [August 5, 2004, 9:53am UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/6 "2004-08-05T09:53:41Z")

</div>

ok, thanks, I made the code work i needed to duplicate some more variables and suddenly it worked. Thanks a lot for your help simplistik.

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [August 5, 2004, 1:11pm UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/7 "2004-08-05T13:11:54Z")

</div>

Dunno if you’re gonna make your way back here but i was just wondering if you could share that JS w/ us since we helped you solve it, and from what I can tell it seems to be a widely used script.

---

<div class="post-metadata">

**Author:** ![raphaeld](https://avatars.discourse-cdn.com/v4/letter/r/e8c25b/32.png) [@raphaeld](https://forum.kirupa.com/u/raphaeld)\
**Post date:** [August 9, 2004, 8:25am UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/8 "2004-08-09T08:25:28Z")

</div>

oh, well not a problem the modified js-file is to be found here:  
[http://raphaeld.dotgeek.org/notable/jscript/ASM\_Scroller2.js](http://raphaeld.dotgeek.org/notable/jscript/ASM_Scroller2.js)

and the demopage here:  
[http://raphaeld.dotgeek.org/notable/pages/projecten.php](http://raphaeld.dotgeek.org/notable/pages/projecten.php)

have fun!

---

<div class="post-metadata">

**Author:** ![kathari](https://avatars.discourse-cdn.com/v4/letter/k/a183cd/32.png) [@kathari](https://forum.kirupa.com/u/kathari)\
**Post date:** [August 9, 2004, 2:20pm UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/9 "2004-08-09T14:20:06Z")

</div>

The scroller is very nice (in Explorer) but what is the point of conforming with standards if it doesn’t work in all browsers? In Safari and Netscape (on a Mac) the text is all over the place…

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [August 9, 2004, 2:27pm UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/10 "2004-08-09T14:27:18Z")

</div>

works fine in all browsers for me… safari, ff, netscape. dunno which versions you’re using.

---

<div class="post-metadata">

**Author:** ![kathari](https://avatars.discourse-cdn.com/v4/letter/k/a183cd/32.png) [@kathari](https://forum.kirupa.com/u/kathari)\
**Post date:** [August 9, 2004, 2:32pm UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/11 "2004-08-09T14:32:54Z")

</div>

Safari 1.0, Netscape 7

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [August 9, 2004, 2:43pm UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/12 "2004-08-09T14:43:12Z")

</div>

Hmm… I have Safari, 1.2 works fine… I guess I was still in FF when I thought I was in NS7.1 but yea… it does screw up in NS

But you can’t always cater to every browser type. PPL put way to much emphasis on that.

---

<div class="post-metadata">

**Author:** ![kathari](https://avatars.discourse-cdn.com/v4/letter/k/a183cd/32.png) [@kathari](https://forum.kirupa.com/u/kathari)\
**Post date:** [August 9, 2004, 2:50pm UTC](https://forum.kirupa.com/t/take-a-wonderful-script-to-the-next-level/118311/13 "2004-08-09T14:50:58Z")

</div>

No of course, my question has more to do with “standards” than raphaeld’s choice for the page/site. And I think it should work in Netscape at least. I’ll have to upgrade my Safari. Good that it works in 1.2!