Convert the Image to base64 data stream

Base64 Image Encoding toolDecrease the number of HTTP request to server by decreasing the resources and increasing the overall performance of the website. Few of the method to decrease the resources are by using sprite images or merging JS or CSS files. Here is another one, use base64 data stream of image within your code.

Base64 converts binary data into ASCII string format by translating it into a radix-64 representation (Well that’s too much to know about it). Simply, the base64 technique generates ASCII representation for binary data of image file and browser can parse these ASCII values and render an image on the page.
[Read more...]

facebooktwittergoogle_plusredditpinterestlinkedinmail

Stop Google Translator from Translating Particular Content of Your Page

Internationalization of your website or niche blog is a great way to get more traffic and Google Translator comes in handy to do so. However, there are some cases when you don’t want GT to translate some parts of your page, like Code-blocks.

Well, there are few simple methods to guide GT during translation process.

Meta Tag

This will guide GT not to translate whole page. Just add the following meta tag in "head" tag.

1
<meta name="google" value="notranslate" />

[Read more...]

facebooktwittergoogle_plusredditpinterestlinkedinmail

Simple CSS Drop Down Menu

In this post I’ll show you how to build a simple CSS based drop down menu without any need of scripting like javascript with the following piece of snippet.
[Read more...]

facebooktwittergoogle_plusredditpinterestlinkedinmail

Change DIV on changing drop down using jQuery

Here is simple code to show particular DIV when respective drop-down option is chosed.

HTML

1
2
3
4
5
6
7
8
9
10
11
<select id="selectField">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
        <option value="option4">option4</option>
    </select>
    
    <div id="option1" class="box">Content 1</div>
    <div id="option2" class="box">Content 2</div>
    <div id="option3" class="box">Content 3</div>
    <div id="option4" class="box">Content 4</div>

[Read more...]

facebooktwittergoogle_plusredditpinterestlinkedinmail

Setting view port for responsive site

Place the following meta tag into the “<head>” tag. Viewport for mobile devices like iPhone and iPad.

1
2
3
<!-- view port -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- -->
facebooktwittergoogle_plusredditpinterestlinkedinmail