Select Your Favorite Color for Your Website

This is very simple post to display colors with codes.

Live DemoDownload Script




Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Youtube like loading bar with Jquery

In this post I am going to show how to create Youtube like loading bar with Jquery.

Live DemoDownload Script

Convert image color to black and white using CSS3

In this post I am going to show how to Convert image color to black and white using CSS3.grayscale filter is used to convert image color to black and white.

Live DemoDownload Script

CSS Code

#img {
            -o-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            }

To display images using HTML use the following code

HTML

<img src="yourimg.jpg" width="500" id="img"/>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Display Socialmedia icons using Font awesome and CSS3

Live DemoDownload Script

Change Colors using CSS and JQuery

In this article I want to explain about Change Colors using CSS and JQuery. This is basic level tutorial just changing stylesheet using jQuery script.

Live DemoDownload Script

Call CSS file using button click using jQuery function.

Defintion and Explanation:
The attr() method sets or returns attributes and values of the selected elements.

Syntax:
$(selector).attr(attribute);

Jquery function to call CSS file

$(document).ready(function() {
        $(".blue").click(function(){ //Btn Class name
          $("link").attr("href", "css/blue.css"); //Css file name with path
          return false;
       });
    });

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Display SocialMedia Icons using CSS3

In this post I want to explain about hoe to Display Socialmedia Icons using CSS3.Use this simple CSS and enrich your websites.

Live DemoDownload Script

HTML

<li class="facebook">
        <a href="http://www.facebook.com/"><strong>Facebook</strong></a>
 </li>

Call background image for facebook using the below CSS

CSS

li.facebook { background-image:url("../images/facebook.png"); }

To display social media name and hide other icons use the following css codes.opacity is used to apply transparent to other icons.

Full Code for Hover

#css3:hover li { opacity:0.2; }
#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#css3 li a strong { opacity:0;-webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;-moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#css3 li:hover { opacity:1; }
 #css3 li:hover a strong { opacity:1; top:-10px; }

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Live background color change using jQuery Color Picker Plugin

I have downloaded jQuery Color Picker Plugin and changed few line coding to create this simple script.It is very useful for web developers to change background color.Hope you all like this one.

Live DemoDownload Script


We need jquery libray plugin files and css files to perform this action.I have used the following css and jQuery files.
<link rel="Stylesheet" type="text/css" href="css/jpicker-1.1.6.min.css" />
<link rel="Stylesheet" type="text/css" href="jPicker.css" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jpicker-1.1.6.min.js" type="text/javascript"></script>

Jquery function

<script type="text/javascript">
            $(function()
              {
                $.fn.jPicker.defaults.images.clientPath='images/'; //Images folder path
                var LiveCallbackElement = $('#Live'), 
                    LiveCallbackButton = $('#LiveButton');
                $('#colorval').jPicker(
                  {window:{title:'A jQuery Color Picker Plugin'}}, //Jquery color plugin title
                  function(color, context)
                  {
                    var all = color.val('all');
                    $('body').css({ backgroundColor: all && '#' + all.hex || 'transparent' }); //Apply bgcolor to body
                  },
                  function(color, context)
                  {
                    var hex = color.val('hex'); //Get Color value
                    LiveCallbackElement.css({ backgroundColor: hex && '#' + hex || 'transparent' });
                  });
              });
         </script>

HTML

     <body id="Live">
          <div id="jPicker">
            <h2>Live background color change using jQuery Color Picker Plugin</h2>
              <input id="colorval" type="text" value="e2ddcf" /><br />
          </div>
        </body>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Moving background image using jQuery

In this post am going to show how to move background image using css.Here two jQuery methods are used to perform this action.

setInterval() :
The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).

css():
The css() method sets or returns one or more style properties for the selected elements.

Live DemoDownload Script

Jquery function

<script type="text/javascript">
        $(function(){
            var x = 0;
            setInterval(function(){
                x-=1;
                $('.clouds').css('background-position', x + 'px 0');  //replace with your class name or ID name
                }, 70);
        })
    </script>

HTML

<div class="clouds"></div>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Youtube Instant Search Using jQuery and Ajax

Youtube instant search is useful to search youtube videos fastly.

Live DemoDownload Script

Export HTML table values into PDF using jsPDF

Today i am going to explain how to export the html table data into pdf using jsPDF.jsPDF plugin is used to convert HTML to PDF.jsPDF is an open-source library for generating PDF files.

Live DemoDownload Script

Export HTML table values into Excel using jQuery

Today i am going to explain how to export the html table data into excel using jQuery.

Live DemoDownload Script


We need jquery libraya nad plugin files to perform this action.Please copy and Paste below library file.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.btechco.excelexport.js"></script>
<script src="jquery.base64.js"></script>

Jquery function

<script>
            $(document).ready(function () {
                $("#btn").click(function () { //button Id
                    $("#Exporttbl").excelexport({ //table id
                        containerid: "Exporttbl"
                       , datatype: $datatype.Table
                    });
                });
            });
        </script>

HTML

<table id="Exporttbl" border="1" style="border-collapse: collapse;">
            <thead>
                <tr>
                    <th>Sno</th>
                    <th>Programming Languages</th>  
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Java</td>
                </tr>
            </tbody>
        </table>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Snow Effect using jQuery

This is very useful script for web developers.In this i have used many methods like html(),Math.random(),remove(),appendTo(),css(),clone() etc.

Live DemoDownload Script


Please copy and Paste below library file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

Snow plugin

<script>
        (function($){
            $.fn.snow=function(options){
                var $flake=$('#snow').css({'position':'absolute','top':'-50px'}).html('&#10052;'),//Get element values using ID
                    documentHeight=$(document).height(),
                    documentWidth=$(document).width(),
                    defaults={minSize:2,maxSize:8,newOn:200,flakeColor:"#fff"}, //Snow size and color
                    options=$.extend({},defaults,options);
                var interval=setInterval(function(){
                    var startPositionLeft=Math.random()*documentWidth-100,
                    startOpacity=0.5+Math.random(),
                    sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,
                    endPositionLeft=startPositionLeft-100+Math.random()*400,durationFall=documentHeight*10+Math.random()*6000;
                    $flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);
                    };
        })(jQuery);
        </script>

Jquery function

<script>
    $(document).ready( function(){
            $.fn.snow();
    });
    </script>

to display snow effect to call the following HTML code with ID.

HTML

<div id="snow"></div>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Some useful CSS and Javascript tips

Some useful CSS and Javascript tips

Live DemoDownload Script

Use the following Css code for hide anchor link.

Hide tag link using CSS

<a href="http://www.google.com" class="first">Google</a>
        <style>.first{ pointer-events:none;}</style>

Using onmouseover and onmouseout, We can hide and show div content.Find the below code for example or click live demo button.

Show hide div using Javascript

<a onmouseover="document.getElementById('div_name').style.display='block';" onmouseout="document.getElementById('div_name').style.display='none';"
href="" onclick="return false;">
Show</a>
<br />

<div id="div_name" style="display:none;margin:15px 15px 0px 15px;padding:5px;border:1px solid #aaa;">
This is more information placed in our hidden div.
When you move your mouse off the link above this DIV area will
disappear.
</div>

Show hide div using CSS

<style type="text/css">
        .popup {position: fixed;visibility: hidden;border:1px solid #000; padding:5px;}
        a:hover + .popup {visibility: visible;}
        </style>
        <a href="#">Show Popup</a>
          <p class="popup">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

CSS3 Text Effects

CSS3 Text Effects

Live DemoDownload Script

Shadow

<style>#txt{text-shadow: 0 6px 4px #85c226,-3px -5px 4px #fe2192, 3px -5px 4px #f7c200; }</style>

Double

<style>#txt{text-shadow:0px -10px 0 #fe2192;font-size:30px;}</style>

Blur

<style>#txt{color: transparent;text-shadow: 0 0 5px rgba(0,0,0,0.5);}</style>

Cloudy Text Effect

<style>#txt{text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);color: rgba(255,255,255,0);font-size: 30px;background:#000;}</style>

Embossed Text Effect

<style>#txt{text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;color: #9c8468;opacity: 0.3;}</style>

City Lights Text Effect

<style>
        #txt{color: #fff;text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;letter-spacing: 5px;}</style>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

Change background color on Hover and onClick using Javascript

This is an example of how to change the background color using the OnClick and Hover using javascript.

Live DemoDownload Script

Javascript Function

<script language="JavaScript">
    function changebg(color){
        document.bgColor = color;
    }
</script>

Mouseover Change Bg Color

<p><a href="#" onMouseOver="javascript:changebg('#EB2525')">Mouseover <strong>Red</strong></a></p>

MouseClick Change Bg Color

<p><a href="#" onclick="javascript:changebg('#000099')">MouseClick <strong>Blue</strong></a></p>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

jQuery plugin for Uppercase, Lowercase and titlecase

jQuery plugin for UpperCase, LowerCase and TitleCase

Live DemoDownload Script

Merge Multiple Tables into single table using jQuery

This is very simple script used to merge tables.
append() method insert elements at the end of the selected content.
prepend() method insert elements starting of the selected content.

In this example i have used both append() and prepand() methods.

Add tables at Last:

Live DemoDownload Script

Add tables at First:

Live DemoDownload Script

Need library file to perform this action.Please copy and Paste below library file.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>


Add tables at Last:

Jquery Function

<script type="text/javascript">
        $(function() {
            $('#Merge').click(function() {
                $('#tbl1 > tbody:last').append($('#tbl2 > tbody').html());
                $('#tbl1 > tbody:last').append($('#tbl2 > tbody').html());
                $('#tbl2').remove();
                $('#tbl3').remove();
            });
        });
    </script>

remove() method removes data for selected elements.

Add tables at First:

Jquery Function

<script type="text/javascript">
    $(function() {
        $('#Merge').click(function() {
            $('#tbl1 > tbody:first').prepend($('#tbl2 > tbody').html());
            $('#tbl1 > tbody:first').prepend($('#tbl3 > tbody').html());
            $('#tbl2').remove();
            $('#tbl3').remove();
        });
    });
</script>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.