[message type=”info”]SAMPLE PREVIEW AND DOWNLOAD NOW UPDATED FOR THE LATEST VERSION OF EDGE ANIMATE[/message]
The following sample and download demonstrates a simple (custom) use case vertical and horizontal scroll bar.
As captured below, the process uses a simple workflow: nest a text element (child) into a content div (parent) and set the parent div ‘overflow’ property to ‘hidden’. This essentially prevents text longer than the height and width of the parent from showing.
[message type=”info”]See Tip on Nesting Text Elements[/message]
Normally an overflow property of ‘auto’ is used to compensate with standard scrollbars, but in this case we don’t have that option and have to create custom scroll features with additional event triggers.
In this case it wll be a simple scrollbar – just the (Vertical Scroll) up/down buttons; (Horizontal) left/right buttons. An image or, in my case, a rectangle element, will suffice.
To make them scroll the contents of the parent container I will use the jquery (Vertical Sample) scrollTop and (Horizontal Sample) scrollLeft methods on a ‘click’ event handler.
An Example:
The Vertical scrollbar up button, has the following click event handler:
sym.$("content").animate({ scrollTop: "-=45" }, 500);
Download (bottom of page) the sample symbol files and review the click event handlers for the remaining buttons.
Preview ScrollBar Symbols or click the following screen-capture to preview.
Download the zipped Symbol files (bottom of this page); unzip; then in your Edge project file go to the Library Panel and click the + icon command to the right of the Symbols then from the context list choose ‘Import Symbols…’.
At the prompt, navigate to the unzipped location and select both the .eglib files then click Open to commit the import process. As captured below, right, you should have two new symbols called myHorizontalScroll and my VerticalScroll. Drag and drop onto the Stage of your project file to use.
Two sample symbols (horizontal and vertical scrollbars) to import into an existing Edge Animate project.