Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Shout > Scrollable Shoutbox with formattable controls
_Shulkie_ (Member) 5/1/2010 9:36 AM EST : Scrollable Shoutbox with formattable controls
_Shulkie_
Posts: 467

0
Like

0
Dislike

a neat (i think) little addition to neaten up your page formatting - scrollable shoutbox with hidden scrollbar and controls to move up and down when you hover over

the links created in the $(".gpWidget-shout #scroller").before() clause can be edited to use images instead if you prefer

you can see an example here XBushidoX homepage

<script type="text/javascript">
//functions for scroller
var scrolling = null;
function scroll_up() {
var d = document.getElementById('scroller');
d.scrollTop = d.scrollTop - 5;
scrolling = window.setTimeout(function() { scroll_up();}, 100);
}
function scroll_down() {
var d = document.getElementById('scroller');
d.scrollTop = d.scrollTop + 5;
scrolling = window.setTimeout(function() {scroll_down();}, 100);
}
function stop_scroll() {window.clearTimeout(scrolling);}
 
$(document).ready(function(){
//move text box to top - thanks mottie
 var tmp = $('div[id*="_pnlNewShout"]');
 tmp.parent().prepend( tmp.html() + "<br><br>" );
 tmp.html('');
//add dive around shoutbox list, then add controls
$(".gpWidget-shout span[id*=xmlShouts]").wrap("<div id='scroller' style='width:100%; height : 250px; overflow : hidden;'></div>");
$(".gpWidget-shout #scroller").before("<div style='text-align: right;'>Scroll <a class='scrollup' style='cursor:hand;' ='scroll_up();' ='stop_scroll();'>Up</a> | <a class='scrolldown' style='cursor:hand;'='scroll_down();' ='stop_scroll();'>Down</a></div>")
 .bind('mousewheel', function(e,d){
  var speed = Math.floor(Math.abs(d)) * 20,
  top = $(this).scrollTop();
  top = (d > 0) ? top - speed :  top + speed;
  $(this).scrollTop(top);
  return false;
 });
})
</script>

Update: 10/30/2010 - I hope Shulkie doesn't mind, but I've updated the script above to work with the change in shoutbox layout as well as including the mousewheel support.
Update: 11/2/2010 - Changed again due to new layout.
Update: 1/3/2010 - Added up and down arrow classes.
Cheers, Shulkie
TopBottom

Mottie (SuperAdmin) 5/1/2010 12:18 PM EST : RE: Scrollable Shoutbox with formattable controls
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi _Skulkie_!

Very nice! But I have to say, I'm too impatient to use the link to scroll all the way to the bottom, so you could just add this bit of scripting to add mousewheel functionality 
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('#scroller').bind('mousewheel', function(e,d){
  var speed = Math.floor(Math.abs(d)) * 10,
  top = $(this).scrollTop();
  top = (d > 0) ? top - speed :  top + speed;
  $(this).scrollTop(top);
  return false;
 });
})
</script>
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

_Shulkie_ (Member) 5/1/2010 8:47 PM EST : RE: Scrollable Shoutbox with formattable controls
_Shulkie_
Posts: 467

0
Like

0
Dislike

I totally agree and have added the mouse wheel functionality but having both methods makes the site as usable for those poor unfortunates stuck using their laptop trackpoint to navigate
Cheers, Shulkie
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%