Causes the viewer to enter or exit full-screen mode when selected by the user. This button appears in the main control bar. This button is not displayed if the viewer works in pop-up mode and the system does not support native full-screen. You can size, skin, and positioned the button by CSS.
CSS properties of the main viewer area
The appearance of the button is controlled with the following CSS class selector:
.s7ecatalogviewer .s7fullscreenbutton
CSS property |
Description |
---|---|
top |
Position from the top border of the main control bar, including padding. |
right |
Position from the right border of the main control bar, including padding. |
left |
Position from the left border of the main control bar, including padding. |
bottom |
Position from the bottom border of the main control bar, including padding. |
width |
Width of the button. |
height |
Height of the 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 . |
This button supports both the state
and selected
attribute selectors, which can be used to apply different skins to different button states. In particular, selected='true'
corresponds to the “full-screen” state and selected='false'
corresponds to the “normal” state.
The button tool tip can be localized. See Localization of user interface elements for more information.
Example - To set up a full-screen button that is 28 x 28 pixels and is positioned 4 pixels from the bottom and 5 pixels from the right edge of the main control bar. And finally, displays a different image for each of the four different button states when selected or not selected.
.s7ecatalogviewer .s7fullscreenbutton {
bottom:4px;
right:5px;
width:28px;
height:28px;
}
.s7ecatalogviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7ecatalogviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}