tag:blogger.com,1999:blog-42255363722832539862024-03-12T17:26:53.883-07:00ThinkrementFilip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.comBlogger30125tag:blogger.com,1999:blog-4225536372283253986.post-44311967321162854192012-10-15T01:54:00.001-07:002012-10-15T01:55:58.257-07:00Handling cross-browser key events with jQueryAnother little copy-paste code fragment from the house of jQuery :) If you need to od different things on keydown event, use this basic structure, so it will be cross-browser friendly:<br />
<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12</pre>
</td><td><pre style="line-height: 125%; margin: 0;">jQuery(document).keydown(<span style="color: navy; font-weight: bold;">function</span> (e) {
<span style="color: navy; font-weight: bold;">var</span> evt=(e)?e:(window.event)?window.event:<span style="color: navy; font-weight: bold;">null</span>;
<span style="color: navy; font-weight: bold;">if</span>(evt){
<span style="color: navy; font-weight: bold;">var</span> key=(evt.charCode)?evt.charCode:((evt.keyCode)?evt.keyCode:((evt.which)?evt.which:<span style="color: blue;">0</span>));
<span style="color: #008800; font-style: italic;">// the key specific code comes here:</span>
console.log(key);
}
});
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
I've tested it on Chrome, FF and IE9-10, and it works well.Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com1tag:blogger.com,1999:blog-4225536372283253986.post-82289314608907066172012-10-10T05:49:00.001-07:002012-10-10T05:49:05.327-07:00Vertical centering text with CSSNowadays I get a lot of designs with vertically centered text in it. Sometimes the text is only a word but it can be multiple lines long too. The problem was, I could not determine, wether the printed text will be broken into multiple lines or not. Luckily, I have found a solution to this problem in pure CSS. This is instantly added to my sitebuilding template for future use.<br />
<br />
Here is a little demo showing how it works:<br />
<a href="http://cssdesk.com/K36px">http://cssdesk.com/K36px</a><br />
<br />
<br />
Let's see the code:<br />
<br />
<h3>
HTML</h3>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: navy; font-weight: bold;"><div</span> <span style="color: red;">class=</span><span style="color: blue;">"outer"</span><span style="color: navy; font-weight: bold;">></span>
<span style="color: navy; font-weight: bold;"><div</span> <span style="color: red;">class=</span><span style="color: blue;">"inner"</span><span style="color: navy; font-weight: bold;">></span>
<span style="color: navy; font-weight: bold;"><div</span> <span style="color: red;">class=</span><span style="color: blue;">"element"</span><span style="color: navy; font-weight: bold;">></span>Centered<span style="color: navy; font-weight: bold;"></div></span>
<span style="color: navy; font-weight: bold;"></div></span>
<span style="color: navy; font-weight: bold;"></div></span>
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<h3>
Default CSS</h3>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13</pre>
</td><td><pre style="line-height: 125%; margin: 0;">.outer {
<span style="color: navy; font-weight: bold;">display</span>: table;
<span style="color: navy; font-weight: bold;">height</span>: <span style="color: blue;">155px</span>;
<span style="color: navy; font-weight: bold;">overflow</span>: <span style="color: navy; font-weight: bold;">hidden</span>;
<span style="color: navy; font-weight: bold;">width</span>: <span style="color: blue;">980px</span>;
}
.outer .inner {
<span style="color: navy; font-weight: bold;">display</span>: <span style="color: navy; font-weight: bold;">table-cell</span>;
<span style="color: navy; font-weight: bold;">vertical-align</span>: <span style="color: navy; font-weight: bold;">middle</span>;
<span style="color: navy; font-weight: bold;">width</span>: <span style="color: blue;">100</span>%;
<span style="color: navy; font-weight: bold;">margin</span>: <span style="color: blue;">0</span> <span style="color: navy; font-weight: bold;">auto</span>;
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<br />
<h3>
CSS for IE</h3>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3</pre>
</td><td><pre style="line-height: 125%; margin: 0;">.outer { <span style="color: navy; font-weight: bold;">position</span>: <span style="color: navy; font-weight: bold;">relative</span>; }
.outer .inner { <span style="color: navy; font-weight: bold;">position</span>: <span style="color: navy; font-weight: bold;">absolute</span>; <span style="color: navy; font-weight: bold;">top</span>: <span style="color: blue;">50</span>%; }
.outer .inner .element { <span style="color: navy; font-weight: bold;">position</span>: <span style="color: navy; font-weight: bold;">relative</span>; <span style="color: navy; font-weight: bold;">top</span>: <span style="color: blue;">-50</span>%; }
</pre>
</td></tr>
</tbody></table>
</div>
Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-70760996826014941422012-10-08T06:57:00.002-07:002012-10-08T06:57:55.770-07:00Different font size for each font family<br />
No matter how surprising it is, there was no solution to change the font size based on the font family. Until now. :)<br />
<br />
<h3>
What is the problem?</h3>
I used two different fonts on a webpage. One is a simple Arial, the other is a custom font. The custom font requires a much bigger font size, to get the same result as the Arial.<br />
<br />
<h3>
What needed to be done?</h3>
I needed a solution, to change font size CSS properties on some of the elements, if the custom font is loaded. For example IE could not load it, so there should be Arial everywhere, but with a correct font size.<br />
<br />
<h3>
How is it done?</h3>
With Javascript of course. The basic idea is, to create a hidden element with some characters in it. This text has a different with on each font family. So I measured it with Arial, then I have set the font family to the custom value, and measured it again. It the element's width is different than the previous one, then the font is loaded. If the width of the element doesn't changes in 10seconds, the checking interval is cleared, so it doesn't uses the resources anymore. In the callback funcion, I just removed the ".no-custom-font" class from the body, so everything should look good now. Note, that I had to create some other CSS rules (and with the additional class, these rules have a higher specificity than the default ones) to set the right font size values.<br />
<br />
Okay, this worked fine in the project, so lets look at the code:<br />
<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: navy; font-weight: bold;">function</span> onWebFontLoaded(font, callback) {
<span style="color: #008800; font-style: italic;">// create a test element for each font</span>
jQuery(<span style="color: blue;">"body"</span>).append(<span style="color: blue;">"<div id=\'font_test\' style=\'position: absolute;left:-1000000px; top: -1000000px;font-size:300px;font-family:Arial;font-style:normal;font-weight:normal;letter-spacing:0px;\'>giItT1WQy@!-/#</div>"</span>);
<span style="color: navy; font-weight: bold;">var</span> width = jQuery(<span style="color: blue;">"#font_test"</span>).width();
jQuery(<span style="color: blue;">"#font_test"</span>).css(<span style="color: blue;">"font-family"</span>, font+<span style="color: blue;">", Arial"</span>);
<span style="color: navy; font-weight: bold;">var</span> timeWaited = <span style="color: blue;">0</span>;
<span style="color: navy; font-weight: bold;">var</span> intervalTime = <span style="color: blue;">200</span>;
<span style="color: navy; font-weight: bold;">var</span> maxWaitingTime = <span style="color: blue;">10000</span>; <span style="color: #008800; font-style: italic;">// 10 sec</span>
<span style="color: navy; font-weight: bold;">var</span> interval;
<span style="color: navy; font-weight: bold;">function</span> checkFont() {
timeWaited += intervalTime;
<span style="color: navy; font-weight: bold;">if</span>(jQuery(<span style="color: blue;">"#font_test"</span>).length > <span style="color: blue;">0</span> && jQuery(<span style="color: blue;">"#font_test"</span>).width() != width) {
callback();
jQuery(<span style="color: blue;">"#font_test"</span>).remove();
<span style="color: navy; font-weight: bold;">return</span> <span style="color: navy; font-weight: bold;">true</span>;
}
<span style="color: navy; font-weight: bold;">else</span> <span style="color: navy; font-weight: bold;">if</span>( timeWaited > maxWaitingTime) {
clearInterval(interval);
<span style="color: navy; font-weight: bold;">if</span>( <span style="color: navy; font-weight: bold;">typeof</span> console != <span style="color: blue;">"undefined"</span>) console.log(<span style="color: blue;">"font ("</span>+font+<span style="color: blue;">") not loaded."</span>);
}
<span style="color: navy; font-weight: bold;">return</span> <span style="color: navy; font-weight: bold;">false</span>;
}
<span style="color: navy; font-weight: bold;">if</span>(!checkFont()) {
interval = setInterval(checkFont, intervalTime);
}
};
jQuery(document).ready(<span style="color: navy; font-weight: bold;">function</span>() {
onWebFontLoaded(<span style="color: blue;">'AGENCYR'</span>, <span style="color: navy; font-weight: bold;">function</span>() {
<span style="color: #008800; font-style: italic;">// remove the no-font-... class from the body tag</span>
jQuery(<span style="color: blue;">".no-font-AGENCYR"</span>).removeClass(<span style="color: blue;">"no-font-AGENCYR"</span>);
});
});
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<br />Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-3570908789240987152012-10-03T02:58:00.001-07:002012-10-03T02:58:31.775-07:00Get single corners rounded with CSS3<br />
There are a lot of posts about making rounded corners with CSS3. But, I haven't found a good, compact one about how to do it only with one corner and as cross-browser friendly as possible.<br />
<br />
So, this little post is to remind myself (and others) how to do it. The code is not so short considering what I would like to achieve...there quite a few rows for this task...but, let's talk code:<br />
<br />
<blockquote>-moz-border-radius-topleft: 10px;<br />
-webkit-border-top-left-radius: 10px;<br />
-khtml-border-top-left-radius: 10px;<br />
border-top-left-radius: 10px;<br />
</blockquote><br />
I have also added a little macro to my Netbeans install like this:<br />
<br />
rclt: (rounded corners left top)<br />
<blockquote>-moz-border-radius-topleft: ${VAR}px;<br />
-webkit-border-top-left-radius: ${VAR}px;<br />
-khtml-border-top-left-radius: ${VAR}px;<br />
border-top-left-radius: ${VAR}px;${cursor}<br />
</blockquote><br />
rcrt: (rounded corners right top)<br />
<blockquote>-moz-border-radius-topright: ${VAR}px;<br />
-webkit-border-top-right-radius: ${VAR}px;<br />
-khtml-border-top-right-radius: ${VAR}px;<br />
border-top-right-radius: ${VAR}px;${cursor}<br />
</blockquote><br />
And so on...<br />
Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-87793572730132792192012-04-17T00:33:00.001-07:002012-04-17T00:33:41.762-07:00Javascript: Count a string occurence in text<br />
While working on my favorite project I had to count the colons in a string. I was wondering which could be the best solution. I had two methods in my mind to solve that.<br />
<br />
The first is the "split" method:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">var</span> text = <span style="color: #aa5500">'text text text: text2: text3::'</span>;
<span style="color: #0000aa">var</span> colon_length = text.split(<span style="color: #aa5500">":"</span>).length - <span style="color: #009999">1</span>;
</pre></div><br />
<br />
The other one is the "RegExp" method:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">var</span> text = <span style="color: #aa5500">'text text text: text2: text3::'</span>;
<span style="color: #0000aa">var</span> colon_length = text.match(<span style="color: #009999">/:/g</span>).length;
</pre></div><br />
<br />
After googling for a while I found a test which one is better:<br />
<a href="http://jsperf.com/count-the-number-of-occurances-in-string">http://jsperf.com/count-the-number-of-occurances-in-string</a><br />
<br />
<br />
Well, that graph is self explanatory I guess :) (Thanks jsPerf.com)<br />
<br />
<br />
<br />
In the mean time I stumbled into this solution which I think is quite interesting:<br />
<a href="http://www.codecodex.com/wiki/index.php?title=Count_the_number_of_occurrences_of_a_specific_character_in_a_string#JavaScript">http://www.codecodex.com/wiki/index.php?title=Count_the_number_of_occurrences_of_a_specific_character_in_a_string#JavaScript</a><br />
<br />
This is the code:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #00aaaa">String</span>.prototype.count=<span style="color: #0000aa">function</span>(s1) {
<span style="color: #0000aa">return</span> (<span style="color: #0000aa">this</span>.length - <span style="color: #0000aa">this</span>.replace(<span style="color: #0000aa">new</span> <span style="color: #00aaaa">RegExp</span>(s1,<span style="color: #aa5500">"g"</span>), <span style="color: #aa5500">''</span>).length) / s1.length;
}
</pre></div><br />
<br />
And this is the usage:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #aaaaaa; font-style: italic">// use like this </span>
test = <span style="color: #aa5500">"this, as you see, is a sentence, containing many ','s"</span>;
numberOfCommas = test.count(<span style="color: #aa5500">','</span>); <span style="color: #aaaaaa; font-style: italic">//4</span>
<span style="color: #aaaaaa; font-style: italic">// or </span>
numberOfSblank = test.count(<span style="color: #aa5500">'s '</span>); <span style="color: #aaaaaa; font-style: italic">//2</span>
</pre></div><br />
<br />
But because in my project I have to use a minimal amount of global footstep I sticked to the "RegExp" method.<br />
<br />Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-28327363159674201652012-04-11T08:38:00.001-07:002012-04-11T08:48:05.728-07:00Copy jQuery click event from one element to another<br />
<br />
Today I had to solve a task wich seemed to be quite easy... I had to copy a "click" event from an element. To copy an "onclick" attribute...it's a piece of cake. BUT, how do you copy a jQuery "click" event?<br />
<br />
I found an interesting conversation about this problem here, but I couldn't find a solution for my problem:<br />
<a href="http://forum.jquery.com/topic/how-do-i-copy-the-click-event-from-one-element-to-another">http://forum.jquery.com/topic/how-do-i-copy-the-click-event-from-one-element-to-another</a>.<br />
<br />
I'm not 100% sure you understand my problem, so here are some example codes:<br />
<br />
<br />
This is a common "a" tag with an onclick attribute:<br />
<br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: dodgerblue; font-weight: bold;"><a</span> <span style="color: dodgerblue;">href=</span><span style="color: #aa5500;">"javascript:void(null)"</span> <span style="color: dodgerblue;">onclick=</span><span style="color: #aa5500;">"alert('onclick event triggered')"</span> <span style="color: dodgerblue;">id=</span><span style="color: #aa5500;">"test_element"</span><span style="color: dodgerblue; font-weight: bold;">></span>Trigger OnClick<span style="color: dodgerblue; font-weight: bold;"></a></span>
</pre></div><br />
This click event can be copied with this code:<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">jQuery(<span style="color: #aa5500">"#test_element"</span>).attr(<span style="color: #aa5500">"onclick"</span>)
</pre></div><br />
<br />
<br />
<br />
BUT, what's the case with this method?<br />
<br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: dodgerblue; font-weight: bold;"><a</span> <span style="color: dodgerblue;">href=</span><span style="color: #aa5500;">"javascript:void(null)"</span> <span style="color: dodgerblue;">id=</span><span style="color: #aa5500;">"test_element"</span><span style="color: dodgerblue; font-weight: bold;">></span>Trigger OnClick<span style="color: dodgerblue; font-weight: bold;"></a></span>
</pre></div><br />
And with this Javascript:<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">jQuery(<span style="color: #aa5500">"#test_element"</span>).click(<span style="color: #0000aa">function</span>() {
alert(<span style="color: #aa5500">"jQuery click event triggered"</span>);
})
</pre></div><br />
<br />
<br />
<br />
How do I copy this click event?<br />
<br />
Well, I dove in jQuery-s source code because I knew it can be done. jQuery has a .clone() function which has an attribute to decide, whether to copy the events too or not. This is what I found:<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">function</span> cloneCopyEvent( src, dest ) {
<span style="color: #0000aa">if</span> ( dest.nodeType !== <span style="color: #009999">1</span> || !jQuery.hasData( src ) ) {
<span style="color: #0000aa">return</span>;
}
<span style="color: #0000aa">var</span> type, i, l,
oldData = jQuery._data( src ),
curData = jQuery._data( dest, oldData ),
events = oldData.events;
<span style="color: #0000aa">if</span> ( events ) {
<span style="color: #0000aa">delete</span> curData.handle;
curData.events = {};
<span style="color: #0000aa">for</span> ( type <span style="color: #0000aa">in</span> events ) {
<span style="color: #0000aa">for</span> ( i = <span style="color: #009999">0</span>, l = events[ type ].length; i < l; i++ ) {
jQuery.event.add( dest, type, events[ type ][ i ] );
}
}
}
<span style="color: #aaaaaa; font-style: italic">// make the cloned public data object a copy from the original</span>
<span style="color: #0000aa">if</span> ( curData.data ) {
curData.data = jQuery.extend( {}, curData.data );
}
}
</pre></div><br />
<br />
The most interesting part is this:<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">oldData = jQuery._data( src ),
curData = jQuery._data( dest, oldData ),
events = oldData.events;
</pre></div><br />
<br />
The events are saved inside (jQuery._data( src )).events. To stay by my example, the solution will look like this:<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">(jQuery._data( jQuery(<span style="color: #aa5500">"#test_element"</span>)[<span style="color: #009999">0</span>] )).events.click[<span style="color: #009999">0</span>].handler
</pre></div><br />
<br />
This way I can make a copy of the function bound to the element. And of course, if there are more bindings to one element, they can be reached with "...click[1].handler", "...click[2].handler", etc.<br />
<br />
<br />
I hope this little trick helped you too.<br />
<br />
<br />
<br />
<br />
<br />Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-41426033023705716652012-03-23T06:06:00.000-07:002012-03-23T06:06:38.722-07:00jQuery simple banner rotator pluginToday I had a task, to create a simple image (banner) rotator in Javascript...so I thought: If I have to do it, then do it right and created a simple jQuery plugin. The code is really easy to understand... here is the essence of it:<br />
<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">setInterval(<span style="color: #0000aa">function</span> () {
<span style="color: #0000aa">var</span> items = jQuery( jQuery(options.items, <span style="color: #0000aa">this</span>).get().reverse());
items.each(<span style="color: #0000aa">function</span> () {
<span style="color: #aaaaaa; font-style: italic">// if visible, than hide</span>
<span style="color: #0000aa">if</span> (jQuery(<span style="color: #0000aa">this</span>).is(<span style="color: #aa5500">":visible"</span>)) {
jQuery(<span style="color: #0000aa">this</span>).fadeOut();
<span style="color: #0000aa">return</span> <span style="color: #0000aa">false</span>;
}
});
<span style="color: #aaaaaa; font-style: italic">// if nothing more to hide, show all</span>
<span style="color: #0000aa">if</span>( jQuery(<span style="color: #aa5500">":visible"</span>, items).length <= <span style="color: #009999">1</span> ) items.fadeIn();
}, options.timeout);
</pre></div><br />
<br />
Basically there is an interval and it's hiding all the items backwards. When they are all hidden, then show them. Because the items are positionated "absolute" they are overlapping eachother. So when I hide one, another appears. <br />
<br />
<br />
That's it. Simple and small! :)<br />
<br />
<br />
<br />
Here is the full code:<br />
<a href="http://phil.hu/Thinkrement/bannerRotate/jquery.bannerRotate.js">jQuery.bannerRotate.js</a><br />
<br />
Cheers,<br />
Phil<br />Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-28714472614119531732012-03-14T01:31:00.003-07:002012-03-14T01:31:37.858-07:00How to build an HTML emailThis is just a quick summary on how to create an HTML email:<br />
<br />
DON'T use:<br />
- "div"<br />
- "padding"<br />
- "background-image"<br />
<br />
DO use:<br />
- images<br />
- "background-color" -s<br />
- "width" with exact px values<br />
- "table" -s (even if normally you would use a "div")<br />
- inline styles everywhere<br />
<br />
This list will be expanded over time and experience or if you have some own rule-of-thumb please share it with us.Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-76598273228385612142012-02-23T07:09:00.000-08:002012-02-23T07:09:27.710-08:00MySQL - Order users by addressToday I encountered a little SQL problem I had to solve...so here is the task:<br />
<br />
Order the users by their address. Basically this isn't a big thing, but I had all the address parts separatedly in the database. There is a coloumn for the city, street...parts.<br />
<br />
Here is the solution:<br />
<br />
<span style="color:#200080; font-weight:bold; ">SELECT</span> <span style="color:#ffffff; background:#dd9999; font-weight:bold; font-style:italic; ">*</span><span style="color:#406080; ">,</span> <span style="color:#400000; ">CONCAT_WS</span><span style="color:#308080; ">(</span><span style="color:#1060b6; ">' '</span><span style="color:#406080; ">,</span> <span style="color:#800000; ">`</span><span style="color:#000020; background:#f6f8ff; ">users</span><span style="color:#800000; ">`</span><span style="color:#308080; ">.</span><span style="color:#800000; ">`</span><span style="color:#000020; background:#f6f8ff; ">zipcode</span><span style="color:#800000; ">`</span><span style="color:#406080; ">,</span> <span style="color:#800000; ">`</span><span style="color:#000020; background:#f6f8ff; ">users</span><span style="color:#800000; ">`</span><span style="color:#308080; ">.</span><span style="color:#800000; ">`</span><span style="color:#000020; background:#f6f8ff; ">city</span><span style="color:#800000; ">`</span><span style="color:#406080; ">,</span> <span style="color:#800000; ">`</span><span style="color:#000020; background:#f6f8ff; ">users</span><span style="color:#800000; ">`</span><span style="color:#308080; ">.</span><span style="color:#800000; ">`</span><span style="color:#000020; background:#f6f8ff; ">street</span><span style="color:#800000; ">`</span><span style="color:#406080; ">,</span> <span style="color:#800000; ">`</span><span style="color:#000020; background:#f6f8ff; ">users</span><span style="color:#800000; ">`</span><span style="color:#308080; ">.</span>`housenumber<span style="color:#308080; ">)</span>` <span style="color:#200080; font-weight:bold; ">AS</span> address <span style="color:#200080; font-weight:bold; ">FROM</span> <span style="color:#308080; ">(</span><span style="color:#800000; ">`</span><span style="color:#000020; background:#f6f8ff; ">users</span><span style="color:#800000; ">`</span><span style="color:#308080; ">)</span> <span style="color:#200080; font-weight:bold; ">ORDER</span> <span style="color:#200080; font-weight:bold; ">BY</span> <span style="color:#800000; ">`</span><span style="color:#000020; background:#f6f8ff; ">address</span><span style="color:#800000; ">`</span> <span style="color:#200080; font-weight:bold; ">asc</span><span style="color:#406080; ">,</span> <span style="color:#800000; ">`</span><span style="color:#000020; background:#f6f8ff; ">name</span><span style="color:#800000; ">`</span> <span style="color:#200080; font-weight:bold; ">ASC</span><br />
<br />
<br />
This is not such a great achievement, but it's good for reminding myself about this cool trick.Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-36026228201675087952011-12-14T00:59:00.000-08:002011-12-14T01:00:17.266-08:00Javascript: Is date in range?Today I encountered a little problem wich I had to solve with dates. I had to check, if today has a special event. The range is stored in a simple date format: YYYY.MM.DD-YYYY.MM.DD<br />
<br />
Here is the solution:<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">var</span> nowDate = <span style="color: #0000aa">new</span> <span style="color: #00aaaa">Date</span>(<span style="color: #009999">2011</span>, <span style="color: #009999">12</span>, <span style="color: #009999">14</span>).getTime();
<span style="color: #0000aa">var</span> startDate = <span style="color: #0000aa">new</span> <span style="color: #00aaaa">Date</span>(<span style="color: #009999">2011</span>, <span style="color: #009999">12</span>, <span style="color: #009999">13</span>).getTime();
<span style="color: #0000aa">var</span> endDate = <span style="color: #0000aa">new</span> <span style="color: #00aaaa">Date</span>(<span style="color: #009999">2012</span>, <span style="color: #009999">1</span>, <span style="color: #009999">5</span>).getTime();
<span style="color: #0000aa">if</span> (startDate <= nowDate && nowDate <= endDate) {
alert(<span style="color: #aa5500">'It\'s in range!'</span>);
}
</pre></div><br />
<br />
The "getTime()" method will create a timestamp from the created date. It's like a date in a number format wich can be easily compared to eachother.Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com1tag:blogger.com,1999:blog-4225536372283253986.post-44566949814261659352011-10-26T15:18:00.000-07:002011-10-26T15:18:09.501-07:00Complete website on client side?Javascript became very popular these days. There are countless frameworks and plugins developed to make our web developer life easier. But... I have a question. <br />
<br />
What are the limits of Javascript? Can we make a complete website to work only on client side? <br />
<br />
I'm developing a very interesting project recently. I have to solve everything (even content search) in the browser. The website has no contact to the internet at all...Yes. A website without internet connection or server contact. It will be an information box with touch screen on my former college. It will work as a digital doorman and it's quite nifty (and heavy like a mountain). Our designer did his job very well. It has now a very nice touch compatible interface. (Print screens and actual "in-use" images soon)<br />
<br />
The computer runs on Ubuntu and unfortunately nobody knows the root password :) That's why I'm sticked with Firefox. The base hardware is... very environment (therefore not too user-experience) friendly, but I will do my best. Later, when I will have more time I will reinstall the system and use Chrome instead. The Javascript animations are much faster there. And I did a little test with flash. Surprisingly (at least for me) Opera handles Flash animation much more smoothly than any other browser. I designed a little active backgound for the whole system, and it looked awesome in Opera (I tested it with an Ubuntu live CD).<br />
<br />
I have came up with a solution, I just want to test it. If it works, I will write a full post about it. If it won't than I will write it down, why it didn't worked.<br />
<br />
But now I have a very tight deadline so I stop writing posts and go back to work :)<br />Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-1577299310391868242011-10-23T03:53:00.000-07:002011-10-23T03:53:14.596-07:00JavaScript: Objects and the this keywordRight now, I'm developing a complex jQuery plugin with a bunch of objects. Most of the these are connected together somehow in each others' definition. In one of these objects, the <span style="color: #0000aa">this</span> keyword referenced to another object and I was not able to find a variable related to my object. The reason was I had to call one of its function in another <b>context</b> and with <b>another</b> this object. Here is the example:<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">var</span> obj = <span style="color: #0000aa">function</span>() {
<span style="color: #aaaaaa; font-style: italic">/* Private variables */</span>
<span style="color: #0000aa">var</span> v1 = <span style="color: #009999">0</span>;
<span style="color: #0000aa">var</span> v2 = <span style="color: #009999">0</span>;
<span style="color: #aaaaaa; font-style: italic">/* Public variables */</span>
<span style="color: #0000aa">this</span>.state = <span style="color: #0000aa">false</span>;
<span style="color: #aaaaaa; font-style: italic">/* Public functions */</span>
<span style="color: #0000aa">this</span>.update = <span style="color: #0000aa">function</span>() {
<span style="color: #0000aa">if</span>(<span style="color: #0000aa">this</span>.state) do_stuff();
console.log(<span style="color: #0000aa">this</span>.state); <span style="color: #aaaaaa; font-style: italic">// undefined!!!</span>
}
};
</pre></div><br />
So, when when I called the <b>update</b> function in another context with another this object, the <span style="color: #0000aa">this</span> keyword referenced to the caller object, not to the object where it was. The result of this is that the state variable is undefined, because the caller object didn't have a state variable. I knew that the this keyword is the problem and I also knew that I need to reference to the object in its own functions. So the solution is to create a private variable and store a reference to the object in it.<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">var</span> obj = <span style="color: #0000aa">function</span>() {
<span style="color: #aaaaaa; font-style: italic">/* Reference to self */</span>
<span style="color: #0000aa">var</span> _self = <span style="color: #0000aa">this</span>;
<span style="color: #aaaaaa; font-style: italic">/* Private variables */</span>
<span style="color: #0000aa">var</span> v1 = <span style="color: #009999">0</span>;
<span style="color: #0000aa">var</span> v2 = <span style="color: #009999">0</span>;
<span style="color: #aaaaaa; font-style: italic">/* Public variables */</span>
_self.state = <span style="color: #0000aa">false</span>;
<span style="color: #aaaaaa; font-style: italic">/* Public functions */</span>
_self.update = <span style="color: #0000aa">function</span>() {
<span style="color: #0000aa">if</span>(_self.state) do_stuff();
console.log(_self.state); <span style="color: #aaaaaa; font-style: italic">// false</span>
<span style="color: #0000aa">this</span>.somethingElse = <span style="color: #0000aa">true</span>;
}
};
</pre></div><br />
With this solution, if you create an object with the <span style="color: #0000aa">new</span> keyword, the constructor is called and the _self variable will store a reference to itself. This won't mess up the this reference in other contexts.Szivák Zsolthttp://www.blogger.com/profile/15120501879093343427noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-34028357440008075832011-10-20T13:10:00.000-07:002011-10-20T23:49:34.378-07:00JavaScript: Drawing and appending an Image objectLet's have some fun with images tonight!<br />
<br />
The <img/> tag is part of HTML, as you've already known from your previous studies in web technologies. :) You can create one programmatically with the <b>Image</b> object in JavaScript. See below:<br />
<br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: #0000aa;">var</span> img = <span style="color: #0000aa;">new</span> Image();
</pre></div><br />
Try to log it to the console. Right know, it's empty. To load an image, use the src tag:<br />
<br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: #0000aa;">var</span> img = <span style="color: #0000aa;">new</span> Image();
<span style="color: #aaaaaa; font-style: italic;">// of course, don't forget to replace this url ;)</span>
img.src = <span style="color: #aa5500;">'http://www.testsite.com/images/myimage.jpg'</span>;
</pre></div><br />
The image is loaded, but you can't see it yet, because it isn't appended to the DOM. Let's use jQuery to do what is needed to do!<br />
<br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;"><pre style="line-height: 125%; margin: 0;">jQuery(<span style="color: #aa5500;">'#myDiv'</span>).html(img);
</pre></div><br />
The image is visible right know. This JavaScript object has another property called onload. It fires when the image is loaded. Append these few lines after your code and refresh your page:<br />
<br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;"><pre style="line-height: 125%; margin: 0;">img.onload = <span style="color: #0000aa;">function</span>() {
alert(<span style="color: #aa5500;">'image loaded'</span>);
}
</pre></div><br />
In Internet Explorer, the onload function won't run, unless you place it <b>before</b> the definition of src attribute:<br />
<br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: #0000aa;">var</span> img = <span style="color: #0000aa;">new</span> Image();
img.onload = <span style="color: #0000aa;">function</span>() {
alert(<span style="color: #aa5500;">'image loaded'</span>);
}
img.src = <span style="color: #aa5500;">'http://www.mysite.com/images/an_image.jpg'</span>;
</pre></div><br />
Go and have some fun with the onerror attribute! It runs when an error occurs while loading an image.<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">var</span> img = <span style="color: #0000aa">new</span> Image();
img.onerror = <span style="color: #0000aa">function</span>() {
alert(<span style="color: #aa5500">'failed to load image :( '</span>);
}
img.src = <span style="color: #aa5500">'http://www.fakelink.com/images/non_existing_image.png'</span>;
</pre></div><br />
<br />
<h2>Canvas element and Javascript drawImage function</h2>Another way to use the image object is to draw it with the help of the canvas element. First, have one in your example html page:<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #1e90ff; font-weight: bold"><canvas</span> <span style="color: #1e90ff">id=</span><span style="color: #aa5500">"myCanvas"</span> <span style="color: #1e90ff">width=</span><span style="color: #aa5500">"400"</span> <span style="color: #1e90ff">height=</span><span style="color: #aa5500">"300"</span><span style="color: #1e90ff; font-weight: bold">></canvas></span>
</pre></div><br />
Then, get the canvas and a context and use <b>drawImage</b> function.<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">var</span> canvas = $(<span style="color: #aa5500">"#myCanvas"</span>);
<span style="color: #aaaaaa; font-style: italic">/* For browser compatibility issues, put error handling code here. I won't.. */</span>
<span style="color: #0000aa">var</span> ctx = canvas[<span style="color: #009999">0</span>].getContext(<span style="color: #aa5500">'2d'</span>);
<span style="color: #0000aa">var</span> img = <span style="color: #0000aa">new</span> Image();
img.src = <span style="color: #aa5500">'http://static.yoursite.com/images/something.png'</span>;
ctx.drawImage(img, <span style="color: #009999">0</span>, <span style="color: #009999">0</span>);
</pre></div><br />
The first parameter of the drawing function is the image object itself. The second and third parameters are for placing the image along the x and y coordinates. Note that the (0, 0) coordinate is the top left corner. Also note that canvas element is not supported yet in Internet Explorer.<br />
<br />
That's all for today of the JavaScript Image object and its usage. I will tell more about the drawImage function in another post where I will talk about sprites, animation and a bit more JavaScript tricks. I hope you learned a little new today.Szivák Zsolthttp://www.blogger.com/profile/15120501879093343427noreply@blogger.com1tag:blogger.com,1999:blog-4225536372283253986.post-78118250735916225222011-10-18T12:16:00.000-07:002011-10-18T12:16:14.032-07:00JavaScript: Types and valuesWorking on other's codes is like walking in a huge cellar with a bunch of old boxes: you always find some interesting things. I write about types today.<br />
<br />
Let's work with the following variables:<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">var</span> point = <span style="color: #0000aa">function</span>() {
<span style="color: #0000aa">this</span>.x = <span style="color: #009999">4</span>;
<span style="color: #0000aa">this</span>.y = <span style="color: #009999">6</span>;
}
<span style="color: #aaaaaa; font-style: italic">// var v0; Note: I commented it out with purpose to make it undefined. </span>
<span style="color: #0000aa">var</span> v1;
<span style="color: #0000aa">var</span> v2 = <span style="color: #0000aa">null</span>;
<span style="color: #0000aa">var</span> v3 = <span style="color: #0000aa">false</span>;
<span style="color: #0000aa">var</span> v4 = <span style="color: #aa5500">'some text'</span>;
<span style="color: #0000aa">var</span> v5 = <span style="color: #009999">68</span>;
<span style="color: #0000aa">var</span> v6 = {};
<span style="color: #0000aa">var</span> v7 = <span style="color: #0000aa">new</span> point();
<span style="color: #0000aa">var</span> v8 = <span style="color: #0000aa">new</span> <span style="color: #00aaaa">Array</span>();
<span style="color: #0000aa">var</span> v9 = <span style="color: #0000aa">function</span>() {};
</pre></div><br />
How can you determine the type of each variable? Use the <span style="color: #0000aa">typeof</span> operand. It returns a <b>string</b> representation of the operand's type. Let's see the types of the variables above:<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">typeof</span> v0; <span style="color: #aaaaaa; font-style: italic">// undefined</span>
<span style="color: #0000aa">typeof</span> v1; <span style="color: #aaaaaa; font-style: italic">// undefined</span>
<span style="color: #0000aa">typeof</span> v2; <span style="color: #aaaaaa; font-style: italic">// object</span>
<span style="color: #0000aa">typeof</span> v3; <span style="color: #aaaaaa; font-style: italic">// boolean</span>
<span style="color: #0000aa">typeof</span> v4; <span style="color: #aaaaaa; font-style: italic">// string</span>
<span style="color: #0000aa">typeof</span> v5; <span style="color: #aaaaaa; font-style: italic">// number</span>
<span style="color: #0000aa">typeof</span> v6; <span style="color: #aaaaaa; font-style: italic">// object</span>
<span style="color: #0000aa">typeof</span> v7; <span style="color: #aaaaaa; font-style: italic">// object</span>
<span style="color: #0000aa">typeof</span> v8; <span style="color: #aaaaaa; font-style: italic">// object</span>
<span style="color: #0000aa">typeof</span> v9; <span style="color: #aaaaaa; font-style: italic">// function</span>
</pre></div><br />
Look at the result of <b>v0</b> and <b>v1</b>. Why do they have the same undefined type? v0 is not declared, it's obvious why it is undefined. But v1? Because it is not defined (just like the type tells to us)! We stated that there is a variable called v1 but we didn't give it a value.<br />
<br />
Did you notice that <b>v2</b> with null assigned to it is an object type? Yes, you see it well. As I know, the reason for this is that the <span style="color: #0000aa">null</span> type is a special object in JavaScript.<br />
<br />
<h2>Common mistake with types</h2><br />
<h4>Typeof</h4>I see the following comparison many times in codes I meet:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">if</span>(<span style="color: #0000aa">typeof</span> v0 === <span style="color: #0000aa">undefined</span>) {
alert(<span style="color: #aa5500">'not executed! hah!'</span>);
}
</pre></div><br />
The alert function call won't run because the comparison in the if statement is wrong. As said before, <span style="color: #0000aa">typeof</span> returns a string, but right now it is matched against an <span style="color: #0000aa">undefined</span> value. It won't even work with the 'equal to' operator. Let's correct it:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">if</span>(<span style="color: #0000aa">typeof</span> v0 === <span style="color: #aa5500">'undefined'</span>) {
alert(<span style="color: #aa5500">'executed! hah!'</span>);
}
</pre></div><br />
So now, the return value of <span style="color: #0000aa">typeof</span> is compared to a string.<br />
<br />
<h4>Null values</h4>Another confusion rises when comparing undefined but declared variables against null value.<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">var</span> v1;
<span style="color: #0000aa">if</span>(v1 == <span style="color: #0000aa">null</span>) {
<span style="color: #aaaaaa; font-style: italic">// it will run</span>
alert(<span style="color: #aa5500">'yep'</span>);
}
<span style="color: #0000aa">if</span>(v1 === <span style="color: #0000aa">null</span>) {
<span style="color: #aaaaaa; font-style: italic">// it won't run</span>
alert(<span style="color: #aa5500">'nope'</span>);
}
</pre></div><br />
With the 'equals to' operator, JavaScript does type casting and evaluates the v1 variable with null value. But in the second case, with the 'exactly equals to' operator, the undefined value is kept because the operator checks the value and the type too.<br />
<br />
<h4>Infinity and NaN</h4>Take into account that type of a variable with <span style="color: #0000aa">Infinity</span> or <span style="color: #0000aa">NaN</span> value is number:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">var</span> v10 = <span style="color: #009999">1000</span> / <span style="color: #009999">0</span>; <span style="color: #aaaaaa; font-style: italic">// Infinity</span>
<span style="color: #0000aa">var</span> v11 = <span style="color: #009999">1000</span> / <span style="color: #aa5500">'book'</span>; <span style="color: #aaaaaa; font-style: italic">// NaN</span>
<span style="color: #0000aa">typeof</span> v10; <span style="color: #aaaaaa; font-style: italic">// number</span>
<span style="color: #0000aa">typeof</span> v11; <span style="color: #aaaaaa; font-style: italic">// number</span>
</pre></div><br />
<br />
I hope you also found it interesting. :)Szivák Zsolthttp://www.blogger.com/profile/15120501879093343427noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-1254951729131402932011-10-16T00:26:00.000-07:002011-10-16T00:58:13.648-07:00Playing with Numbers in JavascriptHandling numbers is a very basic task for (web)developers, but how exactly is this working in Javascript? <br />
<br />
Numbers are "<a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">double-precision 64-bit</a> format <a href="http://en.wikipedia.org/wiki/IEEE_754-2008">IEEE 754</a> values". Let's see some examples how it can handle things:<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">console.log( <span style="color: #009999">0.1</span> + <span style="color: #009999">0.2</span> ); <span style="color: #aaaaaa; font-style: italic">// 0.30000000000000004</span>
<span style="color: #aaaaaa; font-style: italic">// but:</span>
console.log( (<span style="color: #009999">0.1</span>*<span style="color: #009999">10</span> + <span style="color: #009999">0.2</span>*<span style="color: #009999">10</span>) / <span style="color: #009999">10</span> ); <span style="color: #aaaaaa; font-style: italic">// 0.3</span>
console.log( <span style="color: #00aaaa">parseInt</span>(<span style="color: #aa5500">"123"</span>, <span style="color: #009999">10</span>) ); <span style="color: #aaaaaa; font-style: italic">// 123</span>
console.log( <span style="color: #00aaaa">parseInt</span>(<span style="color: #aa5500">"010"</span>, <span style="color: #009999">10</span>) ); <span style="color: #aaaaaa; font-style: italic">// 10</span>
<span style="color: #aaaaaa; font-style: italic">// The parseInt() and parseFloat() functions parse a string until </span>
<span style="color: #aaaaaa; font-style: italic">// they reach a character that isn't valid for the specified number </span>
<span style="color: #aaaaaa; font-style: italic">// format, then return the number parsed up to that point.</span>
console.log( <span style="color: #00aaaa">parseInt</span>(<span style="color: #aa5500">"test: 123"</span>, <span style="color: #009999">10</span>) ); <span style="color: #aaaaaa; font-style: italic">// NaN</span>
console.log( <span style="color: #00aaaa">parseInt</span>(<span style="color: #aa5500">"test: 010"</span>, <span style="color: #009999">10</span>) ); <span style="color: #aaaaaa; font-style: italic">// NaN</span>
console.log( <span style="color: #00aaaa">parseInt</span>(<span style="color: #009999">1.23</span>, <span style="color: #009999">10</span>) ); <span style="color: #aaaaaa; font-style: italic">// 1</span>
console.log( <span style="color: #00aaaa">parseInt</span>(<span style="color: #009999">1.99</span>, <span style="color: #009999">10</span>) ); <span style="color: #aaaaaa; font-style: italic">// 1</span>
console.log( <span style="color: #00aaaa">parseInt</span>(-<span style="color: #009999">5.1</span>) ); <span style="color: #aaaaaa; font-style: italic">// -5</span>
console.log( <span style="color: #00aaaa">Math</span>.floor(-<span style="color: #009999">5.1</span>) ); <span style="color: #aaaaaa; font-style: italic">// -6 (!!)</span>
console.log( <span style="color: #00aaaa">parseFloat</span>(<span style="color: #aa5500">"1.67"</span>) ); <span style="color: #aaaaaa; font-style: italic">// 1.67 (Number)</span>
console.log( <span style="color: #00aaaa">parseInt</span>(<span style="color: #aa5500">"456test: 010"</span>, <span style="color: #009999">10</span>) ); <span style="color: #aaaaaa; font-style: italic">// 456</span>
<span style="color: #aaaaaa; font-style: italic">// converting without parseInt() or parseFloat()</span>
console.log( <span style="color: #aa5500">"456 test: 010"</span> * <span style="color: #009999">1</span> ); <span style="color: #aaaaaa; font-style: italic">// NaN</span>
console.log( <span style="color: #009999">1</span> * <span style="color: #aa5500">"456 test: 010"</span> ); <span style="color: #aaaaaa; font-style: italic">// NaN</span>
console.log( <span style="color: #009999">1</span> * <span style="color: #aa5500">" 456 "</span> ); <span style="color: #aaaaaa; font-style: italic">// 456 (space characters are allowed)</span>
console.log( <span style="color: #009999">1</span> * <span style="color: #aa5500">" .456 "</span> ); <span style="color: #aaaaaa; font-style: italic">// 0.456</span>
console.log( <span style="color: #009999">1</span> * <span style="color: #aa5500">" . 456 "</span> ); <span style="color: #aaaaaa; font-style: italic">// NaN</span>
console.log( <span style="color: #009999">1</span> + <span style="color: #aa5500">"2"</span> + <span style="color: #009999">3</span> + <span style="color: #009999">4</span> ); <span style="color: #aaaaaa; font-style: italic">// 1234</span>
console.log( <span style="color: #009999">1</span> - <span style="color: #aa5500">"2"</span> + <span style="color: #009999">3</span> + <span style="color: #009999">4</span> ); <span style="color: #aaaaaa; font-style: italic">// 6 (-1 + 3 + 4)</span>
console.log( <span style="color: #009999">1</span> * <span style="color: #aa5500">"2"</span> + <span style="color: #009999">3</span> + <span style="color: #009999">4</span> ); <span style="color: #aaaaaa; font-style: italic">// 9 (2 + 3 + 4)</span>
console.log( <span style="color: #009999">1</span> / <span style="color: #aa5500">"2"</span> + <span style="color: #009999">3</span> + <span style="color: #009999">4</span> ); <span style="color: #aaaaaa; font-style: italic">// 7.5 (0.5 + 3 + 4)</span>
console.log( <span style="color: #009999">5</span> % <span style="color: #aa5500">"3"</span> ); <span style="color: #aaaaaa; font-style: italic">// 2</span>
console.log( <span style="color: #009999">5</span> % <span style="color: #aa5500">" 3 "</span> ); <span style="color: #aaaaaa; font-style: italic">// 2</span>
console.log( <span style="color: #009999">5</span> % <span style="color: #aa5500">" 3a "</span> ); <span style="color: #aaaaaa; font-style: italic">// NaN</span>
console.log( <span style="color: #00aaaa">parseInt</span>(<span style="color: #aa5500">"010"</span>) ); <span style="color: #aaaaaa; font-style: italic">// 8 (!!)</span>
console.log( <span style="color: #00aaaa">parseFloat</span>(<span style="color: #aa5500">"010"</span>) ); <span style="color: #aaaaaa; font-style: italic">// 10 (!!)</span>
console.log( <span style="color: #00aaaa">parseFloat</span>(<span style="color: #aa5500">"010.123"</span>) ); <span style="color: #aaaaaa; font-style: italic">// 10.123</span>
console.log( <span style="color: #00aaaa">parseInt</span>(<span style="color: #aa5500">"11"</span>,<span style="color: #009999">2</span>) ); <span style="color: #aaaaaa; font-style: italic">// 3 (binary to integer)</span>
console.log( <span style="color: #00aaaa">parseFloat</span>(<span style="color: #aa5500">"11"</span>) ); <span style="color: #aaaaaa; font-style: italic">// 11</span>
<span style="color: #aaaaaa; font-style: italic">// converting with unary operator</span>
console.log( +<span style="color: #aa5500">"11"</span> ); <span style="color: #aaaaaa; font-style: italic">// 11</span>
console.log( <span style="color: #0000aa">typeof</span> +<span style="color: #aa5500">"11"</span> ); <span style="color: #aaaaaa; font-style: italic">// number</span>
console.log( +<span style="color: #aa5500">"11a"</span> ); <span style="color: #aaaaaa; font-style: italic">// NaN</span>
console.log( -<span style="color: #aa5500">"11"</span> ); <span style="color: #aaaaaa; font-style: italic">// -11</span>
console.log( <span style="color: #0000aa">typeof</span> -<span style="color: #aa5500">"11"</span> ); <span style="color: #aaaaaa; font-style: italic">// number</span>
<span style="color: #aaaaaa; font-style: italic">// other number types</span>
console.log( <span style="color: #00aaaa">parseInt</span>(<span style="color: #aa5500">"hello"</span>, <span style="color: #009999">10</span>) ); <span style="color: #aaaaaa; font-style: italic">// NaN</span>
console.log( <span style="color: #0000aa">typeof</span> <span style="color: #00aaaa">parseInt</span>(<span style="color: #aa5500">"hello"</span>, <span style="color: #009999">10</span>) ); <span style="color: #aaaaaa; font-style: italic">// Number (!!)</span>
console.log( <span style="color: #00aaaa">parseInt</span>(<span style="color: #aa5500">"hello"</span>, <span style="color: #009999">10</span>) * <span style="color: #009999">1</span> + <span style="color: #009999">5</span> ); <span style="color: #aaaaaa; font-style: italic">// NaN (NaN is toxic..)</span>
console.log( <span style="color: #00aaaa">isNaN</span>(<span style="color: #00aaaa">parseInt</span>(<span style="color: #aa5500">"hello"</span>, <span style="color: #009999">10</span>)) ); <span style="color: #aaaaaa; font-style: italic">// true</span>
console.log( <span style="color: #00aaaa">isNaN</span>(<span style="color: #009999">10</span>) ); <span style="color: #aaaaaa; font-style: italic">// false</span>
console.log(<span style="color: #009999">1</span>/<span style="color: #009999">0</span>); <span style="color: #aaaaaa; font-style: italic">// Infinity</span>
console.log(-<span style="color: #009999">1</span>/<span style="color: #009999">0</span>); <span style="color: #aaaaaa; font-style: italic">// -Infinity</span>
</pre></div><br />
<br />
<br />
<b>My conclusion are:</b><br />
<ul><li>If I'm working with floats I should round them to a limited precision.</li>
<li>The safest way to convert strings to numbers is to use parseInt() or parseFloat().</li>
<li>The parseInt() function has a second argument wich defines the base of the number system that the string has. I should always set this value, just to be clear and avoid some untrackable bugs..</li>
<li>Before I use parseInt() it's a good idea to clean the string from any letters (this is quite task dependent). I should care about this, because if a string made up of numbers it's fine. But it could have some toxic character value in it and that could kill the whole process. So be careful.</li>
<li>If I call parseInt on a float number, it will return always the integer part of the number. So it's not the same as Math.floor()</li>
<li>parseInt() on a string like (123a456) will only return the first few characters parsed as numbers.</li>
<li>Converting numbers with only " * 1" is not safe. Only if I can be absolutely sure that the string will only contain number characters or space.</li>
<li>parseFloat() uses always 10 as the base number system</li>
<li>I can convert strings into numbers with an unary operator (Wow..)</li>
<li>NaN is toxic. Very toxic.. avoid it at all cost (unless this is what I want)</li>
<li>There is an Infinity type number in Javascript but I don't quite know what is it good for. (Maybe just to indicate that the number is too big..do something with it because javascript can't handle it)</li>
</ul><br />
I have read the basic number handling tests on: <a href="https://developer.mozilla.org/en/JavaScript/A_re-introduction_to_JavaScript">developer.mozilla.org</a> and I have made up some others on my own.Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com1tag:blogger.com,1999:blog-4225536372283253986.post-83619031984516572022011-10-14T02:43:00.000-07:002011-10-14T02:45:30.276-07:00jQuery :contains with the exact same value<b>The task to do:</b><br />
During my work I had to create a page scrolling effect with a dropdown menu and a (verticaly) very long content. So when someone clicks on a menu item the page has to scroll to the exact position where the content begins. <br />
<br />
<b>The idea of the solution:</b><br />
As the menu-items' text and the title of the content parts are exactly the same, the idea is to find the title tag according to it's content. Then get the Y coordinate of it and scroll the body to this position.<br />
<br />
<b>The solution in jQuery:</b><br />
My first (key) idea was to use jQuery's built-in ":contains" method:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">jQuery(<span style="color: #aa5500">"h2:contains('Some Value')"</span>)
</pre></div><br />
But in this case this won't work perfectly, because there were menu items like "Product" and "Product 2.0". So I needed a ":contains" solution but with the exact values. This is what I came up with:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">jQuery(<span style="color: #aa5500">"#menu a"</span>)
<span style="color: #aaaaaa; font-style: italic">// disable links. We need only Javascript behavior</span>
.attr(<span style="color: #aa5500">"href"</span>, <span style="color: #aa5500">"javascript:void(null)"</span>)
<span style="color: #aaaaaa; font-style: italic">// what shall happen if the link is clicked</span>
.click(<span style="color: #0000aa">function</span> () {
<span style="color: #aaaaaa; font-style: italic">// get the text of the menu item</span>
<span style="color: #0000aa">var</span> text = jQuery(<span style="color: #0000aa">this</span>).text();
<span style="color: #aaaaaa; font-style: italic">// get the DOM object of the target title (The h2 element wich contains the exact same text of the menu item)</span>
<span style="color: #0000aa">var</span> target = jQuery(<span style="color: #aa5500">'h2'</span>).filter(<span style="color: #0000aa">function</span>() {
<span style="color: #0000aa">return</span> jQuery(<span style="color: #0000aa">this</span>).text() === text;
});
<span style="color: #aaaaaa; font-style: italic">// get the position of the target element</span>
<span style="color: #0000aa">var</span> pos = target.offset();
<span style="color: #aaaaaa; font-style: italic">// if the position is found...</span>
<span style="color: #0000aa">if</span> (<span style="color: #0000aa">typeof</span> pos.top != <span style="color: #aa5500">'undefined'</span>) {
<span style="color: #aaaaaa; font-style: italic">// scroll the page there</span>
jQuery.scrollTo((pos.top-<span style="color: #009999">10</span>) + <span style="color: #aa5500">"px"</span>, <span style="color: #009999">700</span>);
}
});
</pre></div><br />
<br />
<br />
<b>Note:</b> I used <a href="http://flesler.blogspot.com/2009/05/jqueryscrollto-142-released.html">Ariel Flesler's ScrollTo jQuery plugin</a>. (Thanks Ariel by the way..)Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-7320985317793124492011-10-13T03:59:00.000-07:002011-10-13T04:24:49.017-07:00XHTML Strict and target _blank<br />
This topic is quite a challange because on one side I want my websites "strict" valid. On the other hand, sometimes it's important (at least clients say so) to open links in a new window, so I did a little research (and there are a lot of informations out there to this problem)<br />
<br />
What are the solutions for being valid and in the same time opening links in a new window?<br />
<br />
<b>1. I tried it with CSS:</b> (I know, I know... CSS is for styling only, not for behavior.. I'm searching solutions right now)<br />
Theoretically it can be done with CSS3. According to <a href="http://www.w3.org/TR/css3-hyperlinks/">this</a> page the code should look like this:<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #1e90ff; font-weight: bold">a</span> {
target-name: new;
target-new: tab;
}
</pre></div><br />
But none of the browsers responded to it so this solution is precluded.<br />
<br />
<br />
<br />
<b>2. Javascript:</b><br />
Here we have quite interesting solutions. <br />
<br />
<b><i>Manually open a new window with "window.open(URL)":</i></b><br />
<br />
Inline mode:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #1e90ff; font-weight: bold"><a</span> <span style="color: #1e90ff">href=</span><span style="color: #aa5500">"http://thinkrement.blogger.com"</span> <span style="color: #1e90ff">onclick=</span><span style="color: #aa5500">"window.open(this.href); return false;"</span><span style="color: #1e90ff; font-weight: bold">></span>Read Thinkrement!<span style="color: #1e90ff; font-weight: bold"></a></span>
</pre></div><br />
This works, however it's not so elegant and it's better to keep the HTML and Javascript seperate.<br />
<br />
So, let's improve it a bit:<br />
<br />
HTML:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #1e90ff; font-weight: bold"><a</span> <span style="color: #1e90ff">href=</span><span style="color: #aa5500">"http://thinkrement.blogger.com"</span> <span style="color: #1e90ff">rel=</span><span style="color: #aa5500">"popup"</span><span style="color: #1e90ff; font-weight: bold">></span>Read Thinkrement!<span style="color: #1e90ff; font-weight: bold"></a></span>
</pre></div><br />
Javascript:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #00aaaa">window</span>.onload = <span style="color: #0000aa">function</span>() {
<span style="color: #0000aa">var</span> links = <span style="color: #00aaaa">document</span>.getElementsByTagName(<span style="color: #aa5500">'a'</span>);
<span style="color: #0000aa">for</span> (<span style="color: #0000aa">var</span> i=<span style="color: #009999">0</span>;i < links.length;i++) {
<span style="color: #0000aa">if</span> (links[i].rel == <span style="color: #aa5500">'popup'</span>) {
links[i].onclick = <span style="color: #0000aa">function</span>() {
<span style="color: #00aaaa">window</span>.open(<span style="color: #0000aa">this</span>.href);
<span style="color: #0000aa">return</span> <span style="color: #0000aa">false</span>;
};
}
}
};
</pre></div><br />
<br />
or with jQuery:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">$(<span style="color: #aa5500">'a[rel="popup"]'</span>).click(<span style="color: #0000aa">function</span>() {
<span style="color: #00aaaa">window</span>.open(jQuery(<span style="color: #0000aa">this</span>).attr(<span style="color: #aa5500">"href"</span>));
<span style="color: #0000aa">return</span> <span style="color: #0000aa">false</span>;
});
</pre></div><br />
<br />
<br />
<b><i>The constrained method:</i></b><br />
<br />
With Javascript it's similar to the previous "window.open" method with the difference, that instead of "window.open" we use:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #00aaaa">window</span>.onload = <span style="color: #0000aa">function</span>() {
<span style="color: #0000aa">var</span> links = <span style="color: #00aaaa">document</span>.getElementsByTagName(<span style="color: #aa5500">'a'</span>);
<span style="color: #0000aa">for</span> (<span style="color: #0000aa">var</span> i=<span style="color: #009999">0</span>;i < links.length;i++) {
<span style="color: #0000aa">if</span> (links[i].rel == <span style="color: #aa5500">'popup'</span>) {
links[i].target=<span style="color: #aa5500">"_blank"</span>;
}
}
};
</pre></div><br />
This is quite simple, however this solution is not supported by IE and Chrome.<br />
<br />
With jQuery it a bit easier (only 1 line):<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">$(<span style="color: #aa5500">'a[rel="popup"]'</span>).attr(<span style="color: #aa5500">"target"</span>, <span style="color: #aa5500">"_blank"</span>);
</pre></div><br />
<br />
<br />
<b><br />
3. HTML:</b><br />
- Use a Transitional Doctype<br />
- Have some "target" errors on your site<br />
- or put it out of your mind that you want to use the target attribute. It is said that for usability reasons it's better to let users decide whether they want a new window (tab) or not.<br />
<br />Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-17430406634986189472011-10-12T06:21:00.000-07:002011-10-12T07:17:17.620-07:00Javascript Canvas trumps all othersRecently I have made a little test. I would have like to make a little active-background effect on my project and I have faced a problem with the hardware resources. What you have to know about this project is, that it will be an information panel on my college where I graduated. So, the hardware, the browser and the resolution (and pretty much everything else) is fixed.<br />
<br />
<b>This is the DEMO (and a simplified result):</b><br />
<a href="http://jsfiddle.net/FilipFlora/cLByF/10/embedded/result/">http://jsfiddle.net/FilipFlora/cLByF/10/embedded/result/</a><br />
<br />
<b>The task was:</b><br />
Create an active-background animation when the tablet is idle. So when you walk by, it'll catch your attention..<br />
<br />
<b>The problem:</b><br />
The hardware is rather energy-efficient and has only a basic graphics-card integrated. The images to move are huge (circa 2000x1600) and they have a 5% opacity on them. (Just as I wrote these lines, I thought that another solution could be to set the opacity value with css and use gifs instead?? But I don't think that this would be better than the solution below)<br />
<br />
<b>The attempts to solve the problem: (not in this order, but I was diligent to find the best looking solution :) )</b><br />
1. attempt: Background-image (for this I used the <a href="http://plugins.jquery.com/project/backgroundPosition-Effect">background-position jQuery plugin</a>)<br />
I tried that..yes. I created 4 layers, I have set the background-image with CSS, and created the animation with jQuery.<br />
<br />
HTML:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #000080; font-weight: bold"><div</span> <span style="color: #FF0000">id=</span><span style="color: #0000FF">"index_bg_1"</span><span style="color: #000080; font-weight: bold">></span>&nbsp;<span style="color: #000080; font-weight: bold"></div></span>
<span style="color: #000080; font-weight: bold"><div</span> <span style="color: #FF0000">id=</span><span style="color: #0000FF">"index_bg_2"</span><span style="color: #000080; font-weight: bold">></span>&nbsp;<span style="color: #000080; font-weight: bold"></div></span>
<span style="color: #000080; font-weight: bold"><div</span> <span style="color: #FF0000">id=</span><span style="color: #0000FF">"index_bg_3"</span><span style="color: #000080; font-weight: bold">></span>&nbsp;<span style="color: #000080; font-weight: bold"></div></span>
<span style="color: #000080; font-weight: bold"><div</span> <span style="color: #FF0000">id=</span><span style="color: #0000FF">"index_bg_4"</span><span style="color: #000080; font-weight: bold">></span>&nbsp;<span style="color: #000080; font-weight: bold"></div></span>
</pre></div><br />
CSS:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #00aa00">#index_bg_1</span>,
<span style="color: #00aa00">#index_bg_2</span>,
<span style="color: #00aa00">#index_bg_3</span>,
<span style="color: #00aa00">#index_bg_4</span> {
<span style="color: #0000aa">background-image</span>: <span style="color: #aa5500">url("../images/index-bg-1.png")</span>;
<span style="color: #0000aa">background-repeat</span>: <span style="color: #0000aa">no-repeat</span>;
<span style="color: #0000aa">background-position</span>: <span style="color: #009999">0px</span> <span style="color: #009999">0px</span>;
<span style="color: #0000aa">width</span>: <span style="color: #009999">1680px</span>;
<span style="color: #0000aa">height</span>: <span style="color: #009999">1050px</span>;
<span style="color: #0000aa">position</span>: <span style="color: #0000aa">absolute</span>;
<span style="color: #0000aa">left</span>: <span style="color: #009999">0px</span>;
<span style="color: #0000aa">top</span>: <span style="color: #009999">0px</span>;
}
<span style="color: #00aa00">#index_bg_2</span> {
<span style="color: #0000aa">background-image</span>: <span style="color: #aa5500">url("../images/index-bg-2.png")</span>;
<span style="color: #0000aa">background-position</span>: <span style="color: #009999">0px</span> <span style="color: #009999">0px</span>;
}
<span style="color: #00aa00">#index_bg_3</span> {
<span style="color: #0000aa">background-image</span>: <span style="color: #aa5500">url("../images/index-bg-3.png")</span>;
<span style="color: #0000aa">background-position</span>: <span style="color: #009999">0px</span> <span style="color: #009999">0px</span>;
}
<span style="color: #00aa00">#index_bg_4</span> {
<span style="color: #0000aa">background-image</span>: <span style="color: #aa5500">url("../images/index-bg-4.png")</span>;
<span style="color: #0000aa">background-position</span>: <span style="color: #009999">0px</span> <span style="color: #009999">0px</span>;
}
</pre></div><br />
Javascript:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">jQuery(<span style="color: #00aaaa">document</span>).ready(<span style="color: #0000aa">function</span>() {
<span style="color: #aaaaaa; font-style: italic">// initiate all background-image animation</span>
<span style="color: #0000aa">for</span>( <span style="color: #0000aa">var</span> i = <span style="color: #009999">1</span>; i<<span style="color: #009999">5</span>; i++) {
animateBackgroundImage(<span style="color: #aa5500">"#index_bg_"</span>+i);
}
});
<span style="color: #0000aa">function</span> animateBackgroundImage(selector) {
<span style="color: #aaaaaa; font-style: italic">// new target x coodinate</span>
<span style="color: #0000aa">var</span> pos_x = <span style="color: #00aaaa">Math</span>.rand(-<span style="color: #009999">1200</span>, <span style="color: #009999">1600</span>);
<span style="color: #aaaaaa; font-style: italic">// current x coordinate </span>
<span style="color: #0000aa">var</span> bg_x = ((jQuery(selector).css(<span style="color: #aa5500">"background-position"</span>)).replace(<span style="color: #aa5500">"px 0px"</span>, <span style="color: #aa5500">""</span>))*<span style="color: #009999">1</span>;
<span style="color: #aaaaaa; font-style: italic">// animation time</span>
<span style="color: #0000aa">var</span> anim_time = <span style="color: #00aaaa">Math</span>.abs(pos_x-bg_x)/<span style="color: #009999">24</span>*<span style="color: #009999">1000</span>;
<span style="color: #aaaaaa; font-style: italic">// to do this, you need the backgroundPosition plugin for jQuery</span>
jQuery(selector).animate({
backgroundPosition: <span style="color: #aa5500">"("</span>+pos_x+<span style="color: #aa5500">"px 0px)"</span> <span style="color: #aaaaaa; font-style: italic">// to keep it simple, let's animate only the x value</span>
}, anim_time, <span style="color: #aa5500">"linear"</span> );
<span style="color: #aaaaaa; font-style: italic">// after the animation is done, create another</span>
setTimeout(<span style="color: #aa5500">"animateBackgroundImage('"</span>+selector+<span style="color: #aa5500">"')"</span>, anim_time);
}
<span style="color: #aaaaaa; font-style: italic">// this is just a helper function to create php like random number generator</span>
<span style="color: #00aaaa">Math</span>.rand = <span style="color: #0000aa">function</span> (min, max) {
<span style="color: #0000aa">return</span>(<span style="color: #00aaaa">Math</span>.round(<span style="color: #00aaaa">Math</span>.random() * (max-min)) + min);
}
</pre></div><br />
<br />
As it turned out, this was too much for the little machine..<br />
<br />
<br />
2. attempt: with simple images<br />
I don't want to make this post too long so I summarize it briefly. It doesn't went well. It was a little bit faster, but I needed much more.<br />
<br />
3. attempt: Javascript Canvas<br />
This has rocked my world again. After I have read <a href="http://thinkrement.blogspot.com/2011/10/howto-canvas-colorful-bouncing-circle.html">Zsolti's article about canvas animations</a> (thank you my dear friend :) ) I was very excited to test it on the real thing (as I was developing on my laptop). Needless to say.. it went perfectly.<br />
<br />
Here is the code:<br />
<br />
HTML:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #1e90ff; font-weight: bold"><canvas</span> <span style="color: #1e90ff">width=</span><span style="color: #aa5500">"1680"</span> <span style="color: #1e90ff">height=</span><span style="color: #aa5500">"1050"</span> <span style="color: #1e90ff">id=</span><span style="color: #aa5500">"index_canvas"</span><span style="color: #1e90ff; font-weight: bold">></canvas></span>
</pre></div><br />
Javascript:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #aaaaaa; font-style: italic">// animation object</span>
<span style="color: #0000aa">var</span> indexAnim = {
images: [], <span style="color: #aaaaaa; font-style: italic">// here are the image objects</span>
positions: [], <span style="color: #aaaaaa; font-style: italic">// the actual positions of the images</span>
destPositions: [] <span style="color: #aaaaaa; font-style: italic">// the target coordinates of the image</span>
}
jQuery(<span style="color: #00aaaa">document</span>).ready(<span style="color: #0000aa">function</span>() {
<span style="color: #aaaaaa; font-style: italic">// init</span>
<span style="color: #0000aa">for</span>( <span style="color: #0000aa">var</span> i = <span style="color: #009999">1</span>; i<=<span style="color: #009999">4</span>; i++) {
<span style="color: #aaaaaa; font-style: italic">// create a new image to place on canvas</span>
<span style="color: #0000aa">var</span> im = <span style="color: #0000aa">new</span> Image();
im.src = <span style="color: #aa5500">'images/index-bg-'</span>+i+<span style="color: #aa5500">'.png'</span>;
indexAnim.images[i-<span style="color: #009999">1</span>] = im;
<span style="color: #aaaaaa; font-style: italic">// place it randomly on canvas</span>
indexAnim.positions[i-<span style="color: #009999">1</span>] = <span style="color: #00aaaa">Array</span>(<span style="color: #00aaaa">Math</span>.rand(-<span style="color: #009999">500</span>, <span style="color: #009999">500</span>), <span style="color: #00aaaa">Math</span>.rand(-<span style="color: #009999">500</span>, <span style="color: #009999">500</span>));
<span style="color: #aaaaaa; font-style: italic">// set it's destination positions</span>
indexAnim.destPositions[i-<span style="color: #009999">1</span>] = <span style="color: #00aaaa">Array</span>(<span style="color: #00aaaa">Math</span>.rand(-<span style="color: #009999">500</span>, <span style="color: #009999">500</span>), <span style="color: #00aaaa">Math</span>.rand( -<span style="color: #009999">500</span>, <span style="color: #009999">500</span>));
}
<span style="color: #aaaaaa; font-style: italic">// just for a better performance</span>
<span style="color: #0000aa">var</span> length = indexAnim.images.length;
<span style="color: #0000aa">var</span> canvas = <span style="color: #00aaaa">document</span>.getElementById(<span style="color: #aa5500">'index_canvas'</span>).getContext(<span style="color: #aa5500">'2d'</span>);
<span style="color: #aaaaaa; font-style: italic">// let the animation begin (... WHA-HA-HAAA)</span>
setInterval(<span style="color: #0000aa">function</span> () {
<span style="color: #aaaaaa; font-style: italic">// clear the image</span>
canvas.clearRect(<span style="color: #009999">0</span>,<span style="color: #009999">0</span>,<span style="color: #009999">1680</span>,<span style="color: #009999">1050</span>);
<span style="color: #aaaaaa; font-style: italic">// let's redraw all the images</span>
<span style="color: #0000aa">for</span>( <span style="color: #0000aa">var</span> i = <span style="color: #009999">0</span>; i<length; i++ ) {
<span style="color: #aaaaaa; font-style: italic">// if a new target position is needed (either x or y)</span>
<span style="color: #0000aa">if</span>( <span style="color: #00aaaa">Math</span>.abs(indexAnim.positions[i][<span style="color: #009999">0</span>] - indexAnim.destPositions[i][<span style="color: #009999">0</span>]) < i+<span style="color: #009999">1</span> || <span style="color: #00aaaa">Math</span>.abs(indexAnim.positions[i][<span style="color: #009999">1</span>] - indexAnim.destPositions[i][<span style="color: #009999">1</span>]) < i+<span style="color: #009999">1</span> ) {
indexAnim.destPositions[i] = <span style="color: #00aaaa">Array</span>(<span style="color: #00aaaa">Math</span>.rand(<span style="color: #009999">0</span>, <span style="color: #009999">1050</span>), <span style="color: #00aaaa">Math</span>.rand( -<span style="color: #009999">500</span>, <span style="color: #009999">500</span>));
}
<span style="color: #aaaaaa; font-style: italic">// set the new position of the image. It's only 1 pixel closer to the destination coordinate (Just like in life...)</span>
indexAnim.positions[i][<span style="color: #009999">0</span>] = indexAnim.positions[i][<span style="color: #009999">0</span>] + (indexAnim.positions[i][<span style="color: #009999">0</span>] < indexAnim.destPositions[i][<span style="color: #009999">0</span>] ? <span style="color: #009999">1</span>: -<span style="color: #009999">1</span>);
indexAnim.positions[i][<span style="color: #009999">1</span>] = indexAnim.positions[i][<span style="color: #009999">1</span>] + (indexAnim.positions[i][<span style="color: #009999">1</span>] < indexAnim.destPositions[i][<span style="color: #009999">1</span>] ? <span style="color: #009999">1</span>: -<span style="color: #009999">1</span>);
<span style="color: #aaaaaa; font-style: italic">// draw image on canvas</span>
canvas.drawImage(indexAnim.images[i], indexAnim.positions[i][<span style="color: #009999">0</span>],indexAnim.positions[i][<span style="color: #009999">1</span>]);
}
}, <span style="color: #009999">41</span>); <span style="color: #aaaaaa; font-style: italic">// 41ms = 1000/24. 24 Frames are needed at least to create a smooth flow..</span>
});
<span style="color: #00aaaa">Math</span>.rand = <span style="color: #0000aa">function</span> (min, max) {
<span style="color: #0000aa">return</span>(<span style="color: #00aaaa">Math</span>.round(<span style="color: #00aaaa">Math</span>.random() * (max-min)) + min);
}
</pre></div><br />
<br />
Maybe the animation needs some fine-tuning, but It's quite good :)<br />
<br />
4. possible attempt: Flash<br />
But since I don't do Flash programming, this solution depends on my brother :)<br />
<br />
<br />
I hope you like my little solution here, and if you have a better idea share it with us.Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-17938658465717943222011-10-10T06:10:00.000-07:002011-10-10T06:10:10.610-07:00jQuery cachingIt's really simple to select an element in jQuery:<br />
<br />
<div style="background: none repeat scroll 0% 0% white; border-color: gray; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; color: black; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0pt;">$(<span style="color: #aa5500;">'#name'</span>);
</pre></div><br />
But if we use this selection more than once in our code, we should cache it:<br />
<br />
<div style="background: none repeat scroll 0% 0% white; border-color: gray; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; color: black; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0pt;"><span style="color: #0000aa;">var</span> name = $(<span style="color: #aa5500;">'#name'</span>);
name.val(<span style="color: #aa5500;">"Johnson"</span>);
name.addClass(<span style="color: #aa5500;">"inputField"</span>);
name.parent().append(<span style="color: #aa5500;">'<p>Some text here</p>'</span>);
</pre></div><br />
Every time we select an element with jQuery, the framework goes through the entire DOM until it founds all the elements that match the selector. In the above example, I cached the jQuery object to a variable called name. Later on my code, I can use this variable to modify my element without searching for it again. So I've just quartered the time spent on selection which means I've given a boost to performance.<br />
<br />
If I cache multiple elements (for example: form inputs) I usually use an object literal to group them together. So later on my code, I won't get confused which variable relates to which form.<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #aaaaaa; font-style: italic">/* Registration form */</span>
<span style="color: #0000aa">var</span> regForm = {
<span style="color: #aa5500">'name'</span> : $(<span style="color: #aa5500">'#name'</span>),
<span style="color: #aa5500">'email'</span> : $(<span style="color: #aa5500">'#email'</span>),
<span style="color: #aa5500">'address'</span> : $(<span style="color: #aa5500">'#address'</span>),
<span style="color: #aa5500">'phone'</span> : $(<span style="color: #aa5500">'#phone'</span>)
};
<span style="color: #0000aa">var</span> contactForm = {
<span style="color: #aa5500">'name'</span> : $(<span style="color: #aa5500">'#name'</span>),
<span style="color: #aa5500">'email'</span> : $(<span style="color: #aa5500">'#email'</span>),
<span style="color: #aa5500">'subject'</span> : $(<span style="color: #aa5500">'#subject'</span>),
<span style="color: #aa5500">'message'</span> : $(<span style="color: #aa5500">'#message'</span>)
};
<span style="color: #aaaaaa; font-style: italic">// ... some other code here</span>
<span style="color: #0000aa">if</span>(regForm.name.val() == <span style="color: #aa5500">""</span>) {
<span style="color: #aaaaaa; font-style: italic">// do something</span>
}
<span style="color: #aaaaaa; font-style: italic">// ... some other code here</span>
<span style="color: #0000aa">if</span>(contactForm.name.val() == <span style="color: #aa5500">""</span>) {
<span style="color: #aaaaaa; font-style: italic">// do something</span>
}
</pre></div>Szivák Zsolthttp://www.blogger.com/profile/15120501879093343427noreply@blogger.com1tag:blogger.com,1999:blog-4225536372283253986.post-21940766599646980002011-10-09T13:44:00.000-07:002011-10-09T13:44:16.256-07:00Javascript Array prototype and for-inIf you are developing a 3rd party application, a jQuery plugin or something similar, this will be specially useful for you.<br />
<br />
I'm sure you've heard about it but you can extend the Javascript's core objects with the help of the <a href="http://www.w3schools.com/jsref/jsref_prototype_array.asp">prototype property</a>. So, in this case let's see what happens if we combine Array.prototype with a for-in loop.<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #aaaaaa; font-style: italic">// let's create a simple array</span>
<span style="color: #0000aa">var</span> testArr = <span style="color: #0000aa">new</span> <span style="color: #00aaaa">Array</span>(<span style="color: #009999">1</span>, <span style="color: #009999">2</span>, <span style="color: #009999">3</span>);
<span style="color: #aaaaaa; font-style: italic">// print it out to the console</span>
<span style="color: #0000aa">for</span>( <span style="color: #0000aa">var</span> i <span style="color: #0000aa">in</span> testArr ) {
console.log(i+<span style="color: #aa5500">": "</span>+testArr[i]);
}
<span style="color: #aaaaaa; font-style: italic">// output: </span>
<span style="color: #aaaaaa; font-style: italic">// 1</span>
<span style="color: #aaaaaa; font-style: italic">// 2</span>
<span style="color: #aaaaaa; font-style: italic">// 3</span>
<span style="color: #aaaaaa; font-style: italic">// extend the array object</span>
<span style="color: #00aaaa">Array</span>.prototype.myMethod = <span style="color: #0000aa">function</span> (arr) {
<span style="color: #aaaaaa; font-style: italic">// Do something here..</span>
}
<span style="color: #aaaaaa; font-style: italic">// loop the array again</span>
<span style="color: #0000aa">for</span>( <span style="color: #0000aa">var</span> i <span style="color: #0000aa">in</span> testArr ) {
console.log(i+<span style="color: #aa5500">": "</span>+testArr[i]);
}
<span style="color: #aaaaaa; font-style: italic">// output: </span>
<span style="color: #aaaaaa; font-style: italic">// 1</span>
<span style="color: #aaaaaa; font-style: italic">// 2</span>
<span style="color: #aaaaaa; font-style: italic">// 3 </span>
<span style="color: #aaaaaa; font-style: italic">// myMethod: function (arr) { }</span>
</pre></div><br />
<br />
As you can see, the second time in the loop the custom methos is also listed az an array item. This can be source of unknown bugs and I have spent a lot of time to figure this little trick out.<br />
<br />
<b>So, what are the solutions?</b><br />
Use the Array object's "hasOwnProperty" property:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #0000aa">for</span>( <span style="color: #0000aa">var</span> i <span style="color: #0000aa">in</span> arr) {
<span style="color: #0000aa">if</span>( !arr.hasOwnProperty( i ) ) <span style="color: #0000aa">continue</span>;
<span style="color: #aaaaaa; font-style: italic">// stuff to do..</span>
}
</pre></div><br />
Or if you have jQuery loaded, use the .each method.<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">jQuery.each(testArr, <span style="color: #0000aa">function</span> (key, value) {
console.log(key+<span style="color: #aa5500">": "</span>+value);
});
</pre></div><br />
<br />
This possible bug source is kind of sneaky, yet the solution is simple :)Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-3771355368854594732011-10-09T08:43:00.000-07:002011-10-10T06:55:14.572-07:00HowTo: Canvas colorful bouncing circle animation with JavaScript<h2>Introduction</h2><br />
I've really really waited for the moment when I can start developing canvas animations. In this post I'm going to present you what I've coded and tell you a few words about its concept.<br />
<br />
But, check out the <a href="http://jsfiddle.net/szivak009/Maxup/7/embedded/result/" target="_blank">Demo</a> first.<br />
<br />
So, as you've seen, the result is a canvas with bouncing and colorful circles. They are random positioned with random colors, random directions and random sizes. But, what is a canvas? Canvas is a part of Html5 specification. You can use it to draw graphics and animations with the help of JavaScript.<br />
<br />
<div style="background: none repeat scroll 0% 0% white; border-color: gray; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; color: black; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0pt;"><span style="color: dodgerblue; font-weight: bold;"><canvas</span> <span style="color: dodgerblue;">width=</span><span style="color: #aa5500;">"400"</span> <span style="color: dodgerblue;">height=</span><span style="color: #aa5500;">"300"</span><span style="color: dodgerblue; font-weight: bold;">></canvas></span>
</pre></div><br />
I won't go into basics of canvas element. If you are interested about it, please check out <a href="https://developer.mozilla.org/en/Canvas_tutorial">Mozilla Developer Network's Canvas Tutorial</a>.<br />
<br />
<h2>Animation basics</h2>Frames. All we need is them. A frame is a 'screenshot' of the current state of a scene. A scene contains the objects and pretty much everything we want to draw to the audience. We create an animation from frames by drawing at least 24 to the screen in every second. This is the minimum amount to deceive the eye to see motion on the screen. Of course, the more frames we draw in one second, the smoother the animation gets. From frame to frame we must update and redraw all of the objects. Everytime we create an animation the following things happen:<br />
<ol><li>Initialization</li>
<li><b>Updating scene</b></li>
<li><b>Drawing scene</b></li>
<li><b>While it must be drawn, jump back to the 2. point else 5.</b></li>
<li>End of animation</li>
</ol><br />
The 2., 3. and 4. point together forms the main loop. This is where all of the scene objects' state, position, color etc. gets updated and gets drawn. If you wish to put user input to the animation (etc, mouse movement) there would be a new item in the list for input handling.<br />
<br />
<h2>Skeleton of my animation object</h2><div style="background: none repeat scroll 0% 0% white; border-color: gray; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; color: black; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0pt;"><span style="color: #0000aa;">var</span> animation = <span style="color: #0000aa;">function</span>() {
<span style="color: #aaaaaa; font-style: italic;">/* List of objects to draw (the particles) */</span>
<span style="color: #0000aa;">var</span> list = [];
<span style="color: #aaaaaa; font-style: italic;">/* Frame per seconds */</span>
<span style="color: #0000aa;">var</span> fps = <span style="color: #009999;">24</span>;
<span style="color: #aaaaaa; font-style: italic;">/* Object constructor */</span>
<span style="color: #0000aa;">var</span> particle = <span style="color: #0000aa;">function</span>() {};
<span style="color: #aaaaaa; font-style: italic;">/* Initialization */</span>
<span style="color: #0000aa;">this</span>.init = <span style="color: #0000aa;">function</span>(v) {};
<span style="color: #aaaaaa; font-style: italic;">/* Updating objects state, position, etc.. */</span>
<span style="color: #0000aa;">var</span> update = <span style="color: #0000aa;">function</span>() {};
<span style="color: #aaaaaa; font-style: italic;">/* Drawing the objects */</span>
<span style="color: #0000aa;">var</span> draw = <span style="color: #0000aa;">function</span>() {};
<span style="color: #aaaaaa; font-style: italic;">/* Calling update() and draw() */</span>
<span style="color: #0000aa;">var</span> loop = <span style="color: #0000aa;">function</span>() {};
<span style="color: #aaaaaa; font-style: italic;">/* Setting main loop */</span>
<span style="color: #0000aa;">this</span>.play = <span style="color: #0000aa;">function</span>() {};
}
</pre></div><br />
The above source snippet is the skeleton of my animation object.<br />
<br />
<h2>Initialization</h2>Bouncing circles on the screen represented as a particle object. The animation itself has a variable called list. Every item of it will be a new particle object. Calling the init() function with a number parameter will add as much particles to the animation as much we want.<br />
<br />
<h2>Particles</h2>Particles object looks like this:<br />
<div style="background: none repeat scroll 0% 0% white; border-color: gray; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; color: black; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0pt;"><span style="color: #aaaaaa; font-style: italic;">/* Particle object */</span>
<span style="color: #0000aa;">var</span> particle = <span style="color: #0000aa;">function</span>() {
<span style="color: #aaaaaa; font-style: italic;">/* Coordinates */</span>
<span style="color: #0000aa;">this</span>.x = <span style="color: #009999;">0</span>;
<span style="color: #0000aa;">this</span>.y = <span style="color: #009999;">0</span>;
<span style="color: #aaaaaa; font-style: italic;">/* The radius of circles */</span>
<span style="color: #0000aa;">this</span>.radius = <span style="color: #009999;">5</span>;
<span style="color: #0000aa;">this</span>.speed_x = <span style="color: #009999;">1</span>;
<span style="color: #0000aa;">this</span>.speed_y = <span style="color: #009999;">1</span>;
<span style="color: #aaaaaa; font-style: italic;">/* Direction */</span>
<span style="color: #0000aa;">this</span>.dx = <span style="color: #009999;">0</span>;
<span style="color: #0000aa;">this</span>.dy = <span style="color: #009999;">0</span>;
<span style="color: #0000aa;">this</span>.color = {
fill : <span style="color: #aa5500;">'#000'</span>,
stroke : <span style="color: #aa5500;">'#000'</span>
}
<span style="color: #aaaaaa; font-style: italic;">/* Boundaries (canvas width and height) */</span>
<span style="color: #0000aa;">this</span>.bounds = {
x0 : <span style="color: #009999;">0</span>,
x1 : <span style="color: #009999;">600</span>,
y0 : <span style="color: #009999;">0</span>,
y1 : <span style="color: #009999;">400</span>
}
<span style="color: #aaaaaa; font-style: italic;">/* Private function for random color but I think you've already guessed that. */</span>
<span style="color: #0000aa;">var</span> random_color = <span style="color: #0000aa;">function</span>(){}
<span style="color: #aaaaaa; font-style: italic;">/* Function to initialise variables */</span>
<span style="color: #0000aa;">this</span>.init = <span style="color: #0000aa;">function</span>() {}
<span style="color: #aaaaaa; font-style: italic;">/* Updater function, called at every frame. It updates positions and check boundaries. */</span>
<span style="color: #0000aa;">this</span>.update = <span style="color: #0000aa;">function</span>() {}
}
</pre></div><br />
To represent a circle on the screen I stored information about it such as its x and y coordinate, its x and y speed, its direction, its colors and its boundaries because I don't want it to go away from the screen leaving a blank white field to the user. Init function sets variables to random values. The update function is used to update the circles properties in every loop. It will be called by the loop's update function.<br />
<br />
<h2>Updating and drawing</h2>I've defined a loop function. It simply calls the update() and draw() once. To create the animation by calling the loop function multiple times in every second I have to use the setInterval() function.<br />
<br />
<div style="background: none repeat scroll 0% 0% white; border-color: gray; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; color: black; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0pt;"><span style="color: #aaaaaa; font-style: italic;">/* To start animation */</span>
<span style="color: #0000aa;">this</span>.play = <span style="color: #0000aa;">function</span>() {
<span style="color: #aaaaaa; font-style: italic;">/* Animloop */</span>
setInterval(loop, <span style="color: #009999;">1000</span>/fps);
};
</pre></div><br />
The first parameter must be a function what will be called, and the second parameter must be a number representing a ms value. Let's say I want it to call 24 times a second, then I must divide 1000 by the fps rate (24 now) to get the desired ms values.<br />
<br />
<br />
<div style="background: none repeat scroll 0% 0% white; border-color: gray; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; color: black; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0pt;"><span style="color: #0000aa;">var</span> ANIM = <span style="color: #0000aa;">new</span> animation();
ANIM.init(<span style="color: #009999;">25</span>);
ANIM.play();
</pre></div><br />
<h2>Final words</h2>This is a basic animation concept. I hope you found it useful. Play with it online on <a href="http://jsfiddle.net/szivak009/Maxup/7/" target="_blank">this link</a> at JsFiddle.net. If you would like to say anything or noticed something, please leave a comment.Szivák Zsolthttp://www.blogger.com/profile/15120501879093343427noreply@blogger.com1tag:blogger.com,1999:blog-4225536372283253986.post-7845528972815537612011-10-09T06:40:00.000-07:002011-10-09T06:44:01.023-07:00jQuery: Checkbox howtoOnce I've run into a project with a complicated form where some ajax didn't work. After digging into the code I've sadly seen a mistake that caused the functionality loss.<br />
<br />
As you know, checkbox state can be determine at least two ways:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #aaaaaa; font-style: italic">/* checkbox */</span>
<span style="color: #0000aa">var</span> chk1 = $(<span style="color: #aa5500">'#chk1'</span>);
chk1.attr(<span style="color: #aa5500">'checked'</span>);
<span style="color: #aaaaaa; font-style: italic">/* or */</span>
chk1.is(<span style="color: #aa5500">':checked'</span>);
</pre></div><br />
The previous programmer used the attr() function, however he forgot (or did not know...?) the difference between the two. While attr() function returns the attribute of the checkbox (<span style="color: #0000aa; margin: 0; line-height: 125%">undefined</span> if not checked, <span style="color: #aa5500; margin: 0; line-height: 125%">'checked'</span> if checked), the second is() function returns boolean <span style="color: #0000aa; margin: 0; line-height: 125%">true</span> or <span style="color: #0000aa;margin: 0; line-height: 125%">false</span>. He sent the return value of attr() call as a string to a php script, but he expected 'true' or 'false', but he got 'checked' or 'undefined'.<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #aaaaaa; font-style: italic">/* checkbox */</span>
<span style="color: #0000aa">var</span> chk1 = $(<span style="color: #aa5500">'#chk1'</span>);
chk1.attr(<span style="color: #aa5500">'checked'</span>, <span style="color: #0000aa">true</span>);
<span style="color: #aaaaaa; font-style: italic">// returns 'checked' but it evaluates to boolean true in javascript</span>
<span style="color: #0000aa">if</span>(chk1.attr(<span style="color: #aa5500">'checked'</span>)) {
}
<span style="color: #aaaaaa; font-style: italic">// returns boolean true </span>
<span style="color: #0000aa">if</span>(chk1.is(<span style="color: #aa5500">':checked'</span>)){
}
</pre></div><br />
Another note, to check a checkbox you can use:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">chk1.attr(<span style="color: #aa5500">'checked'</span>,<span style="color: #0000aa">true</span>);
</pre></div><br />
To uncheck a checkbox, you can do:<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">chk1.attr(<span style="color: #aa5500">'checked'</span>, <span style="color: #0000aa">false</span>);
<span style="color: #aaaaaa; font-style: italic">/* or */</span>
chk1.removeAttr(<span style="color: #aa5500">'checked'</span>);
</pre></div><br />
So the conclusion is to be careful out there and always know what a function will return!Szivák Zsolthttp://www.blogger.com/profile/15120501879093343427noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-32896939895464913552011-10-07T14:59:00.000-07:002011-10-07T23:57:43.782-07:00jQuery speed test - sibling selectorI'll continue the previous post with a similar one. But this time I tested the sibling selector of jQuery. And as it turned out it is quite interesting but I don't want to kill the joke too early, so let's see that pic:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-fr8nSCoGOWE/To90sAaz2hI/AAAAAAAAAUs/S1VZ0cavDQ0/s1600/jquery-siblingselectors.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="234" width="400" src="http://1.bp.blogspot.com/-fr8nSCoGOWE/To90sAaz2hI/AAAAAAAAAUs/S1VZ0cavDQ0/s400/jquery-siblingselectors.jpg" /></a></div><br />
Well, IE is...slow, so to see things clearer I have removed it from the graph:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-2RsLqxs_SR4/To903hi0ysI/AAAAAAAAAU0/DldBUDr5cnE/s1600/jquery-siblingselectors-noie.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="234" width="400" src="http://4.bp.blogspot.com/-2RsLqxs_SR4/To903hi0ysI/AAAAAAAAAU0/DldBUDr5cnE/s400/jquery-siblingselectors-noie.jpg" /></a></div><br />
Obviously the fastest solution is: jQuery("h1 + h2")<br />
<br />
BUT... there are some really interesting things going there. How can it be, that jQuery("h1").siblings("h2") is sooo much slower, than this: <br />
<br />
jQuery("h2").filter(function () { <br />
return jQuery(this).prev()[0].tagName == "H1"; <br />
});<br />
<br />
<br />
If anybody knows the answer, please share it with us!Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-45008281017478001552011-10-07T13:58:00.000-07:002011-10-08T00:03:27.795-07:00jQuery speed test - child selectorSelecting child elements with jQuery is not a challange. However selecting it the fastest way is. I did a simple jQuery selector speed test with the latest versions of Firefox, Chrome, Opera and Internet Exporer. The values you see here are in milliseconds per 1000 cycle.<br />
<br />
Here is what I got:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-99WRqxoNy4g/To82vcf-Y5I/AAAAAAAAAUk/q1Qe9GSP7dA/s1600/jquery-childselectors.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="228" width="400" src="http://1.bp.blogspot.com/-99WRqxoNy4g/To82vcf-Y5I/AAAAAAAAAUk/q1Qe9GSP7dA/s400/jquery-childselectors.jpg" /></a></div><br />
Based on the previous chart it seems... well, quite obvious that IE is the slowest and Chrome is the fastest... but returning to the topic... :)<br />
<br />
Here are the comparisons of the fastest ways of getting the children elements (the datas from IE are excluded from the test now due to the large difference):<br />
<br />
<b>For all child elements the best way is:</b><br />
jQuery("li > *"). It's: <br />
<ul><li>~29.4% faster than jQuery("li").children()</li>
<li>~86.1% faster than jQuery("> *", li)</li>
<li>~140% slower than li.children()</li>
</ul><br />
<b>And for only link elements the best method is:</b><br />
jQuery("li > a"). It's: <br />
<ul><li>~65.2% faster than jQuery("li").children("a")</li>
<li>~87.5% faster than jQuery("> a", li)</li>
<li>~47.3% faster than li.children("a")</li>
</ul><br />
The other thing to observe is that the loops are much faster if you store the base jQuery wrapper object in a variable.Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0tag:blogger.com,1999:blog-4225536372283253986.post-74246045056056068032011-08-20T13:08:00.000-07:002011-08-20T13:11:06.528-07:00Javascript - pausing script flow ( sleep )Sometimes it happens, that I need to PAUSE the flow of my script. And I mean pause, with capital letters, because these times a simple setTimeout would not help.<br />
<br />
There is a very nice, browser independent method to do this:<br />
<br />
1. Create a synchronous AJAX call<br />
2. On the server side call the "sleep( [sec] )" function<br />
<br />
To speak in code, this is the javascript (jQuery) part of it:<br />
<br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: #0000aa;">function</span> pause(millisec) {
jQuery.ajax({
type: <span style="color: #aa5500;">"GET"</span>,
url: <span style="color: #aa5500;">"index.php"</span>,
data: {
task: <span style="color: #aa5500;">'pause'</span>,
pauseMillisec: millisec
},
async: <span style="color: #0000aa;">false</span>
});
}
</pre></div><br />
<br />
And this is the PHP part:<br />
<br />
<div style="background: #ffffff; background: white; border-width: .1em .1em .1em .8em; border: solid gray; color: black; overflow: auto; padding: .2em .6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: teal;"><?php</span>
<span style="color: navy; font-weight: bold;">if</span>( $_GET[<span style="color: blue;">"task"</span>] == <span style="color: blue;">"pause"</span> ) {
sleep( $_GET[<span style="color: blue;">"pauseMillisec"</span>]/<span style="color: blue;">1000</span> );
}
<span style="color: teal;">?></span>
</pre></div><br />
That's all folks.. isn't it easy? :)<br />
<br />
Feel free to share your thoughts with me. <br />
<br />
Filip Florahttp://www.blogger.com/profile/00229302029831997306noreply@blogger.com0