Showing posts with label window. Show all posts
Showing posts with label window. Show all posts

Monday 21 March 2016

H1 shows window width

I'm often trying understand which media queries to add to my CSS in order to control changes in the display of content. For this I need to see the window width as it resizes. There are other ways, but I find it more convenient if the page title show the window width.
To enable this, I add the following jQuery code, which is also available as a public gist here.
$(window).resize(function()
{
  $('h1').text($(window).width());
});

Monday 10 November 2014

Extend your footer to the browser window using jQuery

Some pages only have a small amount of content and aesthetic reasons you'l like your page footer to extend all the way to the edge of the browser window. There are ways to do this using CSS, but this method also requires to to code your pages differently too. I like to keep the code of my pages straight forward. HTML should not be altered for styling purposes.
So I wrote a jQuery plugin to do this. See below.
(function($)
{
    $.fn.extend(
    {
        footersizeset: function(options)
        {
            var defaults =
            {
                footertag:'footer',
                ofh:100
            };
            options = $.extend(defaults, options);
    var windowheight = $(this).height();
var footer = $(options.footertag);
var footerposition = footer.position();
var footerheight = options.ofh;
var footerbottom = footerheight + footerposition.top;

if(windowheight > footerbottom)
{
difference = windowheight - footerbottom;
footer.height(footerheight + difference);
}
        }
    });
})(jQuery);

Here's how to call the plugin. First you find what the height of the footer would be before the footer is reset. This is done outside all other jQuery calls so that this value doesn't keep getting reset as the browser window size changes.
Then, I make 2 calls to the plugin, once for the page load and subsequently for browser window changes.

var originalfooterheight = $('footer').height();
(function()
{
$(window).footersizeset(
{
footertag:'footer',
ofh:originalfooterheight
});
$(window).resize(function()
{
$(this).footersizeset(
{
footertag:'footer',
ofh:originalfooterheight
});
});
})();

Hope that makes sense.