How can I re-create the code below without using jQuery since I need to work with Wix for a client's website?
<style>
#hover {
width:100px;
height:100px;
background-color:blue;
}
</style>
<div id="hover">
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("#hover").click(function(){
$("#hover").css("width", "500px");
$("#hover").css("transition", "all 1s");
});
</script>
Here is a complete CSS solution:
For the HTML:
<input type="checkbox" id="show-hide">
<div class="content-div">
Your content goes here
</div>
And for the CSS:
.content-div {
padding: 15px;
color: #888;
background: #f0f0f0;
display: none;
}
#show-hide:checked ~ .content-div {
display: block;
}
Simply check the input checkbox to reveal the hidden div.
let targetDiv = document.getElementById('hover');
targetDiv.onclick = function () {
this.style.width = '500px';
this.style.transition = 'all 1s';
this.style.backgroundColor = 'red';
}
In other words, when there are two words, background-color becomes backgroundColor.
The distinction between this and the jQuery solution:
Pure JavaScript is typically faster because it eliminates the need for additional function calls (although in most cases you wouldn't notice a difference), and it also treats it as a single element, so if the div doesn't exist, an error will be displayed in the console. This error would halt the rest of the script from executing.
On the other hand, jQuery treats elements as arrays, so if there are no matches, the array length is zero which does not trigger an error.
Instead of using getElementById, you can utilize querySelector('#hover') for CSS queries, however, be sure to check browser support.
Give this a shot:
let link = document.querySelector('.hover');
link.addEventListener('click', function() {
this.style.width = '500px';
this.style.transition = 'all 1s';
});
Absolutely, it is possible with CSS only! CHECK IT OUT
By utilizing this method, you can create interactive click events without relying on Javascript or JQuery.
CSS:
#click {
width:150px;
height:150px;
background-color:red;
transition: all 0.5s;
}
#click:hover{
transform: scale(1.5);
}
HTML
<a href="#click">
<div id="click">
</div>
</a>
Suppose you have a form, such as <form id='testform' method="post" action="/" /> <input name="test1" value="yes" type="text"> <input name="test2" value="no" type="text"> </form> Is there a way to retrieve the query s ...
As a student, I struggle with English and it makes me feel sorry and anxious... Despite that, I want to create three scatter plot charts on the same page using a single data file (csv). The dataset includes columns for Name, Height, Weight, and Grade (ra ...
I've been on a quest to find a workaround for this issue but without any luck. All the data at my workplace is accessible through a web portal that generates static HTML pages. Unfortunately, my department doesn't have direct access to the Serve ...
Hey there, I'm trying to figure out how to use an anchor tag to submit a form. My form originally had an input button that passed a post variable for me to check in my php script. How can I replicate this functionality with an anchor tag? Here's ...
I have developed a function specifically for a select box that is dynamically added to a jQuery table. However, I am encountering an issue where only the first value is being displayed in all rows. Can someone please guide me on how to fix this error? < ...
In my UI, I have a ScrollPanel and I need to dynamically alter the cursor over this panel when a specific action is taken by the user. Despite thoroughly searching through all project files (including CSS and Java) for instances of "default" or Cursor.DEFA ...
I have implemented a bootstrap modal in my dashboard. The button that triggers the modal is placed on another page where I extend the dashboard layout. When I click on a button with a different product ID, I want the modal to display information related ...
I have multiple stacked div elements. The top one needs to be draggable, while the one beneath should remain clickable. An illustration is provided below for better understanding: The green div elements are contained within cells. Clicking on a cell trigg ...
I am having trouble with the Django By Example tutorial when it comes to following users. I have been clicking the follow button but nothing happens. I have reviewed that section multiple times, even copied and pasted the code, but it still does not functi ...
When using the jQuery AJAX function to retrieve and submit values, encountering an issue where the old value is displayed instead of the new one. While a method involving a JSON object can be used to extract values when working on the same page, I am looki ...
I am brand new to Three.js and am currently using it for a small feature on my website. My goal is to create a 3D model of a paper cup, with different textures on the outer and inner sides. So far, I have been able to achieve some rotation functionality ...
I'm working on creating a layout with two different displays for larger screens (992-1200) and mobile devices. Here is my rough drawing and demo links: For screen sizes 992 and up: https://i.sstatic.net/mztjL.png For mobile: Display should look like ...
I need help finding a solution for a transition effect I am implementing in my project. The effect I want to achieve is as follows: Page fades in with an opacity that transitions from 0 to 1 using @keyframes When any link is clicked, the page opacity goe ...
I have a question regarding CSS that seems pretty straightforward. Here is the code in question: <!doctype html> <html amp lang="en-US"> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab: ...
After creating an authentication method to act as a before filter for other controller methods, I've encountered an issue. My goal is to have the method redirect to the root path if the user is not logged in. Below is the code for my authenticate_user ...
How can I retrieve the value of a textbox in JavaScript using onblur and on keyup events, while also performing real-time checking for each individual textbox using "this keyword"? Here is my JSFiddle link. Can you assist me in modifying it? ...
I am currently creating an application using React and Material UI, incorporating the autocomplete control feature. Take a look at the code sandbox I have set up. Here are some concerns: I am aiming to have two autocomplete controls displayed on the same ...
I have been trying to display an HTML file using Express.js with a static __dirname, but the HTML content does not show up after calling localhost/ var express = require('express'); var web = express(); ...
Seeking a solution that will organize various images of different sizes into a seamless rectangle display; Tried using Isotope (), but it doesn't automatically resize the images for perfect fit. Is there any effective JavaScript or PHP script recomm ...
I have multiple buttons with the class .modif, each with a different title attribute such as title="one". All these buttons are associated with boxes that share the class .box_slide. However, I am trying to display only the box that also has the additional ...