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.
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)
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.
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....)
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)
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");
});
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 :)
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.
I use em units for padding. So if JQuery change the font size, then the padding will also change. No need extra padding animation. This InfoGrid also fluid width.
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.
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 stuff.....
The only issue we are having now is you changed how the images are being affected. You are doing a zoom effect instead of the expansion thing the original script did..... Is there a way we can keep the old effect for the images without busting the rest of the new version?
Bingo :) - Everything seems to be working great! Thanks again for your help! - I saw your comment in the code and I can't add a "credits" link anywhere sadly, but I may be able to swing adding a link in the comments. Unfortunately this is going to be used on a MAJOR (F. 500) website (You'd think I'd get a budget to get this done right?) and they wouldn't go for putting anything overt.
So everything is all done, and I'm talking to my boss about putting a Humans.txt in there. I have seen one small issue that's plaguing me (no one else has noticed yet thankfully). When using IE, when I click on an item the last item will occasionally get pushed down to the next line for a second than pop back up. This seems to happen multiple times rapidly. I saw your note in the js file so I'm not sure if it's related to that issue you solved, or if it just happens to sound similar. Any idea what I can do to solve this? I've tried making the whole thing smaller, but it still seems to occur.
EDIT: I've also made each block a little smaller individually and that doesn't fix it either :(
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.
What do you mean by reset?
You mean it goes back to the default middle bit being active?
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)
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.
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
Use
event.stopPropagation(). Almost solved. Just a bit confused with the variables ⇒ http://codepen.io/tovic/pen/IltDsYes.... 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?
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....)
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)
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......
});
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 :)
I'm interested in seeing this solved since I would probably need this in future also
Hompimpa - Have you had a chance to look at the changes I made at all?
Guess not..... anyone else? I'm totally at a loss here.....
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?
EDIT: Here's my own JQuery InfoGrid version. Believe it or not ⇒ http://codepen.io/tovic/pen/uLvDE
I use
emunits forpadding. So if JQuery change the font size, then thepaddingwill also change. No need extrapaddinganimation. This InfoGrid also fluid width.Editing is tiring.
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.
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 stuff.....
The only issue we are having now is you changed how the images are being affected. You are doing a zoom effect instead of the expansion thing the original script did..... Is there a way we can keep the old effect for the images without busting the rest of the new version?
Use background instead of images. I'v updated the Codepen.
PS: The effect looks jumpy from my computer when using Codepen but works smoothly from original HTML test page.
Bingo :) - Everything seems to be working great! Thanks again for your help! - I saw your comment in the code and I can't add a "credits" link anywhere sadly, but I may be able to swing adding a link in the comments. Unfortunately this is going to be used on a MAJOR (F. 500) website (You'd think I'd get a budget to get this done right?) and they wouldn't go for putting anything overt.
humans.txt
http://humanstxt.org/
So everything is all done, and I'm talking to my boss about putting a Humans.txt in there. I have seen one small issue that's plaguing me (no one else has noticed yet thankfully). When using IE, when I click on an item the last item will occasionally get pushed down to the next line for a second than pop back up. This seems to happen multiple times rapidly. I saw your note in the js file so I'm not sure if it's related to that issue you solved, or if it just happens to sound similar. Any idea what I can do to solve this? I've tried making the whole thing smaller, but it still seems to occur.
EDIT: I've also made each block a little smaller individually and that doesn't fix it either :(