Welcome to Admin Junkies, Guest — join our community!

Register or log in to explore all our content and services for free on Admin Junkies.

Smiles on shoutbox

mastersly

Addicted member
Joined
Apr 29, 2020
Messages
988
Credits
0
Preview
OrG8t3c.png


[hide=5]
Go

REPLACE EVERYTHING WITH THIS
Code:
<div class="panel">
<form>
<input type="text" id="dvz_shoutbox_input" class="text" placeholder="Remember,be nice" maxlength="{$maxlength}" autocomplete="off" />


<div class="popupsmilesbyanonshare" onclick="myFunctionsoutb()">
? <i class="fas fa-smile-wink" aria-hidden="true"></i><span class="popuptextbyanonshoutbox" id="myPopupshoutbox">

<div id="smilies_box">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/angel.png" alt=":angel:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/heart.png" alt=":heart:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/oops.png" alt=":oops:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/wink.png" alt=":wink:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/nice.png" alt=":nice:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/frown.png" alt=":frown:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/crying.png" alt=":crying:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/huh.png" alt=" :huh:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/omg.png" alt=":omg:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/zZzzZ.png" alt=":zZzzZ:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/tounge.png" alt=":tounge:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/blush.png" alt=":blush:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/skeptical.png" alt=":skeptical:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/cool.png" alt=":cool:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/happywide.png" alt=":happywide:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/bigeyes.png" alt=":bigeyes:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/cash.png" alt=":cash:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/sad.png" alt=":sad:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/finna.png" alt=":finna:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/love.png" alt=":love:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/bitcoin_emoji.png" alt=":bitcoin_emoji:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/disappointed.png" alt=":disappointed:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/angry.png" alt=":angry:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/flex.png" alt=":flex:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/peace.png" alt=":peace:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/devil.png" alt=":devil:" class="smilie_dvz clickable">
? ? ? ? ? ? ? ? <img src="{$mybb->settings['bburl']}/images/smilies/FBSmiles/alien.png" alt=":alien:" class="smilie_dvz clickable">
</div>
<script>
? ? $('.smilie_dvz').click(function() {
? ? ? ? var smilie = $(this).attr("alt"),
? ? ? ? ? ? inputValue = $('#dvz_shoutbox_input').val();
? ? ? ? $('#dvz_shoutbox_input').val(inputValue + smilie);
? ? });
</script>

</span>
</div>
<input type="submit" style="display:none"/>
</form>
</div>




<script>
// When the user clicks on <div>, open the poapup
function myFunctionsoutb() {
? var popup = document.getElementById("myPopupshoutbox");
? popup.classList.toggle("show");
}
</script>

ACP >>Templates & Style>>Themes>>YOUR THEME>>Global.css

ADD THIS

Code:
.panel {
position: relative;
}

.popupsmilesbyanonshare {
? ? width: 20px;
? ? height: 20px;
? ? content: ' ';
? ? position: absolute;
? ? right: 4px;
? ? top: 10px;
? ? cursor: pointer;
}

/* Popup container */
.popupsmilesbyanonshare {
? display: inline-block;
? cursor: pointer;
}

/* The actual popup (appears on top) */
.popupsmilesbyanonshare .popuptextbyanonshoutbox {
? ? visibility: hidden;
? ? width: 250px;
? ? background-color: #525151;
? ? color: #fff;
? ? text-align: center;
? ? border-radius: 6px;
? ? padding: 8px 0;
? ? position: absolute;
? ? z-index: 1;
? ? bottom: -33px;
? ? left: -257px;
}

/* Popup arrow */
.popupsmilesbyanonshare .popuptextbyanonshoutbox::after {
content: "";
? ? position: absolute;
? ? top: 46%;
? ? left: 100%;
? ? border-width: 5px;
? ? border-style: solid;
? ? border-color: #fff0 #af1f1f00 #03ff3a00 #555555;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popupsmilesbyanonshare .show {
? visibility: visible;
? -webkit-animation: fadeIn 1s;
? animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
? from {opacity: 0;}
? to {opacity: 1;}
}

@keyframes fadeIn {
? from {opacity: 0;}
? to {opacity:1 ;}
}

Notes:Smiles will not appear on popup box because i have different location
EXAMPLE
Code:
<img src="{$mybb->settings['bburl']}/images/smilies/New/sick.png" alt="SMILETAGS" class="smilie_dvz clickable">

Replace this /images/smilies/New/sick.png with your smile location and this alt="SMILETAGS" with your smile text
DO THIS TO ALL YOUR SMILES
[/hide]
 
Advertisement Placeholder
Emoticons is a great thing that needs to be added to all forums because i think that it adds a sense of light heartedness to the forum and makes it a bit more free as well.
 

Log in or register to unlock full forum benefits!

Log in or register to unlock full forum benefits!

Register

Register on Admin Junkies completely free.

Register now
Log in

If you have an account, please log in

Log in
Who read this thread (Total readers: 0)
No registered users viewing this thread.

Would You Rather #9

  • Start a forum in a popular but highly competitive niche

    Votes: 9 27.3%
  • Initiate a forum within a limited-known niche with zero competition

    Votes: 24 72.7%
Win this space by entering the Website of The Month Contest

Theme editor

Theme customizations

Graphic Backgrounds

Granite Backgrounds