Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Force divs/website to Horizontally scroll without fixed width

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #34941
    rudifer
    Member

    I’m having some issues trying to force divs/website to Horizontally scroll, without the page having a fixed width. Also, there is an image that adjusts its size along with browser resize.

    For example, this is where I am at, but this is what I would like to achieve.

    Since the images would be uploaded by the user, I can’t set a fixed width and since there are different browser sizes, I would like to maintain image size flexibility.

    I can’t seem to get these images/divs to stay side-by-side, while maintaining their flexibility.

    Any help would be greatly appreciated,
    Thanks

    #89815
    Mottie
    Moderator

    You’re probably going to need to use some javascript to adjust the page width. How are you planning on resizing the images? I’m guessing maintain the aspect ratio, but make them fit the page?

    #89817
    Mottie
    Moderator

    Here is a demo I put together, it will always maintain the image aspect ratio (no stretching)

    var adjustSize = function(){
    var total = 10, // include extra width padding here
    win = $(window),
    winW = win.width(),
    // subtract scroll bar height to prevent vertical scrollbar
    winH = win.height() - 15;
    $('#container img').each(function(){
    var $t = $(this),
    r = $t.width()/$t.height(); // image aspect ratio
    // set image size, but maintain aspect ratio
    worh = (r > 1) ?
    { width : winW, height: winW/r, maxHeight: winH, maxWidth: winH*r } :
    { height : winH, width : winH*r, maxWidth: winW, maxHeight: winW/r };
    $t.css(worh);
    // add up total width for body size
    total += $t.width();
    });
    $('body').width(total);
    };

    // run script after all the images have loaded & on window resize
    $(window)
    .load(function(){ adjustSize(); })
    .resize(function(){ adjustSize(); });
    #89852
    rudifer
    Member

    Thanks mottie,
    that’s pretty close, but is there a way to maintain uniform height, even though the images have different width?
    Previously I was looking into setting the images to cover 100% width within a div, and have the div fluid resize, but that doesn’t seem to be the way to go.

    #89853
    Mottie
    Moderator

    Ok, try this… max height is maintained.

    #89855
    rudifer
    Member

    That is it. Is there a way to maintain the image’s aspect ratio when the browser window is resized horizontally? I updated that link with a few different images, and it seems these images shrink in width but not height when the browser window becomes smaller

    #89859
    Mottie
    Moderator

    Hmmm, ok maybe this is better…. hehe gotta love experimenting ;)

    #89865
    rudifer
    Member

    HAHA yeah this is a process and a half. the problem with this last one is the images appear a bit stretched vertically, while compacted horizontally. is there a workaround to make it maintain its proportions?

    #89866
    Mottie
    Moderator

    The last version should be maintaining the aspect ratio while keeping all of the images aligned horizontally. If the images you substitute in are stretching, could you update the demo with the different image sizes?

    #89869
    rudifer
    Member

    yeah for sure. updated

    #90025
    rudifer
    Member

    i think the problem here is it’s impossible to give all images the same aspect ratio, while maintaining a dynamic height + width, when they aren’t all the same size. if we establish a max height (800px) and make sure all images are in fact of 800px+ height, is there a way to maintain the aspect ratio for all images as the height will be the same throughout, yet the width will be different?

    i don’t know if that makes sense, but to add to it, so if the user’s browser window is 600px tall, the images won’t surpass 600px height(will maintain uniform height) which is from top of the screen to bottom of screen, yet if the user’s browser window is 1000px, the images will stretch to a maximum of 800px height, maintain its uniform height throughout, without touching the bottom of the screen – but they will be all lined up properly.

    twisted. i realized that this guy did it and it’s eating at me. if i can’t wing this than i’ll just change the design up. would love and be more than grateful for the extra help

    #90028
    rudifer
    Member

    …and so that the image doesn’t shrink weird, could do away with maxwidth, and focus on height to maintain the image’s aspect ratio. equal heights, never more than browser size, while maintaining aspect ratio.

    #90030
    Mottie
    Moderator

    To me, the last demo I made does do what you are asking. So maybe the different sized images you are using is causing some problems that I am not aware of, so it would help if you shared a demo or at least update the demo with the same image sizes you are using… I can’t work out a problem if I can’t see what’s wrong.

    #90036
    rudifer
    Member

    oh sorry i thought i had updated it – http://jsfiddle.net/5TETn/6/
    a good example of what i mean by the shrinking would be the 3rd image down, didn’t maintain its aspect ratio compared to its original.

    so that’s what i was thinking, if the image width was independent from browser width, but height was to remain uniform and relative to browser window, that it would work. i definitely don’t know how to pull that one off though

    #90057
    Mottie
    Moderator

    Ok, I got rid of all the unnecessary junk… it should work now!

    Edit: updated 1/14/2014 to use placekitten images in the demo ;P

Viewing 15 posts - 1 through 15 (of 24 total)
  • The forum ‘CSS’ is closed to new topics and replies.