"exists" function in jQuery

For verify the existence of an element in jQuery this is the piece of code:

jQuery.fn.exists = function(){return this.length>0;}

if ($(selector).exists()) {
    // Do something
}

Read More

Rename the content inside a tag and confirm with jQuery

This examples target one simple container and change his name and then make the confirmation:

For this you need to identify the relevant h2/textarea

You also should nest your handler binding because each time your try to edit, you add a new handler

HTML:

<div class="rename">
     <h2 class="replaceble">Dell PC</h2>
 <a href="#" class="replace">Rename</a>
 <a href="#" class="confirm">Confirm</a>

</div>
<div class="rename">
     <h2 class="replaceble">Dell PC</h2>
 <a href="#" class="replace">Rename</a>
 <a href="#" class="confirm">Confirm</a>

</div>
<div class="rename">
     <h2 class="replaceble">Dell PC</h2>
 <a href="#" class="replace">Rename</a>
 <a href="#" class="confirm">Confirm</a>

</div>

JavaScript:

(function ($) {
    $.fn.changeElementType = function (newType) {
        var attrs = {};

        $.each(this[0].attributes, function (idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        this.replaceWith(function () {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    }
})(jQuery);

$(document).keypress(function (e) {
    if ($('textarea:visible')) {
        if (e.which == 13) {
            alert('You pressed enter!');
            $("textarea").changeElementType("h2");
            $('.replace').css('opacity', '1');
        }
    }
});

$('.replace').on('click', function () {
    var container = $(this).closest('.rename')
    container.find('h2').changeElementType("textarea");
    $(this).hide();
    $(this).next('a').show();
});

$('.confirm').on('click', function () {
    var container = $(this).closest('.rename')
    var $textarea = container.find('textarea');

    $(this).hide();
    $(this).prev('a').show();
    $textarea.html($textarea.val()).changeElementType("h2");
});

CSS:

textarea {
    height: 30px;
    overflow: hidden;
    padding:0;
    border: 0;
    background:none;
    resize: none;
    font-size: 24px;
    text-align: center;
    font-family: $font-family;
    color: $white;
    height:30px;
}
div.rename {
    border:1px solid red;
    float:left;
    width:60%;
    margin:20px;
}
h2 {
    height:30px;
    color:red;
}
.confirm {
    display:none;
}

Read More

Remove event handler in an element with jQuery

[2011 - jQuery 1.7 <]

With jQuery 1.7 onward the event API has been updated, .bind()/.unbind() are still available for backwards compatibility, but the preferred method is using the on()/off() functions. The below would now be,

$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

In your example code you are simply adding another click event to the image, not overriding the previous one:

$('#myimage').click(function() { return false; }); // Adds another click event

Both click events will then get fired.

As people have said you can use unbind to remove all click events:

$('#myimage').unbind('click');

If you want to add a single event and then remove it (without removing any others that might have been added) then you can use event namespacing:

$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });

and to remove just your event:

$('#myimage').unbind('click.mynamespace');

Read More

Sort list alphabetically with jQuery

This can be done without using jQuery:

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string")
    ul = document.getElementById(ul);

  // Idiot-proof, remove if you want
  if(!ul) {
    alert("The UL object is null!");
    return;
  }

  // Get the list items and setup an array for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  // Populate the array
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Sort it
  vals.sort();

  // Sometimes you gotta DESC
  if(sortDescending)
    vals.reverse();

  // Change the list on the page
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

Easy to use:

sortUnorderedList("ID_OF_LIST");

Read More