tag:blogger.com,1999:blog-28524700463051680202024-03-21T08:38:03.675-07:00GeeKay LabsI blog about a little bit of code, little bit of design, and a lot of scratching my head.Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.comBlogger25125tag:blogger.com,1999:blog-2852470046305168020.post-92175811208956748512015-03-24T01:36:00.000-07:002015-03-24T01:36:03.759-07:00CSS: Block vs Inline vs Inline-Block<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<br /></div>
Here are the major differences without any fancy words or pictures: <div>
<br /></div>
<div>
Inline: <i>Cannot</i> have a height, width or a vertical margin but <i>can</i> have horizontal margin. Behaves much like floating left.</div>
<div>
Block: <i>Can</i> have a height, width and margin. Takes up the entire width and pushes the successive content to next line.</div>
<div>
<br /></div>
<div>
How about Inline-Block? For that, let's understand why the above two display modes are used:</div>
<div>
<div>
<br />Inline is a display mode that is to be used in a sentence. For instance, if you have a paragraph and want to highlight a single word, you would wrap the particular word with an <i>em</i> or a <i>span</i> tag. It makes sure that the word stays in the same line, as <i>span</i> and <i>em</i> tags are set to <i>display: inline</i> by default. But if you want to use properties like <i>height</i> for the <i>em</i> or <i>span</i> tag, you need to make it <i>display: inline-block</i> to use the properties, and yet keep them on the same line.</div>
<div>
<br /></div>
<div>
Container-type elements (like <div>, <article>, <p>, etc.) are set as block-level elements by default, so the computed value of the display property for these is “block”. All headers (<h1>, <h2>, etc.), even though they generally only contain text content, are likewise block elements by default.</div>
<div>
<br /></div>
<div>
<div>
On the other hand, elements that are used to append with content are inline elements. That is, their computed display value is “inline”. These are elements like <span>, <em> and <cite>.</div>
</div>
<div>
<br /></div>
</div>
</div>
Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-33418793044644817082015-01-31T21:21:00.001-08:002015-01-31T21:23:16.960-08:00Changing the eraser size in Illustrator<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Changing the brush size of the eraser in Adobe Illustrator didn't seem an easy task at first. So for those who faced the same problem, read on.<br />
<br />
You can simply <b>double click on the eraser icon</b> in the toolbar to bring up this menu:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZOHQmR4Ul4jBoh4KQD5Cn9GpbEmgCoMXJtsEHH8c5N1KqXwkj33buDYGfW2_pmhyphenhyphenUm2CJ6pO-fTr6129GuYVi-WCUntWgyNXqIwGR-xDfJ6EjJ_iTUm8OaNoM_vuR7v2h6D8rQ8LkV_sS/s1600/Screen+Shot+2015-02-01+at+10.47.20+AM.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZOHQmR4Ul4jBoh4KQD5Cn9GpbEmgCoMXJtsEHH8c5N1KqXwkj33buDYGfW2_pmhyphenhyphenUm2CJ6pO-fTr6129GuYVi-WCUntWgyNXqIwGR-xDfJ6EjJ_iTUm8OaNoM_vuR7v2h6D8rQ8LkV_sS/s1600/Screen+Shot+2015-02-01+at+10.47.20+AM.png" height="263" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The eraser tool options in CS6</td></tr>
</tbody></table>
<br />
<br />
For a quicker change of eraser size, use the <b>[ and ] keys </b>while having the eraser tool selected.<br />
<br />
Follow this blog for more tips. Please do share this article if you found it useful.<br />
<br />
<br /></div>
Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-1477087821411684572014-02-09T21:09:00.002-08:002014-02-09T21:10:35.415-08:00Multiple CSS Transforms on single element<div dir="ltr" style="text-align: left;" trbidi="on">
I wanted to rotate an element in CSS and also wanted to mirror it. I thought of flipping the element, wrapping it with another div and then rotating the div. I found that I could do this in a single step by applying multiple transforms on a single element. Here's the syntax (vendor prefixed):<br />
<br />
<pre class="brush: css">transform:rotate(-45deg) scale(-1, 1);
-ms-transform:rotate(-45deg) scale(-1, 1);
-webkit-transform:rotate(-45deg) scale(-1, 1);</pre>
<pre class="brush: css">
</pre><br/>
Similarly, you can combine multiple css transformations. Got suggestions/improvements? Do comment below.
</div>
Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-37376783509150675852014-01-09T04:52:00.000-08:002014-01-15T22:04:48.514-08:00Responsive Web Design: Tips and Tricks<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" trbidi="on">
<div class="tr_bq" style="text-align: left;">
I recently worked on an application (Zoho Pulse) and made the application responsive for mobile and tablet devices. The website was previously built for web, and I had to face a lot of challenges to make it responsive. Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. </div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b>1. Simple DOM structure:</b></div>
<div style="text-align: left;">
This is perhaps the most basic of them all - keep it simple. Complex DOM means a complex layout, which means a lot more burden for you. It also would mean that the interaction and scroll will become sluggish - an effect you don't want. Divide your website into proper sections (like a header, left navigation pane, content area, etc.)<br />
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b>2. Media Queries:</b></div>
<div style="text-align: left;">
Media queries in CSS adjust the content based on width of the device. Choose to display/hide content using media queries. Make sure that only the most important content of your page is displayed on mobile devices. You can hide everything else that you feel are not-so-important.<br />
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b>3. Breakpoints:</b></div>
<div style="text-align: left;">
Make sure you have the right media query breakpoints for standard devices. Uneven breakpoints would make your website behave oddly in different devices which might nearly be of the same display resolution but above/below the breakpoint.</div>
<div style="text-align: left;">
<br /></div>
<div>
Here is a list of common breakpoints borrowed from the Foundation framework by Zurb:<br />
<br />
<pre class="brush: js">// Small screens
@media only screen { } /* Define mobile styles */
@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */</pre>
<pre class="brush: js"></pre>
<pre class="brush: js"></pre>
<br />
<b>4. Box-sizing: </b><br />
You probably know this property, but you will start appreciating it more while using it in responsive design. It helps you control the size of your divs even while resized. Box-sizing: border-box property gels the width, padding and border properties of the element within the specified width. In other words, the padding and border are 'inset'.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://s22.postimg.org/goxlayxgx/css_box_model_border_content_590x328.jpg" height="177" width="320" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="" style="clear: both; text-align: left;">
<b><br /></b>
<b><br /></b>
<b>5. Max and min properties:</b></div>
<div class="" style="clear: both; text-align: left;">
The max-width, max-height, min-width and min-height properties limit the maximum or minimum height/width of the element. Enough said.<br />
<br />
<br /></div>
<div class="" style="clear: both; text-align: left;">
<b>6. Em and Rem units:</b></div>
If your website is zoomable, the clarity of your fonts may be lost if you have specified the fonts in px units. It is well known to specify font sizes in ems. But what does it mean?<br />
<br />
<blockquote class="tr_bq">
"If you define a font-size as 1em (font-size:1em;) you are telling the browser to set the font height to the same height as the parent element default height."</blockquote>
Rems are different from ems in one distinct way – ems use the containers font size to calculate, whereas rems are root based, I.E they use the HTML font-size as the base to calculate from.</div>
<div>
<br />
<br /></div>
<div>
<b>7. Meta tags on your page:</b></div>
<div>
I use this:</div>
<div>
<br /></div>
<div>
<div class="p1">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"></div>
<div class="p1">
<br /></div>
<div class="p1">
It indicates that the height and width must be of that of the device, the zoom must be set to 100%, and must not be allowed to be zoomed in or out by the user. </div>
<div class="p1">
<br /></div>
<div class="p1">
<meta name="apple-mobile-web-app-capable" content="yes" /></div>
<div class="p1">
<br /></div>
If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content. You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.<br />
<br /></div>
<div>
<br /></div>
<div>
<b>8. Eliminating touch delays:</b></div>
<div>
Touch devices have a delay of nearly 300ms to allow double click. Anything more than 50ms as a negative impact and makes your app look sluggish as it takes time to respond. To eliminate this click delay, you can use the <a href="http://ftlabs.github.io/fastclick/">Fastclick</a> plugin.<br />
<br /></div>
<div>
<br /></div>
<div>
<b>9. Bring native scrolling to your web app:</b></div>
<div>
Mobile browsers do not scroll content like a native web application does. The 'momentum' or 'kinetic' scroll that your phone provides for apps isn't provided for browsers. To use this, you need to add a CSS property in your scrolling container:</div>
<div>
<br /></div>
<div>
<i>webkit-overflow-scrolling: touch;</i><br />
<i><br /></i></div>
<div>
<i><br /></i></div>
<div>
<b>10. Backface-visibility:</b></div>
The backface-visibility property defines whether or not an element should be visible when not facing the screen. This property is useful when an element is rotated, and you do not want to see its backside. However, it is known to crash Safari in iPhone and iPad, so it is better to <b>avoid this property</b>.</div>
<div dir="ltr" trbidi="on">
<br /></div>
<div dir="ltr" trbidi="on">
Some more information on this here:</div>
<div dir="ltr" trbidi="on">
<br /></div>
<div dir="ltr" trbidi="on">
<a href="http://dontwakemeup.com/webkit-backface-visibility-and-browser-crashing/">http://dontwakemeup.com/webkit-backface-visibility-and-browser-crashing/</a></div>
<div dir="ltr" trbidi="on">
<br /></div>
<div dir="ltr" trbidi="on">
<a href="http://stackoverflow.com/questions/16166849/ios-multiple-divs-with-webkit-backface-visibilityhidden-crash-browser-when-zo">http://stackoverflow.com/questions/16166849/ios-multiple-divs-with-webkit-backface-visibilityhidden-crash-browser-when-zo</a></div>
<div dir="ltr" trbidi="on">
<br /></div>
<div dir="ltr" trbidi="on">
<a href="https://discussions.apple.com/thread/5397323?start=75&tstart=0">https://discussions.apple.com/thread/5397323?start=75&tstart=0</a><br />
<br /></div>
<div dir="ltr" trbidi="on">
<div class="p1">
<br /></div>
<div class="p1">
<b>11. Lesser jQuery bindings:</b></div>
<div class="p1">
More jQuery bindings would mean that you are increasing the initial loading time and the DOM becomes heavier, also the performance and response is affected. It is generally advisable to use lesser jQuery bindings and use plain JavaScript instead.</div>
<div class="p1">
<br />
<br /></div>
<div class="p1">
<b>12. Avoiding hover states:</b></div>
<div class="p1">
If you find your website to be sluggish while scrolling, the single main reason would be the :hover selector in CSS. When you scroll on content that has a hover state, the browser mistakes the touchstart of scroll to be that of a hover state. Instead of scrolling the content, it shows you the hover state of the element, which makes the scroll look sluggish. Avoid hover states wherever possible and the best suggestion would be to gather all hover statements into a single file and not loading it for mobile devices.</div>
<div class="p1">
<br />
<br /></div>
<div class="p1">
<b>13. Avoid using orientation in media queries:</b></div>
<i>@media screen and (orientation:portrait)<br />@media screen and (orientation:landscape)</i></div>
<div dir="ltr" trbidi="on">
<i><br /></i></div>
<div dir="ltr" trbidi="on">
These statements in media queries allow you to define styles specifically for portrait or landscape orientations. It is, however known to cause problems in Android when the "focus" event of input boxes is fired. Sometimes, the whole layout goes beserk.<br />
<br /></div>
<div dir="ltr" trbidi="on">
<br /></div>
<div dir="ltr" trbidi="on">
<b>14. Relative design:</b></div>
<div dir="ltr" trbidi="on">
This is again the basics of responsive design revisited. Try to specify all widths and heights in %. It allows content to adjust automatically to the available width/height.<br />
<br />
<br />
<br />
Got more ideas? Do leave a comment below! Also, you can grab a presentation of the same <a href="http://www.slideshare.net/gkrocks/responsive-web-design3atipsandtricks-2" target="_blank">here on Slideshare</a>.</div>
</div>
Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com2tag:blogger.com,1999:blog-2852470046305168020.post-82130884656219537122013-11-13T06:56:00.000-08:002013-11-13T06:59:09.238-08:00Differentiating mobiles and tablets in Javascript via User Agent<div dir="ltr" style="text-align: left;" trbidi="on">
User agent for Android is pretty confusing - There's no separate UA for Android tablets. Hence, I came up with a generalized UA detection technique to differentiate tablets (Android and iPad) from mobile phone UAs. This will particularly be useful when you'd want to render separate layouts for Mobile and Tablet. Here's the JS code:<br />
<br />
<pre class="brush: js">function getUserAgent(){
var ua = navigator.userAgent.toLowerCase();
if((ua.indexOf("iphone") !== -1) || ((ua.indexOf("mobile") !== -1) && (ua.indexOf("android") !== -1))){
//The device is a mobile.
}
else if((ua.indexOf("ipad") !== -1) || (ua.indexOf("android") !== -1)){
//The device is a tablet.
}
else{
//Desktop or unrecognised device.
}
}</pre>
<br />
You can also take a look at the same code as a <a href="https://gist.github.com/gkthegr8/7448127">Gist on Github</a> and do check out other gists/projects by me.
</div>
Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-10802093360593134092013-10-28T06:07:00.000-07:002013-10-28T06:07:29.503-07:00How to make smooth circles in Photoshop without jagged edges<div dir="ltr" style="text-align: left;" trbidi="on">
I tried numerous times to make a smooth circle, but I kept ending up with jagged edges in Photoshop. I knew I had been missing something and that's what kept spoiling my design. I then realized - hey, unlike Illustrator, Photoshop isn't a Vector tool. It is a Raster tool. But there <i>must </i>be something I could do to get a perfect smooth circle. And this did the trick:<br />
<br />
<b>For circular shapes:</b><br />
<br />
<ul style="text-align: left;">
<li>Select the Ellipse Tool</li>
<li>On the top panel, change the mode from Shape to Pixels. </li>
<li>Tick the Anti-alias checkbox.</li>
<li>Now draw your shape!</li>
</ul>
<br />
<b>For circular selections:</b><br />
<div>
<br />
<ul>
<li>Select the Elliptical Marquee Tool</li>
<li>Tick the Anti-alias checkbox.</li>
<li>Now go ahead and make that selection!</li>
</ul>
<div>
<b>While making selection from a path:</b></div>
<div>
<ul style="text-align: left;">
<li>Make sure that the 'Anti-Aliased' checkbox is ticked.</li>
</ul>
<div>
For a better understanding of the Anti-Alias feature, see the comparison image below (Click to enlarge):</div>
</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://s12.postimg.org/tqoshije5/Photoshop_ss_004.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="228" src="http://s12.postimg.org/tqoshije5/Photoshop_ss_004.jpg" width="320" /></a></div>
<div>
<br /></div>
</div>
</div>
Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com1tag:blogger.com,1999:blog-2852470046305168020.post-75874580973909974592013-10-03T23:34:00.002-07:002013-10-03T23:34:34.421-07:00One sided Box-Shadow in CSS<div dir="ltr" style="text-align: left;" trbidi="on">
The biggest problem that I used to encounter with respect to shadows while coding in CSS after designing in photoshop is that I add shadows towards one side in PS and I found it hard to replicate the same in CSS. There's a very simple solution to that.<br />
<br />
There's a fourth property for box-shadow, which is the shadow spread property. I didn't know that something like this existed for quite a long time. An example for its usage is as below:<br />
<br />
<pre class="brush: css"> -webkit-box-shadow: 10px 0px 5px -2px #888 ;
</pre>
<br />
Set the fourth property negative, as required till you achieve the required one sided effect.<br />
<br />
Note: The above example sets a 10px box shadow towards the right and sets the vertical box shadow to 0.</div>
Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-46734435556512423842013-09-27T00:22:00.000-07:002013-09-27T00:22:10.499-07:00Better Global variables in Javascript<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
If you are using variables in Javascript in the traditional way as follows:<br />
<br />
<pre class="brush: js"> var testVariable = 1;
function foo(){
alert(testVariable);
}
</pre>
<br />
Then you may be wrong, because this case may fail when you integrate many Javascript files into one. I found that there's a workaround to fix this problem by attaching the variable to a <span style="background-color: #f3f3f3;">window</span><span style="color: #666666;"> </span>object. Here's how it can be done:<br />
<br /></div>
<pre class="brush: js"> var window.testVariable = 1;
function foo(){
alert(window.testVariable);
}
</pre>
<br />
I find that this is a wonderful way to avoid a lot of problems and confusions regarding global variables in Javascript.</div>
Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-64034346774630913072013-08-24T04:59:00.000-07:002013-08-24T04:59:36.006-07:00Dynamically obtaining a DIV's ID - (When the ID itself is set dynamically).<div dir="ltr" style="text-align: left;" trbidi="on">
The Problem:<br />
<br />
Given a list of elements, find the ID of the element that was clicked upon. The challenge was that the ID itself was generated dynamically.<br />
<br />
<br />
The Solution:<br />
<br />
As the ID is generated dynamically and must be unique, I noticed that it has a constant class attribute like "post" in the below example. Then, one line of jQuery did the trick.<br />
<br />
For example, the given statement was like this:<br />
<br />
<pre class="brush:xml">..
<div id="post_237" class="post">
..
</div>
<div id="post_238" class="post">
..
</div>
</pre>
<br />
Note that the ID changes every time and I had to find the content of that DIV. But the CLASS "post" is constant. Thus, to find the ID, the corresponding jQuery statement is as follows:<br />
<br />
<pre class="brush:js">var getID = $('.post').attr('id');
</pre>
<br />
There you go, the variable <span style="background-color: #eeeeee;">getID</span> now contains the ID of that dynamic element.
</div>
Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-36498431136527081772013-08-18T06:54:00.001-07:002013-08-23T23:18:43.608-07:00Invert and Mirror X and Y axis using CSS Transforms<div dir="ltr" style="text-align: left;" trbidi="on">
To invert or mirror an element (text, image, etc.) you need to use the <span style="background-color: #f3f3f3;">transform: scale</span> property in CSS. You can choose to laterally (sideways) invert or vertically invert an element.<br />
<br />
To invert laterally, use the following code:<br />
<br />
<pre class="brush: css">transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
</pre>
<br />
To invert vertically:<br />
<br />
<pre class="brush: css">transform: scale(1, -1);
-ms-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
</pre>
<br />
To invert both ways:<br />
<br />
<pre class="brush: css">transform: scale(-1, -1);
-ms-transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);
</pre>
</div>
Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-91285094550385104972013-08-14T06:02:00.000-07:002013-08-14T06:02:24.486-07:00Creating and Saving Paths in Photoshop<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; border: 0px; color: #333333; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; margin-bottom: 8px; margin-top: 8px; padding: 0px;">
When you create a path using a pen tool in Adobe Photoshop CS6, it appears as a work path in the Paths panel. Note that a work path is temporary and unsaved. Also, you can have only one work path at a time.</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; margin-bottom: 8px; margin-top: 8px; padding: 0px;">
If the work path is selected when you begin another path, your actions are added to the current work path. If the existing work path is hidden and you begin drawing another path, that new work path replaces the existing one.</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; margin-bottom: 8px; margin-top: 8px; padding: 0px;">
Make sure that your path is saved before you start creating it. If you select New Path from the Paths panel pop-up menu <i>before </i>you create the path, Photoshop saves the work path, and it becomes a saved path. You can also click the Create New Path icon at the bottom of the Paths panel.</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; margin-bottom: 8px; margin-top: 8px; padding: 0px;">
To save a work path, double-click the path in the Paths panel. Or choose Save Path from the Paths panel pop-up menu. (Click the down arrow in the upper-right of the panel to open the menu.) Then, provide a name in the Save Path dialog box that appears and click OK. You can reuse the path again anytime you wish to.</div>
</div>
Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-66595823685335968632013-08-13T00:12:00.001-07:002013-08-13T00:12:58.111-07:00Loading jQuery Mobile in a dynamic environment<div dir="ltr" style="text-align: left;" trbidi="on">
I was writing an RSS feed application on PhoneGap powered by jQuery Mobile. I used the default accordion provided by jQM and it worked out well.<br />
<br />
However, I encountered a problem that the style wasn't getting applied when the number of accordion isn't known during page load time. The styles weren't applied to the dynamic elements. Here are some of the highlights of the problem I was facing:<br />
<br />
<br />
<ul style="text-align: left;">
<li>It is a simple RSS feed reader application.</li>
<li>The number of elements (RSS news items) are not known beforehand.</li>
<li>The feed is read and parsed into the page only after the page gets loaded.</li>
<li>The feed items have got no styles at all, as the jQM has already loaded and set the styles for all the static elements and the dynamic elements do not get their styles set by jQM.</li>
</ul>
<div>
Thus, the solution was that I had to somehow 'refresh' jQM alone so that the styles got applied after all the dynamic content is loaded. You need to refresh the DIV that has the dynamic content once it is loaded. </div>
<div>
<br /></div>
Assuming your dynamic content is appended to this node: <br /><br />
<pre class="brush: xml">
<div id="loaded-content" data-role="collapsible-set"></div>
</pre><br />
you have to do:<br />
<br />
<pre class="brush: js">
$('.loaded-content').collapsibleset('refresh');</div>
</pre>
<br /><br />
Thus, you now have the dynamic content's styles and behavior using jQuery Mobile. Is there a better way to do this? Do let me know!Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-40333267720983497752013-08-11T23:34:00.000-07:002013-08-11T23:37:53.458-07:00Accordion Expand/Collapse all in jQuery Mobile<div dir="ltr" style="text-align: left;" trbidi="on">
The default behavior of the Accordion in jQuery Mobile allows you to expand or collapse only one Accordion tab at a time. I came up with a code to expand/collapse all tabs at once.<br />
<br />
HTML:<br />
<br />
<pre class="brush: xml"><div class="openMe" data-role="collapsible">
<h3>
Hello 1</h3>
I'm the collapsible content. By default I'm closed, but you can click the header to open me.</div>
<div class="openMe" data-role="collapsible">
<h3>
Hello 2</h3>
I'm the collapsible content. By default I'm closed, but you can click the header to open me.</div>
<div class="openMe" data-role="collapsible">
<h3>
Hello 3</h3>
I'm the collapsible content. By default I'm closed, but you can click the header to open me.</div>
<a data-role="button" href="http://www.blogger.com/blogger.g?blogID=2852470046305168020#" id="openAll">Open All Collapsible</a>
<a data-role="button" href="http://www.blogger.com/blogger.g?blogID=2852470046305168020#" id="closeAll">Close All Collapsible</a>
</pre>
<br />
<br />
And here is the jQuery Mobile code to achieve the effect. I assume that you have included all the necessary jQM files. <br /><br />
<pre class="brush: js">
$('#openAll').on('click', function() {
$('.openMe').each(function() {
var coll = $(this);
coll.trigger('expand');
});
});
$('#closeAll').on('click', function() {
$('.openMe').each(function() {
var coll = $(this);
coll.trigger('collapse');
});
});
</pre>
<br /><br />
If you have a better way of doing this, let me know! :)
</div>Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-26352175707268911282013-08-07T23:32:00.000-07:002013-08-07T23:34:39.537-07:00How to count the number of li (list elements) inside ul (unordered list) using Javascript<div dir="ltr" style="text-align: left;" trbidi="on">
Yesterday, I was trying to count the number of list elements inside an unordered list. I came up with the following code:<br />
<br />
<br />
<pre class="brush: js">
var ul = document.getElementById("myul");
var liNodes = [];
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeName == "LI") {
liNodes.push(ul.childNodes[i]);
}
}
</pre>
</div>Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-17800423251498457772013-07-29T06:07:00.001-07:002013-07-29T06:10:16.764-07:00Show/hide left panel using Javascript<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
To show or hide a left panel, you need to keep an element (the left panel) with its CSS to be display:none so that we can make it appear to slide in from the left.<br />
<br />
Let's assume that the ID of the left panel is #left-panel. You need the following code to make it slide from the left.<br />
<br /></div>
<pre class="brush: js">function showHideLeftPanel()
{
$('#left-panel').toggle("slide",
{ direction: "left" }, 500);
}
</pre>
<br />
You can customize the duration and direction of the toggle and I hope it is self explanatory from the above code. The function can be called on click, on load, etc. and it automatically toggles the state of the element.<br />
<br />
You can read more on this <a href="http://api.jquery.com/">here</a>.</div>
Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-11320164939195176112012-07-24T02:56:00.000-07:002013-07-29T06:12:39.115-07:00A basic example with Git<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
In this post, I shall talk about how to create a sample project on Github and start pushing files to your Github account from your machine. You will learn how to create and get started with an example project and start working on a full fledged social project.<br />
<br />
<br />
<ul style="text-align: left;">
<li><span style="background-color: white;">Create a new repository on Github. In your computer, create a new folder (Eg. C:\Documents\My Projects\Sample)</span></li>
</ul>
<ul style="text-align: left;">
<li><span style="background-color: white;">Download and install Git and navigate to the directory in Git console and initialize git – <i><span style="color: #0b5394;">git init</span></i></span></li>
</ul>
<ul style="text-align: left;">
<li><span style="background-color: white;">Create/add all the project files to the folder and use the command – <span style="color: #0b5394;"><i>git add .</i></span></span></li>
</ul>
<ul style="text-align: left;">
<li><span style="background-color: white;">Enter the command <i><span style="color: #0b5394;">git commit –m “message”</span></i> and hit enter.</span></li>
</ul>
<ul style="text-align: left;">
<li><span style="background-color: white;">Next, enter the command </span><span style="background-color: white; color: #0b5394;"><i>git remote add origin https://github.com/username/repo-name.git</i></span><span style="background-color: white;"> where the username is your username and repo-name is the name of the repository you created.</span></li>
</ul>
<ul style="text-align: left;">
<li><span style="background-color: white;">Enter <i><span style="color: #0b5394;">git push</span></i> and your project files are now pushed to the server.</span></li>
</ul>
<div>
<br /></div>
<br />
<br />
Each time when you make changes to your project and push it to the server, repeat the following steps:<br />
<br />
<br />
<ul style="text-align: left;">
<li><span style="background-color: white;"><span style="color: #0b5394;"><i>git add . </i></span></span></li>
<li><span style="background-color: white;"><span style="color: #0b5394;"><i>git commit –m “message”</i></span></span></li>
<li><span style="background-color: white;"><span style="color: #0b5394;"><i>git push</i></span></span></li>
</ul>
<div>
<span style="color: #0b5394;"><i><br /></i></span></div>
<div>
That's it! You have learnt the basics of Git and all set to start social coding!</div>
<br />
<br /></div>Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-51516055919290297962012-07-24T00:38:00.002-07:002013-07-29T06:12:51.813-07:00Basic Git commands<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Github is an online service that hosts git projects and helps achieve social coding. <a href="http://www.github.com/">Sign up for Github</a>. After you have signed up and logged in, create a new repository. <span style="background-color: white;">Once the repository has been created in Github, start the Git Bash/Terminal and navigate to a folder in your local machine where you want to store your project files.</span><br />
<br />
<ul style="text-align: left;">
<li><span style="background-color: white;">You can use the Change Directory – </span><span style="background-color: white; color: #0b5394;"><i>cd</i></span><span style="background-color: white;"> and Make Directory – </span><span style="background-color: white; color: #0b5394;"><i>mkdir</i></span><span style="background-color: white;"> commands in both Git Bash and Terminal to navigate to the directory.</span></li>
</ul>
<div>
<br /></div>
<span style="background-color: white;">The initial setup requires an username and email that will be used to uniquely identify the user who has made changes to the project. </span><br />
<br />
<ul style="text-align: left;">
<li><span style="background-color: white;">Once you have navigated to the directory, initialize Git in that folder by using the command <span style="color: #0b5394;"><i>git init</i></span></span></li>
</ul>
<div>
<span style="color: #0b5394;"><i><br /></i></span></div>
<span style="background-color: white;">Add all the necessary project files. To make Git track these files, you need to explicitly specify it using the Git Add command. </span><br />
<span style="background-color: white;"><br /></span><br />
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li><span style="background-color: white;">To track all files, you can use the <span style="color: #0b5394;"><i>git add .</i></span> command (notice the dot in the end).</span></li>
</ul>
<ul style="text-align: left;">
<li><span style="background-color: white;">Next, the files need to be committed to the local repository. The command is<span style="color: #0b5394;"><i> git commit –m “message”</i></span>. The –m “message” requires a message every time you commit, to uniquely identify the versions and you need to specify it within quotes.</span></li>
</ul>
<div>
<br /></div>
Now, the server location has to be known by Git to put the files on the server.<br />
<br />
<ul style="text-align: left;">
<li><span style="background-color: white;">The command for this is : <span style="color: #0b5394;"><i>git remote add origin https://github.com/username/repo-name.git </i></span></span>(where the username is your Github username and the repo-name is your repository name.)</li>
</ul>
<br />
The files now need to be sent or pushed to the server. This enables the server to maintain the latest version of the code every time.<br />
<br />
<ul style="text-align: left;">
<li><span style="background-color: white;">The command to send the latest commit version to the server is <i><span style="color: #0b5394;">git push</span></i></span></li>
</ul>
<br />
If the server has a newer version of the project, it will not allow a push until you have a newer version. So the push fails and Git asks you to do a pull before you can push.<br />
<br />
<ul style="text-align: left;">
<li><span style="background-color: white;">The command for a pull from the server is </span><span style="background-color: white; color: #0b5394;"><i>git pull</i></span></li>
</ul>
<br />
You will now be able to push your commits to the server once you have a newer version.<br />
<div>
<br /></div>
<br />
<div>
<br /></div>
</div>Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-78884440064213583332012-07-23T23:33:00.000-07:002013-07-29T06:13:06.907-07:00Setting up Git<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
<span style="background-color: white;"><b>Setting up Git in Windows:</b></span></h3>
<div>
<span style="background-color: white;"><div>
<ul style="text-align: left;">
<li><span style="background-color: white;">Login to Github account and create a new repository.</span></li>
<li><span style="background-color: white;">Download Git for Windows. The exe is available </span><a href="https://help.github.com/articles/set-up-git" style="background-color: white;">here</a><span style="background-color: white;">.</span></li>
<li><span style="background-color: white;">After the installation is complete, run the Git Bash program in Windows.</span></li>
</ul>
</div>
<div style="font-weight: bold;">
<span style="background-color: white;">Setting up Git in Linux:</span></div>
<div>
<div>
<ul style="text-align: left;">
<li><span style="background-color: white;">Git can be set up on Ubuntu using the command “apt-get install git-core”</span></li>
<li><span style="background-color: white;">Start the terminal access and use the features of git.</span></li>
</ul>
</div>
</div>
<div>
<br /></div>
</span></div>
</div>Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-34698700405738669552012-07-23T23:23:00.000-07:002013-07-29T06:13:18.019-07:00The basics of Git<div dir="ltr" style="text-align: left;" trbidi="on">
In short, Git can be summed up as the following:<br />
<br />
<ul style="text-align: left;">
<li>Git is a version control system where multiple people can work on a same project and maintain the code at a central location.</li>
<li>It maintains all the previous versions of files in a smart way and we can recover the changes the made to any of the versions.</li>
<li>It is free for open sourced projects and we can use anyone’s code on Github and work on them.<br />The set up process for Windows and Linux are different, but the commands are same for both Windows and Linux as well.</li>
<li>The code is stored in a local project directory and is periodically updated to the server as changes are made to the project.</li>
<li>Every time, the latest code is always on the server, and changes are always made to the latest version.</li>
</ul>
I shall explain more about Git and the basic commands in Git in the next post. </div>Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-73081537028074069692012-07-18T00:33:00.000-07:002013-07-29T06:13:38.710-07:00How to get rid of system tray in PhoneGap within Windows Phone<div dir="ltr" style="text-align: left;" trbidi="on">
Visual Studio 2010 Express Edition creates a basic template for you in
PhoneGap, but it does come with an inherent, irritating native system
tray for Windows Phone applications. This is what I'm talking about:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDyKJlDeV5bLRXPmXrutNJsVMmbZSOeWp43xwtKhsF6tnGwQznHQMusXcPgaoaWUEcMliE1K_yqQB7rzCsH4ZRFUyC5J2yvebt6k0t9XJZpwi94Tnvo7hFRYev57akwcq_nZ7Yeikbz6lK/s1600/Untitled-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDyKJlDeV5bLRXPmXrutNJsVMmbZSOeWp43xwtKhsF6tnGwQznHQMusXcPgaoaWUEcMliE1K_yqQB7rzCsH4ZRFUyC5J2yvebt6k0t9XJZpwi94Tnvo7hFRYev57akwcq_nZ7Yeikbz6lK/s1600/Untitled-1.png" /></a></div>
<br />
In your Visual Studio project, you can safely disable the system tray with one click so that it doesn't affect the look and feel of your application. You just need to set the SystemTray.IsVisible to "false". Select the system tray in your design area and look at the properties panel. I have illustrated it for better understanding:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-g4iyR-FXra-T3AozTbZ7HrCvRChQvfJPmMt6TmIMEmYcwZP7WeJRCOUxiMUPBNVmHIja6aYU-QGg3EI7bFGk7pKgQVUIO6e2Ks-Nen7e3aJAonlNXheb_NDlPxyvC7CSXqBt4poOXLEn/s1600/one.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-g4iyR-FXra-T3AozTbZ7HrCvRChQvfJPmMt6TmIMEmYcwZP7WeJRCOUxiMUPBNVmHIja6aYU-QGg3EI7bFGk7pKgQVUIO6e2Ks-Nen7e3aJAonlNXheb_NDlPxyvC7CSXqBt4poOXLEn/s1600/one.png" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now, take a look at the properties panel and un-check the SystemTray.IsVisible option: </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ-_-W69UkifQDAeBJhFVSlvqzWRlzoSO602Hv-I7gON_-06wTjS3_mLnmLaxy3G4fY99bnsLrWJ7QHMNTbNZarqUPilREDHCqiSSaV-PGmHuGGp_Tw7QQ1GZZq6sfA8mWF1VDmjii8zcr/s1600/two.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ-_-W69UkifQDAeBJhFVSlvqzWRlzoSO602Hv-I7gON_-06wTjS3_mLnmLaxy3G4fY99bnsLrWJ7QHMNTbNZarqUPilREDHCqiSSaV-PGmHuGGp_Tw7QQ1GZZq6sfA8mWF1VDmjii8zcr/s1600/two.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Once you have un-checked the box, the System Tray disappears :) This can also be done by modifying the XAML and setting the same property to "False" all by yourself. Also, changing this in one page does not mean that it gets changed for all other pages. You need to manually edit and change them all.</div>
<br /></div>Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-24818499382450394722012-07-16T12:12:00.001-07:002013-07-29T06:13:48.898-07:00PhoneGap Windows Phone test results<div dir="ltr" style="text-align: left;" trbidi="on">
I have tested all the features of PhoneGap (Apache Cordova) on Windows Phone (on my HTC T8788, Surround) and I have gathered the following test results:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb-Z5aHpDwVNMtmLEYrYrbh-joK1YeS_usiaaRCdX21VwVOCkST4Q2KrdxZ4a03QUZqJOUi1GDv6vtyc1jr1FiUapDQRajGgyl84UhAd-ENvJfwiNVsz0VOSrXzOTsqUvsCFrbR_8W1FdA/s1600/features.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb-Z5aHpDwVNMtmLEYrYrbh-joK1YeS_usiaaRCdX21VwVOCkST4Q2KrdxZ4a03QUZqJOUi1GDv6vtyc1jr1FiUapDQRajGgyl84UhAd-ENvJfwiNVsz0VOSrXzOTsqUvsCFrbR_8W1FdA/s1600/features.png" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
1. Start call, end call buttons not available on Windows Phone.<br />2. PhoneGap does not have access to Windows Phone battery APIs, even though they are available through the native C# development.<br />3. The play, pause, stop and record events report a JSON error. </div>
<br /></div>Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-58443214353609364732012-06-15T10:56:00.000-07:002013-07-29T06:15:13.907-07:00How to detect page refresh using Javascript<div dir="ltr" style="text-align: left;" trbidi="on">
Today I'm going talk about how to detect a page reload/refresh using Javascript. It can be done using server side scripts, but I find that Javascript is the easiest method to do this. This is how I go about it: <br />
<br />
First, we need a form to detect the page reload. If you have a form in your page, you can use the same, or in case that you don't have/use a form on your page, you can simply create one and set its CSS visibility to hidden, so that it doesn't unnecessarily show up on the page.<br />
<br />
This is what you need to add to your HTML:<br />
<br />
<pre class="brush: html"><body onLoad="refreshCheck()">
Your website content here
<form name="refresh">
<input name="visited" type="hidden" value="" />
</form>
</body> </pre>
<br />
The necessary Javascript that is to be added is:
<br />
<br />
<pre class="brush: js">function refreshCheck()
{
if( document.refresh.visited.value == "" )
{
// Page loaded for first time
document.refresh.visited.value = "1";
alert("Fresh!!");
}
else
{
// On page refresh
alert("Refresh!!");
}
}</pre>
<br/>
That's it! You can handle the events as you want instead of the alerts ;)
</div>Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com4tag:blogger.com,1999:blog-2852470046305168020.post-9900384456951719782012-06-02T03:38:00.001-07:002013-07-29T06:14:06.737-07:00How to set up Apache Cordova (PhoneGap) in Visual Studio Express Edition for Windows Phone<div dir="ltr" style="text-align: left;" trbidi="on">
Introduction:<br />
<br />
In the previous post, I had talked about the PhoneGap (Apache Cordova) platform and it's features. It's now time to advance a step further and set up an environment to start working on PhoneGap. You can set up an environment on the SDK of any platform supported by PhoneGap to start coding on the PhoneGap standards. As I use Microsoft Windows to develop applications for Windows Phone using the Visual Studio 2010 Express edition for Windows Phone (the Windows Phone SDK provided by Microsoft), I found it easier to start working on the same for PhoneGap too. Alternatively, you can set up PhoneGap on Eclipse too, if you are already developing for Android. If you don't have Eclipse or Android SDK or AVD installed, I would recommend you to set it up on Windows Phone SDK as it takes very few steps to set up and doesn't demand much of your time or knowledge to setup the platform. I have come across many websites that talk about how to start working on PhoneGap using Visual Studio 2010 Express Edition for Windows Phone. The authors of such articles say that just the installation of Visual Studio 2010 Express enables you to work on PhoneGap by directly starting a new PhoneGap project in Visual Studio itself. But when I installed my copy of the same Visual Studio, I couldn't find the pre-installed PhoneGap templates. When I searched on the web for the solution for this problem, I found that many users seem to face the same problem as well. I'm still trying to figure out which version of Visual Studio does or does not have the templates pre-installed. However, this article can be the starting point for either cases.<br />
<br />
Requirements:<br />
<br /><ul style="text-align: left;">
<li>Download the Windows Phone SDK from here: <a href="http://www.microsoft.com/en-us/download/details.aspx?id=27570">http://www.microsoft.com/en-us/download/details.aspx?id=27570</a> It includes Visual Studio Express for Windows Phone and the Windows Phone Emulator to test your app on the emulator. It also installs other packages like Silverlight and XNA Game Studio, which we won't be interested in.</li>
</ul>
<br />
<ul style="text-align: left;">
<li>Download the PhoneGap 1.7.0 Release from here : <a href="https://github.com/phonegap/phonegap/zipball/1.7.0">https://github.com/phonegap/phonegap/zipball/1.7.0</a> </li>
</ul>
<br />
Procedure:<br />
<br />
<ul style="text-align: left;">
<li>Install the Windows Phone SDK and after the installation is complete, run Visual Studio Express for Windows Phone (You can find it in Start > All Programs > Microsoft Visual Studio 2010 Express > Microsoft Visual Studio 2010 Express for Windows Phone.exe)</li>
</ul>
<br />
<ul style="text-align: left;">
<li>Once you have started the Visual Studio, create a new project. If you have a PhoneGap template already installed, you can see it in the list of installed templates when you start a new project. If you see the following screen, it means that you have completed setting up PhoneGap on Visual Studio Express.</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://docs.phonegap.com/en/1.7.0/img/guide/getting-started/windows-phone/wpnewproj.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://docs.phonegap.com/en/1.7.0/img/guide/getting-started/windows-phone/wpnewproj.PNG" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<ul style="text-align: left;">
<li>If you see the above screen already, you are done with the installation of PhoneGap and that brings us to the end of this post. However, if you don't see the PhoneGap Starter template, read on and follow the instructions to set it up.</li>
</ul>
<br />
<ul style="text-align: left;">
<li>Extract the ZIP archive that you downloaded from the PhoneGap website in the step two of requirements mentioned above. Navigate to the extracted folder and look for the "Windows" or "Windows Phone" directory and find the following ZIP archives inside it: Cordova-(Version Number)-Starter.zip and Cordova-(Version Number)-Custom.zip. </li>
</ul>
<br />
<ul style="text-align: left;">
<li>Copy these zip files from the folder to the templates folder of Visual Studio 2010. The target folder is located in your system at C:\Users\[USERNAME]\Documents\Visual Studio 2010\Templates\ProjectTemplates\</li>
</ul>
<br />
<ul style="text-align: left;">
<li>Now, start Visual Studio 2010 Express (Close and restart if it is already running) and create a new project. You will now find the Cordova template(s) in the list of installed templates: </li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiisXh_34geJvtRSFIk7OgRg4aH1BPwQCkBW215QOdCDLAXPUzLZLgR2rDnbJZVMEDNoOlBG2Ih_5Ortp-VxELAEwZNP0EfuEyecLNgAltTjO9Xz6G0itgMhiQK9IThRmXEjn2Xy6JqP3TI/s1600/NovoProjeto.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="443" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiisXh_34geJvtRSFIk7OgRg4aH1BPwQCkBW215QOdCDLAXPUzLZLgR2rDnbJZVMEDNoOlBG2Ih_5Ortp-VxELAEwZNP0EfuEyecLNgAltTjO9Xz6G0itgMhiQK9IThRmXEjn2Xy6JqP3TI/s640/NovoProjeto.jpg" width="640" /></a></div>
<br />
<br />
<br />
That's it! You have set up PhoneGap on Visual Studio for Windows Phone! In the next post, I shall talk about creating a simple Hello World application using PhoneGap on Visual Studio.</div>Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-54319845302196611612012-06-01T11:38:00.000-07:002013-07-29T06:14:20.307-07:00Getting started with PhoneGap<div dir="ltr" style="text-align: left;" trbidi="on">
<br />What is PhoneGap? PhoneGap (now known as Apache Cordova) is an open-source mobile development framework originally created by Nitobi, purchased by Adobe Systems<a href="http://www.blogger.com/goog_1571296265">.</a> It enables developers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of platform specific languages such as C#, XAML, Java, XML, Objective-C etc. The resulting applications are hybrid, meaning that they are neither truly native (all layout rendering is done via the webview instead of the platform's native UI framework) nor purely web based (they are not just web apps but packed for appstore distribution, and have access to part of the device API).<br />
<br />
The following are the features of PhoneGap :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiADEIfSbC1H-ue_wiODHEGjdDbSXlNQ1jiFOrVOhUoRw9xcpf_Q-dph7Yw4lmnS2BYrvSgHUyIGWc3EJ6OS3uA9msK4mSusWFBZieMZfiO3A1bGrzwKyTjpPY59Uq0QD3P72zT54xiWHr/s1600/features.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiADEIfSbC1H-ue_wiODHEGjdDbSXlNQ1jiFOrVOhUoRw9xcpf_Q-dph7Yw4lmnS2BYrvSgHUyIGWc3EJ6OS3uA9msK4mSusWFBZieMZfiO3A1bGrzwKyTjpPY59Uq0QD3P72zT54xiWHr/s1600/features.png" /></a> </div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
Building applications for each device like iPhone, Android, Windows Mobile etc. requires different frameworks and languages. PhoneGap uses standards-based web technologies to bridge web applications and mobile devices. Plus, because PhoneGap apps are standards compliant, they’re future-proofed to work with browsers as they evolve. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: left;">
PhoneGap is an open source implementation of open standards. That means developers and companies can use PhoneGap for mobile applications that are free, commercial, open source, or any combination of these. The PhoneGap SDK provides an API that is an abstraction layer providing
the developer with access to hardware and platform specific features. As
PhoneGap abstracts the native mobile platform, the same code can be
used on multiple mobile platform with little or no change, making your
application available to a wider audience. By default, PhoneGap provides access to the device camera,
accelerometer, file system, GPS location, and media playback among other
capabilities. However, PhoneGap does not expose every native API for
use within your JavaScript applications. If you want PhoneGap to do more
than its default feature set, you can use the PhoneGap native plugin
model to extend the capabilities of the core PhoneGap API.
Native plugins in PhoneGap are not like plugins in desktop browsers; rather they provide a way for you to <i>plug in</i>
custom code to add to what the PhoneGap application framework can do.
PhoneGap native plugins enable you to create completely new, custom
functionality in native code, and expose that to your PhoneGap
applications via PhoneGap's native-to-JavaScript bridge. This means that
you can expose any native library or framework for use within your
JavaScript-based PhoneGap applications.<br />
<br />
Official PhoneGap website: <a href="http://www.phonegap.com/">http://www.phonegap.com</a><br />
<br />
You can take a look at the apps that have been previously made using PhoneGap : <a href="http://phonegap.com/apps">http://phonegap.com/apps</a><br />
<br />
PhoneGap allows you to build the apps for different platforms using a single code base. Having said that, you still have to install the SDK of every supported platform for which you want an app to be built. For instance, if you are working on PhoneGap using Visual Studio Express Edition 2010 for Windows Phone, and you want an Android build, you have to port the same code to Eclipse, and the Android and PhoneGap plugins need to be installed in Eclipse beforehand. So if you are targeting 6 platforms, you need to have six SDKs installed and manually generate the builds for each platform. Feeling too lazy already? Here's a workaround that the PhoneGap developers have come up with - the PhoneGap Build. Forget all the pain with the SDKs, code once and compile on the cloud. It automatically generates builds for all the supported platforms! That's like a charm!<br />
<br />
You can read more about compiling on the cloud here : <a href="https://build.phonegap.com/">https://build.phonegap.com/</a><br />
<br />
All the public apps are free and are hosted on Github. You get to host one free private app and you have to pay for any subsequent private apps. The plans are as given below:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://build.phonegap.com/images/marketing/pricing.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://build.phonegap.com/images/marketing/pricing.png" /></a></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
On the whole, PhoneGap is simple, fun and saves a lot of time by just writing a single code. I have just started working on PhoneGap and hope to learn a lot in the process :)</div>
</div>Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0tag:blogger.com,1999:blog-2852470046305168020.post-8329901144864343042012-04-04T20:52:00.016-07:002013-07-29T06:14:38.187-07:00How to add Custom Fonts in CSSToday, I was searching the internet to use custom fonts on my website. I got a few links here and there that spoke about how to add fonts that are not supported by default in any browser, but I didn't find the articles convincing. So I planned to write my own article elaborating the use of such fonts on websites.<br/><br/>
Basically, we will make use of the <span style="font-style:italic;">@font-face</span> property to load a custom font from the local folder in order to use it. The syntax is as follows:<br/><br/>
<pre class="brush: css">@font-face {
font-family: font-name;
src: url('font-name.ttf');
}</pre>
<br/><br/>
Where <span style="font-style: italic;">font-name</span> is the name of the font in your local folder. You need to ensure whether the path of the font is correct (In this example, the font file(s) is assumed to reside in the same folder as that of the CSS file). This causes the CSS to load the font in your browser so that you can use the font just using the <span style="font-style: italic;">font-family</span> property anywhere throughout the page.<br/><br/>
As there has been constant wars among browsers with respect to CSS, we need to use more types of the same font to ensure cross-browser compatibility. The following formats will be required for the same:<br/><br/>
EOT – Embedded Open Type<br/>
OTF – Open Type Format<br/>
WOFF – Web Open Font Format<br/>
SVG – Scalable Vector Graphics<br/><br/>
Once you have obtained the .EOT, .OTF, .WOFF and .SVG formats of the same font, you can modify the <span style="font-style: italic;">@font-family</span> property as follows:<br/><br/>
<pre class="brush: css">@font-face {
font-family: 'font-name';
src: url('font-name.eot');
src: ('font-name.woff') format('woff'), url('font-name.ttf') format('truetype'), url('font-name.svg') format('svg');
font-weight: normal;
font-style: normal;
}</pre><br/><br/>
We add the extra properties <span style="font-style: italic;">font-weight</span> and <span style="font-style: italic;">font-style</span> to ensure that the font is shown in the same manner in all the browsers.<br/><br/>
You may now be thinking of how to obtain various formats of the same font. There are some free online generators that can help generate the other formats once toy provide the .TTF or the .OTF file. There are two free online services that generate the necessary formats of the same font: <a href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel</a> and <a href="http://www.font2web.com/">Font2Web</a>.<br/><br/>
<a href="http://themeforest.s3.amazonaws.com/133_font/FontSquirrel.png"><img style="cursor:pointer; cursor:hand;width: 600px; height: 421px;" src="http://themeforest.s3.amazonaws.com/133_font/FontSquirrel.png" alt="" border="0" /></a><br/><br/>
<pre class="css" style="font-family:monospace;"><span style="color:#a1a100;"></span>
<span style="color:#00AA00;"></span></pre>Gautam Krishnanhttp://www.blogger.com/profile/14325412782728126124noreply@blogger.com0