0

I'm using this script to load small or large images depending on the screen width. 

    <script>
var jt_width = screen.width;
//var jt_height = screen.height;
if (jt_width < 361) {document.write('<div class="small-image"><img src="http://www.example.com/small-image.jpg" alt="small image alt"></div>') } else { document.write('<div class="large-image"><img src="http://www.example.com/large-image.jpg" alt="large image alt"></div>')};
</script>

The disadvantage is that on a mobile phone it doesn't change on the fly when someone goes from portrait to landscape, and I want to use jquery to do this.

I read online about different possibilities like using window.outerWidth or .width() and I understood that .width() is the best solution in terms of browser compatibility.

I would like to convert the script above to a jquery version, but since I hardly know anything about javascript I don't know how to do this. This is what I have

function load(){
    w.value = $(window).width();
    h.value = $(window).height();
}

How can I get the same output using jquery?

WendiT
  • 595
  • 2
  • 9
  • 26
  • to change on the fly does it work in the browser when you resize the window? do you have a `onresize` event listener in place? – Sergio Alen Feb 16 '17 at 02:46

2 Answers2

0

Your new script won't help the responsize-ness of the script. You need to add a listener: 

<script>
var jt_width = screen.width;
function doAThing() {
  if (jt_width < 361) {
    document.write('<div class="small-image"><img src="http://www.example.com/small-image.jpg" alt="small image alt"></div>') } else { document.write('<div class="large-image"><img src="http://www.example.com/large-image.jpg" alt="large image alt"></div>')
  };
}

doAThing();
window.addEventListener('resize', doAThing);
</script>

EDIT: I'm pretty sure 'resize' works fine for orientation, but if you test it and it's not working well you could also add a orientationchange listener on the function as well:

window.addEventListener('orientationchange', doAThing);

thesublimeobject
  • 1,393
  • 1
  • 17
  • 22
  • I'm going to try this later today, but I don't understand this part: "but if you text it". Did you mean "test"? – WendiT Feb 16 '17 at 04:55
  • Can't get this one to work. See here: https://jsfiddle.net/WendiT/vxykg8ae/ The rest of the content disappears on resize. In a browser the page loads continuously. – WendiT Mar 18 '17 at 10:17
  • What's not working? It seems to work for me. Now that I am coming back to look at this, there are a few other things I should mention too. You really shouldn't use `document.write` for this. You should use another method like `element.appendChild()`. Also, you should probably have a check to see if the element you want to append already exists, that was it doesn't re-append it every time. – thesublimeobject Mar 18 '17 at 20:34
  • "What is not working?" See here: jsfiddle.net/WendiT/vxykg8ae The rest of the content disappears on resize. In a browser the page loads continuously. – WendiT Mar 19 '17 at 04:50
  • I like this option, but I don't know how to get the image there on the first load, so before resizing. https://jsfiddle.net/WendiT/dwr42g2o/ – WendiT Mar 19 '17 at 05:09
0

This is an implementation using jquery:

$( window ).resize( function ( ) { 
     var width = $( window ).width( );
     var height=$( window ).height( );
     /**on resize you can change your content or code based on your condition*/
});
/*This event will be triggered when the window size will change */
Stephen Rauch
  • 47,830
  • 31
  • 106
  • 135
prashant gedam
  • 50
  • 2
  • Will this work when I change the orientation of my mobile phone? – WendiT Feb 16 '17 at 05:04
  • I can't get this one to work either. See here: https://jsfiddle.net/WendiT/akwufv0q/ The image doesn't load at all and it could be that I've implemented it wrongly. – WendiT Mar 18 '17 at 10:28