Date, time and other web selectors with mobile appearance.

Sometimes, it may be interessant (and perhaps easier and faster) to develop web-apps instead of native mobile apps. But the main issue is about the appearance problem. Nowadays, all those problems are minimized with html5, css3 and (eg. jQuery) JS libraries.

Today I’m not presenting any own source code, I just share a jQuery plugin that I found on web, to avoid appeareance problems on web-apps (at least in selectors). Their site is Mobiscroll, and you can find some sampleson their demo page . With that plugin, you can present simple date (or other selector) input forms, looks like:


Android system.


iOS system.


Or even HTC Sense.

And of course, as always with jQuery usage ease and MIT license.

Source: Mobiscroll developer by Acid Media.

Read More

Differences on DOM javascript setAttribute method between IE & other browsers.

Because a project of my job, I’m working in a dinamic creation of a webpage using Javascript to handle DOM.

Today I realised, that my original code (according to W3C) does not work properly with any version of IE, so for example, originally to create a input element I did:

1
2
3
4
5
6
7
8
9
// code
INPUTELM = document.createElement('input');
INPUTELM.setAttribute('name', 'codes[]');
INPUTELM.setAttribute('type', 'text');
INPUTELM.onkeyup = function(){ChangeSelectArticleByValue(this.value,'article' + (num_linies-1))}
INPUTELM.setAttribute('class', 'boxes');
INPUTELM.setAttribute('id', 'code' + (num_linies-1));
INPUTELM.setAttribute('tabindex',tabIndex);
// more code

The class attribute was not set, neither tabindex. After searching for a while I found that I might use (new methods below each one, lines 7 and 10)

1
2
3
4
5
6
7
8
9
10
// code
INPUTELM = document.createElement('input');
INPUTELM.setAttribute('name', 'codes[]');
INPUTELM.setAttribute('type', 'text');
INPUTELM.onkeyup = function(){ChangeSelectArticleByValue(this.value,'article' + (num_linies-1))}
INPUTELM.setAttribute('class', 'boxes');
INPUTELM.className= 'boxes'; // ADDED LINE
INPUTELM.setAttribute('id', 'code' + (num_linies-1));
INPUTELM.setAttribute('tabindex',tabIndex);
INPUTELM.tabIndex = tabIndex; // ADDED LINE

So mainly it seems that we might:

  • Use setAttribute for all most browsers, and the property for IE. Each browser will execute their code and avoid the other one.
  • To set class, use className because “class” is a JS reserved word.
  • Note uppercase in two or more words attributes.

I will edit this post if I deep on this.

 

Read More