Seeking guidance on implementing a two-background div setup where A is constantly displayed within the element and toggling B based on button control click.
HTML
<div class="container"></div>
CSS
.container{
url(B.png) 10px 10px no-repeat,
url(A.png) 600px 10px no-repeat,
}
JQUERY
$('.container').on('click', function(){
//$(this).css("background","A.png")? add/removeClass?
});
Looking for assistance in achieving this implementation.
To create a toggle effect for showing/hiding background images, you can utilize the background-size property:
$('.container').on('click', function() {
$(this).toggleClass('hide');
});.container {
width:400px;
height:200px;
background-image:
url(https://lorempixel.com/300/200/),
url(https://lorempixel.com/350/200/);
background-size: cover;
background-repeat: no-repeat;
}
.hide {
background-size: 0 0, cover;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>It seems like you want to display one image as the default background and then toggle it with another image.
Here is my suggestion:
Create a new CSS class called extra-background, place Image A in the .container, and Image B in the .extra-background class.
On click, use toggleClass('extra-background')
$('.container').on('click', function(){
$(this).toggleClass("extra-background");
});.container{
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Vue.png/215px-Vue.png") #00D no-repeat fixed;
width:400px;
height:400px;
}
.extra-background{
background: url("https://upload.wikimedia.org/wikipedia/en/thumb/c/c9/VueCinemas.svg/1200px-VueCinemas.svg.png") #00D no-repeat fixed;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">Test</div>As someone who is new to jquery and still learning, I wanted to share a beautiful gallery that uses jquery on my website. You can find the link to it here: http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/ The gallery has a snippet that allows u ...
My personal website doesn't allow me to click on the links that I have added for web pages. Here is the CSS code I am using: @font-face { font-family: typewrite; src: url(fonts/typewcond_regular.otf); } @font-face { font-family: typewrite; sr ...
I've been working on a Laravel project that involves building Vue components. Strangely, every time I update a .vue file and add it for a commit, modifications are also made to the app.css and app.js files. These changes seem to be undoing a particula ...
I am in need of assistance with a div structure similar to this: <div id="namacoc" tabindex="1" class="filled-text" placeholder="Input your name" contenteditable ></div> <div id="position" tabindex="1" class="filled-text" placeholder="Input ...
I am interested in creating a custom multi-step modal This particular div has dynamically generated classes $('.modal-content').append('<div class="modal-body step step-' + key + '" data-step="'+key+'"></div> ...
I have been attempting to use the same code for multiple modules on this page, but none of the methods I've tried seem to be effective. I want to avoid endlessly duplicating existing code. document.addEventListener('DOMContentLoaded', fun ...
I am currently in the process of developing a recipe website focused on meals. I have created an admin panel where I can manage the meals added to the site. One issue I am facing is with deleting a meal that was previously added. The menu displays the numb ...
Attempting to develop a login system with PHP, jQuery, Ajax, and JSON. It successfully validates empty fields, but upon form submission, the Ajax call fails. The response text displays a JSON array in the console, indicating that the PHP part is not the is ...
In my form, there are multiple radio buttons, each with an associated text box value. Users can only select one radio button at a time and submit the form. However, sometimes users will enter data in a textbox for one radio button, then switch to another o ...
$(function() { $("#pagination a").trigger('click'); // When the page loads, trigger a click event $('body').on('click','div.well well-sm',function(){ var list = $(this); $('#myModal .modal-title').h ...
Currently utilizing jQuery to append a string to all heading tags (h1, h2,..., h6) and display it on the screen. Seeking guidance specifically for the replacing aspect, and open to solutions using plain javascript as well. The code I have so far, which I ...
Is there a way to extract just the YouTube ID from a given URL? https://www.youtube.com/embed/cqyziA30whE?controls=1&showinfo=0&rel=0&autoplay=0&loop=0 $(".youtube").click(function () { console.log(this.href.replace(new RegExp("em ...
I attempted to create a grid using CSS, but I seem to have made an error somewhere in my code. Can someone please take a look at my jsFiddle link and provide some guidance? jsFiddle /*Grid*/ .container { width: 100%; max-width: 1200px; } .row:before, ...
When experimenting with new platforms, I often utilize the openweathermap.org's api. However, I have encountered a recurring issue where I struggle to define a precise query for finding certain cities. The api functions smoothly for major cities like ...
I want to enhance the MUI component by adding more variations and new properties. Check out this screenshot of a React Example component: The Example component can be seen in the image above. I am seeking advice as I don't have much experience with ...
My goal is to utilize AJAX in conjunction with Django, but I want to achieve this without relying on jQuery. So far, I have made progress in sending URL encoded data from AJAX to Django successfully. However, I am currently facing an issue where I am unabl ...
I am in the process of developing a website for a production company where, upon clicking on a director's name from the menu, all other menu items disappear and only the selected director's biography and work are displayed. My current challenge ...
Currently, I have implemented a jQuery function to display a popup box using .show() and hide it using .hide(). Is there a way to incorporate charming animations such as fading into the popup box? // display pop up $('.mypopup').show(); // con ...
Below is an example of JSON data: [{ "RM_Name": "Russ Martin", "Division": "East", "RM_Phone": "(603) 491-1259", "RC_Name": "Jacob Sucoff", "RC_Phone": "(800) 247-4154 x3403", "States_Covered": "MT,VT, NH, ME (all firms)", "La ...
There is a collection of figure tags, each with an expandable figcaption. Inside each figure, there is a clickable div that reveals the figcaption when clicked. However, the visible figcaption only overlaps the figure it belongs to and not others. Is there ...