Category Archives: jquery

jQuery clip effect

Code added to the jQueryUI plugin:
    $( document ).click(function() {
    $( "#toggleclip" ).toggle( "clip", {direction: "vertical"}, 1000 );
    $( "#togglecliphorizontal" ).toggle( "clip", {direction: "horizontal"}, 1000 );

Click anywhere to toggle the clip effect of these boxes.


jQuery ui tool tip

Add this code to the jQuery ui wdiget:
    $( ".tooltip" ).tooltip();

Then simply tag any elements with the tooltip class and add a title to these elements. The title is what is displayed.

Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

Tooltips are also useful for form elements, to show some additional information in the context of each field.

Hover the field to see the tooltip.

jquery ui draggable and sortable

Add the following jquery code to the Jquery ui plugin.


jQuery(document).ready(function($) {
 $( ".sortable" ).sortable({
      revert: true
    });
    $( ".draggable" ).draggable({
      connectToSortable: ".sortable",
      helper: "clone",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
});

Then use an unordered list with the same classes to call the jquery.

  • Drag me down
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

jquery ui widgets plugin to display tabs

Using the Jquery ui plugin to display tabs. I downloaded the plugin. Then in the plugin settings I added the code…
jQuery(document).ready(function($) {
  $( ".tabs" ).tabs();
  // Add other jQuery code here...
});

Making sure the tabs selector was selecting classes not ids. For some reason it didn’t work with ids.
1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.