Forums

robhawk

Hi,

Having recently purchased the "Implementing Responsive Design" book I've been using some of the approaches on a current project, good book!

I have one problem that I'm struggling to get to grips with when I'm serving images to certain screen sizes. I'm using the "data-" attribute and matchmedia to only pull in a couple of images once a certain screen dimension is hit. This works perfectly across Firefox, Chrome, Safari, Opera but with IE9 the element inserted via matchmedia has a width and height attached to it thus breaking the responsive nature of the image and also my layout!

So my question is how would I go about removing the height & width element from the image returned by the matchmedia javascript or is there another solution?

Here is my code (all from the book rather than written by myself) below in hope that someone much smarter than me can help me with a solution.

HTML First

Here's the Javascript

window.onload = function() {

//images enhancement
if (window.matchMedia("(min-width: 46.875em)").matches) {
  //load in the images

  var lazy = Utils.q('[data-src]');
  for (var i = 0; i < lazy.length; i++) {
    var source = lazy[i].getAttribute('data-src');
    //create the image
    var img = new Image();
    img.src = source;
    //insert it inside of the link
    lazy[i].insertBefore(img, lazy[i].firstChild);
  };

I'm not sure why this is but am guessing if it's an IE9 "thing" there must be a way of removing the height and width values returned with the element.

I'm pretty new to this especially the javascript so help really is appreciated.

Regards

Rob

ToxicFire

http://reference.sitepoint.com/javascript/Element/removeAttribute

try inserting this bit of code at the last but one line of the code above

   img.removeAttribute('height');
   img.removeAttribute('width');

robhawk

Hi,

Firstly thanks for getting back to me so quickly with help. I've tried the above but the height and width are still shown in IE.

//images enhancement if (window.matchMedia("(min-width: 46.875em)").matches) { //load in the images

  var lazy = Utils.q('[data-src]');
  for (var i = 0; i < lazy.length; i++) {
    var source = lazy[i].getAttribute('data-src');
    //create the image
    var img = new Image();
    img.src = source;
    //insert it inside of the link
                      img.removeAttribute('height');
      img.removeAttribute('width');
    lazy[i].insertBefore(img, lazy[i].firstChild);
  };

Perhaps I've done something wrong?!

Look forward to hearing from you.

Regards

Rob

robhawk

Sorry I tried with it below the line starting lazy[i] as well.

like so but still visible in IE...

/images enhancement if (window.matchMedia("(min-width: 46.875em)").matches) { //load in the images

  var lazy = Utils.q('[data-src]');
  for (var i = 0; i < lazy.length; i++) {
    var source = lazy[i].getAttribute('data-src');
    //create the image
    var img = new Image();
    img.src = source;
    //insert it inside of the link
    lazy[i].insertBefore(img, lazy[i].firstChild);
    img.removeAttribute('height');
      img.removeAttribute('width');
  };

robhawk

I've just found and tried this and it adds the height "auto" as an inline style which overrides the hard set height parameter.

I think the removal of the height and width would be cleaner although this does work. What do you think?

$('.support img').css({ height: 'auto' });

ToxicFire

oh your using jquery, aswell in that case try

$('.support img').removeAttr('width').removeAttr('height');

might have better chance.

robhawk

Thanks for the help...

reececonrad

Robhawk, did that work?

treehouse : what would you like to learn today?

Forums

Selectively Serving Images Using HTML5 "data-" attribute & Match Media for Responsive Site

HTML First

Here's the Javascript