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 9 posts - 16 through 24 (of 24 total)
  • Author
    Posts
  • #90095
    rudifer
    Member

    Brilliant! You’re a life saver!!

    #90107
    rudifer
    Member

    one more question, how or where would i go about adding image border to the total width of page? the number of images is unknown, but 1px left and right of each image.

    #90109
    Mottie
    Member

    In the demo, adjust the value of this line

    total = 10, // include extra width padding here

    to the number of images x 2 to add some extra width so the images don’t wrap. The 10 there is pretty much arbitrary. To add the 1 px border, just add it to the css:

    #container img {
    float: left;
    border: 1px solid #000; /* or whatever color you want */
    }
    #90110
    rudifer
    Member

    oh awesome! didn’t see that comment on total=… perfect!

    #114878

    A year later….
    This is great. Instead of the images resizing based on full width/height of browser window, how could you set a height of the image container as a percentage of page height, and have the images resize within that container?

    #159769
    robecki
    Participant

    hi this is great.
    I’ve been looking this for some time. I’ve got one question! I want to load new content with images into div, how can I this implement with click() event. I tried something like this, but it doesn’t work properly. The images are resized correctly, but size of the body doesn’t resize.

    $(document).ready(function () {
    
            $(document).on('click', "a.link", function () {
    
                var url = $(this).attr('href');                 
    
                $('#container') 
                .load(url + '#cnt', function () {
    
    
                    ratios = $('#container img').map(function () {
                        return $(this).width() / $(this).height();
    
                    });
    
            adjustSize();
    
                }).resize(
            adjustSize)
            .hide().fadeIn('slow');
                return false;
            });
        });
    

    Can someone please help me!

    Thanks

    #160457
    robecki
    Participant

    Thanks for the quick reply. I think we didn’t understand each other, probably because of my poor English.
    I would like this:
    when I click on the link, for example “portfolio”, the entire content of images are replaced by images of portfolio.

    I have an example of what I mean:

    http://www.juliatrotti.com/editorial

    In my example, script loads new content, but it doesn’t resize “body” to the right size (it stays the same size, no matter of number of images or size of the images)

    The fading efect is great.

    Thank you very much for the answer,

    Robert

    #160527
    robecki
    Participant

    wow, it’s works. Thank you very very much.
    I am really grateful
    Have a nice day.
    Robert

    #160812
    robecki
    Participant

    Hi, script works like a charm, but I have another question for you if you are willing to answer. I’m having a lot of pictures in content and all images are loading at the same time, what takes quite a long time. How can I fix the code, that the images would loaded individually, like plugin “lazy load”, which is loading images simultaneously when they come on the screen. I tried everything, but it doesn’t work because I need to set out first the width and height of the image which I don’t know until is loaded in order to work properly.

    Thanks

    Robert

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