Google Maps API div in another div - javascript

Today I started to implement Google maps into my site, but I've ran into a problem, because the div with the maps provided for me can't be put into another div?!
I use the code stated on this site and when I do something like
<div><div id="map_canvas" style="width:100%; height:100%"></div></div>
it stops working. Why? I don't want my maps to be displayed over the whole page, I want it to be displayed in an normal div which I can restyle whenever I want...

You can style the div map_canvas. It doesn't need putting inside another div to do that.
So for example, change your code to this:
<div id="map_canvas"></div>
And CSS:
#map_canvas{
width:400px; /* your own height here */
height:300px; /* your own height here */
border:solid 1px green; /* your own border if you like */
/* maybe you want to position it somewhere? you can do for example */
position:absolute; top:50px; left:50px;
}
UPDATE
Apparently you need to set the width & height on the parent DIVS too. I haven't tested this yet, though try the following:
<div id="mapHolder"><div id="map_canvas" style="width:100%; height:100%"></div></div>
#mapHolder {width:100%; height:100%;}
Failing that, have you tried an absolute size, rather than % as in my CSS at the top of this answer?

Change style sheet like this:
<style type="text/css">
#map_canvas { width : 500px; height : 500px; }
</style>
And also get rid the inline stylesheet from the div tag.
<div id="map_canvas"></div>

you can re-size the map by change the width and height values. so
<div id="map_canvas" style="width:50%; height:50%"></div>

Right now you have
<div><div id="map_canvas" style="width:100%; height:100%"></div></div>
This should not work because your parent div has no width and height. When you are using width/height in %, the element measures the dimension depending on it's parent element. If you apply some width and height to your parent element/div, i.e.
<div style="width:300px;height:300px"><div id="map_canvas" style="width:100%; height:100%"></div></div>
then the inner div (map_canvas) will apply the width and height to itself 100% of 300px. Alternatively you can remove the outer div. Hope it helps.

Related

Automatically setting height for a covered background image

On this website, I'm using the CSS3 Cover property of the Background rule to stretch an image behind the header.
Right now, I had to set the header element to have a min-height of 500px for it to work. However, this is not an optimal solution because when I resize the window, I expect the height to be less so the image shrinks proportionally. I'm thinking the solution might be in Javascript?
Here is the code:
<div style="background: url(http://altushealthsystem.com/dev/wp-content/uploads/home-banner.jpg) no-repeat 0 0 transparent;background-size: cover; min-height: 500px;"></div>
Link to the JS Fiddle
Is this possible?
You do not need javascript for that. You could specify the header height using percents. However that will work only if the parent has specified height.
In your example you should add
height: 100%;
for html and body elements (all ancestors of header), and for example:
height: 40%;
for you header element.
Instead of declaring a background for the header, you can add an image element with the following styling:
<header....>
<img src="http://altushealthsystem.com/dev/wp-content/uploads/home-banner.jpg" style="max-width:100%; height:auto;position: absolute;z-index: -999;">
<div class="container">
<div class="row top-row">
...
You should also take advantage of the #media tags to declare a certain width and height when the screen is of certain size.

Dynamically resize container to fit text

There are many jQuery plugins that let you resize a text to fit a container. But how can you dynamically change the width/height of a div container to fit the text inside of it?
Below an example. As you can see the text is currently overflowing the div. How can you programatically resize the container div to fit the text independent of the font size and content?
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:100px; height:100px;border:1px solid red; overflow: hidden;">
<p style="font-size:40px;">This is the text</p>
</div>
</body>
</html>
It should be done with css but this is how to do it in JS/jQuery
$('#container').each(function(){
var inner = $(this).find('p');
$(this).height(inner.outerHeight(true));
$(this).width(inner.outerWidth(true));
});
http://jsfiddle.net/2CDt5/2/
Alternative solution is to set the width height and display property with the css method
$('#container').css({'width':'auto','height':'auto','display':'table'})
http://jsfiddle.net/7yH2t/
Remove width and height, add display:table;
You could decide how do you want the box to fit the text - in width or in height.
If you want width, change
width: auto
If you want height, change
height: auto
JSFiddle: http://jsfiddle.net/39e7z/

Can't style a div with javascript

I am applying style qualities to a div containing external javascript, and they seem to be ignored by the browser. The first div works correctly.
http://jsfiddle.net/TxWN3/2/
<div style="text-align:center;">Working center text</div>
<div id="btc-quote" style="text-align:center;"></div>
<script type="text/javascript" src="//cdn-gh.firebase.com/btcquote/embed.js"></script>
The content of the div class="btc-quote" might have some css code not wanting it to center. (I have not read all that code from BTC) To workaround this, you can make the div itself centering, not the content.
A simple trick to do this is add the following css to the div:
width:212px;
margin:auto;
This is a nice workaround found here
If you want to center it, first give it a width and then margin:0 auto:
<div id="btc-quote" style="width:212px;margin:0 auto"></div>
To center your included div, add this CSS:
.btc-box {
margin:0 auto;
}
jsFiddle example
The text-align:center; CSS property is not used in the way you are assuming.
If you check this fiddle, you will see that the default width of a div is the width of the container, and so when you center the text it appears the div is centered. However this is not the case.
To center a Div you can use the Position CSS property :
Add the following CSS attributes :
position:absolute;
left:50%;
margin-left:-106px; /* Half of the width of the div */
And see the following fiddle for the Second Div being center aligned
http://jsfiddle.net/Nunners/TxWN3/7/

Centered content with header from left to center

I didn't know what would be the best title for my question...
Well, I'll show what I want to do with a simple picture:
The issue:
I have my content centered, lets say it's 980px width.
Now, my header will have a logo and a menu.
BUT, I want my header to
use only a left side of the top, like 50% of the content width and
then stretch to the left side of the viewport. I know this is
possible using javascript and calculate the left offset of the
content and set the dynamic width div with it's left offset.
Is it the best way? I believe there should be another way, but I can't think of one. Hope you guys have a better idea than mine, since mine slows down the perfomance of the site when I resize the window.
Maybe have 2 divs; one in the background and one to contain the logo?
http://jsfiddle.net/kUKyp/1/
I believe what you are after is margin:auto in CSS. It's very simple:
Put your content div on the page, with a fixed width of say 980px as you wanted and set margin:auto.
Put your logo and menu div inside content.
Here is a good example of this in action:
http://bluerobot.com/web/css/center1.html
The CSS code from the above page:
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
#Content {
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
And the markup:
<body>
<div id="Content"></div>
</body>
Using twitter bootstraps fluid layouts
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span6"> (6 for half of the width, number can be changed 1-12) your logo and menu
</div>
your content
</div>
</div>

Dynamical map size in jquery mobile

How do i set size in 100% for map on page that using jquery mobile?
So far i tried to set height:100%, but that didnt effect, and i still have scroll bars.
If i use height:auto, my map doesnt show
<div id="map_canvas" style="width:100%; height:90%; position:absolute; top:121px;" ></div>
You are getting scroll due to body margin. Just make it 0. I have tested following in firefox
<html>
<body style="margin:0;">
<div id="map_canvas" style="height:100%; background-color: black;"></div>
</body>
</html>
The usual problem with 100% sizing is that the percentage is of the parent element, so that needs to have a size as well (it can be 100%). See this page on Mike Williams' v2 tutorial (the same concept applies to v3).
You didn't provide any context above the map div.
Why dont you just get the height of device and use that...
var viewportHeight = $(window).height();

Categories

Resources