Display Post Content Above or Below the Grid – Ajax

If you’ve updated to version 1.5, you may have noticed a new tab in your Grid’s settings called “Ajax”.

This feature allows you to display additional post content in a container placed immediately above or below the Grid.

What’s this sort of thing typically used for? Let’s say you have a Grid of items that represent projects you’ve created for clients. Instead of making the user click through to the post to get more details about the project, you could display additional information about the project directly above or below the Grid. This way the user can view additional details about the project, without ever having to leave the page. Here’s a basic example:

To use this new feature, first edit your Grid’s skin, and hyperlink a button to “Ajax”:

Next, head back to your Grid’s main settings, and view the the new “Ajax” tab:

Next, choose what type of content you wish to load:

Next, choose the settings for how the content should be displayed and loaded:

1. Container Position: Choose to show the content above the Grid (top), below the Grid (bottom), or show the content in a special place in your site by choosing the “Shortcode” option, and placing the shortcode anywhere on the page you’d like the content to show.
2. Show Close Button: Choose to show a “close” button that the user can click to hide the content once displayed.
3. Content Sliding: Choose to apply a “slide” animation to the existing content on the page to make room for the new content.
4. Scroll on Load: Choose to automatically scroll to the newly loaded content.
5. Scroll Offset: Apply an offset in pixels to apply to the “Scroll on Load” functionality.

Additional Advanced Options

• Ajax Options: These options can be used to dynamically load a script or stylesheet, or call JavaScript directly using the “JavaScript Callback” option.
• Container ID: Choose the ID of the container to be used for the Ajax content. This is useful for applying custom CSS to the container and its content.
• Custom CSS: Load additional inline CSS along with the content.
• Pre/Post Container HTML: Additional content that will always be shown directly above or below the Ajax content container.