Skip to main content

Posts

Showing posts from May, 2015

WHAT IS RETINA GRAPHIC IMAGE HOW IT WORK AND HOW TO USE IT

retina.js is an open source script that makes it easy to serve  high-resolution images to devices with retina displays How it works When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server. For example, if you have an image on your page that looks like this: <img src="/images/my_image.png" /> The script will check your server to see if an alternative image exists at this path: "/images/my_image@2x.png" JavaScript The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). To use it,  download the script  and include it at the bottom of your page. Place the  retina.js  file on your server Incl...
Post a Comment
Read more

HOW TO IMPLEMENT ADAPTIVE IMAGE IN WORDPRESS

If you don't know about Adaptive image please Read my last artical. STEP:1 COPY .htaccess , Adaptive-image.php, ai-cookie.php, DS_Store file in your root directory STEP 2: CREATE folder in wp-contant/uploads/adaptive/ai-cache if .htaccess file already exist then pest this code in it but be carefull take its backup CODE #START Adaptive-Images #Add any directories you wish to omit from the Adaptive-Images process on a new line. #Omit plugins, wp-includes and wp-admin content. RewriteCond %{REQUEST_URI} !wp-content/plugins RewriteCond %{REQUEST_URI} !wp-includes RewriteCond %{REQUEST_URI} !wp-admin #Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories #to adaptive-images.php so we can select appropriately sized versions RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php #END Adaptive-Images UNDER # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On STEP3: Open Adaptive-image.php change with it $cache_path    = "wp-content/upl...
Post a Comment
Read more

WHAT IS ADAPTIVE IMAGE, HOW IT WORK,

IT MAKE RESPONSIVE DESIGN MORE FRIENDLY FOR MOBILE . It reduce the loading time becouse by this technique we can reduce the resolution of images used in website. Image should be responsive . use width="100%" The HTML starts to load in the browser and a snippet of JS in the <head> writes a session cookie, storing the visitor's screen size in pixels. The browser then encounters an <img> tag and sends a request to the server for that image. It also sends the cookie, because that’s how browsers work. Apache receives the request for the image and immediately has a look in the website's .htaccess file, to see if there are any special instructions for serving files. There are! The .htaccess says "Dear server, any request you get for a JPG, GIF, or PNG file please send to the adaptive-images.php file instead." The PHP file then does some intelligent thinking which can cover a number of scenario's but I'll illustrate one path that can happen: The ...
Post a Comment
Read more

@MEDIA CSS BREAKPOINT

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /********** iPad 3 **********/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-p...
Post a Comment
Read more

ONCLICK CHANGE STYLE.CSS USING JQUERY

I AM USING TWO STYLESHEET HERE FIRST IS yellow.css AND SECOND IS blue.css. I AM SIMPLY CHANGING ATTRIBUTE OF LINK TAG HERE IS CODE <html> <head> <title></title>         <link id="original" rel="stylesheet" type="text/css" href="yellow.css">         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){     $("#grey").click(function(){         $("#original").attr("href", "blue.css");     }); }); </script>     </head>  <body> <button id="grey" onclick="turnGrey">Turn Grey</button><br />                 <div id="puspa"></div>         </body>     </html>
Post a Comment
Read more

HOW TO CHANGE Z-INDEX USING JQUERY ONCLICK FUNCTION

We are using simple jquery css method. Z-INDEX give preority to element that witch one will appear first. z-index only work with position absolute, relative, and position fixed.     .There is many way to do like this you can use display:block and display:none; for this action. HTML CODE <button id="green">GREEN</button> <button id="red">RED</button> <div>     <div id="box" style="background:green; height:100px;width:100px;z-index:1; position:absolute;" ></div>     <div id="box1" style="background:red; height:100px;width:100px;z-index:2; position:absolute;"></div>      </div> JQUERY CODE <script> $(document).ready(function(){     $("#green").click(function(){         $("#box").css("z-index", "2");         $("#box1").css("z-index", "1");     }); $("#red").click(function(){         $(...
Post a Comment
Read more