Embed the popup smiley box using jquery

[dmpops22]

I have been looking for a month now to no avail, i have even tried myself and im getting no where, so one last attempt to get some help.

What i want is to click the get more button on the smileys and have the usual popup appear below the edit box but above post options with a slider.

I have seen it done at this site - http://ctcantina.com/index.php but im not sure how.

Can anyone help me overcome this?

[Johnny S]

If you are using MyBB 1.6 first include jquery library in your headerinclude template (under the condition that you don't have it) (ACP -> templates and styles -> templates -> <your theme template set> -> ungrouped templates -> headerinclude) and at he bottom of that template paste

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>

NOTE: Do this ONLY if you didn't included jquery before (to find out if you did just look at jquery reference in your headerinclude before pasting this).


In images folder create a file called more_smilies.js and paste the following content inside

jQuery(document).ready(function($) {

$("a[href*='openGetMoreSmilies']").click(function (e) {
  e.preventDefault();
  if($('.smilie_row').length == 0) {
  $(this).parents("form[method*='post']").find(".messageEditor").parents("tr").after($("<tr class='smilie_row' style='display:none;'><td class='trow1' valign='top'><strong>More smilies:</td><td valign='vtop' class='trow1 smilie_box' id='clickable_smilies'>Loading smilies, please wait.</td></tr>"));
  $(".smilie_box").load("misc.php?action=smilies&popup=true img", function () {
  $("tr.smilie_row").show();
  $(".smilie_box img").removeAttr("onclick").addClass("smilie").wrap('<span></span>');
  });
  } else {

  }

});
  
 
$(document).ajaxComplete(function(){
  $(".smilie_box img").click(function () {
   var title = $(this).attr('title');

$.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      var sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      //For browsers like Firefox and Webkit based
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  });
}
}); 
   
$('textarea').insertAtCaret(title);
   
}); 
});
  
  
  
});

In ungrouped template set find codebuttons template and at the bottom of that template add

<script type="text/javascript" src="images/more_smilies.js"></script>

and in global.css that is used by your theme add

.smilie_box img {
 display:inline-block;
 vertical-align:middle;
 margin:2px;
}

I've included more_smilies.js (along with a preview) in a attachment. More_smilies file contains "insert into textarea" function that i've found on StackOverflow long time ago (i'm not taking any credits for it).

[dmpops22]

If you are using MyBB 1.6 first include jquery library in your headerinclude template (under the condition that you don't have it) (ACP -> templates and styles -> templates -> <your theme template set> -> ungrouped templates -> headerinclude) and at he bottom of that template paste

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>

NOTE: Do this ONLY if you didn't included jquery before (to find out if you did just look at jquery reference in your headerinclude before pasting this).


In images folder create a file called more_smilies.js and paste the following content inside

jQuery(document).ready(function($) {

$("a[href*='openGetMoreSmilies']").click(function (e) {
  e.preventDefault();
  if($('.smilie_row').length == 0) {
  $(this).parents("form[method*='post']").find(".messageEditor").parents("tr").after($("<tr class='smilie_row' style='display:none;'><td class='trow1' valign='top'><strong>More smilies:</td><td valign='vtop' class='trow1 smilie_box' id='clickable_smilies'>Loading smilies, please wait.</td></tr>"));
  $(".smilie_box").load("misc.php?action=smilies&popup=true img", function () {
  $("tr.smilie_row").show();
  $(".smilie_box img").removeAttr("onclick").addClass("smilie").wrap('<span></span>');
  });
  } else {

  }

});
  
 
$(document).ajaxComplete(function(){
  $(".smilie_box img").click(function () {
   var title = $(this).attr('title');

$.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      var sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      //For browsers like Firefox and Webkit based
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  });
}
}); 
   
$('textarea').insertAtCaret(title);
   
}); 
});
  
  
  
});

In ungrouped template set find codebuttons template and at the bottom of that template add

<script type="text/javascript" src="images/more_smilies.js"></script>

and in global.css that is used by your theme add

.smilie_box img {
 display:inline-block;
 vertical-align:middle;
 margin:2px;
}

I've included more_smilies.js (along with a preview) in a attachment. More_smilies file contains "insert into textarea" function that i've found on StackOverflow long time ago (i'm not taking any credits for it).

That definitely helps with progress, I guess all that is left is to ask if their is a way to add them to tables like they are within the popup with a slider, as these smilies are pretty large

Damn your my savior

[Johnny S]

In that case (if you want the whole more smilies stuff inside) upload more_smilies.js and in global.css add

.smilie_box {
overflow:scroll;
}


.smilie_box .thead, .smilie_box .tcat, .smilie_box .tfoot {
display:none;
}


Also i've attached a new more_smilies.js (contains a fix if you are in UserCP / PM area - smilies will load multiple times).

[dmpops22]

In that case (if you want the whole more smilies stuff inside) upload more_smilies.js and in global.css add

.smilie_box {
overflow:scroll;
}


.smilie_box .thead, .smilie_box .tcat, .smilie_box .tfoot {
display:none;
}


Also i've attached a new more_smilies.js (contains a fix if you are in UserCP / PM area - smilies will load multiple times).

Hmm that doesnt seem to limit the width/add a scrollbar, but the fix for usercp does work

here is what i have,

.smilie_box img {
display:inline-block;
vertical-align:middle;
margin:2px;

}

.smilie_box {

overflow:scroll;

}

.smilie_box .thead, .smilie_box .tcat, .smilie_box .tfoot {

display:none;

}

[Johnny S]

Try with following one.

Also in your global.css

replace

.smilie_box {

overflow:scroll;

}

with

.smilie_box > div{
overflow:scroll;
width:100%;
height:100%;

}

[dmpops22]

Try with following one.

Also in your global.css

replace

.smilie_box {

overflow:scroll;

}

with

.smilie_box > div{
overflow:scroll;
width:100%;
height:100%;

}

still no change im afraid.

---

K i got the sidbar to appear, although it does not work quite yet as the area in which the smileys appear is really big, Can i set a limit on the width and height of the embed?

changing the % .smilie_box > div{ does nothing/

---

Try with following one.

Also in your global.css

replace

.smilie_box {

overflow:scroll;

}

with

.smilie_box > div{
overflow:scroll;
width:100%;
height:100%;

}

still no change im afraid.

---

K i got the sidbar to appear, although it does not work quite yet as the area in which the smileys appear is really big, Can i set a limit on the width and height of the embed?

changing the % .smilie_box > div{ does nothing/

Actually i think i have it.....Will et you know soon.

---

Ok i have it somewhat acceptable to what is was, although the scrollbar never really activates as every new smilies just makes the height increase. Is it possible to add a bit of text/link that will close it too, at the very top? and is it possible to do the same and have a bit of text/link that will stop the animations from playing?

Thanks for all your help so far.

[Johnny S]

find

.smilie_box img {
display:inline-block;
vertical-align:middle;
margin:2px;

}

and replace it with

.smilie_box img {
max-height:40px;
max-width:40px;
display:inline-block;
vertical-align:middle;
}

change max height and width values to something else (greater or lesser). Also if you want add

height:40px;
width:40px;

after

vertical-align:middle;

if you want to have the same height / width values for all smilies.

[dmpops22]

find

.smilie_box img {
display:inline-block;
vertical-align:middle;
margin:2px;

}

and replace it with

.smilie_box img {
max-height:40px;
max-width:40px;
display:inline-block;
vertical-align:middle;
}

change max height and width values to something else (greater or lesser). Also if you want add

height:40px;
width:40px;

after

vertical-align:middle;

if you want to have the same height / width values for all smilies.

thats great, just a shame i cant stop the boxes growing, set it fixed, and get the slider working.

But i can settle for a way to close the smiley box once its open, if you know how?

[Johnny S]

In more_smilies.js

find

} else {

}

and replace it with

} else {
$(".smilie_row").toggle();
}