The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Chat Box features

View previous topic View next topic Go down

Solved Chat Box features

Post by Royer Blaze on June 3rd 2015, 11:49 pm

I'm trying to make it so that when someone posts in my chat box that one, it alerts me/members with a tone or sound to get their attention when looking else where. Two I am trying to get the page/tab to flash to alert to new messages in the chat should they have their sound off. Three I am trying to rename my chatbox instead of chatbox, naming it after my forum, as can be seen in the last line of code.

I found some codes for that here, but can't get them to work. I posted them in my CSS stylesheet.

Please and thank you for all the help in advance.


Code:
#wrap {

   background-color: rgba(50,0,0,0.3);background-repeat: repeat-x;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

-o-transition: background-color 0.2s linear;
-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;

   }
a { text-decoration: none; }
blockquote {
   border: 1px solid #000000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 10px;
-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;

   }
a.button1, input.button1, a.button2, input.button2, button.button2 {
background-image: url("http://i61.servimg.com/u/f61/14/21/31/20/gradie20.png");
color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3px;
font-family: comic sans ms;
color: #000000;}

#text_editor_controls a.button2,#text_editor_controls input.button2,#text_editor_controls button.button2{
background-image: url("http://i61.servimg.com/u/f61/14/21/31/20/gradie20.png");
color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3px;}
#search{
display:none;
}


.inputbox {
   background-color: rgba(0,0,50,0);

    border: 1px solid #BCBCBC;
   color: #ffffff;
   padding: 2px;
   cursor: text;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;

   }

.inputbox:hover {

background-color: rgba(0,0,50,0);
    border: 1px solid #BCBCBC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
border-color: #111010;
-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;
    }

fieldset dl {
   padding: 4px 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
   }
fieldset.fields1 dt {
   width: 10em;
   border-right-width: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
   }
fieldset.submit-buttons {
   text-align: center;
   vertical-align: middle;
   margin: 5px 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
   }

.navbar {
   clear: both;
   background-image: url("http://i61.servimg.com/u/f61/14/21/31/20/untitl10.png");
   padding:0px 10px;

background-repeat: repeat-x;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

-o-transition: background-color 0.2s linear;
-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;
   }
dl.codebox {
   padding: 3px;
   background-color: #FFFFFF;
   border: 1px solid #C9D2D8;
   font-size: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
border: 1px solid #101010;
   }
.forabg {
   clear: both;
   background-image: url("http://i61.servimg.com/u/f61/14/21/31/20/untitl10.png");
   padding:0px 10px;

background-repeat: repeat-x;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

-o-transition: background-color 0.2s linear;
-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;
   }
.forumbg {
   clear: both;
   background-image: url("http://i61.servimg.com/u/f61/14/21/31/20/untitl10.png");
   padding:0px 10px;

background-repeat: repeat-x;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

-o-transition: background-color 0.2s linear;
-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;


   }
.panel {
      clear: both;
   background-image: url("http://i61.servimg.com/u/f61/14/21/31/20/untitl10.png");
   padding:0px 10px;

background-repeat: repeat-x;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

-o-transition: background-color 0.2s linear;
-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;
   }
.post {
   padding: 0 10px;
   margin-bottom: 4px;
   background-repeat: no-repeat;
   background-position: 100% 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 10px;


-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;
   }
.postprofile {
   color: #ffffff;
   margin: 5px 0 0px 0;
   min-height: 80px;
   border-right-style: solid;
   border-right-width: 1px;
   border-color: transparent;
   width: 22%;
   float: left;
   display: inline;
   position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
   }
#cp-main {
   float: left;
   width: 98%;
   margin-left: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
   }
#cp-main .panel {
   
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
   }
#cp-main table.table1 {
   margin-bottom: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
   }
#ucp-main table.table1 {
   padding: 2px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
   }
#tabs {
   line-height: normal;
   margin: 20px 0 -1px 7px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
   
/*min-width: 570px;
   */
}
#smiley-box {
   
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
   }

ul.profile-icons {
   margin-top: 10px;
   list-style: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
   }
#message-box textarea {
   
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
   }
.module {
   clear: both;
   background-image: url("http://i61.servimg.com/u/f61/14/21/31/20/untitl10.png");
   padding:0px 10px;

background-repeat: repeat-x;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

-o-transition: background-color 0.2s linear;
-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;
   }

.signature {
   
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
border-color: #111010;

   }
body.chatbox {


background-image: url('http://i60.servimg.com/u/f60/14/70/09/25/body-r10.png');

   }

/* Login Popup---------------------------------------------------*/
#login_popup {
background-color: #262627;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
background-image: url('http://i30.servimg.com/u/f30/14/70/09/25/glossy10.png') ;
border: 1px solid #101010;
-moz-box-shadow : 0 0 9px #000000;
-webkit-box-shadow : 0 0 9px #000000;   
background-repeat: repeat-x;
}/*Chatbox*/
#chatButton{
box-shadow:0px 10px 6px rgba(255,255,255, 0.2) inset, 0px -10px 6px rgba(0,0,0, 0.2) inset;
padding:10px 20px 10px 20px;
background-color:#257;
border:1px solid #146;
font-weight:bold;
font-size:10px;
z-index:999;
color:#fff;
}
#chatButton:hover{
cursor:pointer;
color:#ff8;
background-color:#368;
}
#chatBox iframe{
z-index:999;
border:none;
height:500px;
width:700px;
}window.localStorage && $(window).load(function() {
var chatbox_script = function() {
var sounds = {
'future': 'http://illiweb.com/fa/fdf/future.mp3',
'hal': 'http://illiweb.com/fa/fdf/hal.mp3',
'secret': 'http://illiweb.com/fa/fdf/secret.mp3',
'zelda': 'http://illiweb.com/fa/fdf/zelda.mp3'
};
var default_sound = sounds['zelda'];
var default_freq = 'new';
var default_when = 'once';
var default_volume = 80;


if(localStorage.cb_sound && !localStorage.cb_sound.indexOf('https://dl.dropboxusercontent.com/u/181621985/')) localStorage.removeItem('cb_sound');
var a = document.createElement('audio');
if(!a.canPlayType) return;
a.volume = Math.min(1, Math.max(0, localStorage.cb_volume||(default_volume/100)));

var origin_send = Chatbox.prototype.send;
Chatbox.prototype.send = function(params) {
var m = $.trim($("#message").val());
if(m.indexOf('/sound')&&m.indexOf('/soudn'))
return origin_send.call(this, params);
m = $.trim(m.substr(6)).split(/\s+/,3);
var bad_apple = false;
switch(m[0].toLowerCase()) {
case "":
if(!a.src) {
a.src = localStorage.cb_sound||default_sound;
a.load();
}
a.play();
break;
case "all":
case "new":
localStorage.cb_freq = m[0]; break;
case "always":
case "off":
case "on":
case "once":
case "never":
localStorage.cb_when = m[0]; break;
case "stop":
if(!a.paused) a.pause();
if(!a.ended) a.currentTime = 0;
break;
case "pause":
if(!a.paused) a.pause();
break;
case "volume":
if(m.length>1) {
localStorage.cb_volume = Math.min(1, Math.max(0, parseFloat(m[1].replace(',','.'))/100));
a.volume = localStorage.cb_volume;
break
}
default:
bad_apple = true;
};
if(bad_apple) {
if(m[0] in sounds) {
m[0]= sounds[m[0]];
}
if(m[0]=="default") {
m[0]=default_sound;
localStorage.removeItem('cb_sound');
localStorage.removeItem('cb_freq');
localStorage.removeItem('cb_volume');
localStorage.removeItem('cb_when');
a.volume = Math.min(1, Math.max(0, default_volume/100));
}
if(/^https?:\/\/.+/.test(m[0])) {
localStorage.cb_sound = m[0];
a.pause();
a.src = m[0];
a.load();
a.play();
} else {
var message = $('#message').val();
alert('/sound [all | new]\n/sound [always | off | on | once | never]\n/sound [stop | pause]\n/sound default\n/sound volume 0-100\n/sound ['+$.map(sounds,function(_,k){return k}).join(' | ')+']\n/sound [http://* | https://*]');
setTimeout(function(){ $("#message").val(message).select().focus(); }, 100);
return;
}
}
return $("#message").val('').focus();
};

$(window).on("focus", function(){ localStorage.removeItem('cb_once'); localStorage.removeItem('cb_blurred') }).on("blur", function(){ localStorage.cb_blurred=1; });

var play_sound = function(){
if(a.paused || a.ended) {
a.currentTime=0;
if(!a.src) {
a.src = localStorage.cb_sound||default_sound;
a.load()
}
a.play()
}
};
var overrided = Chatbox.prototype.refresh;
Chatbox.prototype.refresh = function(data) {
if (data.messages && data.messages.length) {
var lm = data.messages.slice(-1)[0];
var last_message = lm.time+','+lm.action+','+lm.msg;
if(this.last_message_sound != last_message) {
var user = $.grep(data.users, function(v){return v.id==chatbox.userId});
user = user.length ? user[0] : [{}];
if(this.last_message_sound!==undefined) {
var freq = (localStorage.cb_freq||default_freq);
var when = (localStorage.cb_when||default_when);
console.log([when, freq, localStorage.cb_blurred, localStorage.cb_once]);
if(when != "never" && (when != "off" || localStorage.cb_blurred) && (when != "on" || !localStorage.cb_blurred) && (when != "once" || (localStorage.cb_blurred && !localStorage.cb_once))) {
console.log([when, freq, localStorage.cb_blurred, localStorage.cb_once]);
if(freq =="all" || (lm.userId!=chatbox.userId && user.username!=lm.username)) {
if(when!="once" || !localStorage.cb_once) {
play_sound();
localStorage.cb_once = 1;
}
}
}
}
this.last_message_sound = lm;
}
}
overrided.call(this, data);
};
};
var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
});
$(window).load(function() {
var chatbox_script = function() {
$("a.chat-title").text("The Golden Darkage");
};

var
s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
});
That's my code copied and pasted from my CSS Stylesheet.


Last edited by Royer Blaze on June 5th 2015, 5:38 am; edited 1 time in total

Royer Blaze
Forumember

Male Posts : 87
Reputation : 1
Language : English

http://thegoldendarkage.motionsforum.com/

Back to top Go down

Solved Re: Chat Box features

Post by Royer Blaze on June 5th 2015, 1:16 am

Bump, please and thank you.

Royer Blaze
Forumember

Male Posts : 87
Reputation : 1
Language : English

http://thegoldendarkage.motionsforum.com/

Back to top Go down

Solved Re: Chat Box features

Post by SLGray on June 5th 2015, 4:12 am

CSS will not add a sound to the chatbox.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36735
Reputation : 2447
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Chat Box features

Post by Royer Blaze on June 5th 2015, 4:49 am

@SLGray wrote:CSS will not add a sound to the chatbox.
Ah, perhaps I posted it in the wrong spot... maybe if I add that bit to the Javascript for the chatbox?

Royer Blaze
Forumember

Male Posts : 87
Reputation : 1
Language : English

http://thegoldendarkage.motionsforum.com/

Back to top Go down

Solved Re: Chat Box features

Post by FrOsTyXi on June 5th 2015, 5:00 am


FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chat Box features

Post by Royer Blaze on June 5th 2015, 5:06 am

I used these in my code, in the CSS stylesheet, but they don't seem to work. Where I added them is in the OP in the code.

Royer Blaze
Forumember

Male Posts : 87
Reputation : 1
Language : English

http://thegoldendarkage.motionsforum.com/

Back to top Go down

Solved Re: Chat Box features

Post by FrOsTyXi on June 5th 2015, 5:10 am

@Royer Blaze Most of the codes on that thread are JavaScript's they will not work VIA CSS


Path:

Modules/JavaScript Management/Create New JavaScript

FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Chat Box features

Post by Royer Blaze on June 5th 2015, 5:38 am

@FrOsTyXi wrote:@Royer Blaze Most of the codes on that thread are JavaScript's they will not work VIA CSS


Path:

Modules/JavaScript Management/Create New JavaScript
Blast that'd be my bad completely. I'd misunderstood the directions. I was only posting it in CSS, and not in my JavaScript's. Their working perfectly now. Thank you!

Royer Blaze
Forumember

Male Posts : 87
Reputation : 1
Language : English

http://thegoldendarkage.motionsforum.com/

Back to top Go down

Solved Re: Chat Box features

Post by SLGray on June 5th 2015, 8:35 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36735
Reputation : 2447
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum