LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


slideHeight

Specifies the height of a slide box which contains all slides.

Property Value

A Number value. The default is 0, stating that slide box has a height of 0 pixels.

Remarks

This property value is important to determine how much space is required to display a slide. You need also to set the height of the SlideBar using CSS or inline style to the exact value as this property value.

Version Information

Supported in: v1.0.

Example

In this example we are setting the height of the slide box to 200 pixels. The SlideBar height also has the same value set with CSS class names widget.

var $bar = null;

$(document).ready(function() {

var $bar = $('#slidebar').slidebar({

slideHeight: 300,

slideHeight: 200

});

});

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.slidebar.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.slidebar.min.js"></script>

</head>

<body>

<div id="slidebar" class="widget">

<div>

<ul>

<li><div class="slide"><span>Slide 1</span></div></li>

</ul>

</div>

</div>

</body>

</html>

.widget

{

background-color: white;

border: thin solid gray;

height: auto;;

}

.slide

{

width: 300px;

height: 200px;

text-align: center;

}

.slide span

{

display: inline-block;

font-size: 3em;

margin: 25% auto;

vertical-align: middle;

}

See Also