allthingssmitty / jquery-tips-everyone-should-know Goto Github PK

A small note about window.location.origin, it does not work in IE 10 (and below?). A quick fix for that can be found here: http://tosbourn.com/a-fix-for-window-location-origin-in-internet-explorer/

This just came up for me yesterday so it's been on my mind! Thanks for putting this list together, it's really great!

Include same translation links at the bottom of the master README on all README files.

It's a smart idea to help others know what would be good to include with PR's, e.g., JS snippet, README update, format, etc.

When using an Ajax call, always use an error handler!
When an ajax call returns a 404 or 500 error, the error handler will be executed. If the handler is not defined, sometimes other javascript/jquery wont work anymore. I'm not sure if this is the case with jquery 2, but I have seen this problem before.

You can define a global ajax error handler in jquery by:

$(document).ajaxError(function(e, xhr, settings, error){
    console.log(error);
});

Preload Images section:

it's make sense to

to

it makes sense to

I'm setting up this card as a way to track PR's for language translations. If you're translating this repo please add a comment indicating which language so we're not duplicating work. 😎

Your PR should include the following:

1. Add a language/country code folder to the translations folder, e.g., translations/fr-FR
2. Add a README.md file with the translation to the language/country code folder, e.g., .../fr-FR/README.md

You can find more information about contributing under the Language Translations section of the Contribution Guidelines.

I'm not looking for pasting into Google Translate; I can do that myself and it's not accurate. 💁🏼 I appreciate your help with this. 👍🏼

Translations (and any others that may not be on this list):

• Bulgarian (bg-BG)
• Chinese - simplified (zh-CN)
• Chinese - traditional (zh-TW)
• Czech (cs-CZ)
• Danish (da-DK)
• French (fr-FR)
• German (de-DE)
• Gujarati (gu-GU)
• Hungarian (hu-HU)
• Italian (it-IT)
• Japanese (ja-JP)
• Korean (ko-KR)
• Polish (pl-PL)
• Portuguese - Brazilian (pt-BR)
• Portuguese - European (pt-PT)
• Russian (ru-RU)
• Spanish (es-ES)
• Turkish (tr-TR)

The lack of a license probably means a good few people are shying away from using the examples provided. Thoughts on this?

Missing links under those sections (including all translations).

http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached

Are there any plans in the works to release a guide for fathers? Obviously this one won't work because the lessons all teach techniques that are helpful exclusively to moms and address uniquely female programming issues. TIA

You have this code to preload images:

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $('img').attr('src', arguments[i]);
  }
}

If I'm not mistaken, that should set every image on the page to the last image passed, since you select all the images with $('img').

To create an in memory element each time, use $('<img>')

This will make it easier to parse through tips.

Don't want to create a pull request so I created an issue :)

$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});

should be

$('.btn').hover(function () {
$(this).toggleClass('hover');
});

You currently advocate removeAttr('disabled') for re-enabling disabled form fields. When jQuery first came out, attr() was the only way to modify the disabled state, and the proper way was indeed to use removeAttr(). Since jQuery 1.6, prop('disabled', true) is the right way to make an input disabled and prop('disabled', false); is the right way to re-eanble it (not removeAttr('disabled')).

http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/
https://jquery.com/upgrade-guide/1.9/#attr-versus-prop-

Just raising this, because though it's nice to provide snippets for people (or their mothers), it's not nice to provide bad/mis information.

Deprecated methods

You're using the deprecated (since jQuery 1.8!) old syntax for binds, e.g.

$('something').error(function () {});

You should be using the .on() syntax:

$('something').on('error', function () {});

This affects the following:

• .error()
• .load()
• .click()

Setting an element property

You should be using .prop() to set the disabled property, since jQuery 1.6:

$('input').prop('disabled', true);

From the docs for .prop():

The .prop() method is a convenient way to set the value of properties—especially when setting multiple properties, using values returned by a function, or setting values on multiple elements at once.

Using JavaScript where CSS will do

I take umbrage with your :odd example, because this can and should be done completely in CSS:

li:nth-child(odd) {
  background: #e8e8e8;
}

All modern browsers support CSS3 selectors, and if you've got to support older browsers you could apply classes in your HTML, rather than depending on jQuery for a visual effect.

Making two elements the same height

This example works if you know which element will be the largest, but a better, more flexible method would be to loop over a set of elements, and set the height for them to the height of the tallest element:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

When you load content through ajax (or pjax), and events are registered on elements inside that content. The events registered are not handled anymore. Because the previous DOM elements are 'destroyed'. The events should be re-attached on the DOM elements. A best practice is to attach the events on a global DOM element.
For Example:

<div id="content">
   <!-- this content will be changed with ajax //-->
</div>

Instead of attaching the events on the elements within the content, attach the events on the DOM element which will NOT be loaded or changed through ajax (in this case: #content, or sometimes: body).

$('#content').on('click', 'a', function(e){
    // here the logic when clicking on a link inside the `#content` div
});

Hey, sorry to raise this like an "issue", I didn't seem to find anywhere else to send you this message...

For the "Make two (or more) DIVs the same height" for example, you could use a much smaller version of code if you use Math and Array.map (in this case the "map" function that jQuery provides). Like this:

var maxHeight = Math.max.apply(null, ($("div").map(function(){ return $(this).height(); })));
$("div").height(maxHeight);

As you can see, jQuery also doesn't need you to iterate through the nodes to set their properties, you can set the property for a selection of nodes, all at once.

Hope this is helpful!

Regards,
Cristian.

This is more tricky as you think. $.load method doesn't work (at least not in every browser) with cached images.

I think the right way to do toTop animation is through the selector $('html, body') for crossbrowsing purpose, i.e.:

$(document.body).animate({scrollTop: 0}, 800);