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?
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).
(2014-09-25, 01:31 PM)Johnny S Wrote: [ -> ]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
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).
(2014-09-25, 02:05 PM)Johnny S Wrote: [ -> ]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;
}
Try with following one.
Also in your global.css
replace
.smilie_box {
overflow:scroll;
}
with
.smilie_box > div{
overflow:scroll;
width:100%;
height:100%;
}
(2014-09-25, 02:45 PM)Johnny S Wrote: [ -> ]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/
(2014-09-25, 02:54 PM)dmpops22 Wrote: [ -> ] (2014-09-25, 02:45 PM)Johnny S Wrote: [ -> ]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.
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.
(2014-09-25, 04:02 PM)Johnny S Wrote: [ -> ]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?
In more_smilies.js
find
} else {
}
and replace it with
} else {
$(".smilie_row").toggle();
}