Develop Reference

Google Maps API div in another div

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.

Auto-resize image to fit the browser

I have a site which provides "random" pictures of different dimensions, some if not most pictures happen to not fit the browser, so I'd like to know a way to resize it to fit the browser view without scrolling, so why not the guys of Stack Overflow!
Obviously keeping proportions, I tried https://github.com/gutierrezalex/photo-resize/ but didn't work as expected.
So it's a html page with some text, the image in the middle and some other text under it.
All I want is for scrolling to be not able to use since the image should be shrunk enough to do so.

You don't need any JavaScript or hacks to achieve that kind of image scaling – simple CSS and HTML will just work fine. (BTW also on iPad and iPhone.)
You can just place your img with CSS-attribute height:100%; and it will have the height of the father node in the DOM-tree. Make sure, that node (usually a div) will be properly positioned in the browser window.
Try something like this:
<div style="position:fixed; height: 100%; width: 100%; top:0;left 0;">
<img src='whatever.png' style="height: 100%" />
</div>
Check out this page as a demo: andrehelbig.fotograf.de. Here the background image will always scale proportionally to fill the whole browser window (don't get irritated by the JS scrolling).
Hope that gives a little help.

Try this:
div {
width:80vw;
height:80vh;
background:#ccc;
display:table-cell;
vertical-align:middle;
text-align:center;
}
img {
max-width:100%;
height:auto;
max-height:100%;
}
<div>
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg">
</div>

Old question, but for future googler's, I've written a jQuery plugin which is able to auto-resize images with a lot of options :
https://github.com/GestiXi/image-scale

I Have a simple solution.
add class in image, then use jquery to automaticaly resize the image. here it code :
<img src="" id="imgFitWindowResize">
now use the jquery to initialize auto width when the client resize his browser : here the code :
<script type="text/javascript" language="JavaScript">
function set_body_width() { // set body height = window height
var wh = $(window).width();
$(".imgFitWindowResize").width(wh);
}
$(document).ready(function() {
set_body_width();
$(window).bind('resize', function() { set_body_width(); });
});
</script>
I Try this code it's work :)

can you please try this code. Replace image src by your image source.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
var h = $(window).height();
var w = $(window).width();
document.getElementById('img_canvas').style.height= h +'px';
});
</script>
</head>
<body>
<img id="img_canvas" src="images.jpg" style="width:100%;height:auto;">
</body>
</html>

Dynamic minimum height for body?

I have a centred fixed width content div, and if there isnt enough content (ie, an small error page) the height of it is smaller than the height of my web-browser.
This leaves the footer in the middle of the screen, the and the background of the content div not continued to the bottom. Just looking like shit.
Is there a way to force the content div to always fill the screen, if it's contents are smaller than the current screen?
I realize this might have to use javascript, but I'm not very acquainted with it.
edit: If the user re-sizes the window, I'll want it to update as-well.
edit: It looks like I can use the window.innerWidth, window.innerHeight properties

Sounds like what you want is a sticky footer, not a resize of the body.
Check out Ryan Fait's great tutorial on how to do this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Here's a demo of it in action: http://ryanfait.com/sticky-footer/

Check out Ryan Fait's Sticky Footer. It sounds like what you need, and is implemented in CSS. I've used a variation for several projects and it Just Works.

Use can use this,
<style>
html,body{
height:100%;
margin:0;
}
#wrapper {
min-height:80%;
}
</style>
<div id='wrapper'>
hello
</div>
<div id='footer'>
my footer
</div>

Help with mobile page, fixed div at top and iframe below

Hi I'm looking help with a mobile site I'm developing. I'm trying to get a page with a toolbar at the top of the screen that has previous and next buttons, with most of the viewport displaying an iframe containing 3rd party websites.
I have a few issues getting this working. The first is to have the toolbar fixed at the top. Mobile browsers don't natively support fixed positioning so I've achieved a workable solution where I move the toolbar back to the top of the screen with the window.onresize event. I can't move the div while scrolling as mobile browsers disable DOM rendering between the touchstart and touchend events.
The main issue I am now having is that the div toolbar displays correctly at the top however the iframe is zoomed to the top left corner of the site it has loaded. You cannot zoom out at all. You can only zoom in further and pan the site. You can only really view the iframe site in 100% of the viewport when it's loaded by itself.
Here's a wireframe of what I want to achieve..
Any help would be much appreciated!
Here's an idea of the code I'm using to achieve this..
There's also javascript that modifies the top and left css values of #wrapper when you scroll the screen using the window.onresize event.
<html>
<head>
<meta
name="viewport"
content="width=device-width;
initial-scale=1;
maximum-scale=1;
minimum-scale=1;
user-scalable=yes;"
/>
</head>
<body>
<div id="wrapper" style="width:320px;top:0;height:86px; position:absolute; z-index:1000; background-color:#FFFFFF; border-bottom:5px solid #4B90B7;">
<!-- Header markup -->
</div>
<div id="iframe" style="height: 750px;position:absolute; top:100px; width:100%" >
<iframe style="width:100%; height:100%">
<!-- iframe -->
</iframe>
</body>
</html>

I'm sure you've moved on by now, but for anyone Googling, I ended up dealing with a similar situation by applying CSS Scale. Re-positioning was a total nightmare, but you can get it to work. This works on an inline scrollview, and I assume it would work on an iframe:
Question/answer here: Scale HTML content using JQuery Mobile & Phonegap
Additionally, it may be worth looking into ChildBrowser vs. iframe. I'm experimenting with it now, but so far it looks useful:
https://github.com/alunny/ChildBrowser
Hope this can help someone!

Just thought I'd chip in another way to do a "fixed" position element in mobile browsers. You can simply give the content element a height and overflow: auto. Make sure the sum of the heights of the fixed header and the content element equals the page height.
<div id="page">
<div id="header">fixed header</div>
<div id="content">...</div>
</div>
#page {
position:relative;
}
#header {
position: absolute;
height: 1.5em;
}
#content {
top: 1.5em;
position:relative;
overflow: auto;
height: 400px;
}
Example: http://jsfiddle.net/william/BWA7j/

JavaScript/HTML: How do I display an IMG with a set dimension and if the image is wider or taller than that dimension, to crop/hide the overflow?

I have a bunch of images that are guaranteed to have:
minimum width = 200px
maximum width = 250px
minimum height = 150px
maximum height = 175px
What I want to do is display a consist 200px by 150px rectangle of the image while maintaining scale (no stretching or shrinking).
Which means, I might have some overflow.
How can I display the image so that it keeps porpotions to the original image size, yet displayed inside a 200x150 px window and hiding any overflow?

Wrap them in a container with the dimensions you want and overflow: hidden.

This trick is quite cool and doesnt matter the image size ok look... you can do something like this
<div style="width:Npx; height:Npx; overflow:hidden">
<img src="source.png" style="width:Npx;">
</div>
so how this work, the div will hold the imagen in a rectangle Xpx by Ypx you defined and will "crop" everything that its outside. Then you use the resize who have every browser you can assign a With a imagen and the browser will resize it for you. So if you put the same width that the div holder you will give the impresion that the image fit in that rectangle. This is the best option I can find without use server side code.
the next example is:
you can define again a rectangle and then assign a background, the big problem is the the imagen WILL not resize to fit the area.
<div style="width:Npx; height:Npx; background:url(yourimage.png) center"></div>
hope to help you... best

I made a quick demo (online here) of a way of solving it similar to nahum's second example. There are 3 images within the range of sizes you set. It doesn't resize or stretch the images and they will follow the alignment of the surrounding text.
Hope it helps,
Jedidiah
<span class="thumbnail" style="background-image:url(200_150.jpg);"></span>
<span class="thumbnail" style="background-image:url(220_160.jpg);"></span>
<span class="thumbnail" style="background-image:url(250_175.jpg);"></span>
span.thumbnail{
display:block; display:inline-block;
width:200px; height:150px;
background-position: center center;
background-repeat: no-repeat;
}
Use a span rather than a div because IE6+7 will only let you set display:inline-block on an element that is naturally inline.
The first display:block is a fallback for Firefox 2 which doesn't support inline-block.

If you're images are particularly large, or there are going to be lots of them (for example, a thumbnail browser). You may want to consider creating a pre-cropped copy of them image. This can be done using gd or imagemagick [0] - you can also find a number of wrapper libraries around these extensions that may make the task easier.
[0] http://php.net/manual/en/refs.utilspec.image.php

In theory, this is exactly what the clip property of CSS is for - but there's one, sometimes really painful, side effect to using it, though - the image needs to be absolutely positioned:
<html>
<head>
<style type="text/css">
.thumbnail {
width:200px;
height:150px;
}
.thumbnail img {
position:absolute;
clip:rect(0, 200px, 150px, 0);
}
</style>
</head>
<body>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
</body>
</html>
The fact that this takes the images out of document flow is pretty nasty - the best you can do is put them inside a frame of the right dimensions (which means you may as well just use the overflow mask methods other people have suggested). Clip is a useful property in the right places, and a lot of people don't seem to know about it.

Just set a min-height:whatever and max-height:whatever and overflow:hidden on the blocks, then just place the images in the block, and that's it.