We Keep Coding

How to image swap based on screen size?

I recently started experimenting with bootstrap and scaling things to size when the screen is shrunk. If I have an image that needs to be at least 300px to be readable but the screen is only 250px wide (just for example) they would have to scroll left and right to see the whole image. On ford.com they actually swap the larger image out for a similar image that is smaller, more fit for the screen. Then as you drag the screen larger, it switches back to the larger image. Im assuming this has to do with some form of JS and screen size dimensions. Any thoughts?

Technically the feature you're describing could be achieved through either css, html or javascript.
In CSS you can use media queries to load your images through the background property,
.image {
background: url("image.jpg");
}
#media only screen and (max-width: 250px) {
.image {
background: url("alternative-image.jpg");
}
}
or, in case you had both images loaded in the html document, through the display property.
.image {
display: initial;
}
.alternative-image {
display: none;
}
#media only screen and (max-width: 250px) {
.image {
display: none;
}
.alternative-image {
display: initial;
}
}
Read more about media queries here.
In HTML you can use the picture and source elements,
<picture>
<source media="(min-width: 250px)" srcset="image.jpg" />
<img src="alternative-image.jpg" />
</picture>
or the simpler alternative, the srcset attribute.
<img src="alternative-image.jpg" srcset="image.jpg 250px" />
Read more about it here.
Finally, in JavaScript you can use the window size properties to build a function that loads the right image for each size every time the window is resized.
window.onresize = function () {
if (window.innerWidth < 250) {
image.setAttribute("src", "alternative-image.jpg");
} else {
image.setAttribute("src", "image.jpg");
}
}
Read a bit about the window size properties here.
PS. Do NOT directly use these examples, as they are incomplete and unoptimized. Their only purpose is to mock the use of the resources they reference.

this can be archive in 2 ways.
there is a class in bootstrap V3 img-responsive if you add this class in image tag then it will auto resize when viewport is smaller then image size. Reference : http://getbootstrap.com/css/#images-responsive
OR you can use srcset attribute of image tag
example:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
in above example you can set image path in srcset in first parameter and on second is image width. in this Browser auto detect viewport width and based on that it will load image.

Changing image size Javascript depending on screensize

Am using bootstrap, which for some reason means whenever i try the #media (min-height: 1000px) there is no response from the image class.
I would like to run a javascript that resizes the image when the screen height gets above a certain size. (Lets say 1000 px)
the best code I have found is this
<script>
$(function() {
if ($(window).height() >= 710) {
$("img").each(function() {
$(this).attr("src", $(this).attr("src").replace("logo1.png", "logo2.png"));
});
}
});
</script>
However when i replace src with width, and change the corresponding values of logo1.png and logo2.png to 500 and 800 nothing happens.
Any pointers using Javascript very much appreciated.
I tried this in CSS
#media screen and (max-width: 980px) and (min-height: 1000px) {
.iphonegangster {
min-width: 950px;
height: auto;
}

Instead of using JS, you can use CSS media queries with image background. Ex., <i role=image class=img1/>. Using CSS media query pick image based on screen size.

how to make mediaQuery over write values which were set dynamically in the code?

I have a div which has a basic width value, set in a css file.
In that file, i also have a media query for a new basic width, upon orientation change to portrait.
in my javaScript i have a function updating the width dynamically when document is ready.
What happens is, that when the media query is called, the updated width - is the width which was set dynamically by the js, and it's automatically overwrites the new media query css width.
In other words, once I dynamically set the width in the code - the media query will no longer take any effect.
how can i make the media query css width overwrite the current width (which was set dynamically by js?)
THANK YOU!
HTML + JS :
<html>
<head>
<script>
var defaultNumOfItem = 3;
$(document).ready(function()
{
updateWidth(4);
});
function updateWidth(currentNumOfItems) {
var basicWidthText = $('#list').css('width');
var basicWidth = parseFloat(basicWidthText .slice(0, basicWidthText .indexOf('px')));
$('#list').css('width', basicWidth * currentNumOfItems/ defaultNumOfItem);
}
$(window).bind('orientationchange, function(){
updateWidth(4);
});
</script>
</head>
<body>
<div id='list'>
</div>
</body>
</html>
CSS:
#list {
width: 900px;
}
#media only screen and (orientation: portrait){
#list {
width: 600px;
}
}
P.S the use of !important did not work for me, since if i put it in the css - the js will take no effect. and if i put it in the js - the media query takes no effect - same will happen by putting it in both the js and the css

This can probably be achieved without JavaScript, though the full intent of the code is not totally clear, so this is how to do it while maintaining the current functionality.
#media only screen and (orientation: portrait) {
#list {
max-width: 600px;
}
}
The max-width CSS property trumps width, even if width is defined inline, externally, or made !important. The same is true of the min-width property under different circumstances.

Just give it a try !important
#media only screen and (orientation: portrait){
#list {
width: 600px !important;
}
}

If I understand this correctly you want to use the media query only if orientation is portrait and the js if the orientation is landscape. In this case you can try this:
$(window).bind('orientationchange', function(event){
if(event.orientation != "portrait")
updateWidth(4);
});
this way the js will not overwrite the width that you wanted to set through the media query in portrait

Ok, found a work around that actually works!
What i do, is simply remove the "width" attribute from the #list every time the orientation changes:
$(window).bind('orientationchange, function(){
$('#list').css('width','');
updateWidth(4);
});
so that way, the external css does take before the js manipulation.

how to change css img element with javascript

I would like to change the CSS using javascript so that I can dynamically adjust the height of a single image on my web page. This is being done so that the image will fit nicely in the viewable screen no matter what the screen size.
My CSS
.wrapper img {
height: 630px;
}
My Div
<div class="wrapper" id="imageDiv"></div>
What javascript code should I use to change the CSS height to say 200px.
Thank you.

Why not just set the height in percentage if the goal is to autoadjust based on viewport height etc:
.wrapper img {
height: 100%;
}
Anyway:
document.getElementById('imageDiv').style.height = '200px';

Try this :
document.getElementById("imageDiv").style.height="200px";
(this would only change it for that one element.)

Using JQuery, you could just put inside the method that you want:
$('img.wrapper').css('height','200px');

detect screen resolution then compare

I've problem with my css sheet of one page ,So been thinking to detect screen resolution if equal or less than 800 pixel width it will makes my css code is
<style>
body {width:1004px;}
</style>
but if it was greater than 800 pixel width, it will makes my css code is
<style>
body {width:100%;}
</style>
so anyone knows js code that code do it !!
i only care about width detection no need to detect the hights as well.
i've made search for alot of js code doing this but wasn't able to use to do this exact function of passing either of those css code into the page.

You can use CSS Media Queries
body {
width:100%;
}
#media all and (max-width: 800px) {
body {
width:1004px;
}
}