CODEWITHSUNDEEP
htmlcss
zessx
zessx

Reputation: 68790

Scalable div larger than window

Concept

I'm trying to get a list larger than the window, which will move depending on mouse position. The goal is to allow the user to see all list entries, whatever their amount.

Below is a simple image to illustrate the concept :

enter image description here

Problem

Currently, I can make this work only if I set the list width. I would like to not set this width.

Here's the code:

$(document).ready(function() {
    
    var widthPage = $('.strip').width(); 
    var widthStrip = $('.strip ul').width();
    
    $('.strip').on('mousemove', function(event) {
        var offset = $(this).offset(); 
        var relX = event.pageX - offset.left;
        var left = relX * (widthStrip - widthPage) / widthPage;
        $(this).find('ul').css('left', '-'+left+'px');
    });
    
});
/* Positioning */
.strip {
    position:relative;  
    overflow: hidden;
}
.strip ul {
    position: absolute;
    top: 0; left: 0;
    width: 1750px;
}
.strip li {
    display: block;
    float: left;
}

/* Style */
body {
    padding: 0;
    margin: 0;
}
.strip {
    height: 30px;
    margin-top: 50px;
}
.strip ul {
    height: 30px;
    padding: 0;
    margin: 0;
}
.strip li {
    list-style: none;
    border: 1px solid #EBEBEB;
    margin-right: -1px;
    padding: 0 5px;
    line-height: 28px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="strip">
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Sit</li>
        <li>Amet</li>
        <li>Consectetur</li>
        <li>Adipisicing</li>
        <li>Elit</li>
        <li>Sed</li>
        <li>Do</li>
        <li>Eiusmod</li>
        <li>Tempor</li>
        <li>Incididunt</li>
        <li>Ut</li>
        <li>Labore</li>
        <li>Et</li>
        <li>Dolore</li>
        <li>Magna</li>
        <li>Aliqua</li>
        <li>Ut</li>
        <li>Enim</li>
        <li>Ad</li>
        <li>Minim</li>
        <li>Veniam</li>
        <li>Quis</li>
        <li>Nostrud</li>
        <li>Exercitation</li>
        <li>Ullamco</li>
        <li>Laboris</li>
        <li>Nisi</li>
        <li>Ut</li>
        <li>Aliquip</li>
        <li>Ex</li>
        <li>Ea</li>
        <li>Commodo</li>
        <li>Consequat</li>
    </ul>
</div>

Upvotes: 4

Views: 171

Answers (2)

Zach Saucier
Zach Saucier

Reputation: 25954

One way to do it would be to make .strip very large and change widthPage to a grandparent's width who's size is equivalent to the original parent's, in this case var widthPage = window.innerWidth;

Demo Here

Changed CSS

body { overflow-x: hidden; }
.strip {
    position:relative;  
    overflow: hidden;
    width:10000px; /* Arbitrary large value */
}
.strip ul {
    position: absolute;
    top: 0; left: 0;
    width: auto;
}

Upvotes: 1

Nightfirecat
Nightfirecat

Reputation: 11610

The issue here is that to force the floated elements to expand beyond the page's width, you need to force their container to have a width sufficient to hold them all. I propose using display: inline-block instead, as they will continue so long as their container specifies white-space: nowrap.

.strip {
    position:relative;
    white-space: nowrap;
    overflow: hidden;
}
.strip ul {
    position: absolute;
    top: 0; left: 0;
    font-size: 0; /* prevent html whitespace from displaying */
}
.strip li {
    display: inline-block;
    font-size: 16px; /* reset font size so the elements appear */
}

After setting these styles, the list will scroll correctly without an explicit width set.

Upvotes: 4

Related Questions