scrolling iFrame with button and javascript for touchscreen

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
robster
Forum Contributor
Posts: 360
Joined: Wed Jul 16, 2003 8:28 am
Location: Sunshine Coast, Australia

scrolling iFrame with button and javascript for touchscreen

Post 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)
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I'd use the scrollBy() method of the document object..
User avatar
robster
Forum Contributor
Posts: 360
Joined: Wed Jul 16, 2003 8:28 am
Location: Sunshine Coast, Australia

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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);
}
Post Reply