How do I cut off part of an element, but keep it available in the DOM?

Question

This is my goal:

what I want

The arrows cycle through the boxes by sliding them left and right - but the Javascript solution for this is beyond the scope of this question.

This is what I currently have:

what I have

As you see, the 6th box naturally floats over into the new line. What I need is to display whatever part of it can fit to the right of the 5th box. Presumably there should be some way to allow the container div (#toplist-saved) to have more width than its parent (#toplist-inner), and then hiding the overflow on its parent should do the trick. I could resolve this by setting the container width to some fixed huge width like 1000%, instead I'd like it to have only the minimal width required to hold the boxes without floating them over into a new line. Is this possible? This is the current HTML:


    
        
            Saved Reports: 
            
                
                    
                         Sample Report #1
                    
                    
                    
                
            
            
                
                    
                         Sample Report #2
                    
                    
                    
                
            
            
                
                    
                         Sample Report #3
                    
                    
                    
                
            
            
                
                    
                         Sample Report #4
                    
                    
                    
                
            
            
                
                    
                         Sample Report #5
                    
                    
                    
                
            
            
                
                    
                         Sample Report #6

And CSS:

#toplist {
    position: relative;
    z-index: 34;
}

#toplist-inner {
    background: #f3f6fb;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    overflow: hidden;
}

#toplist-saved {
    display: none;
    width: 1000%;
}

#toplist-saved h5 {
    color: #0c5f9e;
}

.toplist-box-inner {
    float: left;
    margin: 30px 20px 30px 0;
    position: relative;
    border: 1px solid #757575;
    border-radius: 2px;
    width: 180px;
    height: 60px;
}

.toplist-box-settings {
    position: absolute;
    top: 3px;
    right: 3px;
    cursor: pointer;
}

.toplist-box-delete {
    position: absolute;
    bottom: 3px;
    right: 3px;
    cursor: pointer;
}

.toplist-box-title {
    color: #757575;
    font-size: 11px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 10px;
    cursor: pointer;
}

.toplist-box-title img {
    margin-right: 5px;
}

Alvaro Men&#233;ndez · Accepted Answer

This is what I would do in your case:

Inside the container I would add another container which will hold all your "boxes". Those boxes will have display:inline-block insteed of float, that way you can add to this container white-space:nowrapto avoid the boxes to jump to the next line if no room enough. Then adding overflow:hidden to the container will "hide" any box outside.

Finally I will wrap again all the boxes into another container which won't have any css but will make the buttoms work as you will change the margin-left of this container each time you click on the buttoms like this:

$('.left').on('click', function(){    
    $('.margin-boxes').animate({marginLeft: '-=200px'}, 500);
  })

$('.right').on('click', function(){    
    $('.margin-boxes').animate({marginLeft: '+=200px'}, 500);
  })

You can add the margin to your first box and It may work the same, but I think it's cleaner to add this margin-boxescontainer.

Here is the FIDDLE

Edit: there's a problem though. you should add javascrit way that the margin-leftof the container should never be positive or lower than -600px (-600px in my fiddle example with my boxes and margins) to avoid keep "scrolling" when you already seign your last box. It should not be very difficult to make it. I would do it but I can't stay at computer anymore till tonight.

How do I cut off part of an element, but keep it available in the DOM?

Answers (2)

Related Questions