Grow your CSS skills. Land your dream job.

A Little Bit of Issues

  • # April 2, 2009 at 2:18 pm

    So I’m using the Animated Collapsible DIV v2.2 by Dynamic Drive. It works for the most part except when I want an area to collapse back up.

    I’m using a div called:

    Code:

    but for the script you need to use another div for each section you want. For me they would be …

    Code:
    Code:

    I’ve only changed the GRAPHIC area to reflect the portfolio-display effect. Has you see the other sections work fine. So it has to do with something with the other div. Here is my code.

    PAGE:

    Code:

    First, welcome and thank you for taking a look at my portfolio. To view my work under a category (graphic art, identity, etc.) click on the Display/Hide Work link. This will show the works in that particular category. For a larger and more detailed view click on the preview. Once finished click the close button to view all the works again. Hitting the Display/Hide Work again will hide works in the category you were viewing.

    Graphic Art

    Total Pieces: 7
    Last Updated: 03/12/2009
    – Display/Hide Work

    Portfolio Divider

    Identity

    Total Pieces: 3
    Last Updated: 03/12/2009
    – Display/Hide Work

    Portfolio Divider

    Packaging

    Total Pieces: 1
    Last Updated: 03/12/2009
    – Display/Hide Work

    Portfolio Divider

    Printed Media

    Total Pieces: 11
    Last Updated: 03/24/2009
    – Display/Hide Work

    Portfolio Divider

    Vector Illustration

    Total Pieces: 0
    Last Updated: –/–/—-
    – Display/Hide Work

    Portfolio Divider

    Website Design

    Total Pieces: 2
    Last Updated: 03/12/2009
    – Display/Hide Work

    CSS:

    Code:
    #portfolio-display ul
    {
    margin:0px;
    padding:0px;
    }
    #portfolio-display li
    {
    list-style-type:none;
    float:left;
    margin: 0 10px 10px 0;
    position:relative;
    padding:0px;
    }
    #portfolio-display li img
    {
    border: 4px solid #fff;
    width: 170px;
    }
    #portfolio-display li a
    {
    display:block;
    }

    Here is a LIVE link of what it looks like http://jason-loucks.com/wptest/portfolio/ – any ideas what is causing this? Like I said I think it has to do with the portfolio-display.

    # April 2, 2009 at 3:34 pm

    Try changing the javascript for the #graphic div to

    Code:
    animatedcollapse.addDiv(‘graphic’, ‘height=440px’)
    # April 2, 2009 at 4:07 pm
    "apostrophe" wrote:
    Try changing the javascript for the #graphic div to

    Code:
    animatedcollapse.addDiv(‘graphic’, ‘height=440px’)

    Thank you so much! Would you mind explaining how that works? Trying to learn at that same time. Thanks again. :D

    # April 2, 2009 at 4:17 pm

    The truth? I have no idea. :oops:

    I looked at your code, couldn’t see anything obviously wrong (except it didn’t work) so I had a look on the Dynamic drive site to see what parameters were available, height seemed most likely so I measured the div and added that to the jQuery.

    # April 2, 2009 at 4:32 pm
    "apostrophe" wrote:
    The truth? I have no idea. :oops:

    I looked at your code, couldn’t see anything obviously wrong (except it didn’t work) so I had a look on the Dynamic drive site to see what parameters were available, height seemed most likely so I measured the div and added that to the jQuery.

    Haha. Thanks, but I still want the content to hide when you first arrive.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".