Grow your CSS skills. Land your dream job.

Infogrid – Hide when clicking outside the grid

  • # 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:25 am

    Use `event.stopPropagation()`. Almost solved. Just a bit confused with the variables ⇒ http://codepen.io/tovic/pen/IltDs

    # 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 11:12 am

    Yes, I’ve checked your code. I think I have another way to re-create this effect, it’s just that I feel bad if I ruin all the efforts that you are trying to do for this.

    I am not very skillful editing the existing code. I prefer to re-create it from scratch based on the example.

    Maybe anyone else?

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

You must be logged in to reply to this topic.

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