Tag Archives: DOM

Computer Algorithms: Finding the Lowest Common Ancestor

algorithms, data structures, , , , , , , , , , , , ,

Introduction

Here’s one task related to the tree data structure. Given two nodes, can you find their lowest common ancestor?

In a matter of fact this task always has a proper solution, because at least the root node is a common ancestor of all pairs of nodes. However here the task is to find the lowest one, which can be quite far from the root.

Finding the Lowest Common Ancestor
Finding the Lowest Common Ancestor

We don’t care what kind of trees we have. However the solution, as we will see, can be very different depending on the tree type. Indeed finding the lowest common ancestor can have linear complexity for binary search trees, which isn’t true for ordinary trees. Continue reading Computer Algorithms: Finding the Lowest Common Ancestor →

Computer Algorithms: Bubble Sort

algorithms, , , , , , , , , , , , , , , , ,

Overview

It’s weird that bubble sort is the most famous sorting algorithm in practice since it is one of the worst approaches for data sorting. Why is bubble sort so famous? Perhaps because of its exotic name or because it is so easy to implement. First let’s take a look on its nature.

Bubble sort consists of comparing each pair of adjacent items. Then one of those two items is considered smaller (lighter) and if the lighter element is on the right side of its neighbour, they swap places. Thus the lightest element bubbles to the surface and at the end of each iteration it appears on the top. I’ll try to explain this simple principle with some pictures.

1. Each two adjacent elements are compared

In bubble sort we've to compare each two adjacent elements
In bubble sort we've to compare each two adjacent elements

Here “2” appears to be less than “4”, so it is considered lighter and it continues to bubble to the surface (the front of the array).
Continue reading Computer Algorithms: Bubble Sort →

jQuery: Setting Up a Vector Path Fill Color

micro tutorial, , , , , , , , , , ,

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

javascript, micro tutorial, , , , , , , , , , , , , , , , , ,

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.

OpenLayers Can Be Faster!

javascript, micro tutorial, , , , , , ,

Put All The Markers at Once!

The way OpenLayers puts markers on the stage is fine when they are not so much, but once you need more than 100, the library’s solution is not good. The question is is there a way to put all the markers faster than the built in method.

Yes, There is a Way to Speed Up Markers Load

I once wrote about how to speed up markers on OpenLayers, it is clear that my decision was to concatenate the DOM elements like a string after I’ve generated all the markers as markup with innerHTML as it’s faster than appendChild. The only question left is how to convert Longitude/Latitude pair in pixels.

The Answer’s Given by OpenLayers

There is a method called getLayerPxFromLonLat() which do the job. Let me show you a snippet:

ll = map.getLayerPxFromLonLat(new OpenLayers.LonLat(lon,lat));
console.log(ll);

You can see what’s inside the ll object. You can now reference the pixel as ll.y and ll.x.