Table of contents table-of-contents

Table of contents is a button positioned in the main control bar. When activated, a drop-down panel appears with a list of page indexes and labels.

Based on the configuration, the list can contain all pages that are present in the catalog or only those pages that have explicit labels defined. On desktop systems, if the list is longer than the available screen real estate, a scroll bar is displayed on the right.

The position and size of the table of contents button in the viewer user interface is controlled with the following CSS class selector:

.s7ecatalogviewer .s7tableofcontents

CSS properties of the table of contents

margin-top
The offset from the top of the control bar.
margin-left
The distance to the next button on the left, or the left side of the control bar, if it is the first button in a row.
width
The width of the table of contents button.
height
The height of the table of contents button.
background-image
The image that is displayed for a given button state.
background-position

Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites.

NOTE
This button supports the state attribute selector, which can be used to apply different skins to different button states.

The button tool tip can be localized. See Localization of user interface elements for more information.

Example - To set up a table of contents button that is positioned 4 pixels from the bottom and 43 pixels from the left of the main control bar. The size is 28 x 28 pixels, and a different image is displayed for each of the four different button states:

.s7ecatalogviewer .s7tableofcontents {
margin-top: 4px;
margin-left: 10px; width: 28px;
 height: 28px;
}
.s7ecatalogviewer .s7tableofcontents[state='up'] {
background-image:url(images/v2/TableOfContents_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents[state='over'] {
background-image:url(images/v2/TableOfContents_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents[state='down'] {
background-image:url(images/v2/TableOfContents_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents[state='disabled'] {
background-image:url(images/v2/TableOfContents_dark_disabled.png);
}

The appearance of the drop-down panel is controlled with the following CSS class selector:

 .s7ecatalogviewer .s7tableofcontents .s7panel

CSS properties of the drop-down panel

background-color
Background color of drop-down panel.
margin
Internal offset between the panel boundaries and the content.
box-shadow
Drop-shadow around the panel.
NOTE
It is not possible to control the size or the position of the drop-down panel from CSS; the component manages its layout programmatically.

Example - set up a drop-down panel that has a semi-transparent black background, a 5 pixel margin around the content, and a drop shadow:

.s7ecatalogviewer .s7tableofcontents .s7panel {
 background-color: rgba(0, 0, 0, 0.5);
 margin: 5px;
 box-shadow: 2px 2px 3px #c0c0c0;
}

The look and feel of the individual item is controlled with the following CSS class selector:

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7item

CSS properties of the item

font-family
Font name.
font-size
Font size.
height
Item's height.
padding
Internal padding.
NOTE
Drop-down list item supports the state attribute selector, which can be used to apply different skins to hover and selected item states.

Example - set up a drop-down item with a Helvetica® 14 pixel font and 19 pixel high. An item has a dark gray background on hover and a light gray background when selected:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7item {
font-family: Helvetica,sans-serif;
font-size: 14px;
height: 19px;
}
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="over"] {
background-color: rgb(102, 102, 102);
}
.s7ecatalogviewer .s7tableofcontents .s7panel .s7item[state="selected"] {
background-color: rgb(178, 178, 178);
}

An element that shows the page index is controlled with the following CSS class selector:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index

CSS properties of the page index

min-width
Minimum element width.
max-width
Maximum element width.
padding-right
Distance between the page index and the page label.
NOTE
It is possible to hide the page index entirely by setting display:none for the s7index CSS class.

Example 1 - set up a page index with a minimum width of 40 pixels, a maximum width of 70 pixels, and a 5 pixel margin on the right-hand side:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index {
max-width: 70px;
min-width: 40px;
padding-right: 5px;
}

Example 2 - hide page index:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7index {
display: none;
}

The page label is controlled with the following CSS class selector:

 .s7ecatalogviewer .s7tableofcontents .s7panel .s7label

CSS properties of the page label

min-width
Minimum element width.
max-width
Maximum element width.

Example - set up a page index with a minimum width of 40 pixels and a maximum width of 240 pixels:

.s7ecatalogviewer .s7tableofcontents .s7panel .s7label {
min-width: 40px;
max-width: 240px;
}

If here are more items than can fit vertically within the drop-down panel, and the system is a desktop, the component renders a vertical scroll bar on the right side of the panel. The appearance of the scroll bar area is controlled with the following CSS class selector:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar

CSS properties of the scrollbar

width
The scroll bar width.
top
The vertical scroll bar offset from the top of the panel area.
bottom
The vertical scroll bar offset from the bottom of the panel area.
right
The horizontal scroll bar offset from the right edge of the panel area.

Example - set up a scroll bar that is 28 pixels wide and does not have a margin for the top, right, or bottom area of the panel:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:28px;
}

Scroll bar track is the area between the top and bottom scroll buttons. The component automatically sets the position and height of the track. The track is controlled with the following CSS class selector:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack

CSS properties of the scroll track

width
The track width.
background-color
The track background color.

Example - set up a scroll bar track that is 28 pixels wide and has a semi-transparent gray background:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolltrack {
 width:28px;
 background-color:rgba(102, 102, 102, 0.5);
}

The scroll bar thumb moves vertically within the scroll track area. Its vertical position is controlled by the component logic. However, thumb height does not dynamically change depending on the amount of content. You can configure the thumb height and other aspects with the following CSS class selector:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb

CSS properties of the scrollbar thumb

width
The thumb width.
height
The thumb height.
padding-top
The vertical padding between the top of the track.
padding-bottom
The vertical padding between the bottom of the track.
background-image
The image that is displayed for a given thumb state.
background-position

Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites.

NOTE
Thumb supports the state attribute selector, which can be used to apply different skins to the up, down, over, and disabled thumb states.

Example - set up a scroll bar thumb that is 28 x 45 pixels, has 10 pixel margins on the top and bottom, and has different artwork for each state:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb {
 width:28px;
 background-repeat:no-repeat;
 background-position:center;
 height:45px;
 padding-top:10px;
 padding-bottom:10px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='up'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='down'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='over'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollthumb[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollThumb_dark_up.png);
}

The appearance of the top and bottom scroll buttons is controlled with the following CSS class selectors:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton

It is not possible to position the scroll buttons using CSS top, left, bottom, and right properties; instead, the viewer logic positions them automatically.

CSS properties of the scroll up and scroll down button

width
The button width.
height
The button height.
background-image
The image that is displayed for a given button state.
background-position

Position inside artwork sprite, if CSS sprites are used.

See also CSS Sprites.

NOTE
Button supports the state attribute selector, which can be used to apply different skins to the up, down, over, and disabled button states.

The button tool tip can be localized. See Localization of user interface elements for more information.

Example - set up scroll buttons that are 28 x 32 pixels and have different artwork for each state:

.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollUpButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_over.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_down.png);
}
.s7ecatalogviewer .s7tableofcontents .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/v2/ThumbnailScrollDownButton_dark_up.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8