The Exposer Pro Stack is designed to hold other Stacks and hide them away or display them when a link is clicked. A hidden Stack only shows up when the viewer clicks on a link you add to the page and a visible stack vanishes when the link is clicked. The Exposer Pro Stack is easy to use.
These instructions assume that you’ve installed the Exposer Pro Stack and Exposer Snippet in RapidWeaver. You will probably need to quit and re-launch RapidWeaver after the installation.
Let’s walk through a typical setup. I’ve included a RapidWeaver demo project with this set of instructions. You can look at the finished product there.
First you want to open a Stacks page. You’ll want to create some sort of Stack (Styled text, 2-column, 3-column, tables, partitions, etc) and get them looking “just right”.
The example below shows a 3 column stack being readied for the Exposer Pro Stack.
These instructions assume that you’ve installed the Exposer Pro Stack and Exposer Snippet in RapidWeaver. You will probably need to quit and re-launch RapidWeaver after the installation.
Let’s walk through a typical setup. I’ve included a RapidWeaver demo project with this set of instructions. You can look at the finished product there.
First you want to open a Stacks page. You’ll want to create some sort of Stack (Styled text, 2-column, 3-column, tables, partitions, etc) and get them looking “just right”.
The example below shows a 3 column stack being readied for the Exposer Pro Stack.
I have enclosed a Styled text stack (above) in red and a 3 column stack in blue to demonstrate the setup so far. Easy, huh? Ok, I want to hide the three column stack inside Exposer. I now drag the Exposer Pro stack onto the page where I want the hidden content to display when it is activated. For this example, I just drag Exposer Pro right below the Styled text stack. The page now looks like this:
I’ve drawn a red box around the Exposer Stack to show you the layout. Now comes a VERY IMPORTANT step in the sequence so put down your beer and pay attention. We want to click on the small "i" symbol at the upper left of the Exposer Stack. (It’s circled in green in the above image.) When you click on that, the Inspector panel will magically appear like this:
Let’s examine the items in the Inspector that are unique to Exposer. The green box in the image to the right has been drawn around the “Hidden Div Name” field. This is where you want to name the div that contains your Exposer Pro content. It defaults to hidden and you can leave it like that if you are using only one Exposer Stack on the page. The name can be “hidden” even if the stack will be visible... it is just a name!
Let’s examine the items in the Inspector that are unique to Exposer. The green box in the image to the right has been drawn around the “Hidden Div Name” field. This is where you want to name the div that contains your Exposer Pro content. It defaults to hidden and you can leave it like that if you are using only one Exposer Stack on the page. The name can be “hidden” even if the stack will be visible... it is just a name!
Additional Exposer stacks on the same page will need unique names so name subsequent Exposers..... hidden1 or hidden2 or fred or pretty much whatever you want. Avoid names that are likely to be used by RapidWeaver themes and such. Bad examples include content, container, etc.
There are 3 check boxes. Try your exposer with neither checked. It may work with the theme’s built-in Jquery. If not, try checking just the No Conflict box and see if it works with the theme’s JQuery. Still no luck? Let’s check the Include Jquery box. Once you’ve figure out which combination of check boxes works, you can add more Exposers to the page. ALL additional Exposers on the page should have both boxes “unchecked”!! You only need the code once.... in the uppermost Exposer on the page.
In the sample project I am going to place the three column stack inside Exposer. You now drag the stack to be hidden (in our case, the 3-column Stack) on top of that space that reads, “Drop Stacks Here”. Here’s a helpful hint: click the outer blue, dashed border of the Stack you want to move. It should become a brighter shade of blue than the other blue, dashed lines. This indicates that you’ve selected the entire stack and not some sub-element within the Stack. Once it is selected, drag it onto the “Drop Stacks Here” window. See the image below:
There are 3 check boxes. Try your exposer with neither checked. It may work with the theme’s built-in Jquery. If not, try checking just the No Conflict box and see if it works with the theme’s JQuery. Still no luck? Let’s check the Include Jquery box. Once you’ve figure out which combination of check boxes works, you can add more Exposers to the page. ALL additional Exposers on the page should have both boxes “unchecked”!! You only need the code once.... in the uppermost Exposer on the page.
In the sample project I am going to place the three column stack inside Exposer. You now drag the stack to be hidden (in our case, the 3-column Stack) on top of that space that reads, “Drop Stacks Here”. Here’s a helpful hint: click the outer blue, dashed border of the Stack you want to move. It should become a brighter shade of blue than the other blue, dashed lines. This indicates that you’ve selected the entire stack and not some sub-element within the Stack. Once it is selected, drag it onto the “Drop Stacks Here” window. See the image below:
Once you’ve dragged the Stack to be hidden, it looks something like the image below. The red arrow indicates the outline of the Exposer Stack and the Green arrow indicates the outline of the hidden Stack (a 3-column Stack in our example) nestled comfortably inside the Exposer stack. The Orange oval shows the name of this particular Exposer which happens to be “hidden”. This is the name we set in the Inspector earlier. if you have multiple Exposers on your page, each needs a different name and the field highlighted with the orange oval will display on each of your Exposers in Edit mode to help you keep track of them. You’ll need to know the name of each to successfully set the links which open and close your Exposers.
Now we set the link and watch the magic unfold. I assume you’ve added the snippet that I so generously supplied, right? This would be a good time to open your Snippets inspector and drag it out of the way for a bit. We’ll need it in just a moment. For this example, I’m going to link to the first word in the Styled Text Stack at the top of the page. To do this, I highlight the word “Here” and click on the “Add Link” button at the bottom of the RapidWeaver interface. (See image below for setup)
This is what it looks like when I go to add the link to the word “Here”.
When the “Add Link” button is clicked, a new window is displayed (See below) Clicking the small triangle next to “Custom Attributes” reveals additional input fields as shown below:
This is what it looks like when I go to add the link to the word “Here”.
When the “Add Link” button is clicked, a new window is displayed (See below) Clicking the small triangle next to “Custom Attributes” reveals additional input fields as shown below:
We’re almost there... hang on! In the URL field, we are going to add a hash sign which looks like this # . In the “Name” field we are going to add onclick. In the “Value” field we are going to add $j('#hidden').toggle('slow');return false; Yeah, it looks like a lot of gobbledygook so that’s why I created the snippet. You can drag the snippet into the “Value” field. Completed setup should look like this:
The easiest way to find the snippet is to type exposer in the small search window at the top of the Snippets Inspector. The snippet should then show. (See image at right) When you’re ready to input the “Value” in the “Add Link” window, just drag in the snippet! You can type it manually if you are adventurous. Now before we click on the “Set Link” button, I want to emphasize something very important so listen up!
The default snippet code looks like this:
$j('#hidden').toggle('slow');return false;
The part shown in red is the “Hidden Div Name” we created back on page 3. It displays in blue at the bottom of your Exposer stack in Edit mode. Anyway, each use of a new Exposer stack on your page requires a unique div name. If you use Exposer only once on a page, it’s a no-brainer. The default div name in the Stack and the snippet are the same and are named hidden. If you use a second Exposer on a page and rename it hidden1 in the Stack, you need to change the snippet code to:
$j('#hidden1').toggle('slow');return false; Easy, huh?
Anyway, you are ready to check it out... Click the “Set Link” button and preview. If you’ve carefully followed my instructions, you’re link should hide the 3-column Stack with Exposer Pro! Cool, huh? ( For my Canadian friends, “Cool, eh?”) To have the Exposer visible at page load, go back to the inspector and uncheck the “Check = start hidden” box. Then the link will hide the Exposer content.
Hot Exposer Tips:
Ok, as a bonus for anybody who has actually read through the manual and gotten this far, I’ll show you a few customizations you may want to use.
The default snippet:
$j('#hidden').toggle('slow');return false;
1) See the blue text in the snippet code above? It is slow.... you can change that value to fast or normal and see if you like the effect any better. Personally, I like the slow setting best.
2) When creating a link, the interface looks like this:
$j('#hidden').toggle('slow');return false;
The part shown in red is the “Hidden Div Name” we created back on page 3. It displays in blue at the bottom of your Exposer stack in Edit mode. Anyway, each use of a new Exposer stack on your page requires a unique div name. If you use Exposer only once on a page, it’s a no-brainer. The default div name in the Stack and the snippet are the same and are named hidden. If you use a second Exposer on a page and rename it hidden1 in the Stack, you need to change the snippet code to:
$j('#hidden1').toggle('slow');return false; Easy, huh?
Anyway, you are ready to check it out... Click the “Set Link” button and preview. If you’ve carefully followed my instructions, you’re link should hide the 3-column Stack with Exposer Pro! Cool, huh? ( For my Canadian friends, “Cool, eh?”) To have the Exposer visible at page load, go back to the inspector and uncheck the “Check = start hidden” box. Then the link will hide the Exposer content.
Hot Exposer Tips:
Ok, as a bonus for anybody who has actually read through the manual and gotten this far, I’ll show you a few customizations you may want to use.
The default snippet:
$j('#hidden').toggle('slow');return false;
1) See the blue text in the snippet code above? It is slow.... you can change that value to fast or normal and see if you like the effect any better. Personally, I like the slow setting best.
2) When creating a link, the interface looks like this:
In the Name field you can use onclick which is the normal method. You can also use onDblclick to require a double-click to activate Exposer or onMouseover to allow Exposer to work when the cursor goes over the link. You can use one method to open Exposer and another to close it or....?? Get creative!
3) You can add multiple stacks inside Exposer. For example, add a 2-column and a 3- column stack in the same Exposer (See the sample project I included for this demo.)
4) The link you create to open Exposer can be text or an image. Both are demonstrated in the sample project.
5) The link for the Exposer effect is a toggle. It reveals the content and also hides the content. It is the part of the snippet code at the top of this page that is shown in purple -->> .toggle This command will open a hidden Exposer and also close a visible Exposer. You can achieve the same result with a slightly different effect by substituting .slideToggle for .toggle . (try it and see... it goes straight up and down like a windowshade. Remember... .toggle and .slideToggle work in both directions... they open and close the same Exposer.
6) If you want to create a link that acts in one direction only, the following will open a hidden Exposer:
.show
.slideDown
7) If you want to create a link that acts in one direction only, the following will close a visible Exposer:
.hide
.slideUp
8) You can create more than one link which operates an Exposer Stack. These duplicate links will use the exact same setup in the link setup. Each Exposer stack needs a unique “Hidden Div Name” but multiple links can be set to trigger that Exposer. Building from tips 4 and 5, create a link to reveal the Exposer content and then, inside the hidden content, add another duplicate link to close the content when the viewer has finished viewing it. Example on demo project’s second page.
9) Add an Exposer inside another Exposer. Example is included on demo project’s second page.
10) Exposer is JQuery-driven and may not play nicely with other javascript Stacks. We should all use the advice given by Isaiah, creator of Stacks, who said:
”One effect per page”. You can experiment and try more but make sure you test with all browsers. It would be a shame for anybody to not be able to view an effect you’ve included because a couple of stacks are conflicting with one another.
11) You can operate multiple Exposer Pros with a single mouseclick... you put the name of all the Exposer Pro divs that you want to react in the snippet code separated by a comma: Example:
$j('#hidden, #hidden1, #hidden2').toggle('slow');return false; In this example, clicking the link will affect #hidden, # hidden 1 and #hidden2 simultaneously. For more information on this and a working example, visit here:
12) If you have an Exposer Pro area that is initially visible and place the link to close it inside the Exposer Pro itself, when it closes, the link vanishes along with the content. A nice effect when used properly
13) Experiment and above all else... HAVE FUN!
BONUS! :
Stacks V1.3 includes the ability to have tool tips in the Stacks inspector. El Presidente has included these for you. As you can see from the image at the right, when an input field is hovered over with the mouse pointer, a tooltip appears. This tip contains extra information to help explain what the user can change.
Thanks to Isaiah at Yourhead, creator of Stacks, for this awesome new feature!
3) You can add multiple stacks inside Exposer. For example, add a 2-column and a 3- column stack in the same Exposer (See the sample project I included for this demo.)
4) The link you create to open Exposer can be text or an image. Both are demonstrated in the sample project.
5) The link for the Exposer effect is a toggle. It reveals the content and also hides the content. It is the part of the snippet code at the top of this page that is shown in purple -->> .toggle This command will open a hidden Exposer and also close a visible Exposer. You can achieve the same result with a slightly different effect by substituting .slideToggle for .toggle . (try it and see... it goes straight up and down like a windowshade. Remember... .toggle and .slideToggle work in both directions... they open and close the same Exposer.
6) If you want to create a link that acts in one direction only, the following will open a hidden Exposer:
.show
.slideDown
7) If you want to create a link that acts in one direction only, the following will close a visible Exposer:
.hide
.slideUp
8) You can create more than one link which operates an Exposer Stack. These duplicate links will use the exact same setup in the link setup. Each Exposer stack needs a unique “Hidden Div Name” but multiple links can be set to trigger that Exposer. Building from tips 4 and 5, create a link to reveal the Exposer content and then, inside the hidden content, add another duplicate link to close the content when the viewer has finished viewing it. Example on demo project’s second page.
9) Add an Exposer inside another Exposer. Example is included on demo project’s second page.
10) Exposer is JQuery-driven and may not play nicely with other javascript Stacks. We should all use the advice given by Isaiah, creator of Stacks, who said:
”One effect per page”. You can experiment and try more but make sure you test with all browsers. It would be a shame for anybody to not be able to view an effect you’ve included because a couple of stacks are conflicting with one another.
11) You can operate multiple Exposer Pros with a single mouseclick... you put the name of all the Exposer Pro divs that you want to react in the snippet code separated by a comma: Example:
$j('#hidden, #hidden1, #hidden2').toggle('slow');return false; In this example, clicking the link will affect #hidden, # hidden 1 and #hidden2 simultaneously. For more information on this and a working example, visit here:
12) If you have an Exposer Pro area that is initially visible and place the link to close it inside the Exposer Pro itself, when it closes, the link vanishes along with the content. A nice effect when used properly
13) Experiment and above all else... HAVE FUN!
Stacks V1.3 includes the ability to have tool tips in the Stacks inspector. El Presidente has included these for you. As you can see from the image at the right, when an input field is hovered over with the mouse pointer, a tooltip appears. This tip contains extra information to help explain what the user can change.
Thanks to Isaiah at Yourhead, creator of Stacks, for this awesome new feature!