Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Project Seven dot com
Search
 

Auto ShowHide by PVII

Auto ShowHide by PVII is a perfect solution for Showing and Hiding page elements in a list-based (UL) or div-based (DIV) DHTML menu system and significantly reduces the number of steps that would be necessary with the standard Dreamweaver Show-Hide layer behavior. Of course, Auto ShowHide by PVII is not limited to producing menus and can be applied anywhere you want to show and/or hide a series of page elements.

Download the Auto ShowHide by PVII extension

Auto ShowHide by PVII is very similar to our popular Auto Layers by PVII extension and extends its functionality to work with any page element that has been assigned an id attribute. In fact, you can even use it to show/hide Flash objects or form elements in cases where they interfere with a dropdown or flyout menu!

Overview

Auto ShowHide by PVII allows you to select an element, or series of elements, on your page to become visible. You can use any elements you like, you can even use mixed elements, the only prerequisite is that the element must have an id assigned.

Each page element that has been processed by Auto ShowHide will be remembered. The next time Auto ShowHide is run, all of the elements that were previously made visible will now become hidden, and only the element(s) selected to show in this instance will remain visible. In essence, think of Auto ShowHide as running a Show-Hide behavior to show the selected element(s) and hiding all of the other elements at the same time.

There are cases when you want to hide all of the elements that were previously shown, like when we mouse off a menu button. Auto ShowHide makes this very easy, since all we have to do is apply an "empty" instance of Auto ShowHide... telling Auto ShowHide to show nothing also means that it will hide every other element!

Auto ShowHide can be applied to any image or text link on the page. It can also be placed on other tags that fire events, such as <body> onLoad.

Note: Auto ShowHide will be "grayed" out and un-selectable if there are no elements with an id on the page.

Check the Tutorial Section at the ProjectSeven Web Site for the latest Auto ShowHide/Auto Layers Tutorials.

Creating an Auto ShowHide by PVII behavior

  1. Select (click) an image or null link that will act as the trigger for the behavior.
  2. Click the plus button (+) on the Behaviors Panel.
  3. Choose Studio VII - Auto Layers by PVII to open the interface.
  4. To make an element visible, Click the Show Element button to make the selected element visible.
  5. To hide the element, Click the De-Select Element button to make this element hidden.
  6. Click OK to apply the behavior.

Modifying an existing Auto ShowHide by PVII behavior

  1. Select the image, link or event that contains an existing Auto ShowHide by PVII behavior.
  2. Double-click the Auto ShowHide by PVII behavior in the Behavior Panel to open the user interface.
  3. Select an element and set the visibility using the "Show Element" or "De-Select Element " buttons.
  4. Click OK to apply the revised behavior.

The Interface:

The Auto ShowHide by PVII interface allows you to quickly select and set the visibility for any of the id 'd elements on your page.

Elements

This list will display all of the elements on your page that have an "id" attribute assigned. Each element will be displayed with it's element tag name for easier identification and the listing is grouped by tag name. Select one of the listed elements and then click the Show Element button. The element will now have a "Show" next to it. This element will remain visible when this Auto ShowHide behavior is run, all other elements previously made visible by the Auto ShowHide behavior will now be hidden. You can set more than one element to "Show".

Note: The listing reflects all of the elements on the page which have an id assigned, but only the elements that were previously run by Auto ShowHide (on other events) will become hidden.. not all of the elements on the page.

Show Element

Select one of the listed elements and then click the Show Element button. The element id will now have a "Show" next to it. This element will remain visible when Auto ShowHide is run.

De-Select Element

This will allow you to remove an element that is set to "Show". Click the De-Select Element button and the element will not be visible when Auto ShowHide is run, but only if it was previously made visible by a Auto ShowHide behavior.

Set to Use

There are times when you may not want all of the elements to hide, you may want just one or two to remain visible, or you may want two or more completely independent show/hide systems.

Auto ShowHide allows you to use any of ten separate "sets". For most purposes, leave this as Set One, the default setting. To show a second group of elements without affecting the visibility of the first group of elements apply Auto ShowHide to the second group with a Set Two setting. In this way we can handle show/hides of either group without affecting the other group.

Note: You can use the same layer in more than one group to make for some interesting effects.

Auto Layers | back to main listing