Forums

  • # February 27, 2013 at 3:36 pm

    Hello,

    I am currently using the InfoGrid (http://css-tricks.com/examples/InfoGrid/) script on a redesign for a pretty large profile website. I would like to make it so that the grid resets when clicking outside the grid itself (on the background behind it etc.) without refreshing the page. How would I go about doing this? I’ve tried a lot of different approaches and nothing seems to have the desired effect.

    # February 27, 2013 at 3:42 pm

    What do you mean by reset?

    You mean it goes back to the default middle bit being active?

    # February 27, 2013 at 3:45 pm

    Actually I turned that off…. I’d like it to revert to no item being open at all so all the items on the grid were just the headers (no content shown)

    # February 27, 2013 at 3:53 pm

    Well

    Obviously you’ll need jQuery.

    You could add a click function to the [body] that cycles through the divs with a class of ‘info-col’ and if one of them also has a class of cur-Col (if that’s applied) and remove it.

    It would also need to reset the css changes made when the original div was clicked. Those will probably already been in the existing JS.

    Unfortunately, jQ is still new to me so someone else will have to take over.

    Might be an idea to put something in Codepen for us to play with.

    # February 27, 2013 at 4:14 pm

    I had to strip out most of the content (it’s proprietary at the moment until we are ready to release it) but this is basically how it looks currently:

    http://codepen.io/anon/pen/njBma

    # February 28, 2013 at 12:06 pm

    Yes…. that’s the basic idea….. it’s closing the box in your example, but the font doesn’t shrink down for the header title.

    What variables are you referring to?

    # February 28, 2013 at 12:10 pm

    It also looks like the boxes stay “shrunk” when they revert….. but we are a lot closer than I was on my own!!! (Thanks a lot for what you’ve already done by the way….)

    # February 28, 2013 at 3:37 pm

    Update: I added the following to your code and the font goes back to the right size….however when I do this, the item looks indented slightly compared to the other headers (and the boxes still don’t revert to the correct size)

    $el.stop().animate({
    “font-size”: “10px”,

    })

    # February 28, 2013 at 3:49 pm

    Another Update:

    I managed to get it ALMOST working….However when I do it this way IE stops working with the script, and the indented issue still occurs……

    // Click anywhere outside the Infogrid
    $(document).click(function () {

    // return all titles to normal size

    $allTitles.stop().animate({
    fontSize: “10px”,
    paddingTop: 4,
    paddingRight: 4,
    paddingBottom: 4,
    paddingLeft: 4

    }).removeClass(“current”);

    $el.stop().animate({
    “font-size”: “10px”,

    })
    $otherWraps.stop().animate({
    width: 180
    }).removeClass(“curCol”);

    // close all info cells
    $allCells.slideUp();

    // make all columns the small size
    $parentWrap.stop().animate({
    width: 180
    }).removeClass(“curCol”);

    });

    });

    # February 28, 2013 at 6:22 pm

    Ok…… I’m 99% of the way there :) – as far as I can see there are two bugs remaining…..I updated the codepen at http://codepen.io/anon/pen/njBma

    Bug 1.) When you click on the header title, the header closes and than re-opens (I was told I needed to make it so clicking on the box again once it’s open will also cause it to close)
    Bug 2.) In IE, when a box is closing it expands outwards before closing. (Especially noticable when clicking on a header in the far-right)

    Not sure how to resolve either of these… If I can get some help there I think I can close out this thread :)

    # March 1, 2013 at 8:39 am

    I’m interested in seeing this solved since I would probably need this in future also

    # March 4, 2013 at 12:30 pm

    Hompimpa – Have you had a chance to look at the changes I made at all?

    # March 5, 2013 at 1:18 pm

    Guess not….. anyone else? I’m totally at a loss here…..

    # March 6, 2013 at 4:32 pm

    Looks great in the codepen….. seem to be having some trouble getting it to work outside that environment however….. Likely something obvious I’m missing lol….. I’ll keep trying and let you know if/when I get it.

    # March 6, 2013 at 6:12 pm

    Thanks by the way – saved me TONS of headaches!

    Ok…. got it working (I had to export it rather than copy/paste each section – I think it had to do with where I was putting the

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag