Show Section, Delay Function, Conceal Section

How can I make an image appear when a div is clicked on and then disappear after 3 seconds? The function I have only makes the image appear, but adding a timeout does not work. Any suggestions on how to fix this issue?

(Additionally, if someone could provide guidance on how to center the heart within the #stickycat div, that would be greatly appreciated!)

function showHeart() {
    document.getElementById("heart").style.display = "block"
    setTimeout(function(){ document.getElementById("heart").style.display = "none" }, 3000)
}
#stickycat {
    position: fixed;
    bottom:10px;
    right: 10px;
    width:100px;
    height:100px;
    border-radius:50%;
    border: solid 4px rgba(54, 215, 183, 1);
    background-color:white;
    text-align:center;
    box-shadow: 1px 1px 10px rgba(54, 215, 183, 1), -1px 1px 10px rgba(54, 215, 183, 1), -1px -1px 10px rgba(54, 215, 183, 1), 1px -1px 10px rgba(54, 215, 183, 1);
}
#stickycat img {
    max-width:100%;
    max-height:100%;
    z-index:2;
    border-radius:50%;
}
#heart {
    animation: pulse 2s linear infinite;
    position:absolute;
    width:50px;
    height:50px;
    display:none;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
<div id="stickycat" onclick="showHeart()">
<img src="https://i.pinimg.com/originals/9d/b1/3f/9db13f4f06bfa1600e970fd32f1851db.gif">
<img id="heart" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1200px-Heart_coraz%C3%B3n.svg.png">
</div>

javascriptcssfunctionpositiondisplay

Answer №1

To start, using fn() is not the correct way to define a function. An anonymous function can be declared by utilizing the function() keyword.

The heart's position property is defined as absolute. This allows for centering by adjusting the top and left CSS properties.

Here is an example of this concept in action:

function heart() {
    document.getElementById("heart").style.display = "block"
    setTimeout(function(){ document.getElementById("heart").style.display = "none"}, 3000);
}
#stickycat {
    position: fixed;
    bottom:10px;
    right: 10px;
    width:100px;
    height:100px;
    border-radius:50%;
    border: solid 4px rgba(54, 215, 183, 1);
    background-color:white;
    text-align:center;
    box-shadow: 1px 1px 10px rgba(54, 215, 183, 1), -1px 1px 10px rgba(54, 215, 183, 1), -1px -1px 10px rgba(54, 215, 183, 1), 1px -1px 10px rgba(54, 215, 183, 1);
}
#stickycat img {
    max-width:100%;
    max-height:100%;
    z-index:2;
    border-radius:50%;
}
#heart {
    animation: pulse 2s linear infinite;
    position:absolute;
    top: 25px;
    left: 25px;
    width:50px;
    height:50px;
    display:none;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
<div id="stickycat" onclick="heart()">
  <img src="https://i.pinimg.com/originals/9d/b1/3f/9db13f4f06bfa1600e970fd32f1851db.gif">
  <img id="heart" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1200px-Heart_coraz%C3%B3n.svg.png">
</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

The Fusion of Ember.js and Socket.io: Revolutionizing Web

I have been trying to incorporate a basic Ember application into the view of my node application. I have verified that Ember is properly set up and my sockets are functioning correctly. However, I am encountering an issue where the data is not being displa ...

javascriptnode.jssocketsember.jsejs

CSS - Scaling Images Proportionally Based on Container Size

My current project involves a large number of images with varying resolutions. The issue I'm facing is that each image has different dimensions, ranging from small 200x600 to massive 3000x5000 ones! I've been attempting to figure out a way to r ...

htmlimagecsssize

The drop-down menu in the navbar is always positioned above any fixed elements on the page

I am facing an issue with a drop down menu in a nav-bar. The problem occurs when the drop down menu goes behind a fixed-position div below the nav-bar. I have tried using z-index but it doesn't seem to be working. Setting the position of the dropdown ...

htmlcsstwitter-bootstrap

Creating Angular directives: dynamically applying ng-class directive to template elements during compilation

In short, the aim is to streamline templating by avoiding manual addition of ng-class={'has-error': 'formName.inputName.$invalid'} for every individual form-group The idea is to develop a directive that will automatically generate a st ...

javascriptangularjsangularjs-directive

Monitor the collection for changes before adding an item to the collection

When using ui-select multiple, I am facing an issue where I need to check the collection before ng-model="collection" is updated in order to ensure that the new value is not already present in it. Simply watching the collection does not solve this problem ...

javascriptangularjsui-select

Locking the second column of a data table with CSS to prevent scrolling

We need to freeze two columns in our data table - "PPD Delivery Schedule" and "Check Opex". The first column is working fine, but we're having issues freezing the second column. We've tried various approaches but haven't been successful so ...

csshtml-tablevisualforce

Difficulties with validating phone numbers

I'm having an issue with my JavaScript code that is supposed to validate a phone number field, but it doesn't seem to be working. Even if I enter incorrect values, the form still submits. Here's the snippet of my code: <script> functi ...

javascriptphone-number

Challenges related to streaming processes and uploading to S3 cloud storage

Encountering difficulties with a zero byte stream. Currently, I am resizing an image and sending it as a stream to S3. Initially, when I connect the output to the response, it displays properly. // To retrieve the file remotely var request = http.get(&apo ...

javascriptnode.jsamazon-s3stream

SyntaxError: JSON parsing error: The letter 'v' is not recognized as a valid token

Currently, I am running a node.js server with express.js on my personal computer. In order to decode a client request that contains a JSON string, I executed the code below only to encounter an error message displayed as follows: SyntaxError: Unexpected t ...

javascriptnode.jsjsonexpress

Stopping Amazon Web Services Lambda functions from running on their own

I've implemented a Lambda function that is triggered whenever a new folder object is created in the root bucket. A unique identifier is generated for each folder object, such as 67459e53-20cb-4e7d-8b7a-10e4cd165a44 Within the root bucket, there is a ...

javascriptnode.jsamazon-web-servicesaws-lambda

Interacting with jQuery mouse events on elements below the dragged image

I'm attempting to create a drag-and-drop feature for images using jQuery. While dragging, I generate a thumbnail image that follows the mouse cursor. However, this is causing issues with detecting mouseenter and mouseleave events on the drop target pa ...

javascriptjquerydrag-and-dropjquery-events

Retrieving the 'red' pixel data from the texture rendered with gl.texImage2D

My objective is to transfer a Float32array to my fragment shader using a texture in order to process the data within the shader and then send it back to JavaScript. Since the data is not in the form of an image, I opted to transmit it as 'gl.R32F&apos ...

javascriptwebglframebufferglteximage2dwebgl2

Error encountered: Unable to assign a value to the property 'className' as it is undefined in JavaScript

Having trouble adding a classname to my JavaScript code which looks like so: var a = document.querySelectorAll('.nav-tabs'); for(var i=0 ; i<a.length; i++){ a[i].addEventListener('click',function(){ a[i].classList.ad ...

javascripthtmlcss

Customizing the color scheme of specific components using Material UI inline styling

I am currently customizing my TextFields from Material-UI. My background is black and I want both the textField border and text to be white. Here's the relevant part of my code: render() { const styles = { width: { width: '90%& ...

javascriptmaterial-ui

Overlap and cover additional elements within a DIV

I am looking to create a versatile function that can effortlessly overlay various elements such as selects, textfields, inputs, divs, tables, and more with a partially transparent div matching their exact height and width. I have managed to obtain the pos ...

javascriptjquerycssjquery-pluginstwitter-bootstrap-3

How to create a clickable link using Vuetify's v-btn component

As a newcomer to vue and vuetify, I would greatly appreciate some explanation and examples. My goal is to create a button that directs users to an external site, like youtube.com. Below is the code I currently have, but unfortunately it's not function ...

javascriptvue.jsvuetify.js

Alter the backdrop of this email template

I'm struggling to replace the blue and grey background of my email template with an image. Any suggestions on how I can achieve this? Here is the Html Code link for reference I attempted to modify the body tag, but it didn't result in any chang ...

htmlcsshtml-email

Ways to safeguard your API endpoint

Just starting out with Node.js/Express, I'm looking to have my front end retrieve data from an endpoint ('/1') without displaying the JSON data to users when they access that specific endpoint. Any guidance on how to accomplish this would be ...

javascriptnode.jsexpress

Tips for customizing the default link style in CSS/HTML

After setting the default style for all links on my site, I realized that I wanted a different style for links in the sidebar. In the sidebar section, I added the following HTML: <div class="toppost"> <p><a href="https:" rel="attachment n ...

htmlcsshyperlink

Obtain session data with the help of JQuery and Ajax techniques

As a beginner, I am attempting to update a menu value (cart content) without the need to reload the entire page. The issue I am facing is that the ${cartSession.getCartContent()} value in the alert check shows as Undefined. If it helps, on the server sid ...

javascriptjqueryhtmlajaxspring