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
avatar
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.
avatar
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.

avatar
SLGray
Administrator
Administrator

Male Posts : 40448
Reputation : 2728
Language : English
Location : United States

https://fmthemes.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?
avatar
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

avatar
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.
avatar
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
avatar
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!
avatar
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.

avatar
SLGray
Administrator
Administrator

Male Posts : 40448
Reputation : 2728
Language : English
Location : United States

https://fmthemes.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