AngularJS Toggle Class with Animation

The jQuery Toggle Class was much easy to work with, wasn't it? Yes! I agree with it! But, toggling CSS classes with AngularJS is much more interesting. How? Well, with jQuery we do direct DOM manipulations. For example, if we want to toggle CSS class on the <section> element, we have to tell the browser to traverse the DOM until it finds the <section> element and then add or remove the class, which directly affects on the performance of the page/application. 

With AngularJS the DOM manipulation becomes more relevant because it connects to the HTML elements via API methods and provides more scope to the data with custom attributes.

A quick demo:


Open this fiddle in JSFiddle to check the files I used for this demo.

Related Articles: 
- AngularJS Add Class and Toggle Class

Essential CSS Pseudo Classes

CSS Pseudo classes are the heart of CSS. Most of these classes are supported by all major browsers today. They make writing CSS simple and fun, as if there is no problem as such that can’t be handled with CSS Pseudo Classes without modifying the HTML. Let’s begin with some unknown Pseudo classes first.

:enabled and :disabled
Identifying elements state has become easy with these two classes. Also, they can be used as a good alternative to the enabled and disabled attribute selectors.



:empty
Have you ever got into a situation where some dynamically added empty elements disturb the layout? Well, the :empty class is here to help

:target
:target is generally used to point out/display/go to the selected element which is triggered by the hash(#) links. In web 2.0 this trend is becoming a quite famous as most developers are choosing to develop single page websites.

:nth-child()
This is a super-powerful class that can be used in most difficult situations. This class solves the issues that can only be resolved using JavaScript or jQuery. It accepts integer values and ‘odd’ and ‘even’ keywords. This can also be used in many different ways, such as - li:nth-child(2n+2), li:nth-child(-2n+3), :nth-of-type(), nth-last-child(), :nth-last-of-type().



:not()
This Pseudo class tells browser to apply CSS to all elements except the on that is in the parentheses of :not() class.

:hover

This is a widely known and used Pseudo class, almost all front-end developers are aware of it because of the most important use of it – 

a{ }

a:hover{}

We can easily include some simple classes in the same category - :focus, :active, :visited

:before and :after

These are the life saver classes! They help in most critical situations allowing us to make use of two virtual HTML elements without actually adding the elements in HTML. 

Additionally there are the :first-child, :last-child simple pseudo classes, you can try some simple examples with it and see for yourself :)

Using multiple iScroll in one page

Even in Popup - Here is the working Fiddle I created

Separate CSS for Windows OS Versions using javascript

Windows 8 is way too weird compared to Windows 7, and it is a lot difficult to manage our website on both operating systems, because the browsers are same - for example: IE 10 for WIN7 and WIN8 renders page differently.

Here's how we can link separate CSS file for different Windows OS versions:

For Windows 8 -
var usAg = navigator.userAgent;
if(usAg.indexOf("NT 6.2") != -1) {
    //Your css for Windows 8 here
    //alert('Windows 8');
    var head= document.getElementsByTagName('head')[0];
    var addCSS= document.createElement('link');
    addCSS.href = 'css/win8.css';
    addCSS.rel = 'stylesheet';
    addCSS.type = 'text/css';
    head.appendChild(addCSS);
};

For Windows 7 -
var usAg = navigator.userAgent;
if(usAg.indexOf("NT 6.1") != -1) {
    //Your css for Windows 7 here
    //alert('Windows 7');   
};

For Windows XP -
var usAg = navigator.userAgent;
if(usAg.indexOf("NT 5.1") != -1) {
    //Your css for Windows XP here
    //alert('Windows XP');   
};

CSS image sprite for high resolution retina display - iPad 3

iPad 3 has an incredible 2048 × 1536 pixels high-resolution retina display. If we serve it the same images we used for PC or even for iPad 2, all the images/icons are gonna look blurred on this high resolution iPad 3. Reason is its high resolution.

In order to make our icons look better on high resolution we have to use different background image for high resolution devices with the help of CSS Media Query. I will call the image as: image-2x.png

What is image-2x.png?
Suppose we are using 36x36 size icon for regular screen resolutions, the same icon has to be 72x72 pixels for high resolution. Twice the size of normal resolution. If we are using sprite image for our project and the size is 200x200 for regular screen with all the icons in it, the same image for high resolution devices has to be 400x400 pixles.

How to use it separately for high resolution devices?
CSS Media Query:
/*For regular screen resolutions*/

.spriteImage{ 
  background: url(SpriteImg.png) no-repeat left top;

}

/*For high resolution screens*/

@media (-webkit-device-pixel-ratio: 2){ 
    .spriteImage{
        background: url(SpriteImg-2x.png) no-repeat left top;

    }
}

Note: The -webkit-device-pixel-ratio: 2 will change in future depending on the screen resolutions. Here pixel-ratio 2 is used for iPad 3

Ok - what is the problem?
If we use the 2x background image and background-position based on what it is in that large image, nothing will work.

Why?
The HTML container we are serving the large background image remains the same size, for instance: 36x36. How will I fit 72x72 background image in 36x36 size container? Especially with image sprite.

How?
CSS3 background-size: property to rescue.

What does background-size do?
The background-size CSS property specifies the size of the background images.

The solution:
Consider my hi-res image for iPad 3 has 200x400 dimensions. When I am defining the background-size of this image for hi-res devices I will write it as –
background-size: 100px 200px;

Did you see what happened above? With background-size property I already squeezed the 200x400 image to 100x200. Meaning – the pixels of hi-res image are now been packed together to half size of it, which will result in displaying better quality on high resolution devices.

Also, we have to set the background-position considering the background image size 100x200 px, not 200x400 px.

This technique is a lot more confusing in the beginning. But when you know how it works, then it’s too simple.

Optimizing Web Experiences for High Resolution Screens

iPad 3 and Retina Screen: What it means for your mobile site

http://www.mobify.com/blog/ipad-3-and-retina-screen-what-it-means-for-your-mobile-commerce-site/

- A huge jump in screen resolution from 1024 × 768 pixels to an incredible 2048 × 1536 pixels. Apple calls this super-high-resolution screen its Retina display.

- As Kevin Suttle posted on Twitter: "No seriously, this screen is so bright and crisp it looks fake."

- The iPad 3 screen remains the exact same size as previous iPads – 9.7 inches. Yet that same screen size now packs more pixels than a high-definition 50-inch TV.

- Think about how clear a Blu-Ray movie is on a high-definition TV. Compress the image on that TV to the 9.7-inch screen of the iPad. Then add about 50% more pixels. That’s how crisp and sharp images are on the new iPad's Retina screen.

How Apple.com will serve retina images to new iPads

http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/

- What they’ve chose to do is load the regular images for the site and then if the device requesting the page is a new iPad with the retina display, they use javascript to replace the image with a high-res version of it.

The heavy lifting for the image replacement is being done by image_replacer.js. Jim Newberry prettified the code and placed it in a gist for easier reading.

Another interesting part of image_replacer.js is that it checks for the existence of 2x images before downloading them:

- As far as I can tell, there is no attempt to prevent duplicate downloads of images. New iPad users are going to download both a full desktop size image and a retina version as well.

The price for both images is fairly steep. For example, the iPad hero image on the home page is 110.71K at standard resolution. The retina version is 351.74K. The new iPad will download both for a payload of 462.45K for the hero image alone.

The total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded.

-Unfortunately, it means that there are now three http requests for each assets: a GET request for the standard image, a HEAD request to verify the existence of the retina image, and a GET request to retrieve the retina image.

Optimizing Web Experiences for High Resolution Screens:

http://bradfrostweb.com/blog/mobile/hi-res-optimization/

“@Malarkey Screen resolutions are going to increase. Period. Adaptation is the name of the game in web design. The sky is not falling.” — @robweychert

@media queries

We can use @media queries to target hi-res displays and serve them up different styles, including different background images. While not entirely related to images, Brad Birdsall demonstrates how you can finesse designs for hi-res displays. I wonder if there are the same issues regarding media queries and asset downloading with pixel-density as there are with device widths.

Grayscale images with CSS3 Filter Property

img{
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */   
   
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);   
}

Demo