Hi!
I wonder: What should I do/change to get a scrollable Recent Forum Posts block? I'd prefer the 20 most recent posts to occur on my site, but the box height shouldn't exceed let's say about 8 posts...
I would also like to make the ShoutBox autoscroll about the 20 most recent shouts... How do I achieve that?
Making Recent Posts be scrolling:
Go to TPortalBlocks.template.php and find the TPortal_recentbox() function.
Replace
function TPortal_recentbox()
{
global $context, $settings, $options, $txt , $modSettings;
// is it a number?
if(!is_numeric($context['TPortal']['recentboxnum']))
$context['TPortal']['recentboxnum']='10';
// leave out the recycle baord, if any
if(isset($modSettings['recycle_board']))
$bb=array($modSettings['recycle_board']);
else
$bb=array();
$what=ssi_recentTopics($num_recent = $context['TPortal']['recentboxnum'], $bb, $output_method = 'array');
// Output the topics
foreach($what as $w){
echo '<span class="smalltext"><a href="'.$w['href'].'"> '.$w['time'];
if(!$w['new'])
echo ' <img border="0" src="'.$settings['images_url'].'/'.$context['user']['language'].'/new.gif" alt="new" />';
echo '<br />'.$w['short_subject'].'</a></span><hr style="background-color: #c0c0c0;margin: 0px; " />';
}
}
with:
function TPortal_recentbox()
{
global $context, $settings, $options, $txt , $modSettings;
// is it a number?
if(!is_numeric($context['TPortal']['recentboxnum']))
$context['TPortal']['recentboxnum']='10';
// leave out the recycle baord, if any
if(isset($modSettings['recycle_board']))
$bb=array($modSettings['recycle_board']);
else
$bb=array();
$what=ssi_recentTopics($num_recent = $context['TPortal']['recentboxnum'], $bb, $output_method = 'array');
echo '<div style="height: 150px; overflow: auto; width: 100%;">';
// Output the topics
foreach($what as $w){
echo '<span class="smalltext"><a href="'.$w['href'].'"> '.$w['time'];
if(!$w['new'])
echo ' <img border="0" src="'.$settings['images_url'].'/'.$context['user']['language'].'/new.gif" alt="new" />';
echo '<br />'.$w['short_subject'].'</a></span><hr style="background-color: #c0c0c0;margin: 0px; " />';
}
echo '</div>';
}
To set the height of the box, change the height size in this line from 150px to whatever size you want it to be.
echo '<div style="height: 150px; overflow: auto; width: 100%;">';
For the Shoutbox, there is an Edit Shoutbox page in TPAdmin, and you can set the height of the shoutbox there. It also allows you to delete any shouts you want as well.
Thanks - much obliged!
What about the autscroll for the Shoutbox?
In the Edit Shoutbox page in TPAdmin, there is a spot for you to set the height of the shoutbox. I will automatically add a scrollbar if there are more shouts than the size can display.
Oh yes, but I'd like it autoscrolling, i.e. moving by it self (probably upwards) like a marquee or something...
ahh.... okay, not sure how to do that offhand, but will check around to see if there are any premade scripts that can do that (and yes, it would require javascript to accomplish)
Thanks, sure appreciate your concern!
All the scrolling on site will slow your forum!
Sure it will 8)
hi, im looking for an auto scrolling shoutbox to.
Any know how to do that?
I use to have something like that, but can't remember how to set it up.
In TPortalBlocks.template.php file (in folder: Themes/default/) find code:
// TPortal shoutbox
function TPortal_shoutbox()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
// Show the shoutbox, takes settings from tpadmin
if(isset($context['TPortal']['querystring']))
$tp_where=$context['TPortal']['querystring'];
else
$tp_where='';
if(!isset($context['TPortal']['shoutbox']))
$context['TPortal']['shoutbox']='';
echo ' <table style="table-layout: fixed;" cellpadding="0" height="'.$context['TPortal']['shoutbox_height'].'" cellspacing="0" border="0" width="100%"><tr><td class="smalltext"><div style="height: '.$context['TPortal']['shoutbox_height'].'px; overflow: auto; width: 100%;">', $context['TPortal']['shoutbox'], '
</div></td></tr></table><form style="margin-top: 8px; text-align: center;" class="smalltext" name="tp-shoutbox" action="'.$scripturl.'?action=tpmod&id=shout" method="post">
';
if(($context['TPortal']['guest_shout']) || (!$context['TPortal']['guest_shout'] && !$context['user']['is_guest']))
echo '<textarea class="smalltext" name="tp-shout" style="width: 80%; height: 50px;" wrap="off"></textarea><br /><input style="margin-top: 4px;" class="smalltext" type="submit" name="shout_send" value="'.$txt['shout!'].'">';
if($context['user']['is_guest'] && $context['TPortal']['guest_shout'])
echo '<br /><input style="margin-top: 4px;" size="20" class="smalltext" type="text" name="tp-shout-name" value="'.$txt['tp-guest'].'">';
else
echo '<input type="hidden" name="tp-shout-name" value="'.$context['user']['name'].'">';
echo '<input name="tp-shout-url" type="hidden" value="'.$tp_where.'">
</form>';
}
and replace with:
/ TPortal shoutbox
function TPortal_shoutbox()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
// Show the shoutbox, takes settings from tpadmin
if(isset($context['TPortal']['querystring']))
$tp_where=$context['TPortal']['querystring'];
else
$tp_where='';
if(!isset($context['TPortal']['shoutbox']))
$context['TPortal']['shoutbox']='';
echo ' <marquee behavior="scroll" direction="up" height="100" scrolldelay="100" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()"><table style="table-layout: fixed;" cellpadding="0" height="'.$context['TPortal']['shoutbox_height'].'" cellspacing="0" border="0" width="100%"><tr><td class="smalltext"><div style="height: '.$context['TPortal']['shoutbox_height'].'px; width: 100%;">', $context['TPortal']['shoutbox'], '
</div></td></tr></table></marquee><form style="margin-top: 8px; text-align: center;" class="smalltext" name="tp-shoutbox" action="'.$scripturl.'?action=tpmod&id=shout" method="post">
';
if(($context['TPortal']['guest_shout']) || (!$context['TPortal']['guest_shout'] && !$context['user']['is_guest']))
echo '<textarea class="smalltext" name="tp-shout" style="width: 80%; height: 50px;" type="text"></textarea><br /><input style="margin-top: 4px;" class="smalltext" type="submit" name="shout_send" value="'.$txt['shout!'].'">';
if($context['user']['is_guest'] && $context['TPortal']['guest_shout'])
echo '<br /><input style="margin-top: 4px;" size="20" class="smalltext" type="text" name="tp-shout-name" value="'.$txt['tp-guest'].'">';
else
echo '<input type="hidden" name="tp-shout-name" value="'.$context['user']['name'].'">';
echo '<input name="tp-shout-url" type="hidden" value="'.$tp_where.'">
</form>';
}
:)
WOW
Thank you very much!
That was exactly what i was looking for :)
Yeah thanks for the code ;)
I let my team mates vote if they would like it or not... Meanwhile, is there a URL where I might see what it looks like?
Quote from: misjka on January 17, 2006, 06:11:28 PM
I let my team mates vote if they would like it or not... Meanwhile, is there a URL where I might see what it looks like?
Check my site: http://forum.sirfanaticsholland.com/index.php?action=forum
OK, thanks! Looks great!
Is there a way for the user to stop the autoscrolling and then activate manual scrolling up & down...? Have a look on www.sdra.se, then maybe you'll see what I mean?
EDIT:
Oopsie... did'nt read everything
I think Javascript has something like that... i tried to search for it but i can't seem to find it :-\
No worries...! It looks alright, yet ^-^
I haven't implemented this modification yet, since I was hit by a thought (yeah, well...):
- I want my shoutbox to move upwards, since that is the natural order of reading a line of text...
- I want the oldest (let's say I have 8 shouts "archived", then I want #1 to show up first of these) shout to show up first in line, not the latest...
Is this achievable in some way???
this script looks nice, maybe useable?
link to script plus preview: http://www.dynamicdrive.com/dynamicindex2/crosstick.htm
<script type="text/javascript">
/***********************************************
* Pausing updown message scroller- ÂÃ,© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//configure the below five variables to change the style of the scroller
var scrollerdelay='3000' //delay between msg scrolls. 3000=3 seconds.
var scrollerwidth='150px'
var scrollerheight='105px'
var scrollerbgcolor='lightyellow'
//set below to '' if you don't wish to use a background image
var scrollerbackground='scrollerback.gif'
//configure the below variable to change the contents of the scroller
var messages=new Array()
messages[0]="<font face='Arial'><a href='http://www.dynamicdrive.com'>Click here to go back to Dynamicdrive.com frontpage</a></font>"
messages[1]="<font face='Arial'><a href='http://javascriptkit.com'>Visit JavaScriptKit for award winning JavaScript tutorials</a></font>"
messages[2]="<font face='Arial'><a href='http://www.codingforums.com'>Get help on scripting and web development. Visit CodingForums.com!</a></font>"
messages[3]="<font face='Arial'><a href='http://www.freewarejava.com'>Looking for Free Java applets? Visit Freewarejava.com!</a></font>"
messages[4]="<font face='Arial'><a href='http://dynamicdrive.com/link.htm'>If you find this script useful, please click here to link back to Dynamic Drive!</a></font>"
///////Do not edit pass this line///////////////////////
var ie=document.all
var dom=document.getElementById
if (messages.length>2)
i=2
else
i=0
function move(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
tdiv.style.top=0+"px"
setTimeout("move(tdiv)",scrollerdelay)
setTimeout("move2(second2_obj)",scrollerdelay)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
setTimeout("move(tdiv)",50)
}
else{
tdiv.style.top=parseInt(scrollerheight)+"px"
tdiv.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}
function move2(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
tdiv2.style.top=0+"px"
setTimeout("move2(tdiv2)",scrollerdelay)
setTimeout("move(first2_obj)",scrollerdelay)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
setTimeout("move2(second2_obj)",50)
}
else{
tdiv2.style.top=parseInt(scrollerheight)+"px"
tdiv2.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}
function startscroll(){
first2_obj=ie? first2 : document.getElementById("first2")
second2_obj=ie? second2 : document.getElementById("second2")
move(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility='visible'
}
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+' ;background-image:url('+scrollerbackground+')">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">')
document.write(messages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">')
document.write(messages[dyndetermine=(messages.length==1)? 0 : 1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
if (window.addEventListener)
window.addEventListener("load", startscroll, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroll)
else if (ie||dom)
window.onload=startscroll
</script>
and this one looks nice aswell:
http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm
Yeah, especially the last one is of my likings :D. But how do I integrate the JS script with the PHP script for the ShoutBox block?
The shoutbox has an option to scroll or not in the next version that will be ouyt soon.
Ok, gr8 :buck2:!
Here is one from the SMF site.
I had it working on RC1.1 until I just did the update
http://www.simplemachines.org/community/index.php?topic=13985.0
The formating does not look that great though, maybe it will help
I see that the TPortalBlocks.template.php is somewhat modified in 0.86... Some optimal advice about how to make Recent Forum Posts scrollable again (cannot see why this feature wasn't implemented in the .86 release, btw, since it's quite as important as the autoscrolling shoutbox [at least for me ^-^])?
"Autoscrolling" of Recent topics block was never intended out-of-the-box really. A scrollbar to limit the height would perhaps be more interesting?
No, I agree with you Bloc: It was selfscrolling (i.e. autoscrolling) ShoutBox I was looking for before - many thanks for implementing it in .86! About the Recent Posts Block I would like a manual scroll, just as you said to limit the block size ::).
Would be much obliged - you are making such a terrific job with TP!