Posts in Category: Development

Working with quarters in JavaScript

Today my friend was working on a tool and a part of his task was to define a quarter of a given date and also to define its borders. I had spare time and tried to join this job.

The first thing we did was googling for it, and the result was this helpful topic: Math.floor((date.getMonth() + 3) / 3), but after that the task of finding start and end dates of a quarter still remained.

While I was busy with monkey coding this function:

function getQuarterBounds(date) {
    date = date || new Date();

    var q = Math.floor((date.getMonth() + 3) / 3);
    var year = date.getFullYear();
    var quarters = {
        1: {
            start: '01-01',
            end: '03-31'
        }, 2: {
            start: '04-01',
            end: '06-30'
        }, 3: {
            start: '07-01',
            end: '09-30'
        }, 4: {
            start: '10-01',
            end: '12-31'
        }
    };

    return [
        new Date(year + '-' + quarters[q].start),
        new Date(year + '-' + quarters[q].end)
    ];
}

My friend noticed that setMonth() function has a second argument which is a day, and when it is equal to 0 then the result date will be the last day of a previous month, -1 sets one more day before that day and so on.

This functionality was very helpful in our case:

function getQuarterBounds(date) {
    date = date || new Date();

    return [
        new Date(new Date().setMonth(
            date.getMonth() - date.getMonth() % 3, 1)),
        new Date(new Date().setMonth(
            date.getMonth() + 3 - date.getMonth() % 3, 0))
    ];
}

Year, sometimes you have to recall sad “RTFM” expression

Simple Combobox jQuery plugin

This spring it was the first time I worked as a freelancer. My main task was scripting a form with autocomplete elements. These elements were connected with each other. I decided it would be easier to work around own mechanism of autocomplete combobox component. The first thing I did was a simple html markup and several listeners. I managed comboboxes (primarily refilling and setting as disabled) manually. After I finished the job I thought about making a jQuery plugin from the stuff. Finally I ended up with this.

Led Marqee with JavaScript

Sometimes you have spare time on your job. It’s very cool especially when there are only few days before the New Year left. These days are usually not loaded with job at all what is opposite to mid December, time with a peak activity. Code something personal is almost always much more interesting than code somebody’s task. Probably this is just because of when you code something for yourself you pick out something what is really very interesting for you to code.

One day I was wondering how led marquee is working in the subway car, that is how its messages are encoded and then animating on the screen.

I tried to google for it and got the idea, but then I started to google it for JavaScript examples. I took one algorithm as a core (I’m so sorry I didn’t succeeded to find its URL now, hope I’ll add it sometime) and then tried to code something more stylish and functional based on it.

A year has passed since that time, my code structure probably would be a bit more clear if I start it now, but anyhow the page seems quite nice to me and I would like to share it.

I think you can get everything from the page, because it’s so simple.

Of course I would like to change the pixel state not immediately. But if I try to use animation for changing pixels’ opacity, the page become very slow. Probably Flash would work just fine here or maybe HTML5 canvas would solve this problem great also.

After the job was finished by December 31, I went to my friend to celebrate the New Year. It was great. I enjoyed the company and atmosphere, and right the next day I sent the link with “Happy New Year, %username%!” to close friends of mine.

That is funny, but sometimes you’re in a rush even when coding something completely yours

See the page, download a zip, GitHub.

About table with `display: block` and `overflow-y: auto`

Few days ago my college and I had a page with an extra wide table on it which breaked the page body that is the horizontal scroll appeared on the whole page. We solved the problem with adding the following style on the table: { display: block; overflow-y: auto; max-width: 10px /* any low value here */ }.

But as you may know the tables are not supposed to wear display: block CSS declaration and that was why we failed trying to create something universal for all the tables.

We decided we have to check if the table is extra wide or not and found a quite simple solution, this small: jquery plugin from the answer:

$.fn.hasOverflow = function() { 
    var $this = $(this); 
    var $children = $this.find('*'); 
    var len = $children.length; 
 
    if (len) { 
        var maxWidth = 0; 
        var maxHeight = 0 
        $children.map(function() { 
            maxWidth = Math.max(maxWidth, $(this).outerWidth(true)); 
            maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); 
        }); 
 
        return maxWidth > $this.width() || maxHeight > $this.height(); 
    } 
 
    return false; 
};

We edited it first to make it taking only width in account and then used it in the following way: $('body').hasOverflow().

But it did not work somethimes (probably something more has been changed on the page) and what is also bad thing is that it selects so huge amount of elements on a big pages that it really impacts the performance. But the next day we started to solve it again and in a few minutes we came with a very simple solution:

$(window).width() < $('body')[0].scrollWidth

It works fine by now! We needed just to sleep on it

`for (var i in arr)` behavior in IE8 after extending Array.prototype

Few days ago I decided to see how is my jQuery plugin doing in IE8. I think to predict what happened next is not much more difficult than to guess how a classical Hollywood melodrama ends. There were errors in the script.

Due to the IE console is incredibly poor I spent a lot of time considering what was going and faced an interesting phenomenon. As you know, IE8 like all other desktop browsers from Microsoft corporation is heavily outdated since the time it was released. For instance, there is luck of some methods from Array.prototype, such as very handy and quite popular indexOf(obj). I knew about that of course and that is why I added my missed.js script I use in many projects for a long time, which is a collection of declarations like:

if (!Array.prototype.indexOf) { 
    Array.prototype.indexOf = function(...) {...} 
}

This is strange it was the first time I faced the error only now, but anyhow it was the first time I saw how for (var i in arr) construction will work after extending Array.prototype if
arr is an array.

It turned out (what is clear on the one hand, but is not so predictable on the other) that in this case, i takes not only indices valus, but also not native methods from its (Array) prototype. That is why using such construction is not impossible without additional editings like doint continue if i is not a mumber.

After talking to my college about that I made a conclusion that if you dealing with arrays it is always better to use for (var i = 0; i < arr.length; i++) code.