Panel Locked

Overview

Widget Panel Locked is designed for combination use of frame locked and scrolling context. The scrolling panel with a frame locked at the top is very useful when there is a requirement to have a lot of reference linear text associated with an image or something similar. The image frame is locked in place at the top of the panel and all text scrolls under the image.

For good end user experience, it is designed to be used in the fixed layout format rather then in flowing format. Its not a law but just a recommendation. It can be used in flowing format too if have to except this comes with fixed size from production design so use it thoughtfully.

Sample Panel Locked

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.

Panel Locked Options

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

1. Frame: Top (default)

2. Frame: Left

2. Frame: Right

Above Frame options are processor instructions to tell where (top/left/right) the frame should be presented in the output. TOP: this will present first frame to the top and info text frame underneath. Left: this will present first frame to the left and info text frame to the right. Right: this will present first frame to the right and info text frame to the left.

Production and Design

Panel Locked comes with default size of 500px X 600px. Default size can be customized according to the requirement of the project and design of the book. The Panel height of 600px is been divided into 2, for image frame and info text frame.

Above Panel Locked is the default. But there are two more options called frame left/right. In this case size of panel and frames are different. In thise case Panel size is 600px X 400px. And the panel width of 600px is been divided into 2, for image frame and info text frame.

Inserting a PopUp Panel in IGP:Digital Publisher

1. To insert Widgets Panel Locked into an IGP:Writer document.
2. In the editing panel, place your cursor at the required insertion point in an empty paragraph.
3. From the Content Blocks accordion select> W01: Widgets
4. Double click on "07 Panel Locked" block.
5. The PopUp Text content block will be inserted into the text with placeholder text.
6. You can now directly write, copy/paste or assemble your content inside the Panel PopUp block.

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

This block has two frames stacked. First frame is the one which is locked and it general contains an image. The second frame is the info frame where text information about the image can be explored. This frame will scroll if the content exceeds the default height of the frame.

Editing the Placeholder Content

The First frame must only contain image, and image must be made to the right size same as the frame size.

You can now replace the placeholder images. Your image must be uploaded in IGP:Media Manager first.

1. To replace placeholder images click once on an image
2. Open Media Manager
3. Under the target image click on the + button (Insert to document option)
4. From the insert options click on the Select and Replace Image only
5. The placeholder image will immediately be replaced with your selected image. 

The Second frame can contain any type of content, including images, interactive content and rich media.

We have kept presentation design as simple as possible. Because it can be customozed anytime as needed. From look and feel to the size of Panel can be customzed at any given time.

For changing the size of the panel (or any other styling), open the CSS Editor, navigate to "A03 WIDGETS" and change width and height 500px, 600px, 300px, 400px wherever you see from below three selectors to the size of your choice or need.

Tagging Pattern and CSS

The presentation design is simple as possible and can be customized for size, look and feel as needed.

Widgets use the standard IGP:FoundationXHTML tagging pattern syntax where all grammar controlled CSS class values have the -rw suffix.

Widget Panel Tagging Pattern

<!-- WIDGET PANEL LOCKED TOP -->
<div class="widgets-rw panel-locked-rw">
  <div class="frame-locked-rw">
    <img alt="" src="default-graphic.png" />
  </div>
  <div class="widgets-rw panel-scrolling-rw ">
    <div class="frame-rw">
      <p> Your content goes here....</p>
    </div>
  </div>
</div>
<!-- WIDGET PANEL LOCKED RIGHT -->
<div class="widgets-rw panel-locked-rw">
  <div class="frame-right-rw">
    <img alt="" src="default-graphic.png" />
  </div>
  <div class="widgets-rw panel-scrolling-rw ">
    <div class="frame-rw">
      <p> Your content goes here....</p>
    </div>
  </div>
</div>
<!-- WIDGET PANEL LOCKED RIGHT -->
<div class="widgets-rw panel-locked-rw">
  <div class="frame-left-rw">
    <img alt="" src="default-graphic.png" />
  </div>
  <div class="widgets-rw panel-scrolling-rw ">
    <div class="frame-rw">
      <p> Your content goes here....</p>
    </div>
  </div>
</div>

Default CSS

/* Panel Locked =============================== */
.panel-locked-rw {
    width: 500px;
    height:600px;
    background-color: white;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 1px gray;
    }
.panel-locked-rw .frame-locked-rw {
    width: 500px;
    height:300px;
    position: relative;
    }
.panel-locked-rw .panel-scrolling-rw {
    width: 500px;
    min-height: auto;
    height:300px;
    background-color: white;
    overflow: hidden;
    position: relative;
    margin: 0 auto 0 auto;
    border: none;
    }
.panel-locked-rw .panel-sliding-rw .frame-rw {
    position: absolute;
    padding: 20px;
    }
/* Frame Left */
.panel-locked-rw.frame-left-rw {
    width: 600px;
    height: 400px;
    }
.panel-locked-rw.frame-left-rw .frame-locked-rw,
.panel-locked-rw.frame-left-rw .panel-scrolling-rw{
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    }
.panel-locked-rw.frame-left-rw .panel-scrolling-rw {
    left: auto;
    right: 0;
    border-left: 1px solid gray;
    }
/* Frame Right */
.panel-locked-rw.frame-right-rw {
    width: 600px;
    height: 400px;
    }
.panel-locked-rw.frame-right-rw .frame-locked-rw,
.panel-locked-rw.frame-right-rw .panel-scrolling-rw{
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    }
.panel-locked-rw.frame-right-rw .panel-scrolling-rw {
    left: 0;
    right: auto;
    border-right: 1px solid gray;
    }