CSS - Display property not behaving as expected with an image tag

Having trouble displaying a speech bubble on my page. I created it using a div for the content and an image for the tail, both of which are hidden when the page loads. When a specific button is clicked, they are supposed to be displayed. However, only the content (#msg-loc) is showing up, not the image. I'm confused as to why this is happening. Oddly enough, if I remove the default hidden property, everything displays correctly. Does the display property not work with images? Any help would be appreciated. Thanks in advance for any advice. Cheers, Marc.

Here is my HTML:

<div id="msg-loc" class="hidden">
    <img src="img/triangle.png" class="hidden triangle"/>
</div>

My JavaScript code:

$('#msg-loc').html('the value is incorrect').removeClass('hidden');
$('.triangle').removeClass('hidden');

And here is my CSS:

#msg-loc{
    width:300px;
    text-align:center;
    margin-top:8px;
    background-color:pink;}

.triangle{
    left:65px;
    top:-13px;
    position:relative;}

.hidden{
    display:none;}
jquerycss

Answer №1

You are updating the image to display 'the value is not accurate'.

After receiving feedback, here is the revised solution: http://jsfiddle.net/P7yhz/3/

HTML

   <div id="msg-loc" class="hidden">
    <div class="triangle"></div>
    <div class="message">The value is not accurate</div>
</div>
<a href="#">Show</a>

CSS

#msg-loc{
    width:300px;
    text-align:center;
    margin-top:8px;
}

.triangle {
    background:url('http://www.mathsisfun.com/geometry/images/regular-triangle-sm.gif') no-repeat bottom center;
    height: 40px;
}
.message {background:pink;}

.hidden{
    display:none;}

JS

$(document).ready(function() {
    $('a').click(function() {
        $('#msg-loc').toggleClass('hidden');
    });

});

Answer №2

When you utilize the 

$('#msg-loc').html('the value is incorrect').removeClass('hidden');
command, it effectively erases the content within the #msg-loc division. Subsequently, once it is empty, the "hidden" class is removed.

This action is carried out using the .html function.

An alternative approach would be:

var x = document.createTextNode("the value is incorrect");
$('#msg-loc').append(x);
$('#msg-loc').removeClass('hidden');
$('.triangle').removeClass('hidden');​

Answer №3

This is the HTML section of your code

<div id="msg-loc" class="hidden">
    <img src="Icons/Apps_icons/eye.png" id="yo" class="hidden triangle"/>
</div> 
<a href="#" id="t">Click Me</a>

Here is the JavaScript segment

$(document).ready(function(){
    $("a#t").click(function(event){
            event.preventDefault();
            $("div#msg-loc").removeClass("hidden");
            $("img#yo").removeClass("hidden");
            }); 
        });

I have included an "id" attribute to the "img" tag and created an Anchor element that triggers the function. It appears that your CSS is also correctly implemented.

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

Loop through a string array using the count in jQuery

Example String Output [{v:5, f:'Week 1'}, {v:10, f:'Week 2'},{v:15, f:'Week 3'},{v:20, f:'Week 4'},{v:25, f:'Week 5'}] Code Snippet function generateTicks(){ var ticks = ''; var week_count = & ...

phpjqueryarrays

Using jQuery dialog to send a form to a php script

In my attempt to utilize a php script for sending emails through a jquery dialog box after the user clicks the 'submit' button, I'm facing issues getting this script to function properly. The html code for the dialog box is as follows: < ...

javascriptphpjqueryjquery-uidialog

Adjustable textarea with automatic height based on content and line breaks

Imagine you have a textarea with text that includes line breaks. If you style it like this: textarea { height: auto; overflow: hidden; resize: none; } Upon loading the page, the textarea will only adjust its height based on the content until it enc ...

javascripthtmlcss

In Rails, assigning unique IDs to elements in the builder allows for easy access with jQuery

Utilizing the Rails builder to construct multiple :pay objects <%= f.fields_for :pay do |builder| %> <%= render "non_taxable_pays", :f => builder %> <% end %> This is displaying _taxable_pays multip ...

javascriptjqueryruby-on-rails

Choosing a specific option from a list of multiple choices with javascript

I have a selection with multiple options. Currently, the selected values are '2,4,5'. <select id="testID" multiple="multiple"> <option value="1">test Value1</option> <option value="2">test Value2</option> ...

javascripthtmljqueryhtml-select

Develop a unique splitter code that utilizes pure javascript and css, allowing users to drag and drop with precision

I am facing an issue with setting the cursor above my drop panel, as it results in a flicker effect. How can I set the cursor for my example to work properly? I have tried multiple different approaches to make this work. Although I am using the provided ...

javascriptcsshtmldrag-and-dropcursor

Exploring the intricacies of Knockout JS mapping nested models using fromJS function

I am struggling with understanding how to effectively utilize the Knockout JS Mapping Plugin. My scenario involves nested models, and currently I am only using the ko.mapping.fromJS() in the parent model. However, I have noticed that the computed values ar ...

javascriptjqueryrestknockout.jsknockout-mapping-plugin

Setting up button alignment in Bootstrap

In my current template, I am utilizing Bootstrap and need to position three buttons accordingly. The first button should be all the way to the left, the second in the middle, and the third (final) one on the right within a container element. While attempt ...

htmlcsstwitter-bootstrap

The error handler function is missing in Zepto's $.post method

When I was using Zepto instead of jQuery, I noticed that while the $.ajax method has an error handler, other methods like $.post and $.get do not. Do you know why this is the case? Function Signature $.post(url, [data], function(data, status, xhr){ ... }, ...

javascriptjqueryajaxxmlhttprequestzepto

Can someone provide guidance on incorporating a checkbox into my WordPress site?

I've created a toggle switch and now I want to incorporate it into my website, but I'm unsure of how to do so. The site uses the bbPress plugin on WordPress, and I would like users to be able to click the toggle switch when leaving a comment, wit ...

javascripthtmlcsswordpressbbpress

What is the best way to save text in a selenium test script in order to display the total number of search results discovered on various search engines?

I'm currently tackling an assignment in my web applications testing class that involves creating a test script to evaluate the functionality of a search engine and then capturing and displaying the number of search results. The search bar that I' ...

cssseleniumxpathpath

How to dynamically set a background image using Ionic's ngStyle

I've been trying to set a background image on my card using ngStyle Take a look at my code below: <ion-slides slidesPerView="1" centeredSlides (ionSlideWillChange)= "slideChange($event)" [ngStyle]= "{'background-image': 'ur ...

cssangulartypescriptionic-frameworkionic3

Ensure that any links within a jQuery DOMWindow open in the same window

On my website, I have a jQuery DOMWindow that loads content using AJAX instead of iFrames. However, I am facing an issue where hyperlinks inside the DOMWindow cause the browser to reload a new page instead of loading the content within the same DOMWindow. ...

jqueryajaxdom

Monitoring changes within the browser width with Angular 2 to automatically refresh the model

One of the challenges I faced in my Angular 2 application was implementing responsive design by adjusting styles based on browser window width. Below is a snippet of SCSS code showing how I achieved this: .content{ /*styles for narrow screens*/ @m ...

cssangulartypescriptsassrxjs

Show a pop-up window when a button is clicked, just before the page redirects

Is there a way to display a popup message before redirecting to another page when clicking on a button? Here's the scenario: <a href="addorder.php?id=<? echo $row01['id']; ?>" ><button id="myButton" class="btn btn-primary btn ...

javascriptjqueryhtmlajax

Is jQuery AJAY hover event in action?

My apologies for asking this question again, but I am having trouble finding a solution. Despite there being several posts on this topic, nothing seems to work for me. I am using the jquery load() method to load a part of a website and applying the followi ...

jqueryajaxlive

Tips for hiding the text cursor when using the React Select library's Select component

I need help with removing the blinking text cursor that appears when the Select is focused. Can someone offer guidance on how to achieve this? https://i.sstatic.net/K6fgY.png Below is the code snippet for my select component: <Select options={s ...

javascriptcssreactjsreact-select

What could be the issue with my transition not functioning on the Bootstrap navigation bar?

Why doesn't the transition effect work on my bootstrap website even though I've added transition: 0.5s? Strangely, it works perfectly fine when testing on a custom div on the jsfiddle site. Check it out here window.addEventListener('scroll&a ...

javascripthtmlcssbootstrap-4

Using jQuery Flot to create animated charts with AJAX data source and JSON data conversion

In my Spring MVC web application, I am utilizing the jQuery plugin called flot to generate graphs. The example I am currently following demonstrates how to load a flot graph from an AJAX call using JSON data, which can be accessed here. The JSON data stru ...

jqueryjsonflot

create a recurring design wallpaper within the TinyMCE editor

One of my functions alters the background of the tinymce editor. However, I am interested in having a wallpaper repeat in a similar fashion to background-repeat: repeat; in CSS. How can I achieve this? Here is the function: function SettinymceImage(bg_i ...

javascriptcsstinymcetinymce-4