1
\$\begingroup\$

I'm using this JS to sticky website footers at the bottom and I would like to know if is there anything to be optimised?

(function($, window, document){
    //Screen_height = Header_height + Main_Content_height + Footer_height + alltoplvlContainersMarginTop_Bottom + alltoplvlContainersPaddingTop_Bottom
    $.fn.sticky_footer = function(header,footer,content) {
        if(typeof header != undefined && typeof footer != undefined && typeof content != undefined) {
            var screen_height = $(window).height(); //Total height of the screen which is rendered within a browser window without having to scroll-down.

            var sum_of_top_bottom_props = function(id){ //Returns the sum of float values of padding-top,bottom margin-top,bottom, border-top,bottom-width.
                    if(typeof id != undefined){
                        var elem_id = id;
                        if(elem_id.length>0) { //If id exists in the page, fetch the sum of float values of the properties.
                           var prop_padding = parseFloat(elem_id.css('padding-top'))+parseFloat(elem_id.css('padding-bottom')),
                               prop_margin = parseFloat(elem_id.css('margin-top'))+parseFloat(elem_id.css('margin-bottom')),
                               prop_border = parseFloat(elem_id.css('border-top-width'))+parseFloat(elem_id.css('border-bottom-width'));
                           return prop_padding+prop_margin+prop_border;
                       } else{ //If id soesnot exist return 0;
                           console.error("The id: "+id+" doesn't exists! Pleas enter a valid id.");
                           return 0;
                       }
                   }};

            var header_height = (header.length>0) ? header.height():0, //Height of header
                footer_height = (footer.length>0) ? footer.height():0, //Height of footer
                header_props = sum_of_top_bottom_props(header), //Height of properties that contribute to header's height.
                footer_props = sum_of_top_bottom_props(footer), //Height of properties that contribute to footer's height.
                main_props = sum_of_top_bottom_props(content), //Height of properties that contribute to content's height.
                main_height = screen_height-(header_height + header_props + main_props + footer_props + footer_height);

            if(content!= undefined && content.length>0) { content.css('min-height',main_height); return true; } 
            else return false;
        } 
        else return false;
    }
})(jQuery, window, document);

GitHub: https://github.com/Elavarasanlee/sticky-footer.js

\$\endgroup\$

1 Answer 1

3
\$\begingroup\$

From a once over,

  • I strongly suggest lowerCamelCase: sticky_footer -> stickyFooter, screen_height -> screenHeight etc. etc.
  • You should compare to undefined with === or use a falsey comparison, I would suggest the falsey comparison:

    if(header && footer && content) {
    
  • This: var elem_id = id; makes no sense to me, why not simply keep working with id ?
  • If you are going to return the sum of all 6 css values (return prop_padding+prop_margin+prop_border; ), then I would not use the temporary values but just return the actual calculation
  • Do not use console.log in production code
  • That gives something like this:

    //Returns the sum of float values of padding-top/bottom,margin-top/bottom, border-top/bottom, 
    //if no element is provided, returns 0
    var sum_of_top_bottom_props = function(id){ 
        if(id && id.length){
            return parseFloat(elem_id.css('padding-top')) + 
                   parseFloat(elem_id.css('padding-bottom')) +
                   parseFloat(elem_id.css('margin-top')) + 
                   parseFloat(elem_id.css('margin-bottom')) +
                   parseFloat(elem_id.css('border-top-width')) + 
                   parseFloat(elem_id.css('border-bottom-width'));
         }
         return 0;
    }};
    
  • else return false is pointless, just do return false
  • Finally, you require the user of your script to take care of $(window).resize(function(){, your script should take care of that instead.
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.