CODEWITHSUNDEEP
javascriptjquerycss
Ryan Saxe
Ryan Saxe

Reputation: 17869

display half of element in css

So I would like to be able to only display half of an element. Now I could do something like the following:

function half($elem,which){
    //here I would get the scrolling position
    //of the element $elem along with the outer
    //width and outer height. Then, depending on
    //what 'which' is (left,right,top,bottom), the
    //function would append an element with the same
    //background color as the body background in
    //order to cover the correct part of the element
};

But that is just adding extra items to the DOM that would be unnecessary if, in some simple css or javascript, I can set it to simply display (or cut out) only part of an element. Is that possible? If so, how?

UPDATE:

After all of you are trying to guess, here is a fiddle that constantly appends content to a container. To answer my question, you would need to have a function that changes the css of the specific div being appended so that it only appends the specified half of the content

Upvotes: 0

Views: 8874

Answers (3)

PlantTheIdea
PlantTheIdea

Reputation: 16369

I mean its hard to guess based on the small amount of information you provide, but something like this should work:

.ElementContainer {
    width:500px; /* example, random number */
    overflow:hidden; /* important part */
}

.Element {
    width:200%; /* relative to parent, so double the width of parent */
}

And then just something like this:

<div class="ElementContainer">
    <img src="whatever.jpg" alt="" class="Element" />
</div>

That should only show the first half, from the left. If you want to do like ... the middle half or something, you'll need to use positioning:

.ElementContainer {
    position:relative; /* must declare position of parent */
    width:500px;
    height:200px; /* since child is removed from DOM, it will be 0 height unless declared explicitly */
    overflow:hidden;
}

.Element {
    width:200%;
    position:absolute;
    top:0; /* always declare both X & Y */
    left:-25%; /* can be any negative % you want, this is just an example */
}

This will do this kind of centered appearance ... you can run with it from here, should give you an idea of options.

Upvotes: 1

Michael Pratt
Michael Pratt

Reputation: 3496

It's very easy to cut off after a specific pixel height in CSS, assuming you want to cut vertically, substitute width if you want to cut horizontally:

.restricted {overflow: hidden; height: 45px; }

See this jsfiddle: http://jsfiddle.net/jrvf7/

Cutting off after precisely half of an element, if you don't know the height of the element beforehand, will require some javascript. See other submitted answers for that. I'd suggest you go my CSS route if possible, however.

Upvotes: 1

Ghost Echo
Ghost Echo

Reputation: 2067

It's kind of vague exactly what you want to be cut in half, but I'd start with 

background-size:cover;

Upvotes: -1

Related Questions