Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jquery/other method to scroll content?

    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.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    set the div's style.overflow = "auto" to auto add scrollbars if content is too big.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rnd me View Post
    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.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    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>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •