SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot Hieronymus's Avatar
    Join Date
    Nov 2004
    Location
    Nederland, Eindhoven
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Google maps fullscreen toggle not working in IE7

    Hi,

    I've a bug in IE7 with my google maps fullscreen toggle.
    I test on Win7 with IE9 in compatibility modus. But it doesn't work on WinXP either.
    The whole thing seems to work in browsermode IE8

    The thing is the canvas does seems to fill the whole viewport (and the toggle button on the bottom right moves with it and works to toggle it back) but the map isn't drawn. You just see the original content (but then without the map, since the container is now the whole viewport.
    I can't find the mistake.

    Here is the code
    the page HTML:
    HTML Code:
    <div id="map_canvas" class="banner"></div>
    part of the init function (javascript and jQuery):
    Code:
    // part of the init function
            $('#'+canvas).append('<input type="button" class="button" value="Volledig scherm" onclick="myMap.toggleFs();" />')
            $('#'+canvas).append('<div style="height: 100%; width: 100%;" id="' + this.mapId + '"></div>');
    
    // the toggle functions:
        escFullscreen: function(e) {
            if (e.keyCode == 27) { myMap.toggleFs(); }
        },
    
        // Toggle map fullscreen
        toggleFs: function() {
            var latLng = this.map.getCenter()
            if (!$('#'+this.canvas).hasClass('fullscreen')) {
                $('body').addClass('fullscreen');
                $(":button[value='Volledig scherm']").val('Volledig scherm sluiten');
                $('#'+this.canvas).css('position', 'fixed');
                $('#'+this.canvas).addClass('fullscreen');
                $(document).bind('keyup', myMap.escFullscreen);
            } else {
                $('body').removeClass('fullscreen');
                $(":button[value='Volledig scherm sluiten']").val('Volledig scherm');
                $('#'+this.canvas).css('position', 'relative');
                $('#'+this.canvas).removeClass('fullscreen');
                $(document).unbind('keyup', myMap.escFullscreen);
            }
            google.maps.event.trigger(this.map, 'resize');
            this.map.panTo(latLng);
        }
    And the css from default.css
    Code:
    div.fullscreen {
    	margin: 0;
    	padding: 0;
    	top: 0;
    	right: 0;
    	left: 0;
    	bottom: 0;
    	height: auto !important;
    	width: auto !important;
    	position: fixed;
    	z-index: 100;
    }
    
    body.fullscreen {
    	overflow: hidden;
    }
    
    div.banner input {
    	z-index: 10000000;
    	position: absolute;
    	bottom: 20px;
    	right: 1px;
    }
    and the IE.css
    Code:
    /* Fix for fullscreen Maps */
    div.fullscreen{
        position: fixed;
        display: block;
        overflow: hidden;
    }
    If I check with the F12-development thingy all styles are applied, they just don't work for IE7, but I don't see the problem. Maybe there's some bug with the resize trigger, since the actual map seems the only thing missing...
    What good are one-liners if they don't
    fit.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'd need to see the page to debug but sounds like haslayout.

    Try adding zoom:1.0 to .fullscreen (or any other parent that isn't in haslayout mode)

  3. #3
    SitePoint Zealot Hieronymus's Avatar
    Join Date
    Nov 2004
    Location
    Nederland, Eindhoven
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I've just tested with alerting the currentStyle.hasLayout property of the map_canvas and the body-tag (both have .fullscreen class) they all result in 'true'. (when toggling back and forth.)
    (i did add a .fullscreen{zoom: 1.0;} to the stylesheet)
    Since the whole map thing is behind a log-in, I'll try to make it available for debugging soon.
    What good are one-liners if they don't
    fit.


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
  •