Modify the height using JavaScript and then revert back to the initial CSS height

Question

Modify the height using JavaScript and then revert back to the initial CSS height

Looking for assistance with a JavaScript issue that I'm currently facing.

Q1: Javascript Function to Return Image Height and Margin

My website layout consists of a horizontal scroll of smaller images arranged in a grid, each with different height percentages and margins for positioning. When an image is clicked, it expands to height:100% and margin:0, clearing all previous styles to create a simple large image layout.

My query is, how can I implement a function that returns the height and margins to their original CSS settings when clicking on .image-container?

JS Fiddle Demo (click any center image)

// GALLERY 100% height
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': '100%'},900) 
        .animate({'margin': '0'},900); 

    });

    // ? REMOVE HEIGHT ? 
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': '?'},900)
        .animate({'margin': '?'},900); 

    });

EDIT UPDATED QUESTION: Q2 HOW TO MAKE PAGE SIZE GROW WITH LARGER IMAGES

Currently, my .image-container is set to a large width. However, with responsive images, it's challenging to determine the correct width. Is there a way to dynamically adjust the width to accommodate larger images when clicked (as shown above)?

.image-container {
display:block;
width:3600px;
height: 75%;
float:left;

position:absolute;
top: 13%;
left: 120px;

z-index: -1;

Thank you for any assistance!

javascript jquery html css height

Answer 1

Answer №1

To keep track of the initial height, it is important to save it in a variable.

Take a look at the revised fiddle

var storedHeight;
        // Adjusting gallery height to 100%
        $('.image-container').click(function(){
            storedHeight = $('.image-container img').height();
            $('.image-container img').animate({'height': '100%'},900) 
            .animate({'margin': '0'},900); 

        });

        //Resetting height
        $('.image-container').click(function(){
            $('.image-container img').animate({'height': storedHeight},900)
            .animate({'margin': '0'},900); 

        });

UPDATE:

Apologies for the error in the prior solution. I mistakenly used the click function twice unnecessarily. Here is the corrected solution along with the revised fiddle.

       var storedHeight;
       $('.image-container').click(function () {
           if (!storedHeight) storedHeight = $('.image-container img').height();
           if ($('.image-container img').css('height') == storedHeight + "px") { // Adjusting gallery height to 100%
               $('.image-container img').animate({
                   'height': '100%'
               }, 900).animate({
                   'margin': '0'
               }, 900);
           } else { //Resetting height
               $('.image-container img').animate({
                   'height': storedHeight
               }, 900).animate({
                   'margin': '0'
               }, 900);
           }
       });

Answer 2

To keep track of the initial height, it is important to save it in a variable.

Take a look at the revised fiddle

var storedHeight;
        // Adjusting gallery height to 100%
        $('.image-container').click(function(){
            storedHeight = $('.image-container img').height();
            $('.image-container img').animate({'height': '100%'},900) 
            .animate({'margin': '0'},900); 

        });

        //Resetting height
        $('.image-container').click(function(){
            $('.image-container img').animate({'height': storedHeight},900)
            .animate({'margin': '0'},900); 

        });

UPDATE:

Apologies for the error in the prior solution. I mistakenly used the click function twice unnecessarily. Here is the corrected solution along with the revised fiddle.

       var storedHeight;
       $('.image-container').click(function () {
           if (!storedHeight) storedHeight = $('.image-container img').height();
           if ($('.image-container img').css('height') == storedHeight + "px") { // Adjusting gallery height to 100%
               $('.image-container img').animate({
                   'height': '100%'
               }, 900).animate({
                   'margin': '0'
               }, 900);
           } else { //Resetting height
               $('.image-container img').animate({
                   'height': storedHeight
               }, 900).animate({
                   'margin': '0'
               }, 900);
           }
       });

Answer 3

Answer №2

My plan is to try the following approach:

// Initial setup
    var heights = new Array();
    var margins = new Array();
    $('.image-container img').each(function(){
       heights.push($(this).css('height'));
    });
    $('.image-container img').each(function(){
       margins.push($(this).css('margin'));
    });
// 
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': '100%'},900)
        .animate({'margin': '0'},900); 

    });

    // Change back to original height and margin
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': heights[$(this).index()]},900)
        .animate({'margin': margins[$(this).index()]},900); 

    });

Answer 4

My plan is to try the following approach:

// Initial setup
    var heights = new Array();
    var margins = new Array();
    $('.image-container img').each(function(){
       heights.push($(this).css('height'));
    });
    $('.image-container img').each(function(){
       margins.push($(this).css('margin'));
    });
// 
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': '100%'},900)
        .animate({'margin': '0'},900); 

    });

    // Change back to original height and margin
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': heights[$(this).index()]},900)
        .animate({'margin': margins[$(this).index()]},900); 

    });

Answer 5

Answer №3

If you want to revert changes made with a 'click' event, it's recommended to use the focusout and blur events instead. This way, you can avoid overriding the initial click implementation. A better approach would be to resize the image when clicked and restore its original size when clicked outside.

Here's an example:

// GALLERY 100% height
$('.image-container')
  .bind('click', function(){
    $('.image-container img').animate({height: '100%'}, 900) 
    .animate({margin: 0}, 900);
  })
  .bind('focusout blur', function(){
    $('.image-container img').animate({height: ''}, 900) 
    .animate({margin: ''}, 900);
  });

Alternatively, you can use classes to define different behaviors for clicking and clicking again, like this:

<style>
.clickimage { height : 100%; margin :0;}
.yourOriginalValues {height : original; margin : original;}
</style>

$('.yourOriginalValues').click(function(){
  $(this).switchClass("yourOriginalValues", "clickimage", 900);
});
$('.clickimage).click(function(){
  $(this).switchClass("clickimage", "yourOriginalValues", 900);
});

ps. The switchClass method is a jQuery UI functionality.

Answer 6

If you want to revert changes made with a 'click' event, it's recommended to use the focusout and blur events instead. This way, you can avoid overriding the initial click implementation. A better approach would be to resize the image when clicked and restore its original size when clicked outside.

Here's an example:

// GALLERY 100% height
$('.image-container')
  .bind('click', function(){
    $('.image-container img').animate({height: '100%'}, 900) 
    .animate({margin: 0}, 900);
  })
  .bind('focusout blur', function(){
    $('.image-container img').animate({height: ''}, 900) 
    .animate({margin: ''}, 900);
  });

Alternatively, you can use classes to define different behaviors for clicking and clicking again, like this:

<style>
.clickimage { height : 100%; margin :0;}
.yourOriginalValues {height : original; margin : original;}
</style>

$('.yourOriginalValues').click(function(){
  $(this).switchClass("yourOriginalValues", "clickimage", 900);
});
$('.clickimage).click(function(){
  $(this).switchClass("clickimage", "yourOriginalValues", 900);
});

ps. The switchClass method is a jQuery UI functionality.

Modify the height using JavaScript and then revert back to the initial CSS height

Answer №1

Answer №2

Answer №3

Similar questions

The issue of execution order in JavaScript Recursion with promises

Navigating the rollout of a fresh new design

What is the best way to detect a specific button press from an external component?

designing a button layout with bootstrap framework

Move the accordion slider to the top of the browser

Analyze the information presented in an HTML table and determine the correct response in a Q&A quiz application

Issue with Bootstrap spinner not functioning properly within a table featuring a sticky header

Can you identify the animation being used on this button - is it CSS or JavaScript?

Leverage the values of object properties from a pair of JavaScript arrays containing objects

The appearance of the logout button may differ depending on the web browser being used

floating point for a list item compared to other elements

Displaying Vue v-for data in console.log

Tips for modifying the language of an Angular Application's OneTrust Cookie Banner

Inserting a picture using CSS

Guide to retrieving IDs of images on a canvas during drag and drop functionality

Error thrown due to syntax issues in react.d.ts declaration file in TypeScript

What is the best way to retrieve all the keys from an array?

Trigger a click based on the CSS path starting from a specific element in the DOM

What is the best way to apply changes to every class in JavaScript?

Retrieve a photo from a website address and determine its dimensions