Infogrid – Hide when clicking outside the grid

[strager]

Hello,

I am currently using the InfoGrid (https://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.

[Paulie_D]

What do you mean by reset?

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

[strager]

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)

[Paulie_D]

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.

[strager]

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

[strager]

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?

[strager]

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….)

[strager]

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”,

})

[strager]

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”);

});

});

[strager]

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 :)

[apart]

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

[strager]

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

[strager]

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

[strager]

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.

[strager]

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

[Author]

Posts