jqueryui: 2015

Thursday 26 March 2015

sorting table elements

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

function init(e) {
    if (!document.getElementsByTagName) return;

for (var j = 0; (thead = document.getElementsByTagName("thead").item(j)); j++) {
        var node;
        for (var i = 0; (node = thead.getElementsByTagName("td").item(i)); i++) {
            if (node.addEventListener) node.addEventListener("click", sort, false);
            else if (node.attachEvent) node.attachEvent("onclick", sort);
            node.title = "";
        }
        thead.parentNode.up = 0;
        
        if (typeof(initial_sort_id) != "undefined"){
            td_for_event = thead.getElementsByTagName("td").item(initial_sort_id);
            if (document.createEvent){
                var evt = document.createEvent("MouseEvents");
                evt.initMouseEvent("click", false, false, window, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, td_for_event);
                td_for_event.dispatchEvent(evt);
            } else if (td_for_event.fireEvent) td_for_event.fireEvent("onclick");
            if (typeof(initial_sort_up) != "undefined" && initial_sort_up){
                if (td_for_event.dispatchEvent) td_for_event.dispatchEvent(evt);
                else if (td_for_event.fireEvent) td_for_event.fireEvent("onclick");
            }
        }
    }
}

var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;
if (root){
    if (root.addEventListener) root.addEventListener("load", init, false);
    else if (root.attachEvent) root.attachEvent("onload", init);
}
//-->
</script>

</head>
<body>

<table class="sort" align="center">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Address</td>
<td>Mail</td>
<td>Area</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sopan</td>
<td>Bangalore</td>
<td>abc@gmail.com</a></td>
<td>Yeswantpur</td>
</tr>

<tr>
<td>2</td>
<td>Mister</td>
<td>Kolkata</td>
<td>hty@gmail.com</td>
<td>Palace Road</td>
</tr>

<tr>
<td>3</td>
<td>Thyag</td>
<td>Pune</td>
<td>rtr@gmail.com</td>
<td>Palace Road</td>
</tr>
</tbody>
</table>
</body>
</html>

Tuesday 24 March 2015

Light Box

1> create index.html

#lightbox{
 background-color:#eee;
 padding: 10px;
 border-bottom: 2px solid #666;
 border-right: 2px solid #666;
 }
#lightboxDetails{
 font-size: 0.8em;
 padding-top: 0.4em;
 } 
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
 background-color: #333;
 back\ground-color: transparent;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../overlay.png", sizingMethod="scale");
 }
</style>
</head>

</div>
</div>
</body>
</html>

2> create lightbox.js

var loadingImage = 'loading.gif';  
var closeButton = 'close.gif';

function getPageScroll(){

var yScroll;

if (self.pageYOffset) {
  yScroll = self.pageYOffset;
 } else if (document.documentElement && document.documentElement.scrollTop){  // Explorer 6 Strict
  yScroll = document.documentElement.scrollTop;
 } else if (document.body) {// all other Explorers
  yScroll = document.body.scrollTop;
 }

arrayPageScroll = new Array('',yScroll) 
 return arrayPageScroll;
}

// for small pages with total width less then width of the viewport
 if(xScroll < windowWidth){ 
  pageWidth = windowWidth;
 } else {
  pageWidth = xScroll;
 }

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
 return arrayPageSize;
}

function pause(numberMillis) {
 var now = new Date();
 var exitTime = now.getTime() + numberMillis;
 while (true) {
  now = new Date();
  if (now.getTime() > exitTime)
   return;
 }
}

//
// listenKey()
//
function listenKey () { document.onkeypress = getKey; }

//
// showLightbox()
// Preloads images. Pleaces new image in lightbox then centers and displays.
//
function showLightbox(objLink)
{
 // prep objects
 var objOverlay = document.getElementById('overlay');
 var objLightbox = document.getElementById('lightbox');
 var objCaption = document.getElementById('lightboxCaption');
 var objImage = document.getElementById('lightboxImage');
 var objLoadingImage = document.getElementById('loadingImage');
 var objLightboxDetails = document.getElementById('lightboxDetails');

var arrayPageSize = getPageSize();
 var arrayPageScroll = getPageScroll();

// center loadingImage if it exists
 if (objLoadingImage) {
  objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
  objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');
  objLoadingImage.style.display = 'block';
 }

// set height of Overlay to take up whole page and show
 objOverlay.style.height = (arrayPageSize[1] + 'px');
 objOverlay.style.display = 'block';

// preload image
 imgPreload = new Image();

imgPreload.onload=function(){
  objImage.src = objLink.href;

// center lightbox and make sure that the top and left values are not negative
  // and the image placed outside the viewport
  var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
  var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
  
  objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
  objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";

objLightboxDetails.style.width = imgPreload.width + 'px';
  
  if(objLink.getAttribute('title')){
   objCaption.style.display = 'block';
   //objCaption.style.width = imgPreload.width + 'px';
   objCaption.innerHTML = objLink.getAttribute('title');
  } else {
   objCaption.style.display = 'none';
  }
  
  // A small pause between the image loading and displaying is required with IE,
  // this prevents the previous image displaying for a short burst causing flicker.
  if (navigator.appVersion.indexOf("MSIE")!=-1){
   pause(250);
  }

if (objLoadingImage) { objLoadingImage.style.display = 'none'; }
  objLightbox.style.display = 'block';

// After image is loaded, update the overlay height as the new image might have
  // increased the overall page height.
  arrayPageSize = getPageSize();
  objOverlay.style.height = (arrayPageSize[1] + 'px');
  
  // Check for 'x' keypress
  listenKey();

return false;
 }

imgPreload.src = objLink.href;
 
}

//
// hideLightbox()
//
function hideLightbox()
{
 // get objects
 objOverlay = document.getElementById('overlay');
 objLightbox = document.getElementById('lightbox');

// hide lightbox and overlay
 objOverlay.style.display = 'none';
 objLightbox.style.display = 'none';
 
 // disable keypress listener
 document.onkeypress = '';
}

//
// initLightbox()
// Function runs on window load, going through link tags looking for rel="lightbox".
// These links receive onclick events that enable the lightbox display for their targets.
// The function also inserts html markup at the top of the page which will be used as a
// container for the overlay pattern and the inline image.
//
function initLightbox()
{
 
 if (!document.getElementsByTagName){ return; }
 var anchors = document.getElementsByTagName("a");

// loop through all anchor tags
 for (var i=0; i<anchors.length; i++){
  var anchor = anchors[i];

if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
   anchor.onclick = function () {showLightbox(this); return false;}
  }
 }

var objBody = document.getElementsByTagName("body").item(0);
 
 // create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
 var objOverlay = document.createElement("div");
 objOverlay.setAttribute('id','overlay');
 objOverlay.onclick = function () {hideLightbox(); return false;}
 objOverlay.style.display = 'none';
 objOverlay.style.position = 'absolute';
 objOverlay.style.top = '0';
 objOverlay.style.left = '0';
 objOverlay.style.zIndex = '90';
  objOverlay.style.width = '100%';
 objBody.insertBefore(objOverlay, objBody.firstChild);
 
 var arrayPageSize = getPageSize();
 var arrayPageScroll = getPageScroll();

// preload and create loader image
 var imgPreloader = new Image();
 
 // if loader image found, create link to hide lightbox and create loadingimage
 imgPreloader.onload=function(){

var objLoadingImageLink = document.createElement("a");
  objLoadingImageLink.setAttribute('href','#');
  objLoadingImageLink.onclick = function () {hideLightbox(); return false;}
  objOverlay.appendChild(objLoadingImageLink);
  
  var objLoadingImage = document.createElement("img");
  objLoadingImage.src = loadingImage;
  objLoadingImage.setAttribute('id','loadingImage');
  objLoadingImage.style.position = 'absolute';
  objLoadingImage.style.zIndex = '150';
  objLoadingImageLink.appendChild(objLoadingImage);

imgPreloader.onload=function(){}; // clear onLoad, as IE will flip out w/animated gifs

return false;
 }

imgPreloader.src = loadingImage;

// create lightbox div, same note about styles as above
 var objLightbox = document.createElement("div");
 objLightbox.setAttribute('id','lightbox');
 objLightbox.style.display = 'none';
 objLightbox.style.position = 'absolute';
 objLightbox.style.zIndex = '100'; 
 objBody.insertBefore(objLightbox, objOverlay.nextSibling);
 
 // create link
 var objLink = document.createElement("a");
 objLink.setAttribute('href','#');
 objLink.setAttribute('title','Click to close');
 objLink.onclick = function () {hideLightbox(); return false;}
 objLightbox.appendChild(objLink);

// preload and create close button image
 var imgPreloadCloseButton = new Image();

// if close button image found, 
 imgPreloadCloseButton.onload=function(){

var objCloseButton = document.createElement("img");
  objCloseButton.src = closeButton;
  objCloseButton.setAttribute('id','closeButton');
  objCloseButton.style.position = 'absolute';
  objCloseButton.style.zIndex = '200';
  objLink.appendChild(objCloseButton);

return false;
 }

imgPreloadCloseButton.src = closeButton;

// create image
 var objImage = document.createElement("img");
 objImage.setAttribute('id','lightboxImage');
 objLink.appendChild(objImage);
 
 // create details div, a container for the caption and keyboard message
 var objLightboxDetails = document.createElement("div");
 objLightboxDetails.setAttribute('id','lightboxDetails');
 objLightbox.appendChild(objLightboxDetails);

// create caption
 var objCaption = document.createElement("div");
 objCaption.setAttribute('id','lightboxCaption');
 objCaption.style.display = 'none';
 objLightboxDetails.appendChild(objCaption);

// create keyboard message
 var objKeyboardMsg = document.createElement("div");
 objKeyboardMsg.setAttribute('id','keyboardMsg');
 objKeyboardMsg.innerHTML = 'press <kbd>x</kbd> to close';
 objLightboxDetails.appendChild(objKeyboardMsg);

}

//
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
//
function addLoadEvent(func)
{ 
 var oldonload = window.onload;
 if (typeof window.onload != 'function'){
     window.onload = func;
 } else {
  window.onload = function(){
  oldonload();
  func();
  }
 }

}

addLoadEvent(initLightbox); // run initLightbox onLoad

Sunday 1 March 2015

JQuery UI Effects - AddClass

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Effects - addClass</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  
  <style>
    .toggler { width: 500px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px;  padding: 1em;  font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
    .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
  </style>
  <script>
  $(function() {
    $( "#button" ).click(function() {
      $( "#effect" ).addClass( "newClass", 1000, callback );
    });
 
    function callback() {
      setTimeout(function() {
        $( "#effect" ).removeClass( "newClass" );
      }, 1500 );
    }
  });
  </script>
</head>
<body>
 
<div class="toggler">
  <div id="effect" class="ui-corner-all">
      Jquery UI Add Class Effects See Result.
  </div>
</div>
 
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>
 
 
</body>
</html>

Thursday 26 February 2015

JqueryUI Tabs

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#tabs-1" ).tabs();
         });
      </script>
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:#333;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
   
   .ui-tabs .ui-tabs-panel {
    background:#ccc;
    border-width: 0;
    display: block;
    padding: 1em 1.4em;
 }
      </style>
   </head>
   <body>
      <div id="tabs-1">
         <ul>
            <li><a href="#tabs-2">Test1</a></li>
            <li><a href="#tabs-3">Test2</a></li>
            <li><a href="#tabs-4">Test3</a></li>
         </ul>
         <div id="tabs-2">
            <p>Result1 </p>
         </div>
         <div id="tabs-3">
            <p>Result2</p>
         </div>
         <div id="tabs-4">
            <p>result3</p>
         </div>
      </div>
   </body>
</html>

JqueryUI Progressbar

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI ProgressBar </title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         .ui-widget-header {
            background: #ffdcc4;
            border: 1px solid #333;
            color: #333333;
            font-weight: bold;
         }
         .progress-label {
            position: absolute;
            left: 50%;
            top: 13px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
         }
      </style>
      <script>
      $(function() {
         var progressbar = $( "#progressbar-5" );
         progressLabel = $( ".progress-label" );
         $( "#progressbar-5" ).progressbar({
            value: false,
            change: function() {
               progressLabel.text( 
                  progressbar.progressbar( "value" ) + "%" );
            },
            complete: function() {
               progressLabel.text( "Loading Completed!" );
            }
         });
         function progress() {
            var val = progressbar.progressbar( "value" ) || 0;
            progressbar.progressbar( "value", val + 1 );
            if ( val < 99 ) {
               setTimeout( progress, 100 );
            }
         }
         setTimeout( progress, 3000 );
      });
   </script>
   </head>
   <body>
      <div id="progressbar-5">
         <div class="progress-label">
            Loading...
         </div>
      </div>
   </body>
</html>

JqueryUI Position

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI position</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .positionDiv {
            position: absolute;
            width: 75px;
            height: 75px;
            background: #ffffab;
         }
         #targetElement{
            width: 300px;
            height: 500px;
            padding-top:50px;
         }
      </style>
      <script>
         $(function() {
            // Position the dialog offscreen to the left, but centered vertically
            $( "#position1" ).position({
               my: "center",
               at: "center",
               of: "#targetElement"
            });
            $( "#position2" ).position({
               my: "left top",
               at: "left top",
               of: "#targetElement"
            });
            $( "#position3" ).position({
               my: "right-10 top+10",
               at: "right top",
               of: "#targetElement"
            });
            $( document ).mousemove(function( event ) {
               $( "#position4" ).position({
                  my: "left+3 bottom-3",
                  of: event,
                  collision: "fit"
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="targetElement">
         <div class="positionDiv" id="position1">move 1</div>
         <div class="positionDiv" id="position2">move 2</div>
         <div class="positionDiv" id="position3">move 3</div>
         <div class="positionDiv" id="position4">move 4</div>
      </div>
   </body>
</html>

Wednesday 25 February 2015

JQuery UI Tooltip

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tooltip </title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'check got result',
               show: "slideDown", // show immediately
               open: function(event, ui)
               {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'mouse hover tooltip',
               show: "fold", 
               close: function(event, ui)
               {
                  ui.tooltip.hover(function()
                  {
                     $(this).stop(true).fadeTo(500, 1); 
                  },
                  function()
                  {
                     $(this).fadeOut('500', function()
                     {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>
   <body style="padding:100px;">
       
      <div id="target">
         <a href="#" class="tooltip-9">Mouse hover</a>
         <a href="#" class="tooltip-10">Mouse hover</a>
      </div>
   </body>
</html>

Monday 23 February 2015

JqueryUI Dialog Box

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Dialog</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header,.ui-state-default, ui-button{
            background:#9f7700;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
   .ui-dialog .ui-dialog-content {
    background:#444;
    border: 0 none;
    color: #fff;
    overflow: auto;
    padding: 0.5em 1em;
    position: relative;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
   background-image:none;
    border: 1px solid #cccccc;
    color: #1c94c4;
    font-weight: bold;
}
   
   
      </style>
      
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   <body>
       
      <div id="dialog-3" title="Dialog Title goes here...">
jQuery UI Dialog box</div>
<button id="opener-3" style="background:#ddd;padding:20px;color:#fff"> Click Here</button>
   </body>
</html>

JqueryUI Date Picker

JqueryUI Autocomplete

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Autocomplete</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            var availableTutorials = [
               "ABC",
               "BCD",
               "CDE",
               "DFG",
               "EFG",
               "FGH",
               "GIJ",
               "HIJ",
               "IJK",
               
            ];
            $( "#automplete-6" ).autocomplete({
               source: availableTutorials
            });
            $( "#automplete-6" ).autocomplete("option", "position", { my : "right-10 top+10", at: "right top" }) 
         });
      </script>
   </head>
   <body>
       
      <div class="ui-widget">
  <p>
Type "a" to "i"</p>
<label for="automplete-6">Search: </label>
         <input id="automplete-6">
      </div>
</body>
</html>

JqueryUI Accordion

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Accordion</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#accordion" ).accordion({
               collapsible: true
            });
         });
      </script>
      <style>
         #accordion{font-size: 14px;}
   
   .ui-widget-content {
    background:#00CCFF;
    border: 1px solid #ccc;
    color: #333333;
 background-image:none;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background:#4e8514;
    border: 1px solid #cccccc;
    color: #1c00c4;
    font-weight: bold;
 background-image:none;
}
      </style>
   </head>
   <body>
      <div id="accordion">
         <h3>
Exam 1</h3>
<div>
         <p>
Result 1
         </p>
</div>
<h3>
Exam 2</h3>
<div>
         <p>
Result 2      
         </p>
</div>
<h3>
Exam 3</h3>
<div>
         <p>
Result 3      
         </p>
</div>
</div>
</body>
</html>

JqueryUI Sortable

<!DOCTYPE html>
<head>
   <title>Sortable</title>
   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <style>
      #sortable-8{ list-style-type: none; margin: 0; 
         padding: 0; width: 25%; float:left;}
      #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
         padding-left: 1.5em; font-size: 17px; height: 16px; }
      .default {
         background: #00b541;
         border: 1px solid #666;
         color: #fff;
      }
   </style>
   <script>
      $(function() {
         $('#sortable-8').sortable({
            update: function(event, ui) {
               var productOrder = $(this).sortable('toArray').toString();
               $("#sortable-9").text (productOrder);
            }
         });
      });
   </script>
</head>
<body>
   <ul id="sortable-8">
<li id="1" class="default">Menu 1</li>
<li id="2" class="default">Menu 2</li>
<li id="3" class="default">Menu 3</li>
<li id="4" class="default">Menu 4</li>
</ul>
<br>
   <h3>
Result<span id="sortable-9" style="margin-top: 100px; background: none repeat scroll 0% 0% rgb(51, 51, 51); color: rgb(255, 255, 255); height: 200px; padding: 20px;"></span></h3>
</body>
</html>

JqueryUI Selectable

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>selectable</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #selectable-7 .ui-selecting { background: #707070 ; }
         #selectable-7 .ui-selected { background: #fed6d7; color: #000000; }
         #selectable-7 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-7 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #ceb098;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: #ce7898;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #fff;
            font-size:14px;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-7" ).selectable({
               selected: function() {
                  var result = $( "#result" ).empty();
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable-7 li" ).index( this );
                     result.append( " Menu" + ( index + 1 ) );
                  });
               }
            });
         });
      </script>
   </head>
   <body>
      <h3>
Select Menu</h3>
<ol id="selectable-7">
<li class="ui-widget-content">Menu 1</li>
<li class="ui-widget-content">Menu 2</li>
<li class="ui-widget-content">Menu 3</li>
<li class="ui-widget-content">Menu 4</li>
<li class="ui-widget-content">Menu 5</li>
<li class="ui-widget-content">Menu 6</li>
<li class="ui-widget-content">Menu 7</li>
</ol>
<span class="resultarea">Selected Menu</span>>
      <span id=result class="resultarea"></span>
   </body>
</html>

JqueryUI Resizeable

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Resizable</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background:#ccc;
            border: 1px solid #666;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable { width: 150px; height: 150px; padding: 0.5em; background:#605c33;
            text-align: center; margin: 0; }
      </style>
      
      <script>
         $(function() {
            $( "#resizable" ).resizable();
         });
      </script>
   </head>

JqueryUI Dropable

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Droppable</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style type="text/css">
         #draggable-3 { 
           width: 100px; height: 50px; padding: 0.5em; float: left;
           margin: 21px 5px 10px 0; background:#fff;
         }
         #droppable-6 { 
           width: 120px; height: 90px;padding: 0.5em; float: left;background:#333;
      color: #fff; 
           margin: 10px; 
         }
         .active {
            border-color : blue;
            background : grey;
            }  
         .hover {
            border-color : red;
            background : green;
         }

</style>
   <script>
      $(function() {
         $( "#draggable-3" ).draggable();
         $( "#droppable-6" ).droppable({
            activeClass: "active",
            hoverClass:  "hover",
            drop: function( event, ui ) {
               $( this )
              .addClass( "ui-state-highlight" )
              .find( "p" )
              .html( "Dropped!" );
            }
         });
      });
   </script>
</head>
<body>

Thursday 26 March 2015

sorting table elements

Tuesday 24 March 2015

Light Box

Sunday 1 March 2015

JQuery UI Effects - AddClass

Thursday 26 February 2015

JqueryUI Tabs

JqueryUI Progressbar

JqueryUI Position

Wednesday 25 February 2015

JQuery UI Tooltip

Monday 23 February 2015

JqueryUI Dialog Box

JqueryUI Date Picker

JqueryUI Autocomplete

JqueryUI Accordion

JqueryUI Sortable

JqueryUI Selectable

JqueryUI Resizeable

JqueryUI Dropable

JqueryUI Draggable

JqueryUI Draggable