Grid Accordion with jQuery

[gaweb]

Working on making my site to use the css-tricks.com article on “Grid Accordion with jQuery” as my main site. Basically I want to make each tab a page of its own. My site will be a single page using the Grid Accordion” to get around.

During this I have had to make several modifications and I’m still having some problems.

Just wanted to see if anyone had a quick answer to my problems, can point me in the right direction or even let me know if it cannot be done.

1st thing the way the top artwork clicks to open that column, then a 2nd click goes to the link is great. But I also want to have links within each tab. Currently the links show up as links and I can right click on them to open a new page. But nothing happens by just clicking on them. I think I need to rewrite and add some more javascript for the “page-wrap” js. Still a newbie with js, can this be done without breaking the whole Grid Accordion?

The end result I want pictures with links, plain links, logins and even web based forms within the “dd” tags. Basically I want to past HTML code between the “dd” tags. And the dd tags are within the page-wrap js control for links.

2nd other thing I want to do but have not started yet. Some tabs will also show a gallery just below the Grid Accordion or other content while the tab is being displayed. Then disappear when another tab is selected. I’m sure I can do this with CSS but just want to make sure the js will not stop this.

Thanks for any help or info.

Mike

[gaweb]

So after some more work with the Grid Accordion with jQuery I have found some more things that I will have to make my own code and basically re-build the css-tricks version.

Still would like to find an IE example fix for the alt colors for each row.

The code that makes the top pictures open that column on the first click then go to that link on the second link, breaks the links within the tabs. For now I have removed this code and links within the tabs work but I cannot click the images for action now.

The only way I can get other jquery to work within this is if that tab is the default one that opens when the page starts. I have been able to use I-frame to get around this, but this not the final solution I want.

I would also like to have links that open different tabs and not the default. Just like when you have a link that goes to an area in the middle of a page.

Also would like it when the user clicks on a tab that is lower to the page the pages will scroll up to the top of that tabs content, and not show the middle of the tabs content when selected.

Hard code the minimum width of the columns on startup, so they do not crop image and tabs until fully loaded.

I really do love this design and I cannot wait until I figure out all I need to do to make it the way I want it to be. Many Thanks for Chris Coyier for creating this. :D

Mike

[Chris Coyier]

The IE fix for the colors is to give each dt and dd a class name, and use that class name to change the color instead of the :nth-child stuff.

[gaweb]

Thanks Chris, and thanks to Nill for posting an example for Czernow IE fix.

Currently I’m modifying this solution to fit my needs and have run into some issues and solutions that I will post here.

A:)Fix iframe on IE and Firefox without an iframe reload. Works with Chrome and Safari though. Currently IE and Firefox need to have the iframe reloaded once the user goes to that tab and want to view it. For the moment I added a “reload gallery” link below the jquery slider to enable the user to reload just that iframe and not the whole page. This is the code I used.

Code:

Press Here to Reload Gallery if your Browser is stuck on a picture

B:) The ability to include other jQuery within each tab. Only works if that tab is opened by default on page load with the below code. Iframe also works if it is within the tab that opens by default on page load.

Code:

C:) Enable links and buttons to work within the tabs WITH the artwork single and double click code also.
For the moment I have removed this code from the infogrid.js file to enable links and forms to work within the tabs of the grid-accordion.

Code:

$(“#page-wrap”).delegate(“a”,”click”, function(e) {
if ( !$(this).parent().hasClass(“curCol”) ) {
e.preventDefault();
$(this).next().find(‘dt:first’).click();
}
});

D:) Browser back button enabled. Solutions I have found do not work with this so far. Tried 2 ways of doing this and so far no luck. This would also work for ”mydomain.com/#about” would send user to that tab being opened on default. This will enable links to all tabs.

E:) If page moves to a new tab and that tab’s top is above the current browser viewing area the page will scroll to the top of the newly opened tab.

F:) Double layer grid accordion, some tabs would have a 2nd single column of the grid accordion within it. Sub layers.

G:) More of a wish, make all columns slide horizontally also. So you could have like 10 columns. Have some ideas but have not tried them yet.

CSS to enable hover over color for IE and all others. I combined all the row of the tabs into one css.

Code:

dt:first-child:hover, dt:first-child + * + *:hover, dt:first-child + * + * + * + *:hover, dt:first-child + * + * + * + * + * + *:hover, dt:first-child + * + * + * + * + * + * + * + *:hover, dt:first-child + * + * + * + * + * + * + * + * + * + *:hover, dt:first-child + * + * + * + * + * + * + * + * + * + * + * + *:hover, dt:first-child + * + * + * + * + * + * + * + * + * + * + * + * + * + *:hover {background: c29061; }

Mike

[SpaciousMind]

Love the Grid Accordion and the simple way its written… might there a relatively easy way the JQuery-impaired like me could implement this with the ability to have the accordion push down the content below, so you could have more content immediately below but not have a gap when its closed?

[gaweb]

OK here is a new issue.

I wanted to add type shadow to the larger fonts for the opened tabs titles. Works fine in FF, Safari, Chrome and Opera. But infogrid dies in IE, no tabs will open.

This is what I added in the infogrid.js file

In the allTitles.animate area.
"text-shadow": "0px 0px 0px #ffffff",

In the el.animate area. (only the open tabs with larger type will have the type shadow.)
"text-shadow": "0px 1px 2px #e5ebf1",

Mike

[michaelmalloy]

Were you ever able to come up with a solution to having additional jquery in each tab?

[Author]

Posts