SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% height - pixels

    I'm trying to write a jQuery script to resize a Google map I have wrapped in div#map. I want the map to be 100% of the window size minus 120px for the header and topbar. Does anyone know how to have this work everytime the window is resized? I'm new to jQuery and am having some issues getting this to work. Thanks!

    Code:
    $(window).resize(function() {
    	  $('#map').height() = ($window).height() - 120;
    });

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi there.

    I've put up a jsFiddle to demo this behaviour.

    http://jsfiddle.net/GeekyJohn/TMnA7/

    Basically the important things are:

    Basic CSS to get the layout
    Code CSS:
    #header {
        height:120px; 
        width:100%;
        background: #ccc;
    }
     
     
    #map {
        height:500px; /* Just a minimum height */
        width:100%;
        background: #aaa;
    }

    Basic instance of Google Maps
    Code JavaScript:
    var googleMap;
    function map_init() {
        var myOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        googleMap = new google.maps.Map(document.getElementById('map'), myOptions);
    }
     
     
    google.maps.event.addDomListener(window, 'load', map_init);

    The JS that handles the resizing

    Code JavaScript:
    //set the minimum height of the map
    var minSize = 500;
    //cache reference to jQuery vars we need in the resize method
    var $map = $("#map");
    var $win = $(window);
     
     
    //start out by setting the height
    $map.height($win.height()-120);
     
    // You may also to want to look in to using a "Throttler" like jQuery.throttle 
    // to limit the amount of times this gets called, especially if you have a lot
    // of objects on the map (pins, lines, etc).
    // e.g. [url]http://benalman.com/projects/jquery-throttle-debounce-plugin/[/url]
    $(window).resize(function(){
        //make sure the new size is at least the min-height we want
        var newSize = $win.height()-120;
     
     
        if ( parseInt(newSize, 10) < minSize ) {
            newSize = minSize;
        }
     
     
        $map.height(newSize);
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How can I make this go 100% of the height remaining under the header.

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ralph6410 View Post
    How can I make this go 100% of the height remaining under the header.
    The JS fiddle linked above should be doing just that.

    I've updated it so it puts an overflow:hidden; on the body to make sure that it doesn't get a scrollbar (in case there is extra margin/padding for some reason)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •