PDA

View Full Version : Custom Scrollers...



pcbrainbuster
04-01-2007, 03:30 PM
Hello again my friends :),

Over time I have seen divs that have a scroller and when you scroll it down the div contens go down and when you drag the scroller up the div contents go down (just see mburt's example (I simply cannot remeber its location))

Veronica
04-01-2007, 04:29 PM
There's this one that creates a div that acts like an iframe:

http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

And then another one that uses links to scroll up or down:

http://www.dynamicdrive.com/dynamicindex2/manualscroll.htm

But I think the first one is the one you were talking about. By the way, if you want only a vertical scrollbar, just replace the 'overflow:scroll' with 'overflow-x: hidden;overflow-y: scroll;'

pcbrainbuster
04-01-2007, 05:33 PM
May I have me an example ?

Thanks :)

mburt
04-01-2007, 09:19 PM
Properties/Functions:

scrollTo(index): window

scrollTop: object
scrollHeight: object

Example:

[object].scrollTop = 20;

Use those attributes to try what you are attempting.

pcbrainbuster
04-01-2007, 09:41 PM
By can I have an example I ment that I wanted a full made easy to understand example :(

Thanks :) (though again sorry for the hassle)

mburt
04-01-2007, 09:44 PM
It's not incredibly difficult. Sometimes you, the user has to find the answer on his/her own.

[object1].onscroll=function() {
[object1].scrollTop=[object2].scrollTop;
}

pcbrainbuster
04-01-2007, 09:52 PM
Well again I am confused as I required an full -

<html>
<body>
......
</body>
</html>

Type example :(, well its OK anyway, for know I will just look on the internet and hope to find one example unless you wish to do it for me... :)

mburt
04-01-2007, 10:16 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#obj1,#obj2 {
width:150px;
height:200px;
border:1px solid black;
overflow:auto;
float:left;
margin-right:3px;
}
</style>
<script type="text/javascript">
function scroll(obja,objb) {
document.getElementById(objb).scrollTop = obja.scrollTop;
}
</script>
</head>
<body>
<div id="obj1" onscroll="scroll(this,'obj2')">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam quis augue. Ut quis ligula.
Pellentesque nibh dolor, commodo eu, dapibus congue, euismod id, nisi. Pellentesque iaculis placerat tellus.
Nulla varius est tristique libero. Ut sed dui. Praesent nunc. Nunc sit amet velit at lectus adipiscing tempus.
Nulla lorem urna, tincidunt eget, fermentum eu, vulputate sed, nunc. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.</div>

<div id="obj2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam quis augue. Ut quis ligula.
Pellentesque nibh dolor, commodo eu, dapibus congue, euismod id, nisi. Pellentesque iaculis placerat tellus.
Nulla varius est tristique libero. Ut sed dui. Praesent nunc. Nunc sit amet velit at lectus adipiscing tempus.
Nulla lorem urna, tincidunt eget, fermentum eu, vulputate sed, nunc. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.</div>
</body>
</html>

pcbrainbuster
04-01-2007, 10:49 PM
Thanks mburt I luv ya :),

But one/two questiion -

1) What other overflow types are there (i forget... And overflow means that if the text does not fit in the space given, right?
2) Please explain how the scroll top works in that div...

mburt
04-01-2007, 10:59 PM
overflow: hidden,visible,scroll,auto

scrollTop: returns and assigns the value that an object has scrolled from it's height. (scrollHeight - iterator)

pcbrainbuster
04-01-2007, 11:18 PM
Thanks :), but what does iterator mean???

pcbrainbuster
04-02-2007, 01:19 AM
Well anyway I have been working on my own scrolling script -

<html>
<body bgcolor="red">
<span id="textbox" style="height: 250px; width: 250px; border: 1px solid; overflow: auto; background-color: black; color: yellow;">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah<br><br> Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
<br><br> Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
</span><br>
<img src="up.gif" onmouseover="moveup()" onmouseout="stop()"> <img src="down.gif" onmouseover="movedown()" onmouseout="stop()">
<script>
function moveup() {
var call = document.getElementById('textbox')
if (call.scrollTop>=0 || call.scrollTop<=250) {
call.scrollTop++
var t1 = setTimeout("moveup()",5)}
}

function movedown() {
var call = document.getElementById('textbox')
if (call.scrollTop>=0 || call.scrollTop<=250) {
call.scrollTop--
var t2 = setTimeout("movedown()",5)}
}
</script>
</body>
</html>

And need to know how to access the variables in the other functions (please don't say anything about the layout of the code or anything else off topic because it is not completely complete enough to critisize :))

boxxertrumps
04-02-2007, 01:33 AM
cariables that have been initialised in functions are "local variables" and can only be acsessed in that function or returned as the value of a function.

pcbrainbuster
04-02-2007, 12:34 PM
In that case if I make the variables global eg -

<script>
var loser = loser
function change() {
loser=winner
}

function alert() {
alert(loser)
}
</script>

Will this work ?

boxxertrumps
04-02-2007, 01:12 PM
<script>
var loser = "loser";

function change() {
loser = "winner";
}
</script>
<a href="#" onclick="alert(loser)">Did you win?</a>

This is correct, although im not quite certain if you are allowed to change global variables withing functions, and have the change stich outside the functoin...

And there's no sense in changing a variable function into a constant one, less flexibility.

pcbrainbuster
04-02-2007, 01:21 PM
Well I check it out and it worked but here is the script I am working on... -

<html>
<body bgcolor="red">
<span id="textbox" style="height: 250px; width: 250px; border: 1px solid; overflow: auto; background-color: black; color: yellow;">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah<br><br> Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
<br><br> Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
</span><br>
<img src="up.gif" onmouseover="moveup()" onmouseout="stop()"> <img src="down.gif" onmouseover="movedown()" onmouseout="stop()">
<script>
function moveup() {
var call = document.getElementById('textbox')
if (call.scrollTop>=0 || call.scrollTop<=250) {
call.scrollTop++
var t1 = setTimeout("moveup()",5)}
}

function movedown() {
var call = document.getElementById('textbox')
if (call.scrollTop>=0 || call.scrollTop<=250) {
call.scrollTop--
var t2 = setTimeout("movedown()",5)}
}
</script>
</body>
</html>

And its basically a box which has a scroller and some arrows which automatically scroll box but I need to know how to use clearTimeout properly !!!! (please give an example without re-writting any code)...

mburt
04-02-2007, 06:13 PM
clearTimeout(t1);
or

clearTimeout(t2);

mburt
04-02-2007, 06:17 PM
variables that have been initialised in functions are "local variables" and can only be acsessed in that function or returned as the value of a function.

Seeings pcbrainbuster writes his/her code invalid, pcbrainbuster puts his/her code in the body, which automatically makes it a global. If the <script> tag was in the head, it would be different. I don't believe that is the problem.

pcbrainbuster
04-02-2007, 07:54 PM
Though it sort of was .... I put my code in the body all the time and it works fine, and the whole global and local code stuff works the same for script in the body tag (scripts can be both in head and body)....

And also thanks for your clearTimeout, though I already understand it what I needed was my script and your knowledge of clearTimeout together :)...

Anytime now :(

WOOHOOO SUCCESS, I guessed what was wrong with ALL my setTimeout including scripts ! and it was -

I did not make the variables global for example -

<script>
function start() {
alert("DIE")
var t1 = setTimeout("start()",1)}

function end() {
clearTimeout(t1)
}
</script>

But did not do such a thing as an infinite number of alerts will come up...
I just recently understood global and local and now understand it fully !

Thanks guys :)