"Scrollable Shoutbox with formattable controls" : Shout : Help-Site - World of Warcraft Durotan server - Guild Hosting - GuildPortal

• Login: Password: Save New User? Forgot?

Home

Forums

Code

Forums

: > Scrollable Shoutbox with formattable controls

_Shulkie_ (Member)

5/1/2010 9:36 AM EST : Scrollable Shoutbox with formattable controls

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

•

Mottie (SuperAdmin)

5/1/2010 12:18 PM EST : RE: Scrollable Shoutbox with formattable controls

ACK!

Posts: 3873

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>

>>help-site<<

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

•

_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
•

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 )

%title%