Hey, there's a special tumblr accont to get an inspitation for this:
Tuesday, February 5, 2013
Tuesday, January 22, 2013
html vs dthml vs xhtml differences
 |
| Source: http://milhaniqbal.com/webplatform-the-new-site-for-web-standards/140 |
I. The basics
HTML and XHTML are different sematics, while dHTML (DHTML) is a name of technology.Using DHTML pretends to use HTML, CSS and Javascript together to create dynamic web pages and response to what a user does on a page.XHTML 1.0 as a standard was published in 2000. Shortly after this working group started discussions of XHTML 2.0 which is still work. See reports on w3.org
II. MIME type
XHTML has to have application/xhtml+xml, application/xml, or text/xml type.III. The Semantics
XHTML has stricter rules semantically as an extension of XML.
For example:
The root element of an XHTML document must be - XHTML elements must be properly nested.
- XHTML elements must always be closed.
- XHTML elements must be in lowercase.
- XHTML documents must have one root element.
- XHTML elements must quoted attribute values
html:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Monday, January 21, 2013
jquery get events on element
$._data($(SELECTOR).get(0), "events")before v1.9 in was also possibe by calling
$(SELECTOR).data("events")but by no this one is deprecated.
More info on this: http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/
Monday, December 10, 2012
.png){kind=icon}
Wednesday, August 29, 2012
wireframe vs mock-up vs prototype
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);
})
}
}
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);
})
}
}
Subscribe to:
Posts (Atom)