Welcome to WebmasterWorld Guest from 18.205.176.85

Forum Moderators: open

Message Too Old, No Replies

Scrolling <div>'s

On keypress

     
3:00 am on Oct 28, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 13, 2003
posts:44
votes: 0


Hello,

I wondered if anyone knew how to scroll a <div> onkeypress (to work in at least Navigator 7 and MSIE6).

Here's an example of the situation.


<!-- alt tags etc removed for clarity -->
<div id="container" style="width:215px;height:200px;overflow-y:scroll;overflow:-moz-scrollbars-vertical">
<div id="sc" style="position:relative"><img src="pic1.jpg" /><br />
<img src="pic2.jpg" /><br />
<img src="pic3.jpg" /><br />
<img src="pic4.jpg" /></div></div>

The pictures are all 200px square, so scrolling 200px brings another one into view.

I would like to be able to scroll a picture into view on pressing the Up and Down arrow keys.

If pic1 was showing, pressing the Down arrow key would scroll 200px to bring pic2 into view. Pressing the Up arrow would do nothing.

If pic2 was showing, pressing the Up arrow key would scroll pic1 into view, but pressing the Down arrow key would bring pic3 into view.

Etc.

Being able to read the amount of scrolling of the layer (which would be 200 when pic2 is fully shown, for example), would be very useful.

I'm fairly sure a lot of this can be done by putting the content in an iframe. However I am would like to do it using <div>'s only, and retaining the scrollbar, so that scrolling could still be done with the mouse.

Thanks for your interest.

7:42 pm on Oct 28, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


I would like to post a more thorough replay, but I am not completely sure if this will do exactly as you want, because I have yet to test it enough, but *as far as I know*, there is only one way to scroll a div using DHTML:

For instance, if your first image had an id of image1
<img src="pic2.jpg" id="image1" />

then in your onkeypress handler, you would have this code

document.getElementById('image1').scrollIntoView();

Obviously I didn't specify how to capture *just* up and down, but do a search on "keyCode".

Im worried that scrollIntoView won't always do what you expect, if the image is already partially visible (again, haven't tested it)

If I have some time tonight, I will try my best to have a cross-browser example, unless someone beats me to it.

9:37 pm on Oct 28, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 13, 2003
posts:44
votes: 0


SethCall, you've helped already. Thank you very much.

I did a search on your suggestion, scrollIntoView, and found a function:


<script>
function siv(nm,top){
if(document.getElementById){
var element=document.getElementById(nm);
if(element.scrollIntoView){
element.scrollIntoView(top);
}
else { notSupported(); }
}
else { notSupported(); }
}
</script>
<div id="container" style="width:215px;height:200px;overflow-y:scroll;overflow:-moz-scrollbars-vertical">
<div id="sc" style="position:relative"><img id="i1" src="smiley200-1.jpg" alt="smiley1" title="smiley1" /><br />
<img id="i2" src="smiley200-2.jpg" alt="smiley2" title="smiley2" /><br />
<img id="i3" src="smiley200-3.jpg" alt="smiley3" title="smiley3" /><img src="smiley200-4.jpg" alt="smiley4" title="smiley4" /></div></div>
<a href="javascript:siv('i3',top)">siv3</a><br />
<!-- scrolls picture whose id is "i3" into view -->

Presumably, to move up and down using the arrow keys, there would need to be a function that scrolls by an amount of pixels (200px in this case), rather than using the id of an item.

I would imagine that difficulties might arise if it's not possible to read the amount by which the layer has been scrolled.

In that case, I might try to use a different approach, for example, having something like the above function triggered by keypress (press "1" to show picture 1, "2" to show picture 2, and so forth).

10:49 pm on Oct 28, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


you could still use the up and down arrows if you really wanted ... but yeah, it would strongly depend on the ability to see where its scrolled to, in order to create the properly logic as described in the first post.

Why don't you want to use an iframe? I find them to do strange things at times, but whats your reason?

11:10 pm on Oct 28, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


This seems to work in Mozilla (but of course not in the other browsers)...

... 
<style type="text/css" title="Default Style">
<!--
html, body {
background: #E6E6E7;
}
a {
color: #343B36;
}
#container {
width: 222px;
height: 208px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
.imgs {
position: relative;
}
.img {
border: 2px solid green;
margin: 0px;
}
-->
</style>

<script type="text/javascript">
<!--
var currentImg = 0;
function detectKey(e) {
if (!e) { e = window.event; } // sanity
switch (e.keyCode) {
case 38: { // up
if (currentImg > 1) {
scrollImg("up");
}
break;
}
case 40: { // down
if (currentImg <= 3) {
scrollImg("down");
}
break;
}
default: {
break;
}
}
return false;
}
function scrollImg(dir) {
if (dir == "up") {
currentImg--;
}
else if (dir == "down") {
currentImg++;
}
var img = document.getElementById("img" + currentImg);
img.scrollIntoView();
}
document.onkeyup = function(event) { detectKey(event); };
window.onload = function() { scrollImg("down"); };
//-->
</script>

...

<div id="container">
<div id="sc" class="imgs">
<div id="img1" class="img">
<img src="charset.gif" width="200" height="200" />
</div>
<div id="img2" class="img">
<img src="charset.gif" width="200" height="200" />
</div>
<div id="img3" class="img">
<img src="charset.gif" width="200" height="200" />
</div>
<div id="img4" class="img">
<img src="charset.gif" width="200" height="200" />
</div>
</div>
</div>
...

To get it to work in all the browsers, I would second SethCall's recommendation of using an iframe, and then use scroll-to-anchors...give each img an id and then append the id to the location.href of the iframe, prefixed by a hash sign, like...

window.frames['iframename'].location.href = window.frames['iframename'].location.href + "#img1";

Jordan

11:55 pm on Oct 28, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 13, 2003
posts:44
votes: 0


I think it would be good to use divs from a content management point of view, but I am prepared to look at iframes...they might be the "right" way to implement this type of thing. But I'd still be interested to see what can be done without resorting to iframes.

I've just found the scrollTop property might be helpful.


<script>
function lescroll(theamount){
document.getElementById('container').scrollTop=theamount
document.form1.text1.value=theamount
}
</script>
<div id="container" style="width:215px;height:200px;overflow-y:scroll;overflow:-moz-scrollbars-vertical">
<div id="sc" style="position:relative"><img id="i1" src="smiley200-1.jpg" alt="smiley1" title="smiley1" /><br />
<img id="i2" src="smiley200-2.jpg" alt="smiley2" title="smiley2" /><br />
<img id="i3" src="smiley200-3.jpg" alt="smiley3" title="smiley3" /><img id="i4" src="smiley200-4.jpg" alt="smiley4" title="smiley4" /></div></div>
<a href="javascript:lescroll(0)">picture 1</a><br />
<a href="javascript:lescroll(200)">picture 2</a><br />
<a href="javascript:lescroll(400)">picture 3</a><br />
<a href="javascript:lescroll(600)">picture 4</a><br />
<form name="form1">
<input type="text" size="4" name="text1">
</form>
2:55 am on Oct 29, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


Well that looks the the real answer right there... interesting: I came across it, but the reference i was looking at said it was for "window" object only.

Cool, good function to know.

3:58 am on Oct 29, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


Yup, for some reason I was thinking scrollTop was read-only for some reason, duh.

I modified bit I posted earlier...

[edit:] ...whittled it down a bit more, just one div for the images, used overflow: auto; to get it to work in other browsers, converted the switch statement in the JS to if / else conditionals... [/edit]

... 
<style type="text/css" title="Default Style">
<!--
html, body {
background: #E6E6E7;
}
#container {
position: relative;
width: 216px;
height: 200px;
padding: 0px;
margin: 0px;
overflow: auto;
overflow-y: scroll;
overflow-x: hide;
}
img { padding: 0px; margin: 0px; border: none; }
-->
</style>

<script type="text/javascript">
<!--
var currentImg = 0;
function detectKey(e) {
if (!e) { e = window.event; } // sanity
if ((e.keyCode == 38) && // up
(currentImg > 0)) {
scrollImg("up");
}
else if ((e.keyCode == 40) && // down
(currentImg < 3)) {
scrollImg("down");
}
return false;
}
function scrollImg(dir) {
if (dir == "up") {
currentImg--;
}
else if (dir == "down") {
currentImg++;
}
var div = document.getElementById("container");
div.scrollTop = (currentImg * 203);
}
document.onkeyup = function(event) { detectKey(event); };
//-->
</script>

</head>
<body>

<div id="container">
<img src="charset.gif" width="200" height="200" />
<img src="charset.gif" width="200" height="200" />
<img src="charset.gif" width="200" height="200" />
<img src="charset.gif" width="200" height="200" />
</div>
...

...works comparably in the 'big 3' browsers. :)

Jordan

8:27 pm on Oct 30, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 13, 2003
posts:44
votes: 0


We made good progress with this.

SethCall, MonkeeSage, thanks for your contributions.

5:16 am on Oct 31, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


yeah i defintely learned something ;)
5:41 am on Oct 31, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


This also means no more being stuck with using the built-in 'scroll-to-anchor' thing using id attributes...very cool, indeed. That was definitely a good find moonbather. :)

You know...they need to make T-shirts that read 'Everything I ever wanted to know about Webmastering, I learned at WebmasterWorld.com' ;)

Jordan