Makestation

Full Version: Smileys on klick shoutbox
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Smileys on klick shoutbox ....I found something on the net and adapted something
Looks good! How did you get this working?
you know yes I can not program, I always just try something and am happy if it works, you can certainly improve it very much, here in the appendix the text file, very easy
Code:
replace the original dvz_shoutbox_panel in ACP -> Templates and Styles -> Templates -> Global Templates -> dvz_shoutbox_panel

With:


<div class="panel">
&raquo;
                <img src="{$theme['imgdir']}/smilies/smile.png" alt=":)" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/wink.png" alt=";)" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/cool.png" alt=":cool:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/biggrin.png" alt=":D" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/tongue.png" alt=":P" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/rolleyes.png" alt=":rolleyes:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/shy.png" alt=":shy:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/sad.png" alt=":sad:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/at.png" alt=":at:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/angel.png" alt=":angel:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/angry.png" alt=":@" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/blush.png" alt=":blush:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/confused.png" alt=":s" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/dodgy.png" alt=":dodgy:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/exclamation.png" alt=":exclamation:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/heart.png" alt=":heart:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/huh.png" alt=":huh:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/lightbulb.png" alt=":idea:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/sleepy.png" alt=":sleepy:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/undecided.png" alt=":-/" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/cry.png" alt=":cry:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/sick.png" alt=":sick:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/arrow.png" alt=":arrow:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/my.png" alt=":my:" class="smilie_dvz clickable">
    </div>
<div class="panel">
<form>
<input type="text" id="dvz_input" class="text" placeholder="{$lang->dvz_sb_default}" maxlength="{$maxlength}" autocomplete="off" />
<input type="submit" style="display:none" />
</form>
</div>
<script>
        $('.smilie_dvz').click(function() {
            var smilie = $(this).attr("alt"),
                inputValue = $('#dvz_input').val();
            $('#dvz_input').val(inputValue + smilie);
        });
    </script>
We will give it a try here. Thank you. Smile
Please, please, I'm happy here in detail

Code:
replace in dvz_shoutbox_panel in ACP -> Templates and Styles -> Templates -> Global Templates -> dvz_shoutbox_panel:

This

<input type="text" class="text" placeholder="{$lang->dvz_sb_default}" maxlength="{$maxlength}" autocomplete="off" />


with

<input type="text" id="dvz_input" class="text" placeholder="{$lang->dvz_sb_default}" maxlength="{$maxlength}" autocomplete="off" />


########
next

paste over:


<div class="panel"> 


this :


<div class="panel">
&raquo;
                <img src="{$theme['imgdir']}/smilies/smile.png" alt=":)" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/wink.png" alt=";)" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/cool.png" alt=":cool:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/biggrin.png" alt=":D" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/tongue.png" alt=":P" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/rolleyes.png" alt=":rolleyes:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/shy.png" alt=":shy:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/sad.png" alt=":sad:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/at.png" alt=":at:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/angel.png" alt=":angel:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/angry.png" alt=":@" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/blush.png" alt=":blush:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/confused.png" alt=":s" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/dodgy.png" alt=":dodgy:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/exclamation.png" alt=":exclamation:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/heart.png" alt=":heart:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/huh.png" alt=":huh:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/lightbulb.png" alt=":idea:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/sleepy.png" alt=":sleepy:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/undecided.png" alt=":-/" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/cry.png" alt=":cry:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/sick.png" alt=":sick:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/arrow.png" alt=":arrow:" class="smilie_dvz clickable">
                <img src="{$theme['imgdir']}/smilies/my.png" alt=":my:" class="smilie_dvz clickable">
    </div>
    
    
    
    next:
    
    and at the end
    
    <script>
        $('.smilie_dvz').click(function() {
            var smilie = $(this).attr("alt"),
                inputValue = $('#dvz_input').val();
            $('#dvz_input').val(inputValue + smilie);
        });
    </script>
Done! Works great. Smile
(April 19th, 2020 at 1:24 PM)Darth-Apple Wrote: [ -> ]Done! Works great. Smile



tried again and learned something Big Grin