Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Searches through all slides for a match using specified id.


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.


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>



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



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

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



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








width: 300px;

height: 200px;




width: 300px;

height: 200px;

text-align: center;


.slide span


display: inline-block;

font-size: 2em;

margin: 25% auto;

vertical-align: middle;


See Also