Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Solved: 5 Years, 3 Weeks ago Embed the popup smiley box using jquery
#1
Solved: 5 Years, 3 Weeks ago
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?
#2
Solved: 5 Years, 3 Weeks ago
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).


Attached Files Thumbnail(s)
   

.js   more_smilies.js (Size: 1.75 KB / Downloads: 54)
#3
Solved: 5 Years, 3 Weeks ago
(09-25-2014, 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 Big Grin

Damn your my savior
#4
Solved: 5 Years, 3 Weeks ago
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).


Attached Files
.js   more_smilies.js (Size: 1.79 KB / Downloads: 42)
#5
Solved: 5 Years, 3 Weeks ago
(09-25-2014, 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 Big Grin

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;

}
#6
Solved: 5 Years, 3 Weeks ago
Try with following one.

Also in your global.css

replace

.smilie_box {

overflow:scroll;

}

with

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

}


Attached Files
.js   more_smilies.js (Size: 1.8 KB / Downloads: 45)
#7
Solved: 5 Years, 3 Weeks ago
(09-25-2014, 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/

(09-25-2014, 02:54 PM)dmpops22 Wrote:
(09-25-2014, 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.
#8
Solved: 5 Years, 3 Weeks ago
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.
#9
Solved: 5 Years, 3 Weeks ago
(09-25-2014, 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?
#10
Solved: 5 Years, 3 Weeks ago
In more_smilies.js

find

} else {

}

and replace it with

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


Forum Jump:


Users browsing this thread: 1 Guest(s)