jquery/other method to scroll content?

OutdoorsBlogger · 10-16-2008, 09:39 PM

I have a div holding a tag cloud that is a set height/width. If there are too many items I'm left with either clipping the content or pushing the div's height.

Are they any good jquery plugins or other methods to add up/down scrolling if the content is too long?

Thanks so much in advance.

rnd me · 10-17-2008, 12:07 AM

set the div's style.overflow = "auto" to auto add scrollbars if content is too big.

OutdoorsBlogger · 10-17-2008, 01:43 AM

Quote:

Originally Posted by rnd me

set the div's style.overflow = "auto" to auto add scrollbars if content is too big.

Yes, this is very true. I guess what I'm wondering is if there is anything that accomplishes the same function as a css scrollbar, but in a cleaner way? I'd love to see something with an image/button to scroll the visible area of the div up and down.

Also, I've checked out some pagination scripts, but they all seem to work off of the child elements instead of filling the height and putting the next chunk of content on the next page.

Thanks for the heads up, and sorry for not being a little more specific.

Cheers.

rnd me · 10-17-2008, 03:21 AM

ok.
here's a simple example of buttons:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
	#limit { position: relative; height: 100px; width: 200px; overflow: hidden;  }
	
</style>
</head>

<body onload="boot()">
<input type='button'  value='down' onclick="div.scrollTop+=30;"  />	
<input type='button'  value='up' onclick="div.scrollTop-=30;"  />	
<div id='limit'>
<p>

<font size="2" color="#004040" face="comic sans ms, verdana, arial">• <a href="http://www.srh.noaa.gov/srh/jetstream/lightning/flashriprock.htm"><b>
Flash Riprock and the Bolt from the Blue </b></a> This is a lightning safety poster in pdf
format that can be downloaded.  It also lists lightning myths that need to be dispelled.  
<br>
<font size="1"> www.srh.noaa.gov/srh/jetstream/lightning/flashriprock.htm</font></font></p><p>


<font size="2" color="#004040" face="comic sans ms, verdana, arial">• <a href="http://www.srh.noaa.gov/srh/jetstream/mesoscale/1000trains.htm"><b>
Night of a Thousand Trains</b></a> This is a tornado safety poster in pdf format that
can be downloaded.  It also lists tornado myths that need to be dispelled.   
<br>
<font size="1"> www.srh.noaa.gov/srh/jetstream/mesoscale/1000trains.htmh</font></font></p><p>

<font size="2" color="#004040" face="comic sans ms, verdana, arial">• <a href="http://www.spc.noaa.gov/faq/tornado/#About"><b>
Frequently Asked Questions About Tornadoes</b></a> This is a tornado site that gives you all 
the information.  This list of FAQ's has been compiled from the public's questions.  
  
<br>
<font size="1"> www.spc.noaa.gov/faq/tornado/#About</font></font></p><p>

<font size="2" color="#004040" face="comic sans ms, verdana, arial">• <a href="http://www.noaa.gov/stormwatch/"><b>
NOAA's Storm Watch </b></a> This is a roundup of NOAA weather Web sites. 
You'll find links to the latest weather forecasts around the USA and even 
around the world. Track storms through NOAA weather satellites, get the 
latest weather maps and learn how to protect yourself and your community 
from severe weather. <br>
<font size="1"> www.noaa.gov/stormwatch</font></font></p>

</div>	

<script type='text/javascript'>
	function el(tid) {return document.getElementById(tid);}
	var div = el("limit");
</script>


</body>
</html>