Page 1 of 1

scrolling iFrame with button and javascript for touchscreen

Posted: Wed Sep 21, 2005 5:58 pm
by robster
Hi all, I have an iframe in a site, it gets long and you have to scroll a long way down to see some of the content.

I'm designing this for touch screen and the scroll bars are just too thin and fiddly for our fat fingers ;) so what I want to do is have a button above the iframe and one below. When you click that button (in this case an image) I want the iframe contents to scroll up or down (dependant on the button pressed).

Here is the code I'm trying, but am having no success, the thing is not even moving at all :(

Code: Select all

<td width="300" rowspan="3" align="center" class="scroll_box" background="images/background.jpg">
	<img src="images/U.jpg" onMouseDown="document.content.scrollx.value = 1"><br>
	<?
	echo "<div align=\"center\">
	<iframe name=\"content\" src=\"clients_viewbox.php?letter=$letter\" width=\"90%\" height=\"500\" frameborder=\"0\" scrolling=\"auto\"> 
        No i-frames, eh? Pity.<br>Go get a better browser. 
	</iframe>
	</div>";
	?>			
	<br><img src="images/D.jpg" onMouseDown="document.content.ScrollY.value = 100">
	</td>
the iframe is called 'content' and well, I just don't really understand what's wrong (having done VERY little javascript).

Any help greatly appreciated.


Rob

(EDIT: Values of 1 and 100 shown here are just to see if I could get some movement before I even try scrolling)

Posted: Wed Sep 21, 2005 6:08 pm
by feyd
I'd use the scrollBy() method of the document object..

Posted: Wed Sep 21, 2005 7:58 pm
by robster
scrollby looks great, I click it and it moves up or down X pixels.
What I'd like though is to have it to scroll until i lift the mouse button (ie: while mouse down, scroll until mouse not down).

Is there a way with an onclick event to do something like this:

Code: Select all

while onMouseDown="document-content.scrollBy(0, 80);
I'm so not sure how to do this in Java. I've become dependant on PHP but this is stretching me I know, it's a good thing. My application is already shining due to specific well used (IMHO ;)) javascripting.

Well, I hope I can, I'm not even after code, just a reference like before would be fine.

Thanks again so much!

Rob

Posted: Wed Sep 21, 2005 8:32 pm
by feyd
untested idea:

Code: Select all

...onmousedown="moveMe(1)" onmouseup="stopMe()">

-----------

var timer = '';
function moveMe(s) {
  // what direction to move
  var dir = (s > 0 ? 1 : -1);
  // how many pixels per <rate>
  var step = 3;
  // what's the interval between movements
  var rate = 30;
  timer = setInterval('step(' + (step * dir) + ')',rate);
  return false;
}

function stopMe() {
  clearInterval(timer);
}

function step(v) {
  document.frames['iframeName'].window.scrollBy(0,v);
}