CSS-TricksjQuery Snippets Feed | CSS-Tricks https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Wed, 29 May 2024 21:46:09 +0000 hourly 1 https://wordpress.org/?v=6.5.2 https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&ssl=1 jQuery Snippets Feed | CSS-Tricks https://css-tricks.com 32 32 45537868 Compare jQuery Objects https://css-tricks.com/snippets/jquery/compare-jquery-objects/ https://css-tricks.com/snippets/jquery/compare-jquery-objects/#comments Wed, 19 Aug 2015 16:25:42 +0000 Chris Coyier http://css-tricks.com/?page_id=206763 You can’t really compare if two jQuery objects are the same…

if ($(selectionOne) === $(selectionTwo)) {

}

You can compare DOM objects though…

if ($(selectionOne)[0] === $(selectionTwo)[0]) {

} 

But that’s only really useful if you’re comparing a single element, …

]]>
You can’t really compare if two jQuery objects are the same…

if ($(selectionOne) === $(selectionTwo)) {

}

You can compare DOM objects though…

if ($(selectionOne)[0] === $(selectionTwo)[0]) {

} 

But that’s only really useful if you’re comparing a single element, not a collection.

If you need to compare a collection of elements, this StackOverflow thread has the answer:

var divs = $("div");
var divs2 = $("div");

if (divs.length == divs2.length && divs.length == divs.filter(divs2).length) {         
  // They are equal
}
]]>
https://css-tricks.com/snippets/jquery/compare-jquery-objects/feed/ 5 206763
A jQuery hasAttr() Equivalent https://css-tricks.com/snippets/jquery/make-an-jquery-hasattr/ https://css-tricks.com/snippets/jquery/make-an-jquery-hasattr/#comments Wed, 19 Aug 2015 16:15:31 +0000 Chris Coyier http://css-tricks.com/?page_id=206756 jQuery doesn’t really have an .hasAttr() function. You might assume that it does, but alas, it does not.

A StackOverflow thread has some pretty good solutions.

Get the attribute, check the value
var attr = $(this).attr('name');

// For some browsers, 
…]]>
jQuery doesn’t really have an .hasAttr() function. You might assume that it does, but alas, it does not.

A StackOverflow thread has some pretty good solutions.

Get the attribute, check the value

var attr = $(this).attr('name');

// For some browsers, `attr` is undefined; for others, `attr` is false. Check for both.
if (typeof attr !== typeof undefined && attr !== false) {
  // Element has this attribute
}

Native JavaScript has a way

If you only have a jQuery reference…

$(this)[0].hasAttribute("name");

jQObject[0].hasAttribute("name");

Filter the selection

$(this).is('[name]');

$(this).filter("[name='choice']");
]]>
https://css-tricks.com/snippets/jquery/make-an-jquery-hasattr/feed/ 5 206756
Done Resizing Event https://css-tricks.com/snippets/jquery/done-resizing-event/ https://css-tricks.com/snippets/jquery/done-resizing-event/#comments Tue, 07 Oct 2014 01:53:07 +0000 Chris Coyier http://css-tricks.com/?page_id=185617 If you’re used to something like jQuery UI resizeable, you get events you can bind to during the resizing, but also at the end of resizing.

No such event exists in native JavaScript.

You can fake it by setting …

]]>
If you’re used to something like jQuery UI resizeable, you get events you can bind to during the resizing, but also at the end of resizing.

No such event exists in native JavaScript.

You can fake it by setting a timeout to run the code you want to run when resizing stops. Then clear that timeout every time a resize event fires. That way the timeout will only finish if that timeout actually finishes.

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
            
  }, 250);

});

Similar to debouncing.

]]>
https://css-tricks.com/snippets/jquery/done-resizing-event/feed/ 22 185617
Get Query Params as Object https://css-tricks.com/snippets/jquery/get-query-params-object/ https://css-tricks.com/snippets/jquery/get-query-params-object/#comments Sat, 22 Feb 2014 16:57:54 +0000 Chris Coyier http://css-tricks.com/?page_id=163745 Nicholas Ortenzio wrote this little plugin:

jQuery.extend({

  getQueryParameters : function(str) {
	  return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
  }

});

So if the URL is:

You can do:

var queryParams = $.getQueryParameters();

And queryParams will be an object …

]]>
Nicholas Ortenzio wrote this little plugin:

jQuery.extend({

  getQueryParameters : function(str) {
	  return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
  }

});

So if the URL is:

You can do:

var queryParams = $.getQueryParameters();

And queryParams will be an object like:

{
   "lunch": "sandwich",
   "dinner": "stirfry"
}
]]>
https://css-tricks.com/snippets/jquery/get-query-params-object/feed/ 21 163745
Move Cursor To End of Textarea or Input https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/ https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/#comments Tue, 16 Jul 2013 19:27:44 +0000 Chris Coyier http://css-tricks.com/?page_id=22430 Code to move the cursor to the end of the current text within in the input, rather than the default (highlighting the text).

Plugin format
jQuery.fn.putCursorAtEnd = function() {

  return this.each(function() {
    
    // Cache references
    var $el = $(this),
        el 
…]]>
Code to move the cursor to the end of the current text within in the input, rather than the default (highlighting the text).

Plugin format

jQuery.fn.putCursorAtEnd = function() {

  return this.each(function() {
    
    // Cache references
    var $el = $(this),
        el = this;

    // Only focus if input isn't already
    if (!$el.is(":focus")) {
     $el.focus();
    }

    // If this function exists... (IE 9+)
    if (el.setSelectionRange) {

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two.
      var len = $el.val().length * 2;
      
      // Timeout seems to be required for Blink
      setTimeout(function() {
        el.setSelectionRange(len, len);
      }, 1);
    
    } else {
      
      // As a fallback, replace the contents with itself
      // Doesn't work in Chrome, but Chrome supports setSelectionRange
      $el.val($el.val());
      
    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Chrome)
    this.scrollTop = 999999;

  });

};

Usage

var searchInput = $("#search");

searchInput
  .putCursorAtEnd() // should be chainable
  .on("focus", function() { // could be on any event
    searchInput.putCursorAtEnd()
  });

Demo

See the Pen Move Cursor To End of Textarea or Input by Chris Coyier (@chriscoyier) on CodePen.

]]>
https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/feed/ 21 22430