CSS3 cool animation for "Loading..." interface

Now a days we all uses HTML5 and CSS3 for any website.
So why use "loading..." image when CSS3 provides us many possibilities for the same.

Here is an example:

Here is the HTML Part :

<div class="loading-container">
    <div class="loading-progress">
        <div class="rotator">
            <div class="rotator">
                <div class="rotator colored">
                    <div class="rotator">
                        <div class="rotator colored">
                            <div class="rotator colored">
                            </div>
                            <div class="rotator">
                            </div>
                        </div>
                        <div class="rotator colored">
                        </div>
                    </div>
                    <div class="rotator">
                    </div>
                </div>
                <div class="rotator">
                </div>
            </div>
            <div class="rotator">
            </div>
        </div>
        <div class="rotator">
        </div>
    </div>
</div>

Here is the CSS3 part :

.loading-container{z-index:2000;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55)}
.loading-container.loading-inactive{display:none}
.loading-container.loading-inactive .loading-progress{display:none}
.loading-container .loading-progress{z-index:2000;position:fixed;height:10px;width:10px;margin:auto;top:0;left:0;right:0;bottom:0}
.loading-container .loading-progress .rotator{-webkit-animation:spin 30s infinite linear;-moz-animation:spin 30s infinite linear;-o-animation:spin 30s infinite linear;animation:spin 30s infinite linear}
.loading-container .loading-progress>.rotator{left:-100px}
.loading-container .rotator{-webkit-background-origin:border-box;-moz-background-origin:border-box;background-origin:border-box;background-color:#fff;width:200px;height:7px;opacity:.75;position:absolute;top:0;left:0}
.loading-container .colored{background-color:#2dc3e8!important}
        
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}
@-o-keyframes spin{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}

Click here to download GitHub to see the example.

Read More

Visual Studio 2013, Cool IDE Option for Code Preview in Scrollbar

Visual Studio 2013 has some cool features in IDE, one of its is Code Preview in stand of slandered scroll bar.

This feature help to navigates hundreds lines of  code.

Have a look difference between old new browser options:

Lets jump into the option.

New Behavior options for vertical scroll bar, and also available with MAP mode for Vertical Scrollbar.

Its allow 3 Preview option with Narrow, Medium and Wide.

And here its the cool view:

Vertical scroll bar changes into a code preview area. its show all color format which helps us to get quick jump when you mouse over on that scroll, its shows a readable code preview on that scroll area.

We can also split horizontal windows in Map Mode

Click and drag split icon, this option is also available in Window->Split from menu bar.

It will display something like below:

I really like to work with Map Mode in stand of classic scroll view.

Good IDE feature, isn't it?

Read More

Animated Recycle with Open Close Style using CSS3

CSS3 has some awesome techniques, let have do some form using transition property.

Have a look

Mouse hover on Recile Bin

Another example in table format mouse hover on last bin icon to see the cool animated effect

Language Name	How to say hello	Delete
Assamese	নমস্কাৰ (nomoskaar)
Bengali	নমস্কার (nômoshkar)
Gujarati	નમસ્તે (namaste)
Hindi	नमस्ते (namaste) नमस्कार (namaskār)
Kannada	ನಮಸ್ತೆ (namaste)
Malayalam	നമസ്തെ (namaste)
Oriya	ନମସ୍କର (namascara)
Punjabi	ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ। / ست سِری اَکال (sat srī akāl)
Tamil	வணக்கம் (vaṇakkam)

How it works:

Basically there are 3 div tag, A parent div tag will hold 2 child div.

1. Parent div for trash holder
2. Can div
3. Lid div

See the below to check with with border style, you can get more idea by this

So lets create CSS3 to get the animated recile bin icon.
See the Below Code :

<div class="trash" title="Remove"><span class="lid"></span><span class="can"></span></div>

You can see that there is a div tag with "trash", and two child div tag one with has "lid" class and second has "can" class
Now apply below CSS3 code to make it animated

.trash{transition:opacity 200ms;width:128px;height:128px;opacity:0.8;position:relative;right:0;top:3px;vertical-align:middle;cursor:pointer;margin:50px auto 10px}  
 .trash > .lid{transform-origin:19% 100%;transition:transform 150ms;height:28px;width:128px;-webkit-transform-origin:-7% 100%}  
 .trash > .can{background-position:0 -30px!important;width:128px;height:97px;margin:30px 0 0;padding:0!important}  
 .trash > .can,.trash > .lid{background:url(img/RecycleBin.png) 0 0 no-repeat;position:absolute;right:8px;top:2px;-webkit-transform:rotate(0deg);-webkit-transition:-webkit-transform 250ms}  
 .trash > .can:hover{border:none!important;box-shadow:none!important}  
 .trash > span{display:inline-block}  
 .trash:focus > .lid,.trash:hover > .lid{transform:rotate(-45deg);transition:transform 250ms;-webkit-transform:rotate(-45deg);-webkit-transition:-webkit-transform 250ms}  

I have tested with Chrome, Firefox, Internet Explorer 11

Click here to download source file from GitHub.

enjoy!
saAction

Read More

IIS Performance Improvement using IIS Add-On

We always care about performance in our application development, specially for web applications.
.Net Framework 4.5 has many features available for it, But as Web Server we always dependable on IIS.

Internet Information Services is an extensible web server for all .Net web application. So its handling all web sites and web services in Hosting Server.

IIS.net is Official Microsoft IIS Site, There are many downloads available to apply add-on functionalities for IIS in IIS Community Contributed Downloads

Download categories are deploy-and-migrate, develop, handle-requests, improve-performance, Manage, Secure, etc

I like to introduce Improve Performance, its a very unique add-ons available to IIS, here is some list which have experience:

1) Google Page Speed optimization for Microsoft IIS 7 and up
Speed up your website and drive conversions by automatically apply best practices, without affecting your workflow. Use more then 40 filters to optimize your html and resources, including mobile specific optimizations. Now also includes "In Place Resource Optimization" - a new optimization mode designed for shared hosters and forward proxy setups. IISpeed has a free mode which inserts a small banner at the bottom of optimized webpages, which can be removed by buying a license. Powered by Google PageSpeed. Works with any content, including static content, ASP.NET, PHP, ColdFusion, and Application Request Routing.

2) Aptimize Website Accelerator
The world’s biggest companies trust Aptimize to accelerate their websites and intranets. Aptimize Website Accelerator is an ISAPI filter for Microsoft IIS that automates performance tuning by dynamically optimizing web pages for high performance at runtime – just before a page is sent from web server to browser. Aptimize helps you reduce page load times by up to 75%.

3) httpZip HTTP Compression for IIS
HTTP compression accelerates page loads, speeds up web apps, and reduces bandwidth costs dramatically. HttpZip transparently compresses webpages to reduce file sizes to as little as 2% of their original size (that's 98% smaller!). Safe defaults make httpZip an excellent choice for hosting providers or any site/app with complex code. With MIME type, file, and directory exclusions, browser compatibility checking delivers granular control over safe file compression.

4) IIS Traffic Monitor
While trying to work out which users on a server were consuming the most resources, I realised there was no easy way to see how much bandwidth an IIS website has used for a given period in time. A quick search showed plenty of commercial products that could be installed as filters to keep track of this kind of thing, but there didn't appear to be anything quick, simple and importantly, free. So I found some source code that uses Microsoft Log Parser (also free) to interrogate the log files for each site, and come up with a number to show how much traffic has gone through a website. I packaged it up into a nice little application and that's what you see here.

5) Web Performance Monitor
Web Performance Monitor is an easy to use web-based performance monitoring application. It allows you to monitor performance counters from your local or remote computer, in real time. It supports all major browsers, supports running over SSL and uses Ajax for smooth updates.

All above tools are not developed by Microsoft, so it is recommended to take backup before any installation. also read documentation to get guidance.

To download can directly install on IIS Server, but it is also available from Web Platform Installer.

Read More

Create Google Plus "Share what's new..." GUI using jQuery

I am sure you have seen many social networking websites, where user can post there comments, I got an opportunity to create Google+ "Share a comment" GUI using jQuery and CSS

So Lets do it.

 

Google+ GUI to post a comment, image, link, video or event.

I have study that HTML code, CSS and effect from Google+ and here is the output as below:

As you can see, its almost pretty same as Google+, cool

Click here to download GitHub.

https://github.com/saaction/GooglePlus-comment-GUI-using-jQuery.git

Read More

Social Networks That Have Come and Gone Over Last 50 Years | An Infograph

Social Networks That Have Come and Gone Over Last 50 Years | An Infograph

Read More

jQuery SlideShow FeadIn, FadeOut

There are many-many effective slideshow functions are available on net, but I have also seen that many websites have simple image fade-in, fade-out effect for Header Banner Area, Here I will demonstrate to create a common function to apply this effect using jQuery with fadeIn(), fadeOut() functions.

It will take 3 steps to do it.

Step 1: Create HTML

 <ul class="flds">  
 <ul class="myBanner">  
 <li><img alt="" src="http://www.google.com/logos/2012/republicday12-hp.jpg" /></li>  
 <li><img alt="" src="https://www.google.co.in/logos/2012/juan_gris-2012-hp.jpg" /></li>  
 </ul>  
 </ul>  

Here we have two image in un-order list, it will two image one by one, Now we will apply absolute position to each LI usign CSS.

Step 2: Apply CSS to show in one place

 .myBanner{width:400px;height:144px;position:relative;}  
 .myBanner li{position:absolute;display:none;}  

You can see that here we have .myBanner class, I applied Width, Height and Position to Relative;
and its sub CSS LI has position:absolute to create all image in same position and display:none to hide all image

Now all image will be hide, but we need to display first image when web site load to show it as a default image, So it required to apply display:block style in first LI.

 <li style="display: block;"></li>  

or you can do it directly in LI tag or using CSS.

 .myBanner li:first-child{display:block!important;}  

finally it is required a jQuery function and a Timer to apply Hide/Show effect.

Step 3: Create jQuery Function

 <script type="text/script" language="javascript">  
 $(document).ready(function () {  
     setInterval("slideShow('.myBanner')", 5000);  
 });  
     function slideShow(ssObj) {  
       var obj = ssObj + " li";  
       var crrObj = $(obj + ':visible');  
       var nextObj = $(obj + ':visible').next();  
       if ($(obj + ':last').is(':visible')) {  
         nextObj = $(obj + ':first');  
       }  
       crrObj.fadeOut(2000);  
       nextObj.fadeIn(2000);   
     }  
 </script>  

cool! It is now ready to fadeIn, fadeOut by every 5 seconds.

Don't forget to import jQuery.js file.

Read More

How to create Water Mark effect in Jquery

Watermark effect is very easy using jQuery

Here is a quick sample:

Step 1: Create CSS:

 <style type="text/css">  
     .flds{list-style:none;padding:0;margin:0}  
     .flds li{padding-bottom:10px;}  
     .flds input,.flds textarea{border:solid 1px #3d3d3d;color:#}  
     .waterMark{color:#c5c5c5;}  
 </style>  

Step 2: HTML Form:

 <ul class="flds">  
 <li>  
     <span>Name</span>  
     <input id="v1" type="text" />  
   </li>  
 <li>  
     <span>Address </span>  
     <textarea cols="20" rows="3"></textarea>  
   </li>  
 <li>  
     <input type="submit" value="OK" />  
   </li>  
 </ul>  

Step 3: jQuery for Water Mark Effect:

 /*This is the function*/  
   jQuery.fn.WMark = function () {  
     //Each loop to find all textbox and text area  
     $("input[type=text],textarea").each(function () {  
       ///Hide Span Tag  
       $("span", this.parentNode).hide();  
       ///Hide Show WaterMark CSS effect in Focus and Blue Event  
       $(this).addClass('waterMark').val($(this).prev().text()).focus(function () { if (this.value == $(this).prev().text()) { $(this).removeClass('waterMark').val(''); }; }).blur(function () { if (this.value == '') { $(this).addClass('waterMark').val($(this).prev().text()); }; });  
     });  
   };  
   $(document).ready(function () {  
     ///Cell water mark function  
     $('.flds').WMark();  
   });  

Click here to see the Demo:

Read More

HTML 5 TAG REFERANCE

Download HTML5 Visual Cheat Sheet

Read More

Creating jQuery menu with Animated background effect.

This is 26January2011, Republic day of India.
I was try to apply some new style in Menu style, I found that many web sites are using smooth animated background in menu. So I study it and found the logic behind the code.
Let understand here…

Here when user will mouse over to second menu, gray background will come over on second menu from the first one, with sooth scroll effect.
Here is its trick,

  <ul id="mnu">  
      <li><a href="#">saAction</a></li>  
      <li><a href="#">Web Technologies</a></li>  
      <li><a href="#">jQuery</a></li>  
      <li><a href="#">Visual Studio</a></li>  
      <li><a href="#">C#</a></li>  
      <li style="width: 100px; height: 60px; top: -5px;" id="mnuEffect">  
      </li>  
 </ul>  

Now CSS Part

 <style type="text/css">.csharpcode, .csharpcode pre<br />{<br />     font-size: small;<br />     color: black;<br />     font-family: consolas, "Courier New", courier, monospace;<br />     background-color: #ffffff;<br />     /*white-space: pre;*/<br />}<br />.csharpcode pre { margin: 0em; }<br />.csharpcode .rem { color: #008000; }<br />.csharpcode .kwrd { color: #0000ff; }<br />.csharpcode .str { color: #006080; }<br />.csharpcode .op { color: #0000c0; }<br />.csharpcode .preproc { color: #cc6633; }<br />.csharpcode .asp { background-color: #ffff00; }<br />.csharpcode .html { color: #800000; }<br />.csharpcode .attr { color: #ff0000; }<br />.csharpcode .alt <br />{<br />     background-color: #f4f4f4;<br />     width: 100%;<br />     margin: 0em;<br />}<br />.csharpcode .lnum { color: #606060; }<br /></style>  

There will be an extra LI tag after all menu and it will animate its left position. and its height will be little bit bigger then other menu has.

and after it there will be a function to animate the position to the selected LI tag:

 $('li:not(#mnuEffect)').mouseover(function ()   
 {       
      $('#mnuEffect').stop().animate({left: $(this).position().left,width: $(this).width() }, 'slow');       
 });  

This is very simple trick, So here I created function to apply this effect to any kind of menu, and here we can apply any CSS effect for good GUI.
Happy Programming, जय-हिंद!

Read More