Tag Archives: jquery

jQuery UI Slider IE bugfix

Do your jQuery slider brakes under IE too?

When you want to null the sliders on an page, using jQuery UI Slider, somehow the following code works in any browser except IE.

// wrong
$('.my-slider').slider('value', 0);

I say somehow, because according to the documentation this code is simply wrong. It can be used to get the value of the slider as it is a getter. You can null the value with the following snippet.

// correct
$('.my-slider').slider('option', 'value', 0);

IE Fix

Another way to null the value is with an anonymous object.

// correct
$('.my-slider').slider({ value: 0 });

This works on every browser including IE.

jQuery.unbind()

Binding Problems

jQuery JavaScript Library
jQuery JavaScript Library

Typically in jQuery when you bind an HTML element with some event this event is fired every time the user (client) triggers it. Thus when you’ve a click event attached on a button you can click it as many times as you want. In some rare cases this can be tricky. Let’s imagine the following scenario.

  1. The user clicks on a “vote” button.
  2. Some AJAX calls are performed.
  3. After a successful AJAX call you setup a cookie to deny further votes from this machine.

This seems to be pretty well known scenario, but as the click event is attached to the button there is enough time to click several times on the “vote” button and to vote several times. In this case before the cookie is set the user can vote more than once. Continue reading jQuery.unbind()

Diving into Node.js – A Long Polling Example

Node.js vs. The World

What is typical for most of the web servers is that they listen for requests and respond as quickly as possible on every one of them. In fact the speed of the response is one of the main targets of optimization for developers. Fast servers are what everyone needs. From web developers to website visitors!

In the field of the that battle different web servers have different “weapons” to gain time. While this is useful in most of the cases, when it comes to a chat-like applications and Node.js approaches, the response is not always immediately returned. As I described in my posts until now about Node.js, a simple web server may wait for an event to be emitted, and than return the response. Continue reading Diving into Node.js – A Long Polling Example

jQuery: Setting Up a Vector Path Fill Color

It’s quite unusual to think of the jQuery’s attr() method as a generic method that can only change basic attributes as value, style, etc. However attr() can change whatever DOM element attribute. In this case you may know that the SVG path element can have a fill attribute, so you can simply setup a:

$('path').attr('fill', '#ccc');

2xjQuery: Select a Selector

Selectors in jQuery

jQuery JavaScript Library

If you’re familiar with jQuery you should already know what are selectors and how they work. However we’re used to get some DOM element with a specific selector, but actually sometimes you cannot select directly what you need. This is especially true when mixing more than one JavaScript libraries. In my case OpenLayers generated a vector layer and jQuery was supposed to change the vectors fill-color property.

OpenLayers

With the simple $(‘path’) I easily got all vectors in the current document, but the problem was that I took them as text. Thus it came to me to use nested jQuery – $($(‘selector’));

To describe what actually happened in my case, let me show you a breve example.

Example

Here’s a short HTML markup:

<div><span>text text</span></div>

With jQuery I can select both the DIV and SPAN with the simple $(‘div’) and $(‘span’), but just for the example lets assume I’ve only the inner text of the DIV tag:

$('div').html();

That was the case in the OpenLayers/jQuery problem. Now I can easily use another jQuery selector:

$($('div').html());

This will return the same as $(‘span’) – a jQuery object.