Alex's Rocket

Bug with Broken Ordered list in IE9

klalex — Sat, 11 Jun 2011 12:19:31 +0000

Recently I’ve been working with ordered lists. And found strange behavior in IE9 when one ordered list is hiding and new one is showing – instead of usual order 1,2,3.. it showed all zeros. And it actually doesn’t matter what list style type you choose – decimal, lower alpha or other.

Let me show you an example in case you do not have the same problem as well on your project:

<html>

<head>

<script type="text/javascript">

window.onload = function() {

        document.getElementById(‘lnk-one’).onclick = function() {

                document.getElementById(‘two’).style.display = ‘none’;

                document.getElementById(‘one’).style.display = ‘block’;

        };

        document.getElementById(‘lnk-two’).onclick = function() {

                document.getElementById(‘one’).style.display = ‘none’;

                document.getElementById(‘two’).style.display = ‘block’;

        };

}

</script>

</head>

<body>

<a href="#" id="lnk-one">One</a> <a href="#" id="lnk-two">Two</a>

<div id="one">

        <ol>

                <li>one</li>

                <li>two</li>

        </ol>

</div>

<div id="two" style="display:none">

        <ol>

                <li>three</li>

                <li>four</li>

        </ol>

</div>

</body>

</html>

If you open this HTML in IE9 and then click at first on “Two” link and then “One” you will see the issue:

Looks like order breaks in IE9 when one order is hidding then appears new one and then previous one is showing again. To quickly fix you need to place empty element say

in the end of the body and when you show ordered list just assing space to this element inner html. Here you are previous html page fixed:

<html>

<head>

<script type="text/javascript">

window.onload = function() {

        document.getElementById(‘lnk-one’).onclick = function() {

                document.getElementById(‘two’).style.display = ‘none’;

                document.getElementById(‘one’).style.display = ‘block’;

                document.getElementById(‘empty’).innerHTML = ‘ ‘;

        };

        document.getElementById(‘lnk-two’).onclick = function() {

                document.getElementById(‘one’).style.display = ‘none’;

                document.getElementById(‘two’).style.display = ‘block’;

                document.getElementById(‘empty’).innerHTML = ‘ ‘;

        };

}

</script>

</head>

<body>

<a href="#" id="lnk-one">One</a> <a href="#" id="lnk-two">Two</a>

<div id="one">

        <ol>

                <li>one</li>

                <li>two</li>

        </ol>

</div>

<div id="two" style="display:none">

        <ol>

                <li>three</li>

                <li>four</li>

        </ol>

</div>

<div id="empty"></div>

</body>

</html>

It’s important to place empty

after ordered lists. If you place it before – it won’t work.

OpenInviter and UTF8 encoding

klalex — Mon, 17 Jan 2011 20:29:17 +0000

If you need to import contacts from other services there is quite good cheap solution for PHP – open source library www.openinviter.net. It supports a huge amount of services and that’s awesome.

There is nice auto-installer and documentation. Here I just want to discuss an issue that you can experience – incorrect encoding of russian contact names.

To solve it replace in OpenInviter base class the following line:

$name=trim((!empty($arrayImport[‘first_name’])?$arrayImport[‘first_name’]:false).‘ ‘.(!empty($arrayImport[‘middle_name’])?$arrayImport[‘middle_name’]:false).‘ ‘.(!empty($arrayImport[‘last_name’])?$arrayImport[‘last_name’]:false).‘ ‘.(!empty($arrayImport[‘nickname’])?$arrayImport[‘nickname’]:false));

with

$name=utf8_decode(trim((!empty($arrayImport[‘first_name’])?$arrayImport[‘first_name’]:false).‘ ‘.(!empty($arrayImport[‘middle_name’])?$arrayImport[‘middle_name’]:false).‘ ‘.(!empty($arrayImport[‘last_name’])?$arrayImport[‘last_name’]:false).‘ ‘.(!empty($arrayImport[‘nickname’])?$arrayImport[‘nickname’]:false)));

The array declaration difference between Firefox and IE JavaScript interpreter

klalex — Fri, 21 May 2010 12:18:02 +0000

Found interesting difference in array declaration between FF and IE. For example, if leave comma (,) after all elements in array there will be different size of array as a result:

var arr = [1,2,3,];

document.write(arr.length);

As a result in Firefox and Safari it will write “3″ but in IE it will be “4″.

2010 Ukraine State Holidays

klalex — Sun, 02 May 2010 12:51:18 +0000

Always forget to remind clients about state holidays in Ukraine at least one week before. So decided to create the calendar for 2010 which includes all state holidays in Ukraine. Those days the Projestic team will be out of the office. If you work with development centers in Ukraine find attached calendar file.

2010 Ukraine State Holidays

Using arrays in form element names

klalex — Mon, 27 Jul 2009 13:08:35 +0000

Sometimes there is variable number of similar elements on a form. For example, phone numbers. To iterate all filled values on the server it will be nice to use arrays. And form element naming allow it:

<form method="post">

<input type="text" name="phone[0]" />

<input type="text" name="phone[1]" />

…

</form>

Using PHP it’s easy to iterate through those values now:

foreach ($_POST[‘phone’] as phone) {

// do something with phone, save in the database

}

But how to access those values with JavaScript? In case we need to validate required fields, for example. It’s easy to suppose that document.forms[0].phone[0].value returns value. Actually no. In this case we need to use document.forms[0].elements array and access by key:

alert(document.forms[0].elements["phone[0]"].value);

Using arrays in form element naming allows us to control the variable number of form elements. For example, we can add link “Add another phone” and when user clicks on it add new field. And we do not need to change anything in PHP code because it will iterate all values that we have passed to the server.

Background music on web site

klalex — Fri, 24 Jul 2009 14:33:21 +0000

Just curious do you like to hear music when you open a web site? Some clients I work with still asking me to place background music on their site. It can create some atmosphere when you open site, I agree. But what if people do not like it? It’s possible that users that come to the site are listening music in media player. Then it creates a crazy mix and first second you even do not understand what’s going on. Especially if you are surfing not one website at once. And many people do it. So I really concerned is it usable to set background music and whether it will attract visitors or just make them do not return back again.

If you decided to place background music you should place Pause/Play buttons at least to give visitors control over the playing.

jQuery UI: Datepicker for birth date input

klalex — Sat, 11 Jul 2009 17:24:20 +0000

I decided to use jQuery UI Datepicker control for one of project and faced with the some strange behavior. At first, I decided to find a way to select month and year quickly because switching months with previous button will unhappy every user. So I’ve added the following options:

$(‘#datepicker’).datepicker({

    changeMonth: true,

    changeYear: true

});

Well it’s much better already but here I found that not much years are displayed in the dropdown – only from 1999 to 2019. I spent about minute to find out that range changes when I select year. So it shows -10 year as down date and +10 years as up value (from client I just got email that he cannot select his birth year so I bet whether this logic of work is useful).

To set fixed range of years in dropdown you need to use yearRange option. For instance, in my case it is:

$(‘#datepicker’).datepicker({

    changeMonth: true,

    changeYear: true,

    yearRange: ’1910:2000′

});

Another interesting thing is that datepicker doesn’t allow me to select my birth day :) When I select March 1983 it shows days from 1 to 5 only:

Really like this saying

klalex — Fri, 26 Jun 2009 20:31:40 +0000

“Everything in the world is now real time. So when a certain type of shoe isn’t selling at your corner shop, it’s not six months before the guy in China finds out. It’s almost instantaneous, thanks to my software.”

by Vivek Ranadive, founder and CEO of Tibco

Open link in a new window in XHTML 1.0 Strict

klalex — Tue, 23 Jun 2009 21:33:35 +0000

As you may notice using target=”_blank” breaks XHTML 1.0 Stric validation. And here you are a solution with jQuery:

Add rel=”external” for links that you want to be opened in a new window
Include the following jQuery script:

$(function() {
$("a[rel*='external']").click(function() {
window.open($(this).attr(‘href’), ‘external’, ”);
return false;
});
});

But I agree that it’s annoying when link is opening in new tab(window) without your acceptance. Even for external links users can use hot key combination (Command + T in mac os or Ctrl + T in windows) to open a link in new tab. We should give user a choice to decide personally whether he/she wants to open a link in the same window or external. Or at least to notify somehow. Using popup window or even icon near the link that tells user that this link is external.

jQuery tips and tricks: ‘Add more’ functionality in a table

klalex — Mon, 22 Jun 2009 21:30:39 +0000

Usually we have ‘Add more’ link on the forms. For example, on the project I’m working on right now there is registration form and user with Advanced package can create a few accounts. So we have ‘Add more’ link that should add one more row with Name, Email and Password for adding another account. Because we use table in HTML for placing data fields, new row will be TR actually. And there is a little trick to add it.

Here you are:

$(function() {

  $("#add_more").click(function() {

    $("form table tr:last").after(‘…’);

  });

});

At first, I add click event handler on ‘Add more’ link. In even handler declaration I find the last TR block in the table. Then use after() method to add new TR row.