Topic: nneonneo's Shoutbox

[colorgoddess]

is there a code that will put the smileys list on the shoutbox; ie.; so one does not have to know the code to post a smiley; like type a : and a ) to make a smiley??
I want to make it where there is a selection of smileys in the shoutbox they can just pick a smiley from the list; just like inside of this forum when you make a post??

I am using version 1.08 on a linux server

[colorgoddess]

Wow... love all the tips here,
but I found one that is not quiet right...

    
Re: nneonneo's Shoutbox
« Reply #874 on: August 10, 2007, 02:08:15 PM »
   Reply with quoteQuote
I think he means the font for the shout text. To change that:
in Themes/<theme>/index.template.php, change the font-size parameter in
Code:

      #forum-name, #shout-text, #shout-button {
         font-size: 9px;
         margin: 0;
         padding: 0;
      }

That's it -- that's all that needs to be done to change the shout text font size.
====

that changes the size of the font in the buttons, and the type box, but not the scrolling text... if you want to change that, you must change this code in the same file:

      #yshout {
         font-size: 14px;
      }

I'm new to explaining this; hope I posted it correctly

[comptech]

@nneonneo:
Is $updateTimeout setting the most "server-stressful" or "bandwidth-consuming" setting, esp. if set below the default value of 20?

I had it set to 10 to resolve the auto-collapse problem, but bandwidth utilization increases at an alarming rate of 2GB per day!

[nneonneo]

@ruelnov: Odd, bandwidth should not increase appreciably even with a setting of 10; this is equivalent to a usual refresh time of 10 seconds unless people are shouting _very_ often. Have you tried changing Jul222007 in index.template.php to something else, to force a cache update on the clients? An incorrect cached copy of yshout.js in a browser could severely tax the server.
For reference, if nobody shouts, the shoutbox uses about 360KiB/hour per client idling at your settings. This decreases significantly when combined with compression, so, unless you have 250 clients all idling 24/7, bandwidth usage _should_ not be 2GB/day (YMMV!)

@colorgoddess: About the first point: yes, I believe it is possible, but I do not know the SMF code I need for the smileys pane. On the second point: good catch; I've fixed that tip.

[Spale]

I have read this entire support thread and any of answers didn't helped me to solve my problem.
Im using SMF 1.1.3 and i wanted to add nneonneo's Shoutbox to Babylon theme. On my host PHP Version is 4.4.7.

I have done all necessary steps exactly as sad on mod's official page. The Shoutbox simple wont work. Only this shows:

Shout Box

...loading shoutbox...

And after that nothing happens!

My test forum url is http://test.pancevo.ws, and login data is:

Code: [Select]

User name: test
Password: test
This is my index.template.php file.

I realy like this mod and I desperately need Shoutbox, can someone please help me to make this mod work for me.

Thank you in advance for your time.

[nneonneo]

@Spale: Visiting http://test.pancevo.ws/yshout/yshout.php gives me a 500 "Internal Server Error". You will have to check the webserver error logs.

[Mongey]

Great shoutbox, just wondering hoe to increase the max number of charecters/words used. thanks

[Spale]

@nneonneo: It seams that the files were not transfered good to the host. I have overwrite them all, chmod yshout.php to 755 and the Shoutbox start working.

I have one more question, how to make that only register users can use Shoutbox?

Thanks for your quick answer, and thank you for making this great mod. Keep on with good work, best wishes from me.

[pongsak]

Some members at my forum complain that sometimes they
didn't seen the shout change cause they did something
elsewhere in that page.
Would U like to show me the code to add a ding dong sound when
the shout 's changed, please.

[pongsak]

I just see someone want smiley to show at the shout box.
I've finished the mod last night, I'll post later about the trick.
Let's see the example picture

U can choose to slide down to show and up to hide.

[colorgoddess]

@pongsak

can't wait!! THANKS!

[nneonneo]

@Mongey: Find all instances of the number 125 and increase the value. It should occur twice as maxlength="125" and once in substr($shoutText,0,125).
@Spale: change $allowGuests in yshout.php to false.
@pongsak: in yshout/js/yshout.js, change

Code: [Select]

function doRefresh() { to

Code: [Select]

var oldShouts = null;
function doRefresh() {
if (oldShouts != null && oldShouts != $("shouts").innerHTML)
{
<PLAY SOUND>
}
oldShouts = $("shouts").innerHTML;where "<PLAY SOUND>" is code for producing an audible sound; this varies widely from browser to browser. There are a number of sites on the Internet to find code to play sounds.
And the smileys menu looks nice -- I can't wait to find out how you did it

[pongsak]

After try many ways for code <PLAY SOUND> . It does not work.
Can u show me an example? please.

Below 's the code i use but don't work.

Code: [Select]

function playMusic(nm) {
obj = document.embeds[nm];
if(obj.Play) obj.Play();
return true;
}

function schedRefresh() {
if (oldShouts != null && oldShouts != $("shouts").innerHTML){
playMusic("http://www.med17psu.com/forum/chat-inbound_GSM.wav");
}
if (refreshSet) {
setTimeout("doRefresh()", refreshTime);
}
}
PS: One suggestion , after i use delete for 1 line of shout it doesn't return to shout text ,but must to click "return to shout", why don't redirect to shout immediately?

[pongsak]

For adding smiley .Let's go.
1. Adding 1 line of script between <head> and </head> index.template.php  .

Code: [Select]

<script type="text/javascript" language="JavaScript" src="',$boardurl,'/mymod/animatedcollapse.js"></script>
This file will create sliding effect.

2. Create "mymod" dir in root forum dir and copy these code and safe as "animatedcollapse.js"

Code: [Select]

//Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated June 27th, 07'. Added ability for a DIV to be initially expanded.

var uniquepageid=window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, "") //get current page path and name, used to uniquely identify this page for persistence feature

function animatedcollapse(divId, animatetime, persistexpand, initstate){
this.divId=divId
this.divObj=document.getElementById(divId)
this.divObj.style.overflow="hidden"
this.timelength=animatetime
this.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" : "contract"
this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId) //"yes" or "no", based on cookie value
this.contentheight=parseInt(this.divObj.style.height)
var thisobj=this
if (isNaN(this.contentheight)){ //if no CSS "height" attribute explicitly defined, get DIV's height on window.load
animatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")
if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height
}
else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
this.divObj.style.height=0 //just collapse content if CSS "height" attribute available
if (persistexpand)
animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid+"-"+thisobj.divId, thisobj.isExpanded)}, "unload")
}

animatedcollapse.prototype._getheight=function(persistexpand){
this.contentheight=this.divObj.offsetHeight
if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
this.divObj.style.height=0 //collapse content
this.divObj.style.visibility="visible"
}
else //else if persistence is enabled AND this content should be expanded, define its CSS height value so slideup() has something to work with
this.divObj.style.height=this.contentheight+"px"
}


animatedcollapse.prototype._slideengine=function(direction){
var elapsed=new Date().getTime()-this.startTime //get time animation has run
var thisobj=this
if (elapsed<this.timelength){ //if time run is less than specified length
var distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)
this.divObj.style.height=distancepercent * this.contentheight +"px"
this.runtimer=setTimeout(function(){thisobj._slideengine(direction)}, 10)
}
else{ //if animation finished
this.divObj.style.height=(direction=="down")? this.contentheight+"px" : 0
this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or not
this.runtimer=null
}
}


animatedcollapse.prototype.slidedown=function(){
if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
alert("Please wait until document has fully loaded then click again")
else if (parseInt(this.divObj.style.height)==0){ //if content is collapsed
this.startTime=new Date().getTime() //Set animation start time
this._slideengine("down")
}
}
}

animatedcollapse.prototype.slideup=function(){
if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
alert("Please wait until document has fully loaded then click again")
else if (parseInt(this.divObj.style.height)==this.contentheight){ //if content is expanded
this.startTime=new Date().getTime()
this._slideengine("up")
}
}
}

animatedcollapse.prototype.slideit=function(){
if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
alert("Please wait until document has fully loaded then click again")
else if (parseInt(this.divObj.style.height)==0)
this.slidedown()
else if (parseInt(this.divObj.style.height)==this.contentheight)
this.slideup()
}

// -------------------------------------------------------------------
// A few utility functions below:
// -------------------------------------------------------------------

animatedcollapse.curveincrement=function(percent){
return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
}


animatedcollapse.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

animatedcollapse.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

animatedcollapse.setCookie=function(name, value, days){
if (typeof days!="undefined"){ //if set persistent cookie
var expireDate = new Date()
var expstring=expireDate.setDate(expireDate.getDate()+days)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()
}
else //else if this is a session only cookie
document.cookie = name+"="+value
}
3. download smiley.php and safe in mymod dir.

4. Search after in index.template.php or boardindex.template.php depend on where u put shout box.

Code: [Select]

<div style="padding: 1ex 25px 1ex 25px;"id="yshout"', empty($options['collapse_header']) ? '>' : ' style="display: none;">',$txt['yshout_loading'],'<br /><br /></div>
   add

Code: [Select]

<div class="smalltext" style="padding-left:25px;"><a href="javascript:collapse1.slidedown()">Open Smiley</a> | <a href="javascript:collapse1.slideup()">Close</a>';
require('mymod/smiley.php');
loadSmileys();
echo '
<div id="smiley_pic">';
printSmileys('shout_form','shout_text');
echo '
</div>
<script type="text/javascript">
//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse1=new animatedcollapse("smiley_pic", 1000, false)
</script>
</div>
5. Open yshout.php for namely some input.

find

Code: [Select]

<form id="shout-form" action="#">
replace  to

Code: [Select]

<form id="shout-form" name="shout_form" action="#">
find

Code: [Select]

<input id="shout-text" style="color: #666666;" maxlength="125" value="" type="text" />
replace to

Code: [Select]

<input id="shout-text" style="color: #666666;" maxlength="125" value="" type="text" name="shout_text" />
That's it. 

[comptech]

@ruelnov: Odd, bandwidth should not increase appreciably even with a setting of 10; this is equivalent to a usual refresh time of 10 seconds unless people are shouting _very_ often. Have you tried changing Jul222007 in index.template.php to something else, to force a cache update on the clients? An incorrect cached copy of yshout.js in a browser could severely tax the server.
For reference, if nobody shouts, the shoutbox uses about 360KiB/hour per client idling at your settings. This decreases significantly when combined with compression, so, unless you have 250 clients all idling 24/7, bandwidth usage _should_ not be 2GB/day (YMMV!)

@nneonneo: no matter what settings changes I do in yshout.js or yshout.php, bandwidth usage is still between 1GB-2GB per day!

I have also changed Jul222007 to something else already. By the way, we have an average of 150 users online spread the whole day.

Any other idea how to trim the bandwidth usage of this shout box to less than 1GB per day?

[pongsak]

@Mongey: Find all instances of the number 125 and increase the value. It should occur twice as maxlength="125" and once in substr($shoutText,0,125).
@Spale: change $allowGuests in yshout.php to false.
@pongsak: in yshout/js/yshout.js, change

Code: [Select]

function doRefresh() { to

Code: [Select]

var oldShouts = null;
function doRefresh() {
oldShouts = $("shouts").innerHTML;and add

Code: [Select]

if (oldShouts != null && oldShouts != $("shouts").innerHTML)
{
<PLAY SOUND>
}after

Code: [Select]

function schedRefresh() {where "<PLAY SOUND>" is code for producing an audible sound; this varies widely from browser to browser. There are a number of sites on the Internet to find code to play sounds.
And the smileys menu looks nice -- I can't wait to find out how you did it

 I think your code make shout box don't auto update.
It'll show text change when i submitted new message.
Then i correct the code to the old one, it's ok.

[brianjw]

pongsak, is there any way to use one image like the collapse image that changes when smileys are shoiwn. What I mean is showing one image to collapse and expand.

[nneonneo]

@pongsak: For sound, you can try SoundManager (http://www.boutell.com/newfaq/creating/scriptsound.html); it will take some setup work (if I get some time today I'll work out the details)

The smileys guide is quite nice; can I add this functionality into a future version of the shoutbox?

The reason why the "ReturnToShoutbox" is needed is mainly due to the new update code. A good way to fix this would be to add

Code: [Select]

echo readChat($chatFile, $logDir);after

Code: [Select]

echo $txt['yshout_del_success'];which would cause this to appear after a successful deletion:

Code: [Select]

Shout deleted.
[Thu Aug 16 3:24 PM] del ban nneonneo: test shout
<rest of shouts, minus the deleted one>
The reason why the shoutbox doesn't autoupdate is because the code you used to play the sound is broken. Thus, when the scheduler is executed, the incorrect code causes the function to quit before it schedules the next refresh. Using correct code (perhaps using SoundManager) will fix this problem.

@ruelnov: I suppose I should take a look at your forum and check out what it's doing.

@brianjw: Use the code from the [ + ]/[ - ] images in SMF (collapse/uncollapse).

[nneonneo]

Adding sound:
Get SoundManager2 (http://www.schillmania.com/projects/soundmanager2/)
Place soundmanager2.js in yshout/js
Place soundmanager2.swf in yshout/
Place the desired sound in yshout/ and change the URL below to match (MUST BE MP3!)

Place the following code after

Code: [Select]

<script src="',$boardurl,'/yshout/js/yshout.js?July062008" type="text/javascript"></script>in index.template.php:

Code: [Select]

<script src="',$boardurl,'/yshout/js/soundmanager2.js" type="text/javascript"></script>
<script type="text/javascript">soundManager.url="',$boardurl,'/yshout/";
soundManager.debugMode = false;
soundManager.consoleOnly = false;
soundManager.onload = function() {
soundManager.createSound({id:"sound", url:"', $boardurl, '/yshout/sound.mp3", autoPlay:false});
}</script>
(if it does not work, you may have an older soundmanager2, try adding "soundmanager2.swf" after soundManager.url="',$boardurl,'/yshout/)

In yshout/js/yshout.js, after

Code: [Select]

function shoutDone() {add

Code: [Select]

$('shouts').innerHTML = this.transport.responseText;
oldShouts = $('shouts').innerHTML;(that step is optional, but it stops the sound when you shout, and only sounds when others shout)
Replace

Code: [Select]

var request;
// This gets called each refresh; it reloads the shoutboxes content.by

Code: [Select]

function ltrim(text) {
return text.replace(/^\s*/g,'');
}
var request;
// This gets called each refresh; it reloads the shoutboxes content.
var oldShouts = null;
function doRefresh() {
if (oldShouts != null && ltrim(oldShouts) != ltrim($("shouts").innerHTML))
soundManager.play('sound');
oldShouts = $("shouts").innerHTML;
EDIT: Update for newer Soundmanager version (dated Mar 31 2008)
EDIT2: Complete instructions.
EDIT3: Update for new shoutbox versions (1.20+)

[brianjw]

The smileys guide is quite nice; can I add this functionality into a future version of the shoutbox?

Hopefully as an option in yshout.php

Is there anyway to display only some of the smileys because I don't want that many smileys over the shoutbox. Just the basics like
 

Adding sound:
Get SoundManager2 (http://www.schillmania.com/projects/soundmanager2/)
Place soundmanager2.js in yshout/js
Place soundmanager2.swf in yshout/
Place the desired sound in yshout/ and change the URL below to match (MUST BE MP3!)

Place the following code after

Code: [Select]

<script src="',$boardurl,'/yshout/js/yshout.js?Jul222007" type="text/javascript"></script>
<script type="text/javascript">var shoutFile = "home.txt";</script>in index.template.php:

Code: [Select]

<script src="',$boardurl,'/yshout/js/soundmanager2.js" type="text/javascript"></script>
<script type="text/javascript">soundManager.url="',$boardurl,'/yshout/soundmanager2.swf";
soundManager.onload = function() {
soundManager.createSound("sound", "', $boardurl, '/yshout/sound.mp3");
}</script>
Replace <PLAY SOUND> by

Code: [Select]

soundManager.play('sound')
It should work (hasn't been tested as my server is being odd today)

Do you have any good shout mp3 sounds like if you use aim that sound or any sound thats not annoying lol?