"Looking to create a set of images with jQuery event handling? Here's how

I've been struggling to get a picture to trigger a jQuery Show function. Despite trying various methods, I haven't been successful. Unfortunately, the jQuery documentation didn't provide much help in my case.

Below is the jQuery code straight from W3C. This should be all I need for what I'm currently attempting to achieve.

$(document).ready(function(){
  $("#regi").click(function(){
    $("#reg").show();
  });
});

Here is the HTML content that I want to display, initially set with visibility:hidden;

<div id="reg">
  <image src="../media/RegPage.png">
    <input type="text" name="usernameReg" value="email" STYLE="position: fixed; top: 175px; background-color: rgb(187,187,187); font-family: 'VT323', cursive;//#9cf;"/>
    <input type="password" name="pwrdReg" value="pass" STYLE="position: fixed; top: 195px; background-color: rgb(187,187,187); font-family: 'VT323', cursive;"/>
    <input type="password" name="VpwrdReg" value="pass" STYLE="position: fixed; top: 195px; background-color: rgb(187,187,187); font-family: 'VT323', cursive;"/>
</div>

I attempted using the image as a button and changing the image itself, but without any success. Any assistance would be greatly appreciated. Ideally, I want clicking this image to trigger the jQuery show event.

<image id="show" src="../media/Register.png" ></image>

Thank you

jqueryhtmlcssfrontend

Answer №1

HTML does not have an image tag, you should use the img tag instead and it does not require a closing tag.

<img id="show" src="../media/Register.png" />

It is important to remember that the show method will not display elements with the visibility: hidden property. You should use display: none or utilize the css method instead:

$("#reg").css('visibility', 'visible');

Answer №2

What does the code snippet #regi do exactly?

Here is an alternative version to try out:

$(document).ready(function(){
  $("#show").on("click", function(){
    $("#reg").show();
  });
});

Additionally, it's worth noting that, as pointed out by @undefined, you should replace the image tag with img since there is no valid <image/> tag in HTML.

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

Is there a way to combine jQuery with CSS hacks specifically for Internet Explorer?

Imagine wanting to adjust the display property of a div to inline-block. In CSS, you would typically do something like this: #divid { display:inline-block; /* Adding support for IE6 and IE7 */ zoom:1; *display:inline; } Now, what if you ...

javascriptjquerycss

Having trouble displaying a gray background/overlay in a Twitter Bootstrap modal design

Library version: Jquery 1.11.0 Framework version: Bootstrap 3.1.1 CodePen link: https://codepen.io/amitshahc/pen/r6ueupfj/1/ HTML snippet: <!-- Modal --> <div class="modal fade" id="az-progress" tabindex="-1" role="dialog" aria-labelledby= ...

jqueryhtmlcsstwitter-bootstrapbootstrap-modal

Sending parameters dynamically in AJAX chosen

I am completely new to the world of Jquery and need some help. Here are the codes I currently have: $target.ajaxChosen({ type: 'GET', url: '<s:url action="getFilterValueJSON" namespace="/cMIS/timetable"></s:url> ...

javascriptjquery

What steps can I take to create a textbox that expands as more text is

Looking to create a unique textbook design that starts out with specific width and height dimensions, but expands downward as users type beyond the initial space. Wondering if CSS can help achieve this functionality? In a standard textbox, only a scroll ba ...

javascripthtmlcss

Do you require a lightbox for a white text box set against a semi-transparent black background?

Currently, I am in the process of developing a Chrome extension that will be compatible with my Android app. As part of this development, I need to code the HTML/CSS for the extension. The main functionality of the extension allows users to add tags to a s ...

htmlcssgoogle-chrome

Waiting for Each jQuery Ajax Function

$xy('#save').click(function() { $xy('input[id="check[]"]:checked').each(function() { var value = (this.value); var id = (this.value); var url = window.location.href; var newUrl = url.replace("wp-admin/options-general ...

javascriptjqueryajaxpromisejquery-deferred

Alert: Parser error in JSONP!

$.ajax({ type: "GET", dataType: "jsonp", jsonpCallback: "jsoncallback", //async: true , data: { // some other data here }, url: "http://mywebsite.com/getRequest.php", success: function(response ...

javascriptjqueryjson

JavaScript and Responsive Design Techniques

I'm struggling to create a responsive page that starts with a mobile-first approach, but I keep running into the same issue. When I have my dropdown menu in the mobile version, it looks good. However, when I try to switch it to the non-mobile version ...

javascripthtmlcss

Manipulating the DOM of a parent element using AngularJS directives

As a newcomer to AngularJS, I've been researching how to manipulate the DOM in a directive. Most resources I've found focus on manipulating the directive's own DOM, but my goal is to manipulate the DOM outside of the directive. In my projec ...

javascriptjqueryangularjsgoogle-mapsdom

Leveraging ng-repeat solely for the purpose of parsing without generating an excessive number of HTML elements

When using ng-repeat in a div to iterate through an array and display data, I encountered an issue. Within the first ng-repeat, I am using another ng-repeat to parse through a different array and show specific data. However, during the second loop, two div ...

htmlangularjs

What is the best way to automatically redirect visitors from the homepage to the specific tab section on the about

Within the slider on my home page, there is a "read more" link in each slide. Upon clicking the read more link, it redirects to the "industriessolutions_trial.php" page which contains four categories. By clicking on a category, the details for that specifi ...

javascriptjqueryhtmlhttp-redirect

Navigating the itemlist HTML to extract and manipulate data in a Flask application

In my current project, I am attempting to retrieve a value from an array in Flask based on the user's selection. Additionally, I need to perform calculations on this value within Flask as well. Below is the code snippet: HTML Code: <div class="f ...

javascripthtmlpython-3.xflaskbootstrap-4

Toggling between different divisions independently

I'm trying to create a navigation bar similar to Twitter. I want one specific div within the bar to scroll with notifications or news, while keeping the rest of the bar content unchanged. Any ideas on how to achieve this? Check out my code here. #nav ...

jqueryhtmlcssnotificationsscroll

How to properly format the date input in Vue.js

Currently, I am utilizing bootstrap-vue and its date input type feature. Upon entering numbers, the default format displayed is yyyyyy-mm-dd. I am interested in modifying this default format to yyyy-mm-dd. ...

htmlvue.jsbootstrap-vue

Leveraging an external script for enhanced functionality in React/Meteor application

I'm currently facing a challenge incorporating an external script into my React component within Meteor. I've experimented with directly placing the script tag in my component as follows: TheLounge = React.createClass({ render() { return ( ...

javascriptjquerymeteorreactjs

What is the reason behind this button disrupting the arrangement of my design?

Whenever I attempt to add this customized CSS button to my company's website, it disrupts the center alignment of the entire webpage. Below is the HTML code: <div id="contain"> <button class="support"> </button> ​ Here is the c ...

cssbutton

A guide to designing a responsive flexbox layout with various columns and rows

I need help designing a container that is responsive for both mobile and desktop, resembling the layout shown in this image. The initial HTML structure is as follows, but I can modify it by adding elements or classes if necessary. <div class="conta ...

htmlcssflexbox

Transforming a grid of radio buttons into a numerical representation or percentage

I am facing an issue with calculating the total value of radio button selections in three rows. Each row belongs to a specific group, and I want the value of each selection to appear in the last column. The first radio button in each row has a value of 2, ...

jqueryhtmljscript

Error found in Twitter Bootstrap popover plugin: `this.isHTML` function is missing

I took the example directly from their website: http://jsfiddle.net/D2RLR/631/ ... and encountered the following error: this.isHTML is not a function [Break On This Error] $tip.find('.popover-title')[this.isHTML(title) ? 'html&apos ...

javascriptjquerytwitter-bootstrappopover

Steps for creating an effective page preloader

My website involves fetching data upon loading. I am working on implementing a preloader that will be displayed until the site fully loads and all initial requests are completed. I've come across tutorials for preloaders that rely on setting a time i ...

javascripthtmlcssnode.jsloader