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

Transforming a React object into an array and displaying it on the frontend using the .map method

The browsers Firefox and Internet Explorer are unable to perform ajax requests

When using $.ajaxSetup, the content type is not configured for Get requests

Retrieving and showing information from a database (Using Javascript Ajax)

Wind - Best practices for managing the status of multiple entities within a single display prior to executing the save changes function

What is the best way to configure custom CSS styles in a React project?

Populating the jQuery datetime picker with the datetime value stored in the database

Ways to display and modify chosen and not chosen categories on the product editing page

Using Bootstrap: adjusting the height of input-group and select elements

Toggle sideBar within an iFrame by implementing Media Queries

Vue js throws a maximum call stack error when updating a Chart component

Locate the word or phrase without a comma

Mastering Angular: Tackling a Directive with Two Parts

Modal does not close

Is there a way to utilize javascript std input/output in repl.it effectively?

Swap two frames effortlessly with just a single click!

Is it necessary to incorporate Babel into a project that involves developing a backend service using Node.js and a front-end component using the EJS view engine?

Increase the value by one of the number enclosed in the <h3> element

Simply interested in extracting the JSON Class specifically, not all of the data

Checking for a particular element's existence in an array using jQuery