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

Chained, AJAX-updated listboxes in Yii2

There’s a great answer at Stack Overflow that shows, how in Yii2 you can implement a form containing listbox and two input fields. Listbox contains data from one model and when user selects any option, remaining two input fields should be populated with relevant values from related model.

I wrote an extended version of this code. It populates two other listboxes instead of just input fields. And it uses a little bit less deprecated code! :>

Read More “Chained, AJAX-updated listboxes in Yii2”

Implementing own slideshow functionality to Colorbox

I have set slideshow:true in Colorbox‘s configuration and Start slideshow link didn’t appear.

I was pretty sure, that this is due to some stupid bug made by me, but because I was on steroids that day, instead of investigating on what is wrong, I decided to write my own implementation of slideshow func.

Code isn’t pretty, but it can be useful for beginners in determining, how events and other stuff around Colorbox works. This example can also be useful for implementing slideshow functionality to other, non-Colorbox, photo gallery libs, that do not have this functionality implemented in core.

Read More “Implementing own slideshow functionality to Colorbox”

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.

Read More “Combine pure string and jQuery object. A word about outerHTML property”

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

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”

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”

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”