CODEWITHSUNDEEP
jqueryhtmlcss
Omer M.
Omer M.

Reputation: 630

jquery resize scrollbar to fit height of overlay div

I would like to create something similar to this: http://tapiture.com/popular

not the site, but the onClick image event. when you click an image, the scrollbar resizes to the height of the overlay image.

how can i make something like this using jquery?

Upvotes: 0

Views: 1136

Answers (2)

VVV
VVV

Reputation: 7593

When they open a modal, they add the following class to the body

   .modal-open {
        overflow: hidden;
        position: relative;
    }

so with overflow hidden, all the images behind the modal are, well, hidden. So the scrollbar adapts to the content of the modal.

On the modal layer, they added this class

.modal-scrollable {
    bottom: 0;
    left: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
}

Notice how overflow is at auto, that means that scrollbars will show if needed on that layer.

Upvotes: 2

Omer M.
Omer M.

Reputation: 630

As promised,here's the code i did.

JQuery: 


    $('.item').on('click','img', function(){
        $this = $(this);
        $('body').addClass('modal_open');
        $('#overlay').fadeIn();
        $('#img_zoom').html('new and bigger image tag').fadeIn();
    });

CSS:

#overlay{z-index: 1; position: fixed; height: 100%; width:100%; background: rgba(255,255,255,0.3); display:none;}
#img_zoom{position: fixed; z-index: 2; box-shadow: 0 0 5px #000; display:none; bottom: 0; left: 0; overflow: auto; right: 0; top: 0;}

.modal_open {overflow: hidden; position: relative; }
.modal_scrollable {bottom: 0; left: 0; overflow: auto; position: fixed; right: 0; top: 0; }

All thanks to ComputerArts

Upvotes: 1

Related Questions