News:

Wondering if this will always be free?  See why free is better.

Main Menu

Tip/Trick: Closing the 'More' smiley popup window

Started by Steve, October 15, 2022, 08:36:52 AM

Previous topic - Next topic

Steve

When one clicks the 'More' button in the smiley row (if you have enough smileys for that button to show up), a window opens that populates with all the rest of the smileys you have.

Only problem is, you can only close it by scrolling to the bottom of the window and clicking 'close'.

The following, provided by @Diego Andrés will allow you to close it by clicking outside the window or hitting ESC:


Themes/default/scripts/jquery.sceditor.smf.js

Code (Search) Select
popupContent.append(titlebar);
closeButton = $('<span class="button">').text(base._('Close')).click(function () {
$(".sceditor-smileyPopup").fadeOut('fast');
});

Code (Add After) Select
$(document).mouseup(function (e) {
if (allowHide && !popupContent.is(e.target) && popupContent.has(e.target).length === 0)
$(".sceditor-smileyPopup").fadeOut('fast');
}).keyup(function (e) {
if (e.keyCode === 27)
$(".sceditor-smileyPopup").fadeOut('fast');
});
DO NOT pm me for support!


jsx

A good and needed solution. @Steve thanks for starting a topic about it and @Diego Andrés thank you for providing a solution.

Steve

You're quite welcome. That was one of the two things about 2.1.2 that was driving me bonkers lol.
DO NOT pm me for support!

Shades.

Quote from: Steve on October 15, 2022, 08:36:52 AMThemes/default/scripts/jquery.sceditor.smf.j
So if I have created a custom "jquery.sceditor.theme.css" do I need to add it there in my custom theme or "default/scripts/jquery.sceditor.smf.js" or both?
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Diego Andrés

None, you can just edit the js file from the default theme.
Custom themes should not include that JavaScript file anyways.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Steve

Actually, a couple of mine do have that .js file and I had to put the code in there to make it work for those themes.
DO NOT pm me for support!

Shades.

Quote from: Diego Andrés on October 18, 2022, 09:52:23 AMCustom themes should not include that JavaScript file anyways.
I confused myself now I feel dumb! ::) I was looking at the "jquery.sceditor" part thinking it was a CSS file (jquery.sceditor.css). ;D  :o ::)

Quote from: Steve on October 18, 2022, 10:50:03 AMActually, a couple of mine do have that .js file and I had to put the code in there to make it work for those themes.
I would think if I wanted to put this in a new theme and package it up (not that I'm going to, just curious) ;) I would have to include the modified jquery.sceditor.smf.js file. Would the custom theme pick it up or does it HAVE to be in the default theme?
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Diego Andrés

Quote from: Shades. on October 18, 2022, 02:38:19 PMI would think if I wanted to put this in a new theme and package it up (not that I'm going to, just curious) ;) I would have to include the modified jquery.sceditor.smf.js file. Would the custom theme pick it up or does it HAVE to be in the default theme?

Oh yes in that case sure.
I suppose I only intended to reflect the fact that it's not really a common file to edit, and rather not include unmodified files in themes  :P

SMF Tricks - Free & Premium Responsive Themes for SMF.

Steve

The custom theme will pick it up as long as that .js file is not part of it. So, as Diego said, it would have to be in the default theme.
DO NOT pm me for support!

MobileCS

Great tip!

The only change I made was make it focus the post box when the smiley popup box was closed.

Find:
$(".sceditor-smileyPopup").fadeOut('fast');
Add after:
$('.sceditor-container textarea').focus();

Advertisement: