Make the child div images disappear gradually and at the same time, make an overlapping parent div image appear using Javascript

Question

Make the child div images disappear gradually and at the same time, make an overlapping parent div image appear using Javascript

Check out my attempt at solving this challenge on jsfiddle: http://jsfiddle.net/oca3L32h/

In the scenario, there are 3 divs within a main div. Each of these divs contains an image and they overlap each other. By using radio buttons, the visibility of these divs can be controlled (showing one while hiding the others).

The goal is to create a Javascript function that will perform an AJAX query to the database when the page loads. If the response from the database is "0", a specific image should appear with 50% opacity overlaying the 3 divs. This semi-transparent image should prevent interaction with the original images underneath even when the radio buttons are clicked.

To simulate the database check in the jsfiddle, I added a "Click me" button that triggers the Javascript function. However, achieving the desired outcome has been challenging.

This is the current Javascript function:

//function to show transparent image
function ShowTransparentImage(){

//reduce opacity of firstDIV, secondDIV, and thirdDIV to 50%
document.getElementById("firstDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
document.getElementById("secondDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
document.getElementById("thirdDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

//increase opacity of masterDiv's background image to 50%
document.getElementById("masterDIV.background-image").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

};

The challenge lies in properly manipulating the overlapping images through CSS changes within the Javascript function. Any assistance or guidance on how to tackle this issue would be greatly appreciated. Thank you!

javascript jquery html css image

Answer 1

Answer №1

UPDATE: Check out the latest version of the jsFiddle which includes fading effects.

If you are aiming to display one of three images based on user selection using radio buttons, along with a semi-transparent overlapping image controlled by JavaScript, here's an alternative method to achieve that. Instead of dynamically changing styles through JS, consider adding/removing classes and including additional CSS rules.

Here is the link to the updated jsFddle, and below is the code snippet for reference.

HTML:

<div><input class="transparentImageToggleButton" type="button" value="Toggle Transparent Image" /></div>
<div><input class="radio" type="radio" name="thing" value="0" checked />Image 0</div>
<div><input class="radio" type="radio" name="thing" value="1" />Image 1</div>
<div><input class="radio" type="radio" name="thing" value="2" />Image 2</div>

<div class="masterDiv">
    <div class="imageDiv active">
        <img src="http://lorempixel.com/g/400/400/sports" />
    </div>
    <div class="imageDiv">
        <img src="http://lorempixel.com/g/400/400/food" />
    </div>
    <div class="imageDiv">
        <img src="http://lorempixel.com/g/400/400/nature" />
    </div>
    <img class="masterImage" src="http://placehold.it/400x400?text=master+image" />
</div>

CSS:

.masterDiv {
    position: relative;
}

.imageDiv {
    display: none;
}

.imageDiv.active {
    display: block;
}

.masterImage {
    display: none;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
}

.masterImage.active {
    display: inline;
}

JS (with jQuery):

$('.transparentImageToggleButton').on('click', function() {
    $('.masterImage').toggleClass('active');
});

$('.radio').on('click', function() {
    $('.imageDiv').removeClass('active').eq($(this).val()).addClass('active');
});

Answer 2

UPDATE: Check out the latest version of the jsFiddle which includes fading effects.

If you are aiming to display one of three images based on user selection using radio buttons, along with a semi-transparent overlapping image controlled by JavaScript, here's an alternative method to achieve that. Instead of dynamically changing styles through JS, consider adding/removing classes and including additional CSS rules.

Here is the link to the updated jsFddle, and below is the code snippet for reference.

HTML:

<div><input class="transparentImageToggleButton" type="button" value="Toggle Transparent Image" /></div>
<div><input class="radio" type="radio" name="thing" value="0" checked />Image 0</div>
<div><input class="radio" type="radio" name="thing" value="1" />Image 1</div>
<div><input class="radio" type="radio" name="thing" value="2" />Image 2</div>

<div class="masterDiv">
    <div class="imageDiv active">
        <img src="http://lorempixel.com/g/400/400/sports" />
    </div>
    <div class="imageDiv">
        <img src="http://lorempixel.com/g/400/400/food" />
    </div>
    <div class="imageDiv">
        <img src="http://lorempixel.com/g/400/400/nature" />
    </div>
    <img class="masterImage" src="http://placehold.it/400x400?text=master+image" />
</div>

CSS:

.masterDiv {
    position: relative;
}

.imageDiv {
    display: none;
}

.imageDiv.active {
    display: block;
}

.masterImage {
    display: none;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
}

.masterImage.active {
    display: inline;
}

JS (with jQuery):

$('.transparentImageToggleButton').on('click', function() {
    $('.masterImage').toggleClass('active');
});

$('.radio').on('click', function() {
    $('.imageDiv').removeClass('active').eq($(this).val()).addClass('active');
});

Answer 3

Answer №2

Consider eliminating .background-image from the code

document.getElementById("masterDIV.background-image")

, and utilize .click() to invoke ShowTransparentImage function.

$('.radio input').on('click', function(){
    //Hide all image divs
    $imageDivs.css({'display':'none', opacity:1});
    $("#masterDIV").css({zIndex:0})
    //Then display the image div we want to see
    //To find that out, we'll retrieve the id of the current radio button
    var radioID = $(this).attr('id');

    //And then display that image div
    $('#' + radioID + 'DIV').css('display','block'); 
});

//function to show transparent image
$("button").click(function ShowTransparentImage(){

  //Fade out firstDIV, secondDIV, and thirdDIV by 50%
  document.getElementById("firstDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
  document.getElementById("secondDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
  document.getElementById("thirdDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

  //Fade in masterDiv's image with 50% opacity
  document.getElementById("masterDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);z-index:2");   
});

css

#masterDIV{
    opacity:0;
    width:400px;
    height:400px;
     position: absolute;
    background-image: url(https://jonathanhult.com/blog/wp-content/uploads/2013/06/padlock.png);
}

jsfiddle http://jsfiddle.net/oca3L32h/5/

Answer 4

Consider eliminating .background-image from the code

document.getElementById("masterDIV.background-image")

, and utilize .click() to invoke ShowTransparentImage function.

$('.radio input').on('click', function(){
    //Hide all image divs
    $imageDivs.css({'display':'none', opacity:1});
    $("#masterDIV").css({zIndex:0})
    //Then display the image div we want to see
    //To find that out, we'll retrieve the id of the current radio button
    var radioID = $(this).attr('id');

    //And then display that image div
    $('#' + radioID + 'DIV').css('display','block'); 
});

//function to show transparent image
$("button").click(function ShowTransparentImage(){

  //Fade out firstDIV, secondDIV, and thirdDIV by 50%
  document.getElementById("firstDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
  document.getElementById("secondDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
  document.getElementById("thirdDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

  //Fade in masterDiv's image with 50% opacity
  document.getElementById("masterDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);z-index:2");   
});

css

#masterDIV{
    opacity:0;
    width:400px;
    height:400px;
     position: absolute;
    background-image: url(https://jonathanhult.com/blog/wp-content/uploads/2013/06/padlock.png);
}

jsfiddle http://jsfiddle.net/oca3L32h/5/

Make the child div images disappear gradually and at the same time, make an overlapping parent div image appear using Javascript

Answer №1

Answer №2

Similar questions

The jQuery CSS menu is having trouble highlighting the active link

Find the div element that wraps around the currently selected radio button

Accessing AngularJS variable scope outside of a function

What is the best way to make a hyperlink in HTML open in the same page or window, without relying on the <iframe> tag or JavaScript?

Can a hyperlink open multiple links at the same time when hovered over?

Conditional logic in Gravity Forms enhanced with Date Picker functionality

JavaScript issue: "No relay configuration found" error specifically occurs in Internet Explorer versions 7 and 8

What is the method for adding the square root symbol to a button's value?

javascript - The Key Pair of a Jquery Object is Not Defined

Troubleshooting difficulties integrating NodeJS with R using an R script

Trigger notifications exclusively for specific hyperlink texts that are selected

Customize your file input with Bootstrap 4 using bs-custom-file-input and create a Symfony 5 collection with dynamic upload fields

JavaScript breaks when using jQuery Ajax to pass an email to a PHP script

Guide to executing a server-side FUNCTION within a specific namespace room exclusively with the help of socket.io, express, and node.js

Viewer model aggregation - coordinating problem

CSS or Coding? Learn how to display items side by side instead of on top of each other

Changing innerHTML in CoffeeScript

Querying a Database to Toggle a Boolean Value with Jquery, Ajax, and Laravel 5.4

Opting for fetch over jQuery's ajax for making successful GET requests to an API

Utilize custom fonts from your local directory within a Vite Vue3 project