Wednesday, November 13, 2013

Differentiating mobiles and tablets in Javascript via User Agent

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:

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.
 }
}

You can also take a look at the same code as a Gist on Github and do check out other gists/projects by me.

Monday, October 28, 2013

How to make smooth circles in Photoshop without jagged edges

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 must be something I could do to get a perfect smooth circle. And this did the trick:

For circular shapes:

  • Select the Ellipse Tool
  • On the top panel, change the mode from Shape to Pixels. 
  • Tick the Anti-alias checkbox.
  • Now draw your shape!

For circular selections:

  • Select the Elliptical Marquee Tool
  • Tick the Anti-alias checkbox.
  • Now go ahead and make that selection!
While making selection from a path:
  • Make sure that the 'Anti-Aliased' checkbox is ticked.
For a better understanding of the Anti-Alias feature, see the comparison image below (Click to enlarge):


Thursday, October 3, 2013

One sided Box-Shadow in CSS

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.

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:

    -webkit-box-shadow: 10px 0px 5px -2px #888 ;

Set the fourth property negative, as required till you achieve the required one sided effect.

Note: The above example sets a 10px box shadow towards the right and sets the vertical box shadow to 0.

Friday, September 27, 2013

Better Global variables in Javascript

If you are using variables in Javascript in the traditional way as follows:

    var testVariable = 1;
    function foo(){
        alert(testVariable);
    }

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 window object. Here's how it can be done:

    var window.testVariable = 1;
    function foo(){
        alert(window.testVariable);
    }

I find that this is a wonderful way to avoid a lot of problems and confusions regarding global variables in Javascript.

Saturday, August 24, 2013

Dynamically obtaining a DIV's ID - (When the ID itself is set dynamically).

The Problem:

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.


The Solution:

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.

For example, the given statement was like this:

..
<div id="post_237" class="post">
..
</div>
<div id="post_238" class="post">
..
</div>

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:

var getID = $('.post').attr('id');

There you go, the variable getID now contains the ID of that dynamic element.

Sunday, August 18, 2013

Invert and Mirror X and Y axis using CSS Transforms

To invert or mirror an element (text, image, etc.) you need to use the transform: scale property in CSS. You can choose to laterally (sideways) invert or vertically invert an element.

To invert laterally, use the following code:

transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);

To invert vertically:

transform: scale(1, -1);
-ms-transform: scale(1, -1);
-webkit-transform: scale(1, -1);

To invert both ways:

transform: scale(-1, -1);
-ms-transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);

Wednesday, August 14, 2013

Creating and Saving Paths in Photoshop

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.
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.
Make sure that your path is saved before you start creating it. If you select New Path from the Paths panel pop-up menu before 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.
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.

Tuesday, August 13, 2013

Loading jQuery Mobile in a dynamic environment

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.

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:


  • It is a simple RSS feed reader application.
  • The number of elements (RSS news items) are not known beforehand.
  • The feed is read and parsed into the page only after the page gets loaded.
  • 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.
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. 

Assuming your dynamic content is appended to this node:

<div id="loaded-content" data-role="collapsible-set"></div> 

you have to do:

$('.loaded-content').collapsibleset('refresh');


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!

Sunday, August 11, 2013

Accordion Expand/Collapse all in jQuery Mobile

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.

HTML:

Hello 1

I'm the collapsible content. By default I'm closed, but you can click the header to open me.

Hello 2

I'm the collapsible content. By default I'm closed, but you can click the header to open me.

Hello 3

I'm the collapsible content. By default I'm closed, but you can click the header to open me.
Open All Collapsible Close All Collapsible


And here is the jQuery Mobile code to achieve the effect. I assume that you have included all the necessary jQM files.

$('#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'); 
    });
});


If you have a better way of doing this, let me know! :)

Wednesday, August 7, 2013

How to count the number of li (list elements) inside ul (unordered list) using Javascript

Yesterday, I was trying to count the number of list elements inside an unordered list. I came up with the following code:


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]);
 }
}

Monday, July 29, 2013

Show/hide left panel using Javascript

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.

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.

function showHideLeftPanel()
{
 $('#left-panel').toggle("slide", 
         { direction: "left"  }, 500);
}

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.

You can read more on this here.