Reduce the number of divs on a webpage while incorporating animated transitions

Question

Reduce the number of divs on a webpage while incorporating animated transitions

I've been attempting to incorporate an animation on the width property for my div .panels. I've tried using transition-property in CSS and also with .animate() in jQuery, but unfortunately, it doesn't seem to be working. I also noticed that calc() is not functioning properly with jQuery animate...

The third panel should consistently have a width equal to the subtraction of the other two widths, allowing it to float on the right.

ex. width: 'calc(100% - ' + (panelWidth1 + panelWidth2) + 'px)'

If anyone has suggestions on how to make this work, they would be greatly appreciated! Thank you!

HMTL

<div class="actions">
  <button id="MinPanel1">Minimize Panel 1</button>
  <button id="MinPanel2">Minimize Panel 2</button>
</div>

<div class="panels">
  <div class="panel1"></div>
  <div class="panel2"></div>
  <div class="panel3"></div>
</div>

JS

$( document ).ready(function() {

    $('#MinPanel1').click(function() {
        var toggleWidth = $(".panel1").width() == 225 ? "57px" : "225px";
        $('.panel1').css({
            width: toggleWidth
        });
        adjustPanel();
    });

    $('#MinPanel2').click(function() {
        var toggleWidth = $(".panel2").width() == 330 ? "66px" : "330px";
        $('.panel2').css({
            width: toggleWidth
        });
        adjustPanel();
    });


    adjustPanel = function() {
        var panelWidth1 = $('.panel1').width();
        var panelWidth2 = $('.panel2').width();
        var panelWidthTotal = panelWidth1 + panelWidth2;

        $('.panel3').css({
            width: '-webkit-calc(100% - ' + panelWidthTotal + 'px)',
            width: '-moz-calc(100% - ' + panelWidthTotal + 'px)',
            width: 'calc(100% - ' + panelWidthTotal + 'px)'
        });
    }

});

CSS

[...]

.panel1, .panel2, .panel3{
    height: 100%;
    float: left;
    /*-moz-transition-property: width;
    -o-transition-property: width;
    -webkit-transition-property: width;
    transition-property: width;
    -moz-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;*/
}

[...]

DEMO : JS FIDDLE

EDITED DEMO RESULT: JS FIDDLE

javascript jquery css jquery-animate css-animations

Answer 1

Answer №1

Here is a suggestion for you to try out:

$( document ).ready(function() {

    $('#MinPanel1').click(function() {
        var toggleWidth = $(".panel1").width() == 225 ? "57px" : "225px";
        $('.panel1').animate({
            width: toggleWidth
        },function(){
            adjustPanel($('.panel1').width(), $('.panel2').width())
        });
    });

    $('#MinPanel2').click(function() {
        var toggleWidth = $(".panel2").width() == 330 ? "66px" : "330px";
        $('.panel2').animate({
            width: toggleWidth
        },function(){
            adjustPanel($('.panel1').width(), $('.panel2').width())
        });
    });


    adjustPanel = function(pan1, pan2) {
        console.log($('.panels').width(), pan1, pan2);
        var panelWidthTotal = $('.panels').width() - (pan1 + pan2) + 'px';

        $('.panel3').animate({
            width: panelWidthTotal
        });
    }

});

Answer 2

Here is a suggestion for you to try out:

$( document ).ready(function() {

    $('#MinPanel1').click(function() {
        var toggleWidth = $(".panel1").width() == 225 ? "57px" : "225px";
        $('.panel1').animate({
            width: toggleWidth
        },function(){
            adjustPanel($('.panel1').width(), $('.panel2').width())
        });
    });

    $('#MinPanel2').click(function() {
        var toggleWidth = $(".panel2").width() == 330 ? "66px" : "330px";
        $('.panel2').animate({
            width: toggleWidth
        },function(){
            adjustPanel($('.panel1').width(), $('.panel2').width())
        });
    });


    adjustPanel = function(pan1, pan2) {
        console.log($('.panels').width(), pan1, pan2);
        var panelWidthTotal = $('.panels').width() - (pan1 + pan2) + 'px';

        $('.panel3').animate({
            width: panelWidthTotal
        });
    }

});

Answer 3

Answer №2

Check out this functional code snippet that utilizes css transitions and requires a slight adjustment in the JavaScript to ensure it accurately captures the final width of the divs rather than the transient one during animation.

$( document ).ready(function() {
    
    $('#MinPanel1').click(function() {
        var toggleWidth = $(".panel1").width() == 225 ? "57px" : "225px";
        var toggleWidth1=toggleWidth;
        $('.panel1').css({
            width: toggleWidth
        });
        adjustPanel();
    });
    
    $('#MinPanel2').click(function() {
        var toggleWidth = $(".panel2").width() == 330 ? "66px" : "330px";
        var toggleWidth2=toggleWidth;
        $('.panel2').css({
            width: toggleWidth
        });
        adjustPanel();
    });
    
    
    adjustPanel = function() {
        var panelWidth1 = toggleWidth1;
        var panelWidth2 = toggleWidth2;
        var panelWidthTotal = panelWidth1 + panelWidth2;
        
        $('.panel3').css({
            width: '-webkit-calc(100% - ' + panelWidthTotal + 'px)',
            width: '-moz-calc(100% - ' + panelWidthTotal + 'px)',
            width: 'calc(100% - ' + panelWidthTotal + 'px)'
        });
    }
    
});

*{
    box-sizing: border-box;
}
html, body{
    width: 100%;
    height: 100%;
}
.actions{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    width: 100%;
    background: white;
}

.actions button{
    margin-right: 10px;
}

.panels{
    height: 100%;
}
.panel1, .panel2, .panel3{
    height: 100%;
    float: left;
    /*-moz-transition-property: width;
    -o-transition-property: width;
    -webkit-transition-property: width;
    transition-property: width;
    -moz-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;*/
}

.panel1{
    width: 225px;
    background-color: blue;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;

}

.panel2{
    width: 330px;
    background-color: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

.panel3{
    width: calc(100% - 555px);
    background-color: darkgreen;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="actions">
  <button id="MinPanel1">Minimize Panel 1</button>
  <button id="MinPanel2">Minimize Panel 2</button>
</div>

<div class="panels">
  <div class="panel1"></div>
  <div class="panel2"></div>
  <div class="panel3"></div>
</div>

Answer 4

Check out this functional code snippet that utilizes css transitions and requires a slight adjustment in the JavaScript to ensure it accurately captures the final width of the divs rather than the transient one during animation.

$( document ).ready(function() {
    
    $('#MinPanel1').click(function() {
        var toggleWidth = $(".panel1").width() == 225 ? "57px" : "225px";
        var toggleWidth1=toggleWidth;
        $('.panel1').css({
            width: toggleWidth
        });
        adjustPanel();
    });
    
    $('#MinPanel2').click(function() {
        var toggleWidth = $(".panel2").width() == 330 ? "66px" : "330px";
        var toggleWidth2=toggleWidth;
        $('.panel2').css({
            width: toggleWidth
        });
        adjustPanel();
    });
    
    
    adjustPanel = function() {
        var panelWidth1 = toggleWidth1;
        var panelWidth2 = toggleWidth2;
        var panelWidthTotal = panelWidth1 + panelWidth2;
        
        $('.panel3').css({
            width: '-webkit-calc(100% - ' + panelWidthTotal + 'px)',
            width: '-moz-calc(100% - ' + panelWidthTotal + 'px)',
            width: 'calc(100% - ' + panelWidthTotal + 'px)'
        });
    }
    
});

*{
    box-sizing: border-box;
}
html, body{
    width: 100%;
    height: 100%;
}
.actions{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    width: 100%;
    background: white;
}

.actions button{
    margin-right: 10px;
}

.panels{
    height: 100%;
}
.panel1, .panel2, .panel3{
    height: 100%;
    float: left;
    /*-moz-transition-property: width;
    -o-transition-property: width;
    -webkit-transition-property: width;
    transition-property: width;
    -moz-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;*/
}

.panel1{
    width: 225px;
    background-color: blue;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;

}

.panel2{
    width: 330px;
    background-color: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

.panel3{
    width: calc(100% - 555px);
    background-color: darkgreen;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="actions">
  <button id="MinPanel1">Minimize Panel 1</button>
  <button id="MinPanel2">Minimize Panel 2</button>
</div>

<div class="panels">
  <div class="panel1"></div>
  <div class="panel2"></div>
  <div class="panel3"></div>
</div>

Reduce the number of divs on a webpage while incorporating animated transitions

Answer №1

Answer №2

Similar questions

"I have successfully removed the URL from index.html. However, I am now wondering how I can include them in app

Using withRouter() to redirect will display all components

loading content from an external link using ajax and displaying it in a specified div

What is the best way to ensure that two objects collide with one another?

What is the proper method for setting up handlers in functional React components?

An alternative to Firebug for Internet Explorer

Resize images in PHP and MySQL with precision without distorting the image

What is the proper way to utilize a class with conditional export within the Angular app.module?

Problems arise when Twitter Typeahead, Knockout JS, and Twitter Bootstrap 3 are unable to cooperate harmoniously

What strategies can be implemented to increase the number of backlinks?

when the window is scrolled a certain amount, use jQuery to scroll back in the opposite direction

Give instructions on how to sequence multiple ajax requests in a specific order

Transfer the value of a JavaScript variable to paste it into a fresh tab on Google Chrome

Struggling to get a basic HTML form to function with JavaScript commands

What could be the reason for data-id coming back as undefined?

Top method for extracting mesh vertices in three.js

Create artwork by drawing and adding text to an image before saving it

Showing formatted JSON in the view using ASP.NET MVC

Maximizing the efficiency of a personalized hook that facilitates data sharing in React

Conflict between Play framework and jQuery AJAX calls