Superslides resizes images to big

Question

I seem to run into an issue that didnt excist before today with some code. While the jquery script of superslides works normally fine, we got a message today that our site looked weird, so I went and checked it. It seems the resizing of the images in our superslides slider are all of the sudden done wrong and it causes the images to move out of its area and not hidden in the overflow.

It assigns a wrong height variable to the height of the image, except when i resize it in width, than it fixes. Whenever I resize in height, it fails again.

So I wondered what happened, and checked if there were modifications done. None happened, and I checked on the test server where I run a different version of the website, and I know should work fine, but it had the same problem. I cross checked browser to see if it was a browser problem, no luck.

Now after some deducting and testing I figured it has to do with the variable stated as following.

.... some code ..... <-- line 117 in jquery.superslides.js
} else {
      $('body').css({
        margin: 0
      });

      that.$el.css({
        position: 'relative',
        overflow: 'hidden',
        width: '100%',
        height: that.height
      });

For some odd reason, that (which is technically a this since its defined as var that = this;) doesn't calculate the height of div but just spits out a number I cant even figure out. The same happens to the image, so my question is, where does it go wrong?

I removed the superslides temporarly from my site, but the issue is at hand as well on our test domain and on my personal testing space, for some odd reason, since it worked all perfectly just a few days ago.

See it at hand here: http://test.thewebfanatics.com/jellyweb

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

Superslides uses by default $(window).height() which fails in your case.
Either you could inject another object that has the correct size OR you could just fix $(window).height() as read here:

With no doctype tag, Chrome reports the same value for both calls.

Adding a strict doctype like <!DOCTYPE html> causes the values to work as advertised.

edited May 23 '17 at 11:51

Community

1
1

answered Sep 15 '15 at 20:44

Tubbe

1,068
6
22

Thanks, that was the issue indeed. It required me to do a little alteration on the menu with css style to get the margins right now, but that was an issue I could manage. Its funny how a doctype declaration can fix a lot. Thanks for that to point out! – Dorvalla Sep 16 '15 at 11:21
Glad I could help out! :) – Tubbe Sep 16 '15 at 17:13

Superslides resizes images to big

1 Answers1