Monday, December 10, 2012
Wednesday, August 29, 2012
wireframe vs mock-up vs prototype
Nice and small presentation on slideshare about the key idea of those concepts and their order during UI development: http://www.slideshare.net/voutulny/wireframe-vs-mockup-why-and-when
Thursday, August 23, 2012
document. Object properties
document.documentElement
References the root element of the document, in the case of HTML documents, the html element. This read only property is useful for accessing all elements on the page, such as the HEAD.
document.compatMode
The two possible values returned are "
BackCompat
" for Quirks and "CSS1Compat
" for Strict.document.documentMode
IE8 only property
document.readyState
IE property. Supported in Opera 9+, Chrome, and FF 3.6+ as well.
Returns the loading status of the document. It returns one of the below 4 values:
uninitialized | The document hasn't started loading yet. |
loading | The document is loading. |
interactive | The document has loaded enough whereby user can interact with it. |
complete | The document has fully loaded. |
See also:
Defining Document Compatibility : http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
DOM Document Object properties: http://www.javascriptkit.com/domref/documentproperties.shtml
Saturday, August 18, 2012
blinking loader with javascript
Recently saw a pretty simple ajax-loading image on workopolis.com. It's shown to visitors below the article text while comments are loading. For example you can see it in this article.
Here it is a easy gif file:
So i decided to do the same with only html and javascript.
And here is a JSFiddle - http://jsfiddle.net/a7bkU/44/
Actually the parameter in setTimeout call in drawLoader function is a bit tricky - one should play with it a little to customize it to fit a number of blinking circles. In other words, it must be small enough not to make all circles blink at the same time.
HTML
<div class="loading"></div>
CSS
.load-circle {
padding:8px;
background:#666;
border-radius: 10px;
display:inline-block;
margin:5px;
}
.loading {
margin:10px;
padding:10 20px;
}
JS
drawLoader(3, $('.loading'));
function drawLoader(n, element) {
//draw loading circles
for (i=0; i<n; i++) {
$(element).append('<div class="load-circle" />');
}
//for each start a blink action with apropriate time lag
$.each(jQuery('.load-circle'), function(index, item){
setTimeout(function(){
blinker.call(item, true);
}, index*400);
});
}
function blinker(dir){
//needed for recursive calls
//knowing in which direction
if(dir) {
$(this).animate({opacity: 0.25}, 800, function(){
blinker.call($(this), !dir);
})
} else {
$(this).animate({opacity: 1}, 800, function(){
blinker.call($(this), !dir);
})
}
}
Here it is a easy gif file:
So i decided to do the same with only html and javascript.
And here is a JSFiddle - http://jsfiddle.net/a7bkU/44/
Actually the parameter in setTimeout call in drawLoader function is a bit tricky - one should play with it a little to customize it to fit a number of blinking circles. In other words, it must be small enough not to make all circles blink at the same time.
HTML
<div class="loading"></div>
CSS
.load-circle {
padding:8px;
background:#666;
border-radius: 10px;
display:inline-block;
margin:5px;
}
.loading {
margin:10px;
padding:10 20px;
}
JS
drawLoader(3, $('.loading'));
function drawLoader(n, element) {
//draw loading circles
for (i=0; i<n; i++) {
$(element).append('<div class="load-circle" />');
}
//for each start a blink action with apropriate time lag
$.each(jQuery('.load-circle'), function(index, item){
setTimeout(function(){
blinker.call(item, true);
}, index*400);
});
}
function blinker(dir){
//needed for recursive calls
//knowing in which direction
if(dir) {
$(this).animate({opacity: 0.25}, 800, function(){
blinker.call($(this), !dir);
})
} else {
$(this).animate({opacity: 1}, 800, function(){
blinker.call($(this), !dir);
})
}
}
Thursday, August 9, 2012
ΠΊΠ°ΠΊ Π½Π°Π΄ΠΎ ΠΈ ΠΊΠ°ΠΊ Π½Π΅ Π½Π°Π΄ΠΎ ΠΏΠΈΡΠ°ΡΡ Π² jQuery
Π ΡΠ΅Π»ΠΎΠΌ ΡΡΠ°ΡΡΡ Π΄Π»Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ, Π½ΠΎ ΠΈΠ·Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π΅Π· Π½Π΅ΡΠ²ΠΎΠ² ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΠΎΠ΅.
ΠΡΡΡΠ΄Π°: http://habrahabr.ru/post/149237/
1. ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ Π³ΡΡΠΏΠΏ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
Π½Π΅ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΠ½ΠΎ, Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ$('.comment a.delete').click(function(){ // });
ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΠΌΠ΅ΡΠΎΠ΄ .on c jQuery 1.7
$('body').on('click', 'a.external', function(e) { // });
2. Ajax Π²ΡΠ·ΠΎΠ²Ρ
Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΠΏΡΡΠ°Π½ΠΈΡΠ°$.post(url, data, function(data) { // }, 'json').error(function() { /// });
Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ Ρ ΠΎΠ±ΡΠΈΠΌ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΠΎΡΠΈΠ±ΠΎΠΊ
$.ajaxSetup({ error: function() { // } });
ΡΠΈΡΠ°Π΅ΠΌΡΠΉ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ
$.ajax({ type: "POST" url: url, data: data, dataType: "json", success: function(data) { // }, error: function() { // } })
3. Namespaced events - Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈ ΡΠ΄Π°Π»ΡΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρhttp://docs.jquery.com/Namespaced_Events
Saturday, August 4, 2012
Subscribe to:
Posts (Atom)