Panel Scrolling Widget

Widget Panel Scrolling is designed for giving scrolling context within any fixed element or frame. Panel Scrolling can have any type of content inside it. Updated: 28 November 2016

Overview
Sample Panel Scrolling
Panel Scrolling Options
Production and Design
Using in IGP:Digital Publisher
Tagging Pattern and CSS
A01 Widget Panel Tagging Pattern
Default CSS

Overview

Widget Panel Scrolling is designed to enable a scrolling context within any fixed element or frame. Panel Scrolling can have any type of content inside it. When the content exceeds the Panel Scrolling height it will allow you to scroll smoothly to see the hidden parts contents.

You can set the scrolling to be horizontal, vertical or both in the X and Y directions.

Sample Panel Scrolling

Although well used to ghostly company by this time, Scrooge feared the silent shape so much that his legs trembled beneath him, and he found that he could hardly stand when he prepared to follow it. The Spirit pauses a moment, as observing his condition, and giving him time to recover.

But Scrooge was all the worse for this. It thrilled him with a vague uncertain horror, to know that behind the dusky shroud, there were ghostly eyes intently fixed upon him, while he, though he stretched his own to the utmost, could see nothing but a spectral hand and one great heap of black.

“Ghost of the Future!” he exclaimed, “I fear you more than any spectre I have seen. But as I know your purpose is to do me good, and as I hope to live to be another man from what I was, I am prepared to bear you company, and do it with a thankful heart. Will you not speak to me?”

It gave him no reply. The hand was pointed straight before them.

“Lead on,” said Scrooge. “Lead on. The night is waning fast, and it is precious time to me, I know. Lead on, Spirit!”

The Phantom moved away as it had come towards him. Scrooge followed in the shadow of its dress, which bore him up, he thought, and carried him along.

They scarcely seemed to enter the city; for the city rather seemed to spring up about them, and encompass them of its own act. But there they were, in the heart of it; on “Change, amongst the merchants; who hurried up and down, and chinked the money in their pockets, and conversed in groups, and looked at their watches, and trifled thoughtfully with their great gold seals; and so forth, as Scrooge had seen them often.

The Spirit stopped beside one little knot of business men. Observing that the hand was pointed to them, Scrooge advanced to listen to their talk.

“No,” said a great fat man with a monstrous chin, “I don’t know much about it, either way. I only know he’s dead.”

“When did he die?” inquired another.

“Last night, I believe.”

“Why, what was the matter with him?” asked a third, taking a vast quantity of snuff out of a very large snuff-box. “I thought he’d never die.”

“God knows,” said the first, with a yawn.

“What has he done with his money?” asked a red-faced gentleman with a pendulous excrescence on the end of his nose, that shook like the gills of a turkey-cock.

The Spirit stopped beside one little knot of business men. Observing that the hand was pointed to them, Scrooge advanced to listen to their talk.

“No,” said a great fat man with a monstrous chin, “I don’t know much about it, either way. I only know he’s dead.”

Panel Scrolling Options

There are three options as of now for Panel Scrolling block.

1. Direction: Vertical (default)

2. Direction: Horizontal

2. Direction: Both

Scrolling direction instruction for telling panel which way you want to scroll to, vertical, horizontal or both. Vertical is default which scrolls vertically. If you want panel to scroll horizontally just select the "horizontal" option from the content block "direction" options. You can also make Panel scroll both ways if your content demands such situation.

NOTE: For scrolling direction horizontal and both are not automatic. If you want panel to scroll horizontally or both you have to make changes on the CSS as well to make it function base on contents requirement.

Production and Design

Panel Scrolling comes with default size of width: auto; (auto means, like 100%. it will expand to the edge of document vieport width) max-height: 768px. Default size can be customized according to the requirement of the project and design of the book. The Panel will only be scrollable when content exceeds the hegiht of 768px.

Using in IGP:Digital Publisher

To insert Widgets Panel Scrolling into the IGP:DP Writer
Place your cursor at the insertion point in the text.
From the Content Blocks accordion select W01: Widgets
Double click on "03 Panel Scrolling" block.
The Panel Scrolling content block will insert into the Writer text with placeholder text.
You can now author, edit or construct content into the content block.

You can insert and have as many Scrolling Panels as you want in a section/page. And have different size and style for every one of them.

You can put any type of content, including images, interactive content and rich media into each frame.

We have kept presentation design as simple as possible and the look and feel of a Scrolling Panel can be customzed by CSS selector or ID.

For changing the size of the panel (or any other styling), open the CSS Editor, navigate to "A03 WIDGETS" and change width: auto; and min-height: 100px; max-height: 768px; from below three selectors to the size of your choice or need.

Tagging Pattern and CSS

Widgets use the standard IGP:FoundationXHTML tagging pattern syntax where all grammar controlled CSS class values have the -rw suffix. This pattern can be extended with any additional content blocks within this container. .

A01 Widget Panel Tagging Pattern

<div class="widgets-rw panel-scrolling-rw">
  <div class="frame-rw" id="frame3">
    <p> Your content goes here...</p>
  </div>
</div>

Default CSS

/* Panel Scrolling ======================= */
.panel-scrolling-rw {
    width: auto;
    min-height:100px;
    max-height:768px;
    background-color: white;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 1px gray;
    }
.panel-scrolling-rw .frame-rw {
    position: absolute;
    padding: 20px;
    border-radius: 0;
    margin: 0;
    }