Window Height 100%
233 views
Skip to first unread message
MDBrownArch
May 31, 2009, 9:41:25 PM5/31/09
to KML Developer Support - Google Earth Plug-in, mattbr...@gmail.com
This seems like a simple question, but I can't seem to find any
solutions anywhere. How do you set the plug-in window height to be
100% in Firefox? When I add height:100%; to my div it causes the whole
window to disappear.
I have seen solutions for absolute positioning that works well for
filling the entire screen, but I am using a header section and a
toggled hidden div next to the GE window.
Thanks,
Matt
solutions anywhere. How do you set the plug-in window height to be
100% in Firefox? When I add height:100%; to my div it causes the whole
window to disappear.
I have seen solutions for absolute positioning that works well for
filling the entire screen, but I am using a header section and a
toggled hidden div next to the GE window.
Thanks,
Matt
Danielg
Jun 2, 2009, 4:42:53 AM6/2/09
to KML Developer Support - Google Earth Plug-in
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /
>
<head>
<title>Fullscreen with hidden div</title>
<script src="http://www.google.com/jsapi?
key=ABQIAAAArbudo4MzoOLr808K5aoFrxTP4vJ-ByLJtxH7PgxE6G7aU0YvERSmCYoS_-
EDNotISJT7sAfQ0kc-rA"></script>
<script>
google.load("earth", "1");
var ge = null;
function init() {
google.earth.createInstance("map3d", initCallback, failureCallback);
}
function initCallback(object) {
ge = object;
ge.getWindow().setVisibility(true);
}
function failureCallback(object) {
}
</script>
<style type="text/css">
*{
padding:0;
margin:0;
}
html, body {
height: 100%; /* heel belangrijk */
font: 1.0em "Trebuchet MS", Verdana, Arial, sans-serif;
color: #000;
background-color:#FFFFFF;
}
#container {
width: 141px;
max-width:141px;
text-align: left;
/*position: relative;*/
min-height: 100%;
height: auto !important; /* voor moderne browsers */
height: 100%; /* voor IE */
background-color:#BDD1E9;
position:fixed;
bottom:0;
display:none;
}
#container2{
margin-left:0px;
padding-left:0px;
height:100%;
margin-top:0px;
width:100%;
}
#hidden_div{
display:none;
}
</style>
</head>
<body onload='init()' id='body'>
<div id="container2" style="position:relative; overflow:hidden;
margin:0px; z-index:0">
<div id="maps" style="z-index:0; position:absolute;
overflow:hidden; width: 100%; height: 100%">
<div id="map_rel" style="position:absolute; z-index:0; top:
0px; left:0px; width: 100%; height: 100%">
<div id="map" style="position:absolute; width: 100%;
height: 100%"> </div>
</div>
<div id="map3d" style="z-index:-1;position:absolute;top:
0px;left:0px;width:100%;height:100%"></div>
</div>
</div>
<div id="hidden_div">
dit is de hidden div
</div>
</body>
</html>
Good luck with it
Regards
Daniel
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /
>
<head>
<title>Fullscreen with hidden div</title>
<script src="http://www.google.com/jsapi?
key=ABQIAAAArbudo4MzoOLr808K5aoFrxTP4vJ-ByLJtxH7PgxE6G7aU0YvERSmCYoS_-
EDNotISJT7sAfQ0kc-rA"></script>
<script>
google.load("earth", "1");
var ge = null;
function init() {
google.earth.createInstance("map3d", initCallback, failureCallback);
}
function initCallback(object) {
ge = object;
ge.getWindow().setVisibility(true);
}
function failureCallback(object) {
}
</script>
<style type="text/css">
*{
padding:0;
margin:0;
}
html, body {
height: 100%; /* heel belangrijk */
font: 1.0em "Trebuchet MS", Verdana, Arial, sans-serif;
color: #000;
background-color:#FFFFFF;
}
#container {
width: 141px;
max-width:141px;
text-align: left;
/*position: relative;*/
min-height: 100%;
height: auto !important; /* voor moderne browsers */
height: 100%; /* voor IE */
background-color:#BDD1E9;
position:fixed;
bottom:0;
display:none;
}
#container2{
margin-left:0px;
padding-left:0px;
height:100%;
margin-top:0px;
width:100%;
}
#hidden_div{
display:none;
}
</style>
</head>
<body onload='init()' id='body'>
<div id="container2" style="position:relative; overflow:hidden;
margin:0px; z-index:0">
<div id="maps" style="z-index:0; position:absolute;
overflow:hidden; width: 100%; height: 100%">
<div id="map_rel" style="position:absolute; z-index:0; top:
0px; left:0px; width: 100%; height: 100%">
<div id="map" style="position:absolute; width: 100%;
height: 100%"> </div>
</div>
<div id="map3d" style="z-index:-1;position:absolute;top:
0px;left:0px;width:100%;height:100%"></div>
</div>
</div>
<div id="hidden_div">
dit is de hidden div
</div>
</body>
</html>
Good luck with it
Regards
Daniel
Roman N
Jun 4, 2009, 9:15:11 PM6/4/09
to KML Developer Support - Google Earth Plug-in
The CSS
html, body {
height: 100%
}
is the key part in Daniel's sample.
Thanks,
Roman
On Jun 2, 1:42 am, Danielg wrote:
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
html, body {
height: 100%
}
is the key part in Daniel's sample.
Thanks,
Roman
On Jun 2, 1:42 am, Danielg wrote:
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
concept3D
Jun 5, 2009, 12:20:22 PM6/5/09
to KML Developer Support - Google Earth Plug-in
Thanks for the feedback! The only problem I am having is adding a
static header with a set height and then a dynamic GE Plugin below it.
Thoughts?
Thanks,
Matt
static header with a set height and then a dynamic GE Plugin below it.
Thoughts?
Thanks,
Matt
Markw65
Jun 5, 2009, 3:09:45 PM6/5/09
to KML Developer Support - Google Earth Plug-in
On Jun 5, 9:20 am, concept3D wrote:
> Thanks for the feedback! The only problem I am having is adding a
> static header with a set height and then a dynamic GE Plugin below it.
> Thoughts?
I have yet to find a pure html/css solution to this that works cross
> Thanks for the feedback! The only problem I am having is adding a
> static header with a set height and then a dynamic GE Plugin below it.
> Thoughts?
browser (actually, I think it just comes down to no way to make it
work in ie6).
In theory, you could create a relatively positioned div, with width:
100% height:100%. Then put two absolutely positioned divs inside it.
One for the header, one for the plugin. The header would be top:0;
left:0; bottom:<fixed-height>; right:0. The plugin div would be
top:<fixed-height> left:0; bottom:0; right:0.
But that doesnt work at all in ie6 (with no workaround that Ive been
able to find). ISTR that you can make it work in ie7, but it needed
some other tweaks.
So my approach has been to have two divs, with the header set to
height:<fixed-height>;width:100%, and the plugin div set to width:
100%, and an onresize handler to set its height.
But I'd love to hear that there *is* a non-javascript solution that
works for ie6.
Mark
Nymor
Jun 5, 2009, 3:22:07 PM6/5/09
to KML Developer Support - Google Earth Plug-in
Same thing here.
I'm rewriting something now to move from table based layout to div
based and want a fixed height header, fixed height footer and a "fill
the rest of the screen" content div between them.
Been reading various solutions all day and all seem to have one hack
or another in them - and am now veering towards the onresize handler
route myself. While it wouldn't work for those without javascript
they're not going to get much from the site anyway without being able
to run the Plugin - so it doesn't really matter.
Interested to know if any solution comes along.
Nymor
I'm rewriting something now to move from table based layout to div
based and want a fixed height header, fixed height footer and a "fill
the rest of the screen" content div between them.
Been reading various solutions all day and all seem to have one hack
or another in them - and am now veering towards the onresize handler
route myself. While it wouldn't work for those without javascript
they're not going to get much from the site anyway without being able
to run the Plugin - so it doesn't really matter.
Interested to know if any solution comes along.
Nymor
Roman N
Jun 5, 2009, 6:08:12 PM6/5/09
to KML Developer Support - Google Earth Plug-in
The way the Dojo framework does it--I think--is to set 'top' and
'bottom' instead of 'top' and 'height', so something like:
#header { top: 0; height: 20px; }
#earth { top: 20px; bottom: 0; }
That approach may or may not work in IE6. For ideas, check the KML
Interactive Sampler which uses Dojo, and renders fine in IE6:
http://kml-samples.googlecode.com/svn/trunk/interactive/index.html
Hope that helps,
Roman
P. S. CSS is awesome. See http://www.zazzle.com/css_is_awesome_mug-168716435071981928
for details.
'bottom' instead of 'top' and 'height', so something like:
#header { top: 0; height: 20px; }
#earth { top: 20px; bottom: 0; }
That approach may or may not work in IE6. For ideas, check the KML
Interactive Sampler which uses Dojo, and renders fine in IE6:
http://kml-samples.googlecode.com/svn/trunk/interactive/index.html
Hope that helps,
Roman
P. S. CSS is awesome. See http://www.zazzle.com/css_is_awesome_mug-168716435071981928
for details.
concept3D
Jun 8, 2009, 12:03:27 PM6/8/09
to KML Developer Support - Google Earth Plug-in
Thanks everyone!
P.S. Roman, this may be one of the best coffee mugs I have ever seen!
On Jun 5, 4:08 pm, Roman N wrote:
> The way the Dojo framework does it--I think--is to set 'top' and
> 'bottom' instead of 'top' and 'height', so something like:
>
> #header { top: 0; height: 20px; }
> #earth { top: 20px; bottom: 0; }
>
> That approach may or may not work in IE6. For ideas, check the KML
> Interactive Sampler which uses Dojo, and renders fine in IE6:
>
> http://kml-samples.googlecode.com/svn/trunk/interactive/index.html
>
> Hope that helps,
> Roman
>
> P. S. CSS is awesome. Seehttp://www.zazzle.com/css_is_awesome_mug-168716435071981928
P.S. Roman, this may be one of the best coffee mugs I have ever seen!
On Jun 5, 4:08 pm, Roman N wrote:
> The way the Dojo framework does it--I think--is to set 'top' and
> 'bottom' instead of 'top' and 'height', so something like:
>
> #header { top: 0; height: 20px; }
> #earth { top: 20px; bottom: 0; }
>
> That approach may or may not work in IE6. For ideas, check the KML
> Interactive Sampler which uses Dojo, and renders fine in IE6:
>
> http://kml-samples.googlecode.com/svn/trunk/interactive/index.html
>
> Hope that helps,
> Roman
>
Roman N
Jun 8, 2009, 5:22:12 PM6/8/09
to KML Developer Support - Google Earth Plug-in
:-) 'tis indeed a great mug.
JeffJensen
Jun 9, 2009, 4:28:07 PM6/9/09
to KML Developer Support - Google Earth Plug-in
Hello,
I put some notes together (http://faculty.unlv.edu/jensen/html/CSS/
#CSSDIVMaps) on using the XHTML division tag <div> with CSS
positioning and the APIs from Google Earth, Google Map and NAVTEQ
MapTP. Below is some links for the APIs under different CSS scenarios
Option 1: demonstrate both horizontal and vertical fluidity with the
APIs, that is applications completely fill the web browser screen, can
be resized and no scroll bars.
<LI>Examples
<UL>
<LI>Earth API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleEarthAPI/
divFullPageEarth.html"
target=new>divFullPageEarth.html</A>
<LI>Maps API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleMapsAPI/
divFullPageMaps.html"
target=new>divFullPageMaps.html</A>
<LI>MapTP AJAX API - Java Applet -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/maptp/
divFullPageMapTP.html"
target=new>divFullPageMapTP.html</A>
Option 2: add a logo overlay to Option 1
<UL>
<LI>Earth API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleEarthAPI/
divLogoFullPageEarth.html"
target=new>divLogoFullPageEarth.html</A>
<UL>
<LI>It appears you cannot do a CSS z-index overlay on Google Earth
Plugin but have
to use a KML screen overlay instead.
<LI><A HREF="http://earth-api-samples.googlecode.com/svn/trunk/
examples/screenoverlay.html"
target=new>Google Earth API Samples - Screen Overlay</A>
<LI><A HREF="http://earth-api-samples.googlecode.com/svn/trunk/
examples/screenoverlay-frame.html"
target=new>Google Earth API Samples - Screen Overlay (Frame)</A>
</UL>
<LI>Maps API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleMapsAPI/
divLogoFullPageMaps.html"
target=new>divLogoFullPageMaps.html</A>
<LI>MapTP AJAX API -
<UL>
<LI>MapTP AJAX API - Java Applet. Applet will overlay on top of the
CSS z-index logo
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/maptp/
divLogoFullPageMapTP.html"
target=new>divLogoFullPageMapTP.html</A>
<LI>MapTP AJAX API - Static View. Supports the CSS z-index logo
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/maptp/
divLogoFullPageMapTPstatic.html"
target=new>divLogoFullPageMapTPstatic.html</A>
</UL>
</UL>
Option 3: add a top header to Option 2
<UL>
<LI>Earth API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleEarthAPI/
divLogoHeaderFullPageEarth.html"
target=new>divLogoHeaderFullPageEarth.html</A>
<LI>Maps API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleMapsAPI/
divLogoHeaderFullPageMaps.html"
target=new>divLogoHeaderFullPageMaps.html</A>
<LI>MapTP AJAX API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/maptp/
divLogoHeaderFullPageMapTP.html"
target=new>divLogoHeaderFullPageMapTP.html</A>
</UL>
Option 4: add a left navigation bar to Option 3
<UL>
<LI>Earth API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleEarthAPI/
divLogoHeaderLeftNavFullPageEarth.html"
target=new>divLogoHeaderLeftNavFullPageEarth.html</A>
<LI>Maps API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleMapsAPI/
divLogoHeaderLeftNavFullPageMaps.html"
target=new>divLogoHeaderLeftNavFullPageMaps.html</A>
<LI>MapTP AJAX API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/maptp/
divLogoHeaderLeftNavFullPageMapTP.html"
target=new>divLogoHeaderLeftNavFullPageMapTP.html</A>
</UL>
Then a side note, I found Beginning CSS by Richard York, ISBN:
978-0-470-09697-0 very helpful, especially chapter 11 on CSS
Positioning.
Regards,
JeffJensen
On Jun 5, 12:22 pm, Nymor wrote:
I put some notes together (http://faculty.unlv.edu/jensen/html/CSS/
#CSSDIVMaps) on using the XHTML division tag <div> with CSS
positioning and the APIs from Google Earth, Google Map and NAVTEQ
MapTP. Below is some links for the APIs under different CSS scenarios
Option 1: demonstrate both horizontal and vertical fluidity with the
APIs, that is applications completely fill the web browser screen, can
be resized and no scroll bars.
<LI>Examples
<UL>
<LI>Earth API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleEarthAPI/
divFullPageEarth.html"
target=new>divFullPageEarth.html</A>
<LI>Maps API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleMapsAPI/
divFullPageMaps.html"
target=new>divFullPageMaps.html</A>
<LI>MapTP AJAX API - Java Applet -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/maptp/
divFullPageMapTP.html"
target=new>divFullPageMapTP.html</A>
Option 2: add a logo overlay to Option 1
<UL>
<LI>Earth API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleEarthAPI/
divLogoFullPageEarth.html"
target=new>divLogoFullPageEarth.html</A>
<UL>
<LI>It appears you cannot do a CSS z-index overlay on Google Earth
Plugin but have
to use a KML screen overlay instead.
<LI><A HREF="http://earth-api-samples.googlecode.com/svn/trunk/
examples/screenoverlay.html"
target=new>Google Earth API Samples - Screen Overlay</A>
<LI><A HREF="http://earth-api-samples.googlecode.com/svn/trunk/
examples/screenoverlay-frame.html"
target=new>Google Earth API Samples - Screen Overlay (Frame)</A>
</UL>
<LI>Maps API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleMapsAPI/
divLogoFullPageMaps.html"
target=new>divLogoFullPageMaps.html</A>
<LI>MapTP AJAX API -
<UL>
<LI>MapTP AJAX API - Java Applet. Applet will overlay on top of the
CSS z-index logo
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/maptp/
divLogoFullPageMapTP.html"
target=new>divLogoFullPageMapTP.html</A>
<LI>MapTP AJAX API - Static View. Supports the CSS z-index logo
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/maptp/
divLogoFullPageMapTPstatic.html"
target=new>divLogoFullPageMapTPstatic.html</A>
</UL>
</UL>
Option 3: add a top header to Option 2
<UL>
<LI>Earth API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleEarthAPI/
divLogoHeaderFullPageEarth.html"
target=new>divLogoHeaderFullPageEarth.html</A>
<LI>Maps API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleMapsAPI/
divLogoHeaderFullPageMaps.html"
target=new>divLogoHeaderFullPageMaps.html</A>
<LI>MapTP AJAX API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/maptp/
divLogoHeaderFullPageMapTP.html"
target=new>divLogoHeaderFullPageMapTP.html</A>
</UL>
Option 4: add a left navigation bar to Option 3
<UL>
<LI>Earth API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleEarthAPI/
divLogoHeaderLeftNavFullPageEarth.html"
target=new>divLogoHeaderLeftNavFullPageEarth.html</A>
<LI>Maps API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/GoogleMapsAPI/
divLogoHeaderLeftNavFullPageMaps.html"
target=new>divLogoHeaderLeftNavFullPageMaps.html</A>
<LI>MapTP AJAX API -
<A HREF="http://faculty.unlv.edu/jensen/html/CSS/maptp/
divLogoHeaderLeftNavFullPageMapTP.html"
target=new>divLogoHeaderLeftNavFullPageMapTP.html</A>
</UL>
Then a side note, I found Beginning CSS by Richard York, ISBN:
978-0-470-09697-0 very helpful, especially chapter 11 on CSS
Positioning.
Regards,
JeffJensen
On Jun 5, 12:22 pm, Nymor wrote:
Markw65
Jun 9, 2009, 5:56:17 PM6/9/09
to KML Developer Support - Google Earth Plug-in
Yes, it really *ought* to be that easy :-)
But you might want to try them in IE...
Particularly IE6 (see my earlier post - specifying both top and bottom
never works in ie6). And this one
http://faculty.unlv.edu/jensen/html/CSS/GoogleEarthAPI/divLogoHeaderFullPageEarth.html
doesnt show up right in ie7 (I've not tried any of the other links).
Also note that specifying "position:absolute", "top", "bottom", and
"height" (as you do in #header in the above link) is an
overconstraint. I forget which is supposed to dominate (or even if its
specified) - but since you want the height to be 100px, it would be
better to drop the "bottom".
Mark
But you might want to try them in IE...
Particularly IE6 (see my earlier post - specifying both top and bottom
never works in ie6). And this one
http://faculty.unlv.edu/jensen/html/CSS/GoogleEarthAPI/divLogoHeaderFullPageEarth.html
doesnt show up right in ie7 (I've not tried any of the other links).
Also note that specifying "position:absolute", "top", "bottom", and
"height" (as you do in #header in the above link) is an
overconstraint. I forget which is supposed to dominate (or even if its
specified) - but since you want the height to be 100px, it would be
better to drop the "bottom".
Mark
Markw65
Jun 9, 2009, 7:32:41 PM6/9/09
to KML Developer Support - Google Earth Plug-in
To answer some comments from your source code:
/* overflow: auto; *//* adds a scrollbar to the DIV, if you don't want
it comment
this declaration and change position to position: static (will
add a white margin)
or position: absolute appears have any overflow items being
overwritten by the
Earth Plugin */
If you want to hide the overflow, use "overflow:hidden"
If you use position static, and you dont want the margin, use "margin:
0"
:-)
Mark
On Jun 9, 2:56 pm, Markw65 wrote:
> Yes, it really *ought* to be that easy :-)
>
> But you might want to try them in IE...
>
> Particularly IE6 (see my earlier post - specifying both top and bottom
> never works in ie6). And this onehttp://faculty.unlv.edu/jensen/html/CSS/GoogleEarthAPI/divLogoHeaderF...
/* overflow: auto; *//* adds a scrollbar to the DIV, if you don't want
it comment
this declaration and change position to position: static (will
add a white margin)
or position: absolute appears have any overflow items being
overwritten by the
Earth Plugin */
If you want to hide the overflow, use "overflow:hidden"
If you use position static, and you dont want the margin, use "margin:
0"
:-)
Mark
On Jun 9, 2:56 pm, Markw65 wrote:
> Yes, it really *ought* to be that easy :-)
>
> But you might want to try them in IE...
>
> Particularly IE6 (see my earlier post - specifying both top and bottom
Reply all
Reply to author
Forward
0 new messages