COOL Sliding ON OFF Buttons Using XML & CSS

[Clifton]

Example of ToolBook export using XML and CSS to create these cool buttons:
NOTE: This is a real ToolBook export embedded in this forum article. You can interact with the button to see the effects!

Download demo files:

SOURCE.zip

ToolBook (v10.5); XML; CSS

(40.83 KiB) Downloaded 508 times

HOW TO ACCOMPLISH THIS?

1. Draw 7 fields on the ToolBook page.
   Size them to 50px by 26px. Name the fields "Toggle1", "Toggle2" ... "Toggle7". Group them together and name the group "Toggles". These fields will be used as containers for our buttons when the project is exported. Here is my layout:
   

   

   ToolBook page layout

   Image 3.png (1.23 KiB) Viewed 5981 times

   NOTE: I gave the field a little background color to help in aligning the objects. I also typed the object names into the field for reference only. The size is not hugely important because the XML will resize them to fit the content that is put into them. However, 50 x 26 is that size, so setting it here makes positioning them on the page layout easier.
    
2. Add an action to the on load page event of the group "Toggles" which hides all the object in the group.
   

   

   Hide all objects of group "Toggles"

   Image 4.png (14.83 KiB) Viewed 5981 times

   
    
3. Add an action to the same group and event that loads the XML that will completely configure the page and load the CSS.
   

   

   Load the XML configuration file

   Image 5.png (15.12 KiB) Viewed 5981 times

   
    
4. Create the CSS file as shown below and name it "toggles.css". Save it in the same folder as your book. If you actually use this in one of your projects, you can modify any of the classes in the file to change the look and feel.
   
    
5. Create the XML file as shown below and name it "toggles.xml". Save it in the same folder as your book. If you actually use this in one of your projects, you will have to modify the file based on the number of buttons, etc.
   
    
6. Flag both files for inclusion in your export by using the DHTML Export Tree Manager:
   

   

   Flag external files to be included in the export.

   Image 6.png (84.49 KiB) Viewed 5981 times

   
    
7. EXPORT your book and you should have a result similar to the one in the demo above. Of course, I've added some page styling and a first page transition when the book loads. There are other topics in this forum that discuss these excellent features of the latest releases of the PowerPac for ToolBook.

ENJOY!