Bits And Pix

 $("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });

jQuery Doc: Load

$('<div/>').text('This is fun & stuff').html();

Source: debuggable.com

  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>
    <li class='fade'>Socks</li>

  </ul>

$("li").hover(
      function () {
        $(this).append($(" ***"));
      },
      function () {
        $(this).find("span:last").remove();
      }
);

jQuery Hover Doc

$("p").hide();

jQuery hide just hide an element by adding the “display:none” css properties.

$("p").remove();

jQuery remove removes the elements from the DOM including all event handlers and internally cached data.

var lastAddedElement = $("#myDiv").append("Cool link").find(":last");

The $.fn.append method returns the selected element and not the added one (this is to allow chaining)

jQuery has a neat and efficient way to attach data to DOM elements ($.fn.data). You can use it to pass data from your draggable to your droppable.

First you attach the data to the draggable UI element:

$(".document").draggable({
  helper: 'clone',
  revert: 'invalid'
}).data("myData","secret data");

Then, you get it back on drop:

$(".folder").droppable({
   accept: ".document",
   hoverClass: "drophover",
   tolerance: "touch",
   drop: function(event, ui){
           alert($(ui.draggable).data("myData"));
   }
});

See also: jQuery UI Drop API

Html code:

<div class="button">My Custom Button</div>

CSS code:

/*** .button ***/
.button{
	display: inline;
	border: solid 1px #999999;
	border-top-color: #ffffff;
	border-left-color: #ffffff;
	background-color: #f4f4f4;
	padding: 3px;
	cursor: pointer;

}

.button.down{
	border-top-color: #999999;
	border-right-color: #ffffff;
	border-bottom-color: #ffffff;
	border-left-color: #999999;
	background-color: #f0f0f0;
}
/*** /.button ***/

JS code:

<script type="application/javascript">
$(document).ready(function(){

    $(".button").live("mousedown",function(){
        $(this).addClass("down");
    }).live("mouseup",function(){
        $(this).removeClass("down");
    }).live("mouseout",function(){
        $(this).removeClass("down");
    });
});
</script>

I used “live“, but obviously, you can use “bind” as well.

See also: jQuery Live

The jQuery UI Datepicker does not have a method to test if the datepicker is shown, but since it uses a singleton pattern, you can access the private flag directly with:

$.datepicker._datepickerShowing

Not super elegant, but it works. Also, the singleton approach means that only one date picker can be shown at a time.