What is the most efficient way to create a smiley face emoji box using HTML?

I want to incorporate a box with smiley icons above the comment section that opens with a click using jQuery. Here's what I have come up with:

<div class="emo">
  <i href="#" id="showhide_emobox">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
  <div id="emobox">
    <input class="emoticon" id="icon-smile" type="button" value=":)" />
    <input class="emoticon" id="icon-sad" type="button" value=":(" />
    <input class="emoticon"  id="icon-widesmile" type="button" value=":D" /> <br>

  </div>
</div>

css:

.emoticon-smile{
    background: url('../smileys/smile.png');
}

 #icon-smile {
     border: none;
     background: url('../images/smile.gif') no-repeat;  
}

jQuery:

 //  =======show hide emoticon div============
$('#showhide_emobox').click(function(){
    $('#emobox').toggle();
    $(this).toggleClass('active');

    });  


//  ============add emoticons============


 $('.emoticon').click(function() {
    var textarea_val = jQuery.trim($('.user-comment').val());
    var emotion_val = $(this).attr('value');

    if (textarea_val =='') {
    var sp = '';
    } else {
      var sp = ' ';  
    }
    $('.user-comment').focus().val(textarea_val + sp + emotion_val + sp);

    });

However, I am struggling with arranging the buttons in a clean array and creating a background image for them (the button values are displayed before the image and the array is not perfectly rectangular). I am beginning to question whether this is the most effective way to design this box.

Does anyone have any suggestions on how to approach this properly?

htmlcss

Answer №1

Display images initially, then switch to text on hover. No need for input elements to extract text from Dom Node

Here is an example of how this can be achieved:

$(document).ready(function() {
  $(".wrapper").click(function() {
    var value = $(this).find(".smily-text").text();
    console.log(value);
    alert("Text inside the smiley: '" + value + "'");
  });
});
.smily {
  background: url(http://www.smiley-lol.com/smiley/manger/grignoter/vil-chewingum.gif) no-repeat center center;
  width: 45px;
  height: 45px;
}
.smily-text {
  display: none;
  font-size: 20px;
  text-align: center;
  line-height: 45px;
  height: 45px;
  width: 45px;
}
.wrapper {
  border: 1px solid red;
  float: left;
  cursor: pointer;
}
.wrapper:hover .smily {
  display: none;
}
.wrapper:hover .smily-text {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="smily"></div>
  <div class="smily-text">:)</div>
</div>
<div class="wrapper">
  <div class="smily"></div>
  <div class="smily-text">:(</div>
</div>
<div class="wrapper">
  <div class="smily"></div>
  <div class="smily-text">:]</div>
</div>
<div class="wrapper">
  <div class="smily"></div>
  <div class="smily-text">:[</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Showcasing extensive text in a Bootstrap pop-up message

I'm having some trouble showing a lengthy text in a twitter bootstrap tooltip. As you can observe from the image below, it's not working perfectly. Is there an easy solution to handle text that is too long for the bootstrap tooltip? EDIT (includ ...

jquerycsstwitter-bootstraptwitter-bootstrap-tooltip

Using both italic and regular text in an HTML (or ASP.NET) textbox can add emphasis and enhance readability for

Is there a way to achieve this using JavaScript? For instance, if the initial text is 'Axxxxxx', I want it to be displayed in a textbox with normal style for the first letter and italic style for the rest like 'A*xxxxxx*' If the initia ...

javascriptasp.nethtmlcss

Ways to verify if a div is empty following an ajax request

When trying to load a php page into a div, I encountered an issue where the content of the div appeared empty. Despite attempting various methods to check if the div contained any html content after loading, I was unable to find a solution. ...

phpjqueryhtmlajax

Utilizing conditional styling in React: the ability to add or attach CSS classes based on

Is there a more efficient way to implement conditional formatting for this scenario? const PaginationStorePageLink = ({ store, pageNum }) => (observer(({ PaginationStore }) => { const className = this.props.store.currentPage === this.props.pageNum ...

javascriptcssreactjsjsx

Pressing a button through xpath

I am attempting to click on the button below: <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> <div class="ui-dialog-buttonset"> <button class="ui-button ui-widget ui-state-default ...

pythonhtmlseleniumxpath

Can a script be dynamically loaded into a div while accessing local variables?

Consider the scenario where you have two files: test.html <div id="stuff"></div> <button onclick="doStuff()">Magic</button> <script> var foo = new function() { this.bar = function() { return "THE MAGIC!"; }; ...

javascriptjqueryhtmlajaxscope

What is the best way to position the header at the top and the footer at the bottom of the page, with the main content in between using

Recently, I started using Bootstrap and incorporated Bootstrap 5.3 into this HTML page. My goal is to align the header at the top, footer at the bottom, and adjust the size of the main content in between. Here's the code I attempted: <!DOCTYPE html ...

htmlbootstrap-5

undefined reference to $

I'm currently working on a JavaScript project that involves using key events to display alphabets on the screen. However, I've encountered an error and need some assistance. <!DOCTYPE html> <html lang="en"> <head> <met ...

javascriptjqueryhtmlfunctionkeyboard

How to adjust the vertical spacing between divs in a 960 grid using CSS?

I'm currently experimenting with the 960 grid css framework. How can I eliminate the space between two divs stacked on top of each other? [referring to the gap between the blue lines in the image] I created my CSS using the CSS generator found at . ...

htmlcssgrid960.gs

Conceal WordPress Query String Parameters

Looking to clean up my WordPress URLs by removing all query strings that come after admin.php, such as admin.php?page=wpforms-overview. My goal is to eliminate ?page=wpforms-overview. I attempted the following approach: RewriteCond %{THE_REQUEST} /admin ...

phpjqueryhtmlwordpress

Tips for reducing code length in jQuery

Here's an interesting question that I've been pondering. Is there a more efficient way to optimize and condense code like the one below? Could it be achieved using functions or loops instead of having lengthy jQuery code? var panels = ["panel1", ...

javascriptjqueryhtmlminimize

Steps for incorporating Bootstrap 5 pagination without using jQuery

Currently, I am working on incorporating pagination for cards using Bootstrap 5. My reference point is the following link: https://getbootstrap.com/docs/5.0/components/pagination/ While I can find the UI elements, I am struggling to come across a concrete ...

htmlcsspaginationbootstrap-5

Percentage outlined

Is there a way to create a .testing element with a width of 100% (150px)? <div class='debug'> <div class='debug'> <div class='testing'>Hello world!</div> </div> </div> *, * ...

htmlcss

`Adjusting video frame on canvas`

When I capture video from a user's camera and display it in a 1:1 square, I encounter an issue when trying to draw the picture to a canvas. The image is not drawn in the same location on the canvas. How can I resolve this problem? To see a live examp ...

javascripthtmltypescript

How can I keep the size of a Bootstrap button consistent while wrapping text inside it?

Is there a way to wrap or resize text inside a Bootstrap button without changing the button size? I have multiple buttons that need to be aligned properly. I tried using this class, and while the text wraps, the button grows in size, causing alignment iss ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is it possible to utilize JavaScript to access a .php file located in a separate directory?

Although I have been searching all day, I couldn't find a workout that specifically addresses my issue. I'm new to JavaScript and AJAX. Currently, I am exploring a web app called calendar.php located in the directory C:\xampp\htdocs&bs ...

javascriptphphtmlajaxlocalhost

creating a div element with a height that matches its content dimensions

I'm having trouble creating a navigation bar because the outer div isn't matching the height of the unordered list inside it. I attempted using display:inline-block as well, but it didn't solve the issue. Here is the HTML: http://jsfiddle ...

csshtml

Contact Company by Sending Email According to Selected Product Dropdown Choice

If a customer selects a specific business option from the dropdown menu on the product page, I want to send the standard WooCommerce Order Confirmation Email to both the site admin and that selected business. Backpack $50 Choose an Option Business First ...

phphtmlwordpresswoocommerce

Struggling to display text content from an array onto the HTML webpage

One issue I am encountering is my inability to use Javascript to change the text within an HTML p tag. I have an HTML button with the id="knap" and a p tag with the id="answer". My goal is to change the text in the "answer" tag when the user clicks on the ...

javascripthtmlarrays

The fullscreen revolution slider in Wordpress is displaying a small white space below it

Check out my website at: . As I reduce the browser width, a blank space appears below the top revolution slider. I'm struggling to get rid of it. Here's what I've tried so far: .boxedWrap .fullScreenSlider {height: 100%;} .boxedWrap .fu ...

csswordpresssliderwhitespacemargin