Develop Reference

Is it possible to have Bootstrap work off of a <div>'s width instead of the viewport width?

On our site, we are using the Bootstrap v3 grid system to control the layout of the page. When a user resizes their browser window, the bootstrap system kicks into gear and all works well.
We have a new use case, where a user needs to design a page for a given browser width, but we want them to do it without having to resize their own browser.
We have an outer that wraps the content and is set to a fixed with, and we want Bootstrap to check the width of that content and apply the responsive layout based on that 's width, no the browser window width.
Is this possible? And if so, can someone point me to an example or documentation of how to achieve this?

I recently had a similar case and used ResizeObserver to observe the width of an element to base CSS from rather than the viewport. Learn more:
https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
https://www.w3.org/TR/resize-observer/
Note: this is currently only supported in Chrome
Follow up: CSS container queries have been released as of April 2021, but there is no browser support for them yet – https://caniuse.com/css-container-queries

Scaling CSS relative to window

Just wondering if theirs a more efficient means of doing this?
$(window).resize(function()
{
$('.title').css('font-size',Math.floor($(window).width()*0.2)+'px');
$('.title').css('background-size',Math.floor($(window).width()*0.5)+'px');
$('.title').css('padding',($(window).width()*0.1)+'px 0px '+($(window).width()*0.1)+'px');
}); `
I'm doing this to get my web applicatiion (cordova/phonegap) to resize properly for all devices. I've tried using viewport and had mixed results especially when it came to getting text to scale relative to dpi and screen dimensions.

There are a few ways of doing this.
There are some pre-made libraries such as BootStrap for mobile view.
You can use percentage instead modifying the css through jquery.
For some help a nice tutorial site for css is w3Schools css tutorial page.
Each result has different results.
Now on your example code you are using window.width* 0.5 or window.width / 2 which is half. If you are in the root element with no width settings you could use 50% instead of pixels to easily achieve the effect you are looking for.
However it is most likely not like that. You may have to specify widths of parent elements to achieve this.

have you considered using css #media .
it is more neat , and doesnt require javascript event to be triggered.
more info can be found here
http://www.w3schools.com/css/css_mediatypes.asp

You can use #media queries to serve the purpose.

how to resize image as we resize browser window

can anybody tell me how to resize image as we resize browser like it is done in https://login.microsoftonline.com/
I have tried it with css approach using media query. But I want to resize image on the fly like Microsoft have done. This is what I did http://codoc.testdrive.ch/Intranet

Check out this great resource so you can understand how it works.
You have several alternatives without using Javascript, such as setting the image to 100%.
img{
width: 100%;
}
Here is a demo you will see how the image gets larger or smaller depending on how you resize the window
You can also check this demo

Use the resize event as describe in (plain Javascript) JavaScript window resize event or (jQuery) How can I detect window size with jQuery?. Then set the image size you want.

The effect where the picture decreases in size can be done very simply in CSS without using any JavaScript:
#image_id{
width: 100%
}
What Microsoft has done is implement a "responsive design." This means that the design is both "fluid" and "adaptive."
"Fluid" refers to the fact that the image changes in size as the screen becomes smaller.
"Adaptive" refers to the fact that the image disappears when the screen becomes too small. (The layout of the page changes.)
The Fluid part can be achieved using the code I have above. However, the Adaptive part will require media queries, like you did. Combine the two, and you get the effect Microsoft has.
Here's some more quick information on Responsive designs for you:
Youtube video: http://www.youtube.com/watch?v=T6MCkGWSXa0 (1:29 long)
Live examples: http://liquidapsive.com/
More live examples: http://bradfrost.github.com/this-is-responsive/

What is the easiest way to create responsive Images?

I'm working on my first responsive website and I want to know how to make all of the images resize dynamically. I've worked around it for now, but I'd really like to rethink how I did this. Is there a jquery plugin for this that is easy to implement (I don't know alot of js)? Is there a better way?
My site

You actually don't need any js for this - this could be achieved with CSS alone. As you figured out from looking at the source in the link in your comments, all that's needed for dynamically resizing an image is the max-width property set to 100%. However, if you want the image to increase in size dynamically as well then you'll have to use width:100%.
See the example in this jsFiddle. You'll notice max-width does not go past the image's resolution - on the otherhand width ensures the image fills the container (which some see as a disadvantage because they lose the resolution when the width exceeds it's original).
There is a catch though, max-width property is not supported in IE6 or below - it was only introduced in IE7. This article here provides a workaround for that though.

But resizing an image through css doesn't make an image responsive.
A 200 kb image will be 200 kb when it is 1000 px wide but also when it is resized by css to 50 px wide.
I would like to see you guys' faces when waiting untill that large images is loaded on your smartphone

Resize images to be fullscreen with javascript?

Can you resize images to be fullscreen with javascript in the same way you can with flash?
Ive found this link but its for an entire plugin with slideshow, etc not just the feature I need for a more custom design:
http://buildinternet.com/project/supersized/
And this plugin seems to only with with background images:
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html
Ideally id like to do this with jQuery.
Thanks

Here's an example of a basic implementation. It accounts for resizing of the window, but doesn't account for any focus point of the image and so the focus point could fall out of view for oddly-sized windows.
http://jsbin.com/okizi5
Edit: I forgot to point that that the width/height attributes on the image are necessary in this version for all browsers (notably Safari) to calculate the aspect ratio of the image. If your image is to be dynamic and the dimensions are not available then these could be calculated within the 'load' function bound to the window.

Yes. I don't see why you can't, really. You can use JavaScript, and its DOM interface, to modify the style properties of an image to resize an image. You don't even need a heavy library like jQuery; it's all native.

How about this:
$(window).resize(function() {
$('#myImgId').width($(window).width());
$('#myImgId').height($(window).height());
});
It will not maintain the aspect ratio...