localStorage vs Firefox

adminJavaScript0 Comment
4 min. reading

For security (?) reasons (or because Mozilla developers are mentally retarded), for locally served files, Firefox is storing localStorage data per file, not per device (as it would do for domains and as other browsers does).

Sharing settings or any other data across two or more pages? Either throw Firefox to trash bin or forget it!

The solution is to detect, if you are working with mentally retarded browser and switch from localStorage to sessionStorage for it. But then, again, sessionStorage gets purged after browser or tab is closed. You will at least be able to transfer some settings (like if user want to have bigger font size or dark theme) between your locally severed pages, but the whole thing will ruin after they restart their browser.

Read More “localStorage vs Firefox”

Randomize background of a webpage

adminCSS, HTML, JavaScript0 Comment
3 min. reading

Suppose that you have a landing page (or just a cool background) and you have some many versions of it, and all so beautiful, that you can’t decide which one to show. Some kind of weird solution is to show them all in a random manner.

If you wish to achieve something similar to this then all you need is a really short piece of HTML, JavaScript and CSS. All can be put to a single file.

Since I like a clean and easy solution, this one use pure-JavaScript. No jQuery stuff etc. included.

Read More “Randomize background of a webpage”

Disable CSS transitions and animations… temporarily or permanently!

adminCSS, JavaScript, jQuery2 Comments
3 min. reading

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

Quick mobile UI review

adminCordova, CSS, JavaScript0 Comment
3 min. reading

Here is a quick review of some mobile UIs that you can use to develop your mobile application, if you’re developing HTML-like mobile apps.

Note that I don’t like jQuery Mobile for being ugly and slow and I don’t like paid full-featured stuff like Sencha or Kendo. You won’t find them here. I like fast and beauty mobile apps (possibly written in PhoneGap).

So you will find performance-first, beauty-second UI frameworks here. With special emphasis on being PhoneGap-oriented. Only quick review without any unnecessary blah-blah.

Read More “Quick mobile UI review”

A link to the same URL with a different port

adminHTML, JavaScript0 Comment
2 min. reading

Let’s say, that you need to make a <a href=""></a> link, that will point you to the very same URL (as page, in which have this link), but to a different port. Even though there are no reasons for not implementing support for links like <a href=":8080">jump</a>, as of writing this, such support is not implemented in any known browser. And thus, neither this link work nor pure-HTML solution is available.

You must hire Javascript to resolve this problem.

Read More “A link to the same URL with a different port”

Chained, AJAX-updated listboxes in Yii2

adminJavaScript, jQuery, PHP, Yii0 Comment
3 min. reading

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”

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

adminJavaScript, jQuery0 Comment
2 min. reading

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

adminJavaScript, jQuery0 Comment
< 1 min. reading

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.

Make a webpage looking like terminal or command-line

adminCSS, HTML, JavaScript0 Comment
2 min. reading

So, you’d like to make a webpage that looks like terminal or command-line, right?

With a little bit of HTML, CSS and Javascript, it is as easy as snapping a finger. Note, that I underlined “looks like”, because we’re going to do just a look & feel. This will not be a full-blown command line interpreter, where you can enter commands and get results. It will only be a simple, cool-looking… thing.

This article is a slight port of the code that can be found at fludotlove.com (done by Nathan Marshall).

Read More “Make a webpage looking like terminal or command-line”

Fine-tuning CKEditor 4’s toolbar

adminJavaScript, PHP0 Comment
6 min. reading

Forcing CKEditor 4’s toolbars to look exactly as you’d like is a bit hard task. Somewhere in official docs it is said, that you should use config.toolbarGroups configuration settings for this purpose. This is, of course, a complete mistake.

Benefits are weak and you’re actually loosing all the control over which button, in which group and in which line of toolbar should appear. This article will help you design CKEditor 4’s toolbars exactly, as you wish to have them, using old, good config.toolbar-way.

Read More “Fine-tuning CKEditor 4’s toolbar”

Where should I keep JS and CSS code — inline or in an external file

adminJavaScript0 Comment
6 min. reading

Hamlet’s great question (“To be or not to be“), turns in web development and mobile world into Javascript (or CSS stylesheet) asking the developer: “To be inline or not to be”. In other words: what is better — to put code inline of HTML page or to put it in an external file? I was more than sure, that the answer is pretty straightforward — external file is always better. And I keep myself with this answer. However, I found a few arguments, that my sound interesting at first, but must be answered.

Read More “Where should I keep JS and CSS code — inline or in an external file”

A library for gauges, charts or data visualisation

adminCordova, JavaScript0 Comment
3 min. reading

There are certain drawing and graphic libraries in Javascript that can be considered for:

  • drawing charts,
  • doing some data visualization for the website,
  • using them as gauges / clocks for the mobile client

(gauges can be used in limited manner on the website as well).

This article deals with most interesting ones that you may consider for above purposes.

Read More “A library for gauges, charts or data visualisation”

Static map from Google with no API key required [updated]

adminGoogle, JavaScript0 Comment
3 min. reading

You must be a member of Google APIs Console and obtain a valid API to embed Google Maps into your website or web application. That’s a well known fact.

Not everyone knows that this is required only, if you want to embed a fully-featured Google Maps, i.e. with ability to scroll, zoom, use markers, calculate routes etc. For embedding a static image of Google Maps showing requested location you don’t need API and required Javascript code is nearly a one-liner.

Read More “Static map from Google with no API key required [updated]”

Get language name and ISO code based on native language name

adminCordova, JavaScript0 Comment
5 min. reading

For one of my PhoneGap project’s I needed a function that will convert local (native) language name into international (English) language name. And another one that will return correct two-letter language code (ISO 639-1), again, based on native language name. This was required because PhoneGap applications are returning local name for currently selected language (so, you’ll get polski instead of Polish, Tiếng Việt instead of Vietnamese and so on).

Here are these functions for future reference and for others, who could possible find them useful.

Read More “Get language name and ISO code based on native language name”

noUiSlider — a jQuery Range Slider [updated]

adminJavaScript, jQuery0 Comment
6 min. reading

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

Function is not defined, when using setInterval or setTimeout

adminJavaScript2 Comments
2 min. reading

Javascript can be challenging and is full of traps for the beginners. Today I was caught into one of such traps and I was struggling with Uncaught ReferenceError, functionName() is not defined error, for way to long. Solution seems easier than I was thinking, so I wrote this short memo to future myself to avoid falling into the same trap again.

Read More “Function is not defined, when using setInterval or setTimeout”

Some issues about links in PhoneGap applications

adminCordova, JavaScript0 Comment
4 min. reading

It is uncommon and not to often to place external links (leading to an external pages) inside application built with PhoneGap. However, if you decide to do so, read this article to get knowledge about issues you may run into. If you target Android 2.x as well, you’ll also find some interesting information here.

There are generally two things, you should consider about links in PhoneGap applications. One about external links and second about links under overlay.

External links

Links to external pages replaces (covers) entire are of your application and thus made it nearly completely unusable to the user.

If you use direct link (<a href="http://www.acrid.pl/">acrid.pl</a>) and user taps it, contents of destination page (or eventually an error message) will cover entire application area, completely replacing contents of your mobile application. What is more important, device’s back button won’t work in this case, meaning that your application is actually dead upon user taps such link.

There is no going back and leaving app, going to home screen to restart your application again, will restore it from memory in previous state — that is, with external webpage open, not with contents of your application. The only option user have to get back to your application is to force to close it from task manager and hard-restart it. This is not wanted behavior in most situations.

To avoid these problems, always open links to external webpages using specific Javascript code. For example:

window.open(url, '_system', 'location=yes');

Part location=yes is important. Leaving third parameter empty will result in above mentioned behavior.

This code is tested to work in Android. According to PhoneGap documentation and blog, it should work in other platforms as well.

For your own convinience and purity of your code, you should consider enclosing this in a handy function:

function openUrl(url)
{
    window.open(url, '_system', 'location=yes');
}

and call it using either jQuery binding:

$('#btnAcrid').click(function()
{
    openUrl('http://acrid.pl/');
});

or direct linking:

Visit <a href="#" onclick="openUrl('http://acrid.pl/');">this page</a> for more information.

Either way is good and prevents your application from falling into above mentioned problems.

Overlayed links

PhoneGap app under Android 2.x ignores full-page overlays and allows tapping links below it.

If you’re using any Javascript library to replace dully Javascript alert(), confirm() and prompt() functions with cool looking modal dialog boxes — like Twitter Bootstrap, Apprise and many more — keep your eye on some trobules you may run into under Android 2.x.

I tested this issue on two different versions of Android and on two separate mobile devices:

  • GSmart Rola G1317D with Android 2.2.2,
  • LG GT540 with Android 2.3.3 and CyanogenMod.

Under first one, user were able to tap links below full-page overlay, but nothing happened as a result of this.

Under LG GT540 with Android 2.3.3 and CyanogenMod, tapping links below overlay sometimes resulted in opening target link. If such link wasn’t “secured” using method described above, again entire content of mobile application was replaced by external webpage content, making application unusable.

Android 4.x is free of this problem (tested under Samsung Galaxy Nexus with Android 4.2.2). You can’t tap at all anything below full-page overlay.

I wasn’t able to further investigate, whether this problem is caused by PhoneGap, used Javascript library (Bootstrap, Apprise, etc.), Android system or CyanogenMod mode.

AJAX and JSON cross-domain calls from PhoneGap application

adminCordova, JavaScript, jQuery0 Comment
3 min. reading

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

adminJavaScript, jQuery0 Comment
3 min. reading

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”