JavaScript – Page 2 – onezeronull.com

Jul32013

Getting root path in Javascript files included in Yii application

3 min. reading

A server-side root path in client-side Javascript code? Are you mad? Why would I need this? Well… For example, when referencing image files (placed on server, right?), that are using dynamic paths or for any other reasons can’t be added statically (for example using CSS).

Getting root path in Javascript files is a hard task itself. When do you need to combine this problem with Yii client-assets publishing mechanism, it can become even harder. However, I found nice, clean and simple solution, using HTML5’s data- attributes.

May282013

Google Loader and ClientLocation object for IP-based geolocation

adminGoogle, JavaScript0 Comment

< 1 min. reading

Google Loader is a convinient way of loading other libraries and APIs.

And, if you know, where to look for you can even find nice examples of now undocumented ClientLocation object, which can give you location of your visitor — less accurate than GPS (navigator.geolocation object), but based on IP address and therefore not requiring user agreement on using this feature.

Apr192013

CSS and JS minifier/beautifier that rocks!

adminCSS, JavaScript0 Comment

< 1 min. reading

I definitely love and adore Avivo’s CSS/JS Minifier/Beautifier. Mostly for options that similar tools lack. Like: braces on own line, preserve empty lines and ability to select intend character.

It has a small bug in CSS Beautifier. Every : is beautified to : (with space), which breaks pseudo-classes like :hover and and pseudo-objects like ::before. But, this can be easily fixed (manually; simple find-and-replace in text editor).

So, even with this, Avivo’s tool is just fabulous!

Apr92013

Go to the top of page functionallity

adminJavaScript0 Comment

2 min. reading

Here is one of the simplest ways to add scroll to the top feature. Some basic info, example code plus cross-browser issues.

Mar252013

Simple element blocker with and without jQuery

adminJavaScript, jQuery2 Comments

4 min. reading

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.

Feb242013

Free Javascript chess engines and notation board presenters

admingames, JavaScript, jQuery0 Comment

2 min. reading

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.

Feb152013

Self-adapting images in responsive design

adminCSS, HTML, JavaScript0 Comment

5 min. reading

In my humble opinion, responsive design is a future. One layout, carefully designed, will look beautiful and by user-friendly, no matter, which device user will use to view it. Of course, you can craft responsive designed website by hand, but the easiest way is to use some framework. But what about non-framework elements, like for example images? How to style them, what size should they have, to be responsive and look exactly like other, framework elements, on any device?

There are at least few approaches to solve this problem, among which one or two are not that famous.

Feb132013

Catch back button and exit PhoneGap application

adminCordova, JavaScript0 Comment

3 min. reading

This article shows an example, how to respond, when user of your mobile application taps on Back button and how to exit application, after getting user confirmation, that he or she is willing to do so. It also explains, why you shouldn’t do it at all, if you plan to ship your application to multiple platforms, including Apple iOS.

Feb132013

Very simple alternative to jQuery

adminJavaScript, jQuery0 Comment

2 min. reading

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.

Nov252012

Simple way for hiding your email address

adminHTML, JavaScript0 Comment

< 1 min. reading

They say that SPAM bots are really good these days and can figure out your e-mail out of many “traps”.

I wonder, if they can catch it out of something like this:

<a
    href="mailto:me.nononono@domain.nononono.com"
    onmousedown="this.href=this.href.replace('.nononono','')"
    onkeydown="this.onmousedown()">
contact me</a>

I prefer to think, they don’t and that they’ll crush their ugly spammy teeth on this! :]

Nov12012

JS and PHP or Yii photo manipulation libraries

adminJavaScript, PHP, Yii0 Comment

3 min. reading

I was faced with a problem of picking a good photo manipulation library. Either client-side or server-side. Both for working with my newest Yii project. This article is a summary of my quick research in this field.

All JavaScript libraries works on Canvas, so require HTML5 and Canvas-enabled browsers. Most modern browsers supports both of them in newest versions.

The only PHP image manipulation library works mostly on uploaded image.

Sep302012

Check for valid JSON object or string

adminJavaScript, jQuery0 Comment

4 min. reading

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.

Sep172012

Get all elements of particular type and class without jQuery

adminJavaScript0 Comment

2 min. reading

I wanted some nice function, that will return all DOM elements:

of given element type (name),
contained in another element,
having given class.

For example, to get all list items (<li>) with some class, but inside <ol> rather than in entire DOM tree.

I failed to find one of such, so I wrote it.

Sep162012

Getting and setting cookies without jQuery. The quickest approach

adminJavaScript0 Comment

2 min. reading

For every project, where I can’t use jQuery and must rely on pure Javascript, I must search the Internet over and over again to find some cookie setting and reading code. Finally, I decided to write a short memo to future myself, to have this code handy in my blog. Here it is.

Sep112012

Two-state button with HTML, CSS and jQuery

adminCSS, HTML, JavaScript, jQuery0 Comment

2 min. reading

To express 0-1 state checkboxes are mostly used in websites. A two-state button used instead can be a bit more nicer and interesting. You can create it in HTML, CSS and Javascript/jQuery quite easy.

Here, is how to do this.

Sep102012

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

adminJavaScript, jQuery0 Comment

2 min. reading

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.

Aug252012

Enabling, checking and disabling HTML5 geolocation

adminJavaScript0 Comment

4 min. reading

There are a lot of introduction-like posts about starting your journey with HTML5 geolocation, so I don’t intend to write another one. Instead, I’m going to say a few words about enabling and disabling in-browser geolocation services, because this topic has some glitches that may not be know by everyone.

Aug222012

A good on-line JS obsfucator for minifying purposes only [updated]

adminJavaScript0 Comment

4 min. reading

I’ve searched the web for a Javascipt obsfucator for my specific needs — actually a minifier and obsfucator that will minify a code (pretty like BrainJar do) and obsfucate all variables, function names etc. to 1-2 character length (shortest possible). I know that this could be less secure, but due to purpose (internal project), size of the code, not security, is a key here. I also need it as one-click, on-line ready tool.

Since my searches failed, I’ve asked a question on Stack Overflow, but it was closed as off-topic.

Following article is a summary of answers already given on Stack Overflow (before question was closed) plus my some other thoughts and findings.

Aug212012

Changing look of website, if Javascript is disabled

adminCSS, HTML, JavaScript0 Comment

2 min. reading

There is a nifty trick, that allows you to change look&feel of your website and even hide certain elements on it, in case user has disabled Javascript in his or her browser.

Facebook is not working, when Javascript is disabled and world collapses, when Facebook is not working, thus no one serious is disabling Javascript nowadays.

Yet, I still think that a good web developer should be prepared for everything. Even for JS turned off…

Aug202012

Full-featured shooter in 20k of Javascript code!

adminJavaScript0 Comment

< 1 min. reading

KhanAcademy showed an example Javascript code on how to write a full-featured space-shooter written in just 1500 lines of code (20k of pure Javascript code after minification).

No matter, whether you are a JS-minification freak or just want to introduce some space shooter on your website to enjoy your visitors — this is certainly worth seeing. Of course, KhanAcademy offers a lot of more nifty Javascript examples.

Aug132012

Non-alphanumeric Javascript?

adminJavaScript0 Comment

2 min. reading

Ever heard about Brainfuck? It is an esoteric programming language? Designed with only one purpose — to test the boundaries of computer programming… and human brain. It uses only eight single characters ([, ], <, >, +, -, . and ,) as entire set of programming words. Yes, it really fucks your brain!

To mine extreme surprise with proper tools you can turn regular Javascript into very similar brainfucking experience!

Jul262012

Javascript dumping function

adminJavaScript0 Comment

2 min. reading

Jacascript debugging consoles are build-in to all web browsers. Either as core solution, some dev tools or available as plugins. If you don’t like them or want to use them, you can consider a pretty piece code, to dump any Javascript variable, that I found at openjs.com website.

Jul202012

Using AJAX head-type requests to check size of remote scripts

adminJavaScript0 Comment

2 min. reading

Checking size for inline scripts is as easy as document.getElementsByTagName('script')[0].text.length (solution taken from here). But, when it comes to measuring size of remote resources things gets a little bit complicated. Mostly due to cross-site restrictions and reducing unnecessary server load. Head-type of AJAX call, not so famous among developers, may help in this case.

Jul192012

The Javascript minifier and deminifier

adminJavaScript0 Comment

< 1 min. reading

brainjar.com’ scrunchinator is a Javascript code minifier, that I use most often.

As for reversing this process, you can use JS Beautifier or — if you’re an extension maniac — a Pretty Beautiful Javascript extension for Chrome (at GitHub you’ll find sources) and for Firefox.

Below JS Beautifier’s main window, you’ll find more useful links to tools like above.

Jul172012

Cross-browser function for adding an event listener

adminJavaScript0 Comment

2 min. reading

Here is a function that should work in virtually every browser, even really old ones. Of course, it is only useful, if you don’t use jQuery. Because, if you do, a far better way is to just call .on() or .bind() or .delegate() or .live() or whatever you want, and let jQuery do all the dirty work.