May 26, 2014

HTML5 | LocalStorage

HTML5 LocalStorage a feature that's been added to HTML5 specification, which enables storing data on clients machine, which can be retrieved and manipulated for future use unless the user clears the cache from browsers.

Though we can store data there is a limitation as in how much we can store, the current max size of storing is 5Mb, which is quite a big amount, lets look how to store  and retrieve data on client's machine

Storing data:
To store data we use the native localStorage.setItem(key,value) method which expects two arguments as shown the key and the value like so:

Retrieving Data:
To Retrieve data we use the native localStorage.getItem(key) method which expects one argument as shown which is the key, lets retrieve the previously stored data
this will return 'purush'

Clearing Data:
To remove or clear stored data we can use either localStorage.removeItem(key) to remove single storage element or we can use the localStorage.clear() to remove all references of storage like so

localStorage.removeItem('user_name'); // to remove single reference;

localStorage.clear();//to clear all references in storage

Additional functions/methods for storage manipulation

localStorage.length; // to get count of all stored references
localStorage.key(0); // to retrieve stored references expects a index to be passed as argument
window.onStorage();  // event thats triggered while saving 

Advantages of LocalStorage
1.Enables us to serve relevant content to users based on their previous visit.
2. Enables to save a state for a example a game level where users can continue playing from recent state.

Drawbacks of localStorage

1.Doesn't work on IE7 but can be made to work using shim or polyfills.
2.If the user clears the cache the data is lost.
3.Requires a domain name for localStorage to work properly.

Read More

Apr 18, 2013

Remove Scrollbars from syntaxhighlighter

It's easy to remove the scrollbars that's generated by the syntax highlighter plugin  go to the CSS file you using provided in the plugin for example" shCoreDefault.css" or the cutom css theme file you're using.
and find class

 .syntaxhighlighter and comment or remove 
overflow: auto !important;

that's it the scrollbar's that's created by the plugin is gone and you'll get the default scroll bars of the browser window
Remove Scrollbars from syntaxhighlighter
Comment the lines shown above

Read More

Jan 18, 2013

CSS Sprites | What are They?

CSS Sprites most web developers should have heard this term, so what is it ?.
CSS Sprite bunch of other images transformed into one Big Image. 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.

Adding Sprites to our websites helps with webpage performance, since the webpage has to make only one request to the server, which will fetch the Sprite (the Big image) which includes all the other images that you want to use in your webpage. since the server makes only one request your page will load a lot faster compared to conventional way of linking each images separately.

Here is a demo on how to use CSS Sprites. further more there a many Sprite generators online to create CSS Sprites all you have to do is upload a bunch of images to these Online tools and they will generate the Sprite for you.

Signup Sprite image
Signup image
Confirmation sprite image
Signup confirmation image

Two images made into one image

As you see above the are two images called "Signup image" and "Signup confirmation image"  are made into one Big Image using an online CSS Sprite Generator as you can see it above. Once we have our CSS sprite we can use it to our needs  by specifying the CSS "background-position" property like so. 

<!doctype html>                                                               

              <title>CSS Sprites</title>                                      
               input{  width:300px;                                           
                       background-position: 0px 0px;}                         
                       background-position: 0px -88px;                        
         <input type="button" />                                              

Read More

Jan 15, 2013

HTML5 Semantic Tags | What do they mean

HTML markup has changed a lot especially when the WHATWG introduced semantic tags.  
Semantic Tags? What do they mean. The Semantic Markup helps Humans and Machines to Interpret the HTML markup in a more meaningful way. Which helps the HTML markup to be structured in a more meaningful way. remember adding semantic tags to your HTML5 markup wont change the apperance of your page, but it Gives more meaning to your Markup.  
Here is a list of few HTML5 semantic tags.

  • <section>  </section>
  • <article>  </article>
  • <header>    </header>
  • <nav>          </nav>
  • <aside>      </aside>
  • <footer>    </footer>
As you see above the above tags wont make our web pages pretty but it gives more meaning to the markup.
Read More

Jan 11, 2013

How CSS3 Works

CSS works with HTML, but it’s not HTML. It’s a different language altogether. While HTML provides structure to a document by organizing information into headers, paragraphs, bulleted lists, and so on, CSS works hand-in-hand with the web browser to make HTML look good.
For example, you might use HTML to turn a phrase into a top-level heading, indicating that it introduces the content on the rest of the page. However, you’d use CSS to format that heading with, say, big and bold red type and position it 50 pixels from the left edge of the window. In CSS, that text formatting comprises a style—a rule describing the appearance of a particular portion of a web page. A style sheet is a set of these styles.
You can also create styles specifically for working with images. For instance, a style can align an image along the right edge of a web page, surround the image with a colorful border, and place a 50-pixel margin between the image and the surrounding text.
Once you’ve created a style, you can apply it to text, images, headings, or other elements on a page. For example, you can select a paragraph of text and apply a style to instantly change the text’s size, color, and font. You can also create styles for specific HTML tags, so, for example, all first-level headings (<h1>tags) in your site are displayed in the same style, no matter where they appear.
Read More

Dec 27, 2012

jQuery Resources | Support and tutorial help

jQuery has a number of Official and Nonofficial websites and Online resources dedicated to it. Where you’ll find information like tutorials, plugins download’s and more. It here will be sharing a few of these website which valuable for jQuery lovers.

·         Jqueryplugins
·         Jqueryvideo casts

forgive me if I have missed out any other useful resources . do comment about any other resources so that I’ll add them to existing resources.
Read More

Nov 28, 2012

Login form | Using CSS3

Here is an awesome demo of a login form, which makes good use of CSS3 and HTML5. In this demo, i have made extensive use of gradients, text-shadows and box-shadows to achieve a beautiful and modern looking login form. The design of this login form was originally taken for, hope you'll like and use this login form in your projects.

login form
login form

login form using CSS
login form Onfocus

Read More