jQuery Sticky Footer

18. August 2014 patrick (0)
The footer shown on the screen shot below will remain at the bottom of the page even if you re-size the page.

This is great if your site has a content area that is not that tall, and the site is displayed on a large monitor. This way the footer will be pushed to the bottom of the screen.  If content exceeds the screen height it will push the footer off the screen. A little tweak with jQuery to make the context dive scroll if you want the footer to be truly "sticky."

Open the example below in a new window. 

        function ResizeContent() {
            
            //Height of the available content area is  Page Height - (Header and Footer height. 
            //In this case 100px;
            var ContentHeight = Math.round($(window).height() - 100);
            ContentHeight = ContentHeight + "px";

            $("#MainContainer").css("min-height", ContentHeight);
        };


        $(function () {
            //Resize the content after page load or resize
             ResizeContent();

            window.onresize = function () {
                    ResizeContent();
              };
         });

Resize iFrame Content Automatically

18. June 2014 patrick (0)
I recently had a need to re-size the content of iFrames for a site that uses iFrame for various reasons. 

This is not an original work but a collection of demos and sample code.

1. jQuery Sample: Jscheuer1 at Dynamic Drive has the most usable example (IMO).  Use the links below for the online demo and to download the code.
2. iFrame content on other domains: In order to re-size iFrames the iFrame content page you are rending needs to be on the same domain, or you have to have some control over the page that contains the iFrame content.  In the case where the page is not on the same domain, but you own the code this link at CSS-TRICKS goes into how to set this up.