Combine pure string and jQuery object. A word about outerHTML property

You can’t simply combine pure string and jQuery object using Javascript concatenation operator (+). You cannot easily mix strings and DOM elements. So, something so trivial like surrounding link with [ and ] brackets becomes not so trivial. At least to beginners. This article should help.

Use jQuery to load element from another page

You can use jQuery to load any element from another page as easy as you get it from the same document.

Here is how (source):

$.get("../index.html #header1", function(data)
{
    $("#indexHeader1").html(data);

    alert("Load was performed.");
});

It’s no magic. It’s a regular AJAX call, only jQuery parses result and tries to strip requested element only.

noUiSlider — a jQuery Range Slider [updated]

Twitter Bootstrap is my main framework for creating websites and mobile PhoneGap application and it actually has anything I need, except a good slider.

Note, that I’m talking about a bar and a knob on it, which you can drag to set the value. I’m not talking about any kind of image slider, gallery or presentation. As most people know, Bootstrap has such thing, which is called Bootstrap Carousel.

I tired to use jQuery UI’s slider, as it is quite small (39,4 kB of minified JS and CSS code). This is not very much, when compared to whole jQuery UI library size. But it is way too much, when we thing that this 40 kB of code does nothing that building a simple slider (I’m not using jQuery UI at all). Plus: it works more than poorly on mobile devices with Android 2.x.x (a bit better on Android 4.1.x).

So, I was urgent need for an alternative. Thanks to Stack Overflow, I came across noUiSlider — jQuery Range Slider. And immediately felt in love with it.

Read More “noUiSlider — a jQuery Range Slider [updated]”

Adding extra client-side validation to file upload form

For one of my projects I required a client-side validation in file upload form, that would warn user on every attempt of submitting that form, when file field would be empty or selected file would contain incorrect (not allowed) extension.

I decided to share this code here. Maybe someone else will also benefit out of it. Note, that this is rather solution, for example — it does string-only check for file extension. It does not check real mime-type, so it is still open on any kind of threats, that would exploit sending file with a forged extension.

Read More “Adding extra client-side validation to file upload form”

Simple element blocker with and without jQuery

If you’re using jQuery the best (the only reasonable?), in my opinion, way to block an element or entire page (for example for updating it contents) is to use blockUI plugin. But, if you only have to block one or two small elements then you may consider writing your own, very simple blocker instad of using blockUI. And if you’re using jQuery only for that purpose (really small project or task), the you may try to do the same without jQuery at all.

Very simple alternative to jQuery

Often, in many small or very small projects, you include jQuery only to have a conviniend DOM-selectors access via $(selector) and except this, you don’t use jQuery at all. In cases like that using neither jQuery nor smaller Zepto.js isn’t pretty wise.

Here is an example on how to achieve same effect in pure JS with querySelector and querySelectorAll.

Read More “Very simple alternative to jQuery”

Check for valid JSON object or string

I was looking for a JavaScript code that will check, if passed variable is a valid JSON, no matter, if it is an object or string. I failed with that, because I only found separate solutions for either object or string. Though its authors claimed that they work fine for both objects and strings, as simple check found out this is not true.

Read More “Check for valid JSON object or string”

Checking if checkbox is checked using jQuery. Various methods and issues

This article shows different methods on checking, if checkbox is check or set of checkboxes are set. jQuery is used. It also discussed some additional issues about this topic.

Read More “Checking if checkbox is checked using jQuery. Various methods and issues”

Highlight piece of text using jQuery

Some guy on Stack Overflow wanted to know how to highlight a piece of text in given page using jQuery. Finding proper solution for jQuery (client-side) took me around ten seconds as three most important search results were found on StackExchange and jQuery documentation itself. Anyway, here’s a copy of my answer.

Read More “Highlight piece of text using jQuery”

getElementsByClassName without jQuery

In addition to “addClass, removeClass and hasClass without jQuery” article I wrote an example implementation of getElementsByClassName() method to catch a collection of objects, referencing them by their class name, when you can’t or don’t want to use jQuery and it’s superb class-selectors.

Read More “getElementsByClassName without jQuery”

addClass, removeClass and hasClass without jQuery

Class manipulation methods in jQuery are really handy, but when you need just them and nothing else out of jQuery, then using entire library seems like a little bit mistake. Using own versions of addClass, removeClass and hasClass sounds like a better idea and for this reason I have wrote following article, where you’ll find an example implementation of these methods.

Read More “addClass, removeClass and hasClass without jQuery”

Dropdown must use both onChange and onKeyPress events

Bear in mind that when writing JavaScript / jQuery code for handling user changes made to dropdown boxes, you must program your website reaction not only to onChange but also to onKeyPress events. Why? There is a rare situation, where user selects value by clicking dropdown and then using keyboard’s cursor up or cursor down keys. onKeyPress event will be fired in this situation instead of onChange event. And desired effect won’t work, if you put it only to onChange event handler.

Read More “Dropdown must use both onChange and onKeyPress events”