dmotz / oriDomi

🪭 Fold up DOM elements like paper

Home Page:http://oridomi.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

changes the overall height of my object

heaversm opened this issue · comments

Hi - I am experiencing an issue where my object fits its container before oridomi is called, but afterwards, it shrinks it down. I would like to maintain the height, so it can fit my grid. Any idea how to do this? Here's my code:

<script>
        var flight = new OriDomi('#flight',{
            vPanels: 4
        });
        flight.stairs(0,'left');
        flight.collapse();
</script>

and styles

#flight {
    position: relative;
    top: 134px;
    left: 195px;
    height: 802px;
    width: 750px;
    background: url('../images/foldout.jpg') no-repeat;
}

but here's what ends up happening:

screen shot 2013-12-06 at 1 32 11 pm

If you look closely you can see in the black space above the folding image that there is some panel shading - so the panels are actually set to the right height, but the image is being shifted down, or not filling the panels somehow. I'm guessing it's a css thing. Any idea how to fix this?

It's hard to tell from the screenshot, but I'm guessing your image isn't covering the entire dimensions of the div. Try using background-size: cover in the styling. If that doesn't work, try linking me to a jsFiddle or other demo where I can look at it.

Hey thanks - I figured it out. I had an absolutely positioned DIV, but
because its coordinates were not at 0,0, it was throwing things off. You
have to place it in a container at 0,0, and then you can give the container
absolute or relative coordinates it seems. Thanks for a great plugin though!

On Fri, Dec 6, 2013 at 4:40 PM, Dan Motzenbecker
notifications@github.comwrote:

It's hard to tell from the screenshot, but I'm guessing your image isn't
covering the entire dimensions of the div. Try using background-size:
cover in the styling. If that doesn't work, try linking me to a jsFiddle
or other demo where I can look at it.


Reply to this email directly or view it on GitHubhttps://github.com//issues/24#issuecomment-30031856
.

Mike Heavers
mikeheavers.com
917-345-6634

Cool, glad you got it figured out.