jQuery : toggle footer, resize from #px to 100% width and back

Question

I'm working on a toggle footer, it is width:100%;.

I set it to have max-width:670px, and I want it to expand to 100% width before the toggle animation. Here is my codepen: http://codepen.io/GCW/pen/ZYbvPO

As you can see, it works. But I had to set maxWidth: '5000' to have it full width in mostly every kind of screen. In this way, my animation is not fluid, my footer goes back to 670px very fast. I played with animation time, but I'm sure there is a better way to do that. I guess that my code is too long for this simple action, too.

I also tried with var window_width = $(window).width() and then .animate({ maxWidth: window_width }.. and it works well, just until I resize my window because it has a precise width value, and not a percentage, so it has some fixed width.

Answer 1

You can use the css 100vw property for new browsers but for older browsers you can use jquery to get the window width. Here is your code with my adjustment below below.

 (function($) {
    $(document).ready(function() {

        $('.nav-toggle').click(function(){

            var content_selector = $(this).attr('href');
            var my_switch = $(this); 

            //Added variable
            var viewPortWidth = $(window).outerWidth();

            if (my_switch.hasClass('close_toggle')) {
                    $(content_selector).slideToggle(function(){
                        $('.collapsing_footer').animate({
                        maxWidth: '670'}, 400);
                        my_switch.removeClass('close_toggle');
                    });   

                    //Remove resize event bind 
                    jQuery(window).unbind();

            } else { 


                //on resize adjust the max width
                jQuery(window).resize(function () {
                    //reset viewport width variable to current
                    viewPortWidth = $(window).outerWidth();
                     $('.collapsing_footer').css({ maxWidth : viewPortWidth });
                  console.log("here");
                });


                $('.collapsing_footer').animate({ maxWidth: viewPortWidth }, 600, 

                function() {
                    $(content_selector).slideToggle(
                        function(){
                         my_switch.toggleClass('close_toggle');
                        }
                    );

                    $('body').animate({ scrollTop: 999999 }, 700);

                });

            }

        });

    }); 
    })(jQuery);

If you have browser version detection i suggest you use that to fill the variable viewPortWidth. Here is an article about vw css and also contains browser support. http://css-tricks.com/viewport-sized-typography/