I trying to use a Google Map as a full screen background to a web app I am developing. I have used a div to hold the map and so far I cannot seem to find a method to effectively make it full screen.
When using absolute positioning, I can get it to fill the browser window, however if there are scroll bars on the page, and I scroll down, the background does not fill the remaining space below the browser window.
I have also tried using fixed positioning but that doesn't seem to work either. It pushes the rest of the content under the background unless I wrap it all and position it absolutely over the top, but that still doesn't fix the scroll problem.
This is an idea of how I have it at the moment:
<body>
<div id="background"></div>
<div id="wrapper" class="grid-container">
<!-- Content -->
</div>
<footer>
<!-- Footer -->
</footer>
</body>
And the CSS:
#background {
position:absolute;
width:100%;
min-height:100%;
top:0px;
left:0px;
z-index:-1;
}
The reason I have the footer outside of the wrapper div is because I am using a sticky footer (http://www.cssstickyfooter.com/) and I am using a responsive grid system called Unsemantic (http://unsemantic.com/).
Any help would be greatly appreciated!
Thanks,
Aaron
You got to wrap the map in a div, and call the script the the header calling the div name class or ID. give the div 100% width and a height in css. if you want the exact window height call a jquery
$(document).ready(function(e) {
var hheight = $(window).height();
$('#map_canvas').css('height', hheight);
$(window).resize(function(){
var hheight = $(window).height();
$('#map_canvas').css('height', hheight);
});
});
<html>
<head>
<style>
#map_canvas {
width: 100%;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Related
How do I add a Scroll Bar inside the popup window so that I can access the search results inside the PopUp window?
My code for popup window:
<html>
<body>
<link rel="stylesheet" type="text/css" href="https://secure.duoservers.com/tld-search/api-search.css?color=0000ff&width=700"/>
<script type="text/javascript" src="https://secure.duoservers.com/tld-search/api-search.js?lang=en&store=7xhosting"></script>
<script type="text/javascript">
searchApiOptions = {
store: "7xhosting",
containerId: "divID",
submitURL: "",
selectedTld: "com",
popupBox: true,
floatingBox: false
};
</script>
<div id="divID"></div>
</body>
</html>
To force the scrollbar, set overflow-y to scroll on the element which you want to receive it, like this.
#divID {
overflow-y: scroll;
}
Have some min-height and height set in css for
div#divId
{
min-height:300px;
height:300px;
overflow:scroll;
}
and then set overflow:scroll
.divID{
overflow-x:hidden;
overflow-y:auto;
min-height:200px;
max-height:250px;
}
instead of id give class to your div.
I have given overflow-y:auto so the scrollbar only visible if there is an overflow in div.
Hope this helps.
Is it possible make a google map height 100% of the parent div?
I noticed that with the height 100%, the map is not visible, but if I add the height of the div with the map in pixel the map is correctly visualize.
is there some tricks to achieve the map 100% of the parent div?
this doesn't works
<div class="block halfrect">
<div id="map" style="height:100%;"></div>
</div>
this works
<div class="block halfrect">
<div id="map" style="height:590px;"></div>
</div>
any idea?
reference: Mike Williams' Google Maps Javascript API v2 tutorial page: Using a percentage height for the map div
If you try to use style="width:100%;height:100%" on your map div, you get a map div that has zero height. That's because the div tries to be a percentage of the size of the <body>, but by default the <body> has an indeterminate height.
There are ways to determine the height of the screen and use that number of pixels as the height of the map div, but a simple alternative is to change the so that its height is 100% of the page. We can do this by applying style="height:100%" to both the <body> and the <html>. (We have to do it to both, otherwise the <body> tries to be 100% of the height of the document, and the default for that is an indeterminate height.)
code snippet:
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="block halfrect" style="height:100%">
<div id="map" style="height:100%;"></div>
</div>
Currently I'm having troubles getting my layout working cross-browser. In the attached image you are able to see a preview.
height: 100%;
Some information:
div #Header
Width: 100%
height: variable
div #Sidebar (overflow-y)
Width: 300px
height: 100% minus header + footer heights
div #frameHeader
Width: 100% minus sidebar width (300px)
height: 100% minus header + footer heights
iframe #iframe (overflow-y)
Width: 100% minus sidebar width (300px)
height: 100% minus header + footer + frameheader height
div #Sticky Footer (sticky to bottom ofcourse)
Width: 100%
height: variable
I've spend countless hours trying to get this to work, I'm thinking someone should have faced this problem before? I'm hoping someone is able to give me a working cross-browser example!
Current code: http://jsfiddle.net/s6wVw/ (ugly css but I think you get the point ;))
Attachment (preview) can be found below
preview image
In your question you keep making false statements and contradicting yourself (e.g. you're talking about a sticky footer but you also imply that the page doesn't scroll - as heights of all elements sum to 100%). However, I'll try to help you none-the-less.
For the reason stated above, I've made the following assumptions:
You want the dimensions of the main areas (header, footer, sidebar, frame header, frame body) to always sum to 100%
You don't want the browser to scroll
You want scrolling in the side bar and frame body if the content overflows
The above would lead to a poor site design because if the browser/window size were to be <= 300px wide then you wouldn't be able to see any of the frame etc.. Similarly, if the browser/window height <= foot height + head height then you wouldn't see any of the sidebar, frame head, or frame body.
That being said, here is an example using jQuery, html, and css.
CSS
html, body{
margin:0; padding:0; border:0;
color:#fff;
}
#head{
width:100%;
background:#aaa;
}
#body{
width:100%;
}
#sidebar{
display:inline-block;
width:300px; height:100%;
background:#111;
vertical-align:top;
overflow:scroll;
}
#frame{
display:inline-block;
vertical-align:top;
height:100%;
}
#fhead{
width:100%;
background:#333;
}
#fbody{
width:100%;
background:#777;
overflow:scroll;
}
#foot{
position:fixed;
top:100%;
width:100%;
background:#aaa;
}
h1{margin:0; padding:10px;}
jQuery
function setSizes(){
var docWidth = $(window).width();
var docHeight = $(window).height();
var headHeight = $('#head').height();
var footHeight = $('#foot').height();
var bodyHeight = docHeight - headHeight - footHeight;
var fHeadHeight = $('#fhead').height();
$('#body').css({
height: bodyHeight
})
$('#sidebar').css({
height: bodyHeight
})
$('#frame').css({
width: docWidth - 300
})
$('#fbody').css({
height: bodyHeight - fHeadHeight
})
$('#foot').css({
"margin-top": -footHeight
})
}
$(function(){
setSizes();
var doit;
$(window).resize(function(){
setSizes();
setSizes();
})
})
HTML
<div id="head"><h1>Head Section</h1><br><br><br><br></div>
<div id="body">
<div id="sidebar"><h1>Side Bar</h1>
</div><div id="frame">
<div id="fhead"><h1>Frame Head</h1><br><br></div>
<div id="fbody"><h1>Frame Body</h1></div>
</div>
</div>
<div id="foot">
<h1>Foot Section</h1><br>
</div>
NOTES
You can put whatever content you like inside of the following divs: #head, #sidebar, #fhead, #fbody, #foot
The jQuery runs the setSizes(); function twice on window resize. This is to account for any scrollbars that may impact the available width/height
You may need to set additional overflow rules to other elements depending on what content you place in the divs
I have a div contained site design in which i have inserted a iframe to load pages.
header stays at top well
footer stays at bottom very well
content stays at the middle well too
But the iframe isn't stretching to the full height of the container. i have not mentioned height in pixels in the style
But when i wrote
iframe {
margin:0;
padding:0;
min-height:72%;
width:100%;
background-color:#ddd;
}
HTML
<div id="container">
<div id="header"> blah blah </div>
<div id="content">
<div id="menu"> some code of menu </div>
<div id="iframeDiv" class="contentdiv">
<iframe src="#" id="#" width="100%"></iframe>
</div>
</div>
<div id="footer">blah blah</div>
</div>
CSS
html, body {
margin:0; padding:0; height:100%; width:100%;
}
iframe {
margin:0; padding:0; height:72%; width:100%;
}
#container {
min-height:100%; position:relative; width:100%;
}
#content {
padding:10px; padding-bottom:30px;
}
I tried writing styles for #iframeDiv but nothing seems to work!
it stretched till footer, but this works only in chrome. ie is not sensing the background color too. firefox displyed the backgroundcolor but not stretched to 72%. how to stretch iframe height to 72% for all browsers. ?
Check your DOCTYPE of the html page and also you can try to add CSS for the HTML and BODY tag:
html, body {
height: 100%;
}
After a long time struggle with iframe, I didnt want to enter the height value explicitly(Px). Since giving it in Px will vary for browsers i used javascript to calculate the consumed height and subtracted from the window height and assigned it to iframe using jquery. Here is what i did.
<script type="text/javascript">
$(document).ready(function() {
var windowheight = $(window).height();
var headerheight = $("#header").height();
var footerheight = $("#footer").height();
var menuheight = $("#patientMenu").height();
var frameheight = windowheight - (headerheight+footerheight+menuheight+5);
//alert(contentheight);
$('#frameset').css ({
'height' : contentheight
});
});
</script>
I have a vertically centered slideshow on a page, however I want to somehow add a "limit" so to speak on how high it slides up the page on smaller screens.
http://www.visioncreativegroup.com.au/demos/bps/index.php/production/theatre
If you resize your window, it will reach a point where the slideshow sits over the top of the navigation bar and the main logo. Basically it needs to stop at the base of these elements once the screen size reaches a small enough size.
Is this possible?
remove position: absolute; from .production-scroll class
Also remove position: fixed; from #sticky-footer if it is not necessary
I would separate the slideshow section of the site, and the header section. So you have 3 horizontal slices: header, slideshow, footer. Then you can center the slideshow in the middle segment, and it will never go over the header.
Give this small demo I've set up for you a try and see if you can switch up the HTML in your project to something similar:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<!-- Insert below CSS here -->
<!-- Insert JQuery here (http://code.jquery.com/jquery-latest.min.js) -->
<!-- Insert below JS here -->
</head>
<body>
<div id="shell">
<div id="head">Header.</div>
<div id="slideshow">Slideshow.</div>
<div id="foot">Footer.</div>
</div>
</body>
</html>
CSS: (mainly for demonstration):
*{ margin: 0; padding: 0; }
div#head{ height: 200px; background: blue; }
div#foot{ height: 100px; background: red; }
div#slideshow{ height: 300px; background: green; }
JavaScript:
// Fix position initially and on each window resize.
$(window).resize(fix);
$(document).ready(fix);
function fix()
{
// Work out position value.
var base = $("div#slideshow").position().top;
var middle = $(window).height() / 2;
var hw = $("div#slideshow").height() / 2;
// Position top either at the position determined above, or 0 if it bypasses the top of the page.
var destination = Math.max(middle - base - hw, 0);
$("div#shell").offset({ top: destination });
}
You can grab the full working example here.