HTML

CSS Image Sprites


Leave a reply                     

What Are CSS Sprites? Why They’re Cool? How To Use Them?

Do you really understand them? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position?
You may combine an unlimited number of images into one. The origin of the term “sprites” comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. The sprite was the big combined graphic. CSS Sprites is pretty much the exact same theory: get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images. Continue reading

Lazy Load WordPress Gravtar Avtar using JavaScript / JQuery


Leave a reply                     

How to Lazy load WordPress gravtar avtar in a web page using Javascript / JQuery?

A webpage load time plays a very crucial role in SEO and impacts your website ranking significantly. Google has already incorporated site speed as one of the several things that it uses to determine search ranking. The faster your website loads, the better it will perform in Google ranking. The images (specifically the alt) also make an measurable impact on Google and other search engines page ranking. In today’s IT era, the high quality images are common and it also makes better look and fell of a page, but it impacts site performance if the image is large or have multiple images on a page and if at the same time they are of high quality (resolution), they becomes larger in size and takes some time to load. it doesn’t mean you use low quality images but it means use try to make them smaller in size (again not confuse with height and width but it means number of bytes). Continue reading

Lazy Load Image using JavaScript / JQuery


2 Comments Leave a reply                     

How to Lazy load images in a web page using Javascript / JQuery?

A webpage load time plays a very crucial role in SEO and impacts your website ranking significantly. Google has already incorporated site speed as one of the several things that it uses to determine search ranking. The faster your website loads, the better it will perform in Google Ranking. The images (specifically the alt) also make an measurable impact on Google and other search engines page ranking. In today’s IT era, the high quality images are common and it also makes better look and fell of a page, but it impacts site performance if the image is large or have multiple images on a page and if at the same time they are of high quality (resolution), they becomes larger in size and takes some time to load. it doesn’t mean you use low quality images but it means use try to make them smaller in size (again not confuse with height and width but it means number of bytes). Continue reading

Google Maps Javascript API With Examples


Leave a reply                     

Introduction to Google Maps API

Google Maps API have been in top place for many years, they are in number one position consistently and till date no other Map providers like Bing, Yahoo etc are in close competition with Google Maps API. I have worked for about four years with a Vehicle Tracking System Company as Project Manager and almost daily used to have chance to see some Maps API JavaScript Code. The API is easy to understand and Use and Most Important thing i like in it is bug free, i never encountered with an error API code. If you like JavaScript believe me you will love Google Maps API. Thousand of APIs are available to customize and change look and feel on Google Map. You can describe a wide range of data using Google Maps API. The Google maps API makes places, information, roads and even search more accurate and understandable. Continue reading

CSS Rounded Corner Without Images


Leave a reply                     

How to make corners rounded?, Rounded corner CSS, Using CSS rounding corners without images

Most websites uses rounded corner tables and divs to display information on the webpage. It looks sleek and also eye appealing. Not all designers know but is possible without images in CSS3-compatible browsers. -moz and -webkit properties are used to display the round corners, they basically uses radius in corners to make it rounded. Continue reading

HTML5 JavaScript Geolocation in Browser


Leave a reply                     

The Geolocation API provides a method to locate the user’s exact position. This is useful in a number of ways like providing a user with location specific information, providing route navigation etc.

Although it’s not actually part of the HTML5 specification, as it was developed as a separate specification by the W3C.

Compatibility

Currently the W3C Geolocation API is supported by the following desktop browsers:

Continue reading

CSS border-left-color Property


Leave a reply                     

Definition and Usage

The border-left-color property sets the color of an element’s left border.

Default value: not specified
Version: CSS1
JavaScript syntax: object.style.borderLeftColor="blue"

Property Values

Value Description
color Specifies the color of the left border.
transparent Specifies that the border color should be transparent.
This is default
inherit Specifies that the border color should be inherited
from the parent element