LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


findSlideById(id)

Searches through all slides for a match using specified id.

Parameters

ParamTypeDetails
idStringThe slide id value to search for

Return Value

If successful, the slide object that contains the specified id, otherwise null.

Version Information

Supported in: v1.0.

Example

In this example we are searching for a slide with id value set to '4'. If slide is found an alert box will pop-up with a message.

$(document).ready(function() {

// Create an instance of SlideBar widget

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

slideWidth: 300,

slideHeight: 200

});

 

// Search for a slide that matches specified id

var searchSlides = function(){

var slide = $bar.slidebar("findSlideById", '4');

if (slide)

alert("Slide that matches specified criteria is found");

}

});

<!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>

<button type="button" id="search" onclick="searchSlides()" />Search Slides</button>

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

<div>

<ul>

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

<li id="2"><div class="slide"><span>Slide 2</span></div></li>

<li id="3"><div class="slide"><span>Slide 3</span></div></li>

<li id="4"><div class="slide"><span>Slide 4</span></div></li>

<li id="5"><div class="slide"><span>Slide 5</span></div></li>

</ul>

</div>

</div>

</body>

</html>

.widget

{

width: 300px;

height: 200px;

}

.slide

{

width: 300px;

height: 200px;

text-align: center;

}

.slide span

{

display: inline-block;

font-size: 2em;

margin: 25% auto;

vertical-align: middle;

}

See Also