The button is unresponsive. Which code do I need to implement?

Hello there,

I am still learning so please bear with me as I ask this question about my website. I have a Get Started button with a transparent background. When the user clicks on the button, I want the background to disappear. What code do I need to insert for this functionality?

Thank you in advance, Alex

Website url:

Website code: 

</div>
<div id="artmaps-map-themap"><iframe src="https://mapsengine.google.com/map/embed?mid=zA9OSQj3vWR8.kZugAXwQLfOs" width="100%" style="height:100%;"></iframe></div>
<div id="welcome">
  <div class="inner">
    <h2>Putting vinyl shops collection on the map.</h2>
    <p>Long Play holds over 1,000 vinyl shops around the world.</p>
    <ul>
      <li><a href="#" id="explore-map" class="primary">Get started</a></li>
    </ul>
  </div>
</div>
</body>
</html>
jqueryhtmlcss

Answer №1

If jQuery is already included in your project, you can easily implement a simple jQuery function for click events like so:

$(function(){
   $(".primary").click(function(){ //Function for clicking primary element
      $("#welcome").hide(); //Hides the welcome ID.
      //You have the option to fade it out using $("#welcome").fadeOut();
   });
});

Answer №2

If you're looking to conceal your background, this code could come in handy:

$("#explore-map").on("click", 
  function(){ 
      $("#welcome").hide();
  });

On the other hand, if you want to completely get rid of it, try this code instead:

$("#explore-map").on("click", 
  function(){ 
      $("#welcome").remove();
  });

Answer №3

To start off, make sure to convert the button into an actual button element.

<button href="#" onclick="myFunction()" id="explore-map" class="primary">Get started</button>

Next, include some JavaScript code like the following:

<script>
function myFunction(){
document.getElementById('welcome').style.background = "rgba(0, 0, 0, 0)";
}
</script>

Insert the JavaScript snippet right after your last closing div tag. This script will not remove the #welcome div but will simply make its background completely transparent, assuming that's your intention.

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

An error of `SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data` is occurring in relation to Django Channels

Whenever I attempt to access a JSON array object sent by the consumer (channels), I encounter the following error message: "SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data" async def websocket_connect(self,event): pri ...

javascriptpythonhtmljsondjango

IE having issues with selecting all options button in jQuery, but it is functioning correctly in Firefox

In one part of my cgi code, I create the following: my $PARAMETER_HTML .= "<select name='parameters' id='parameters' size='10' multiple='multiple'>"; foreach my $values (sort @PARA_VALUES) { $PARAMETER_HTM ...

jqueryhtmlperlcgi

What is the reason behind JSLint's preference for x === "undefined" over typeof x == "undefined"?

I'm feeling lost when it comes to JSLint. Initially, my code checked if div:jqmData("me") was undefined in this way: if ( typeof el.jqmData("me") == "undefined" ? el.not(':jqmData(panel="main")').length > 0 : el.not(':jqm ...

javascriptjqueryundefinedjslinttypeof

Is there a way to use CSS to swap out the content of one HTML element with another HTML element's content?

Having an issue with editing or locating a plugin's HTML template on WordPress. Wondering if it is possible to replace the content of one HTML element with another using just CSS? Appreciate any help! ...

htmlcsswordpress

What could be causing render_template to fail when attempting to update the same parameters more than once?

Lately, I've dived into the world of Flask, MongoDB, and ElasticSearch. So far, my MongoDB and ElasticSearch setups are running smoothly. However, I've encountered an issue with generating a list of dictionaries and displaying them on my HTML we ...

javascriptpythonhtmlflask

Transmitting HTML and CSS code to the server for seamless conversion into a PDF file

I recently started using a tool called GemBoxDocument that allows me to convert HTML files into PDFs. Their website provides sample code demonstrating how to convert an existing file on a server (source): using System; using System.Linq; using System.Tex ...

c#htmlajax

Using JQuery for sliding left without having to use inline CSS

I am dealing with a situation on my website where I need to hide a sidebar when clicked. $('#sidebar').toggle('slide', 'left', 300) In addition, I have implemented a CSS style to hide the sidebar on mobile devices. #sidebar ...

jquerycssmedia-queriesslidetoggle

Checkbox and Ionic avatar image combined in a single line

I am currently working on a mobile app using the ionic framework. I would like to create a layout with an avatar image on the left, text in the middle, and a checkbox on the right. Can anyone provide guidance on how to achieve this? The code snippet below ...

htmlcsscordovaionic-framework

How to use return type arrays in JQuery

I am trying to make an ajax request in a Codeigniter function, and I am currently using the code echo json_encode($array) to echo the result array. My goal is to retrieve this return value as an array in the ajax call, which I plan to use in a chart (speci ...

phpjqueryarrayscodeigniterhighcharts

Obtaining a distinct identifier from an element

Struggled with this one, I've read several articles but nothing is clicking for me. Any assistance would be greatly appreciated. I'm trying to achieve a specific action on click of 'slick-toggle', where only the corresponding 'sli ...

jquery

Blending ThreeJS graphics with typical HTML/CSS pages

Is it feasible to swap out an animated image in the background of a website with JSON geometry while keeping the HTML elements in the forefront? I've attempted to utilize DOM Elements in ThreeJS without success. I experimented with incorporating my JS ...

jsonhtmlcssthree.jswebgl

Confirming user credentials for every page

I am currently working with an HTML page that includes front end PHP for server side scripting. One issue I have encountered is the configuration page, which can be accessed by disabling JavaScript in Mozilla settings. My current validation method relies ...

phpjavascripthtml

Using jQuery to select and check the appropriate checkbox within a table cell

I have encountered an issue that can be found here. The problem arises when I try to click on a TD element and toggle the checkbox inside it. This works fine for checkboxes directly inside TD elements, but when there is a table nested inside a TD, the so ...

jquerycheckbox

Tips on assigning a default value to an HTML <select> tag using information fetched from a database

I am currently working on setting the default value of a dropdown element in HTML using data retrieved from an SQL database. I have successfully extracted the values from the database and stored them in variables. Here is the code snippet of what I have ac ...

phphtmlselect

What's the best way to ensure these have equal heights?

There seems to be a difference in height between the verses at the bottom, and I want each verse next to each other to have equal heights. Here is my current code setup: .verse img { height: 1em; } <h1>PSALM 1</h1> <p> <div> ...

csstextvertical-alignment

Triggering a click event on two separate modal divs

I am encountering an issue regarding click events on various modal divs. I have a modal div 'A' that displays an overlay div with specific information. This div is shown by clicking a button labeled A. Therefore, if this overlay div is displayed ...

eventshtmlclickoverlay

Checking if the current time falls within a specific range while also taking minutes into account

I am currently working on a website for restaurants offering home delivery services. I need to enable or disable the 'Order Now' button based on the designated home delivery timings of each restaurant. For this purpose, I have access to the star ...

javascriptjquery

Utilizing the essential "required" attribute in HTML5 in conjunction with a submit Button

I'm encountering a frustrating issue with a form. I typically use the 'required' attribute in an input box for quick validation, but when I switch to using a button instead, the validation doesn't seem to work. Is it possible that the & ...

htmlformsbuttonsubmitrequired

Incorporating YouTube links into calendar events for each specific date

Our team is currently developing an online class website where our client wants to incorporate recorded classes. These recorded classes will be uploaded to YouTube in unlisted format and then linked to specific calendar dates. I will share the code for the ...

javascripthtmlcsssasscalendar

An image overlaying a background design featuring a navigation bar and company logo

Is there a way to stack images on a background image similar to this using HTML? There is also a navbar and logo on the background. I attempted to do something like this: //clearfix .image-stack::after { content: ' '; display: table; clear ...

htmlcsssass