Question

I’m creating a with a few divs and a logo.

When the page is resized, the logo goes under the div which isn’t really an issue.

I do however want the image and div to resize to a minimum width, before overlapping will occur. Let’s say for example the user opens the page on a 1920×1080 screen, the image will be 250px wide and the div box, 800px. But, when he resizes, the image and div will ‘squash’ each other up to a point (minimum width of image = 100px; div = 400px).

I have written code that pics up when these elements will start overlapping, and it works, but I have no idea how to go about resizing the elements. Currently, I just minus 1, but that doesn’t work, because there comes a time where they overlap while resizing.

Here’s the jQuery code:

$(window).resize(function(e) {
    if($(window).width()-$('.info').width()-170-$('.logo').width() < 0 && $('.logo').width() > 100 && $('.info').width() > 400) {
        $('.info').width($('.info').width()-1);
        $('.logo').width($('.logo').width()-1);
    } else if($(window).width()-$('.info').width()-170-$('.logo').width() > 0 && $('.logo').width() < 250 && $('.info').width() < 800) {
        $('.info').width($('.info').width()+1);
        $('.logo').width($('.logo').width()+1);
    }
});

I’d appreciate any assistance in making these elements resize properly. I know I’m obviously missing something with the actual resizing of the elements. Any ideas?

Answer 1

So I fixed it myself. Posting here incase of future reference or if someone has a better way of doing this (or even improvements on this). This is the first time I’ve attempted something like this, so please go easy hehehe

$(window).resize(function(e) {
resizeAfter = $(window).width();
if($(window).width()-$('.info').width()-170-$('.logo').width() < 0) {
    if($('.logo').width() > 100){
        $('.logo').width($('.logo').width() - (resizeBefore-resizeAfter));
        $('.logo').height($('.logo').width()*ratio);
        if($('.logo').width() < 100) {
            $('.logo').width(100);
            $('.logo').height(100*ratio);
        }
    } else if($('.info').width() > 510){
        $('.info').width($('.info').width() - (resizeBefore-resizeAfter));
        if($('.info').width() < 510) {
            $('.info').width(510);
        }
    }
} else if($(window).width()-$('.info').width()-170-$('.logo').width() > 0){
    if($('.info').width() < 800){
        $('.info').width($('.info').width() + (resizeAfter-resizeBefore));
        if($('.info').width() > 800) {
            $('.info').width(800);
        }
    } else if($('.logo').width() < 250){
        $('.logo').width($('.logo').width() + (resizeAfter - resizeBefore));
        $('.logo').height($('.logo').width()*ratio);
        if($('.logo').width() > 250) {
            $('.logo').width(250);
            $('.logo').height(250*ratio);
        }
    }
}
resizeBefore = $(window).width();
});