1

I'm using jQuery but I'm honestly not 100% certain this is entirely a jQuery issue.

The plugin is for a gallery/slider but this too probably doesn't matter. I mention it in case someone was curious.

Here goes...I have an image and decide that of the height and width, it's the width that needs to be reset to fullscreen width. I want to maintain the aspect ratio so in doing the width resize, the height of the image becomes greater than the height of the screen. That's fine. That's what I want. Total coverage. But here's where it gets a bit messy.

I do another calculation and figure out that the excess height (img height - broswer height) is X. So I set the img's margin-top: - (X / 2). In other words, the image will center vertically with equal bits now getting cut off the top and bottom. I hope I'm making sense.

This works fine in FireFox and IE but in Chrome I end up with a band across the bottom. If I take the margin-top: bit out, then the black band goes away and the browser seems to vertically center the image on its own. But then that screws up FF and IE.

I'm wondering if I'm misinterpreting some of the more subtle points of positioning, overflow, how the browser interprets overflow in a fullscreen, etc. Also, I want to mention, that this "slider" is responsive so I can do fixed width and/or height in the stylesheet. I've been using .attr() for any of the monkey biz I've mentioned.

One other thing, sometimes my plugin works fine in Chrome, sometimes it bugs out. For example, I'll have the slider on pause and it'll start playing without me clicking start. What should I look for? This is only my second plugin so I'm still green and probably more ambitious than my current skill level :)

1
  • Code please. We can offer more relevant advice is we know the state of your code.
    – Jasper
    Feb 11, 2012 at 0:24

1 Answer 1

3

If you use .attr() you will only be able to set/get attributes. If you want to alter the style attribute, you can either use .css() or .attr('style', '<some-style>').The former is preferred as this is what it's for, but the latter works, however it will overwrite any other inline-styles whereas .css() will allow you to edit only the styles you want without affecting the others.

Docs for:

Here's what I came-up-with:

//cache the image we want to manipulate
var $img = $('img');

//bind an event handler to the `resize` event for the viewport
$(window).on('resize', function () {

    //get the width and height of the viewport and store it in an object,
    //also get the aspect ratio of the image and it's calculated height based on the viewport's width
    var viewport = {
            width   : $(this).width(),
            height : $(this).height()
        },
        ratio     = ($img.height() / $img.width()),
        imgHeight = Math.floor(viewport.width * ratio);

    //update the CSS of the image element
    $img.css({
        width     : viewport.width,
        height    : imgHeight,
        marginTop : (imgHeight > viewport.height) ? Math.floor((imgHeight - viewport.height) / 2 * -1) : 0
    });

//trigger a `resize` event to fire on the `window` object for page-load so the element is loaded as full-width
}).trigger('resize');

Here is a demo: http://jsfiddle.net/Zex4S/1/

Note that .on() is new in jQuery 1.7 and in this case is the same as .bind(): http://api.jquery.com/on

(imgHeight > viewport.height) ? Math.floor((imgHeight - viewport.height) / 2 * -1) : 0: This is an important piece of code, it's a ternary operation.

(imgHeight > viewport.height): This is the beginning of the if statement, checking to see if the imgHeight value is greater than the viewport.height value.

? Math.floor((imgHeight - viewport.height) / 2 * -1): If the statement resolves to true then this is what will be returned, the imgHeight minus the viewport.height divided by two and multiplied by negative one (to return a negative value to center the image vertically).

: 0: finally if the if statement resolves to false then this well be returned, which docks the image at the top of it's container.

5
  • Hey Jasper. This help from the implementation perspective. But (and you're are probably just being brief) there are some holes (as I see it). 1) The current aspect ratio of the window needs to be checked. I don't want to assume they're naturally in landscape. 2) Maybe your suggestion will fix it, but I'm still curious as to why Chrome was acting different than FF and IE. My code as it is, is more or less close to this. That said, as a noob I did pick up some new tricks. For example, I hadn't yet bumped into .css() nor .trigger(). Let me find some time to try this. Thx. Anyone else? Feb 12, 2012 at 14:28
  • @ChiefAlchemist I'm not quite sure I follow on: I don't want to assume they're naturally in landscape. This just checks for the width of the current viewport (whatever orientation). If you are running this on a mobile site then you will probably want to add a setTimeout to the entire resize event handler to let the device finish the orientation-change before polling for the new dimensions. I would have to see your code to be able to determine the cross-browser quirk.
    – Jasper
    Feb 12, 2012 at 17:20
  • Hey Jasper - Pardon the delay, I had some immediate billable stuff to work on. This is something coming up :) Simply measuring width isn't what I want to do. For example, the window could be 500w x 200h and the image 500w x 100h. In this case I want to resize by useing the height so the window fills. If I use width then I end up with extra window and not enough screen. Feb 18, 2012 at 0:18
  • @ChiefAlchemist You should update your question, because you state: it's the width that needs to be reset to fullscreen width. However it's pretty simple to just add an if statement to decide if the limiting dimension should be height or width.
    – Jasper
    Feb 18, 2012 at 16:48
  • Thanks again @Jasper. Just to clarify (and yes perhaps it's not 100% clear) I said, ".I have an image and decide that of the height and width, it's the width that needs to be reset to fullscreen width." For the example, I made the (implied) conditional to decide on width, but it could have been height. Feb 20, 2012 at 20:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.