Disable CSS transitions and animations… temporarily or permanently!

There’s a fairly easy way to diable all transformations, transitions and animations introduced in CSS3, which often are being used in a nasty way, just as Flash animations were used ten years ago and as .gif images were used twenty years ago.

This can be done purely in CSS, when disabling them permanently or with a little bit help from Javascript (actually jQuery or Zepto), when willing to disable them just for some time or event.

This article also show how to set styles for absolutely every element in document.

Read More “Disable CSS transitions and animations… temporarily or permanently!”

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]”

AJAX and JSON cross-domain calls from PhoneGap application

This is just as quick as possible example on getting you to the subject, without unnecessary blah, blah. Only pure detail on how to sent AJAX / JSON calls (cross-domain!) from your PhoneGap application. With references to other intresting and more comprehensive sources in the end.

BTW: You don’t even need a response server ready to get started! Example is based on JSON Test — Simple testing for JSON-based applications service.

This article assumes that you’re using jQuery in PhoneGap application.

Read More “AJAX and JSON cross-domain calls from PhoneGap application”

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.

Read More “Simple element blocker with and without jQuery”

Free Javascript chess engines and notation board presenters

I had to find a free Javascript based chess engine for one of my projects. I must admit, that I’m a low-level player and much, much lower level chess developer, so I assumed, that there is no chance, you can write such advanced thing like complete chess engine in such simple language like Javascript. Turned out, I was wrong. I was actually devatated (again and again) with the power and possibilities behind Javascript.

Read More “Free Javascript chess engines and notation board presenters”

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”