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

Create an XML file using MYSQL and PHP

In this tutorial am going to show how to create xml file using php and mysql.This script is used to create xml file dynamically.this script will help when you need to create xml file in php and mysql.

Download Script

The content type of the response header must be set to "text/xml".

header ("content-type: text/xml");

DB Connection in php

 mysql_connect('localhost','root','') or die(mysql_error());

 mysql_select_db('database') or die(mysql_error());

SimpleXMLElement is represents an element in an XML document.

Create XML

    //Create XML and stored in your project folder  
    $xmlobj=new SimpleXMLElement($xml);
    //Your file name
    $xmlobj->asXML("text.xml");

Full Source

<?php
        //content type for XML
            header ("content-type: text/xml");
        //DB Connection
            mysql_connect('localhost','root','') or die(mysql_error());
            mysql_select_db('yourdatabase') or die(mysql_error());
        //Create XML
            $xml='<?xml version="1.0" encoding="UTF-8"?>';
        //Query
            $qr=mysql_query("SELECT * FROM `customers` order by id desc") or die(mysql_error());
            $xml.='<userlist>';
            while($res=mysql_fetch_array($qr))
            {
        //Change field names as per your requirement
             $xml.='<user><name>'.$res['name'].'</name><city>'.$res['city'].'</city><state>'.$res['state'].'</state></user>';
            }
            $xml.='</userlist>';
        //Display Content
            echo $xml;
        //Create XML and stored in your project folder    
            $xmlobj=new SimpleXMLElement($xml);
        //Your file name
            $xmlobj->asXML("text.xml");
    ?>

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

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.

Disable Cut,Copy and Paste using jquery

In this article am going to show how to Disable Cut,Copy and Paste using jquery.

Live DemoDownload Script

Jquery Function

<script>

            $(document).ready(function() {
                $('#input').bind("cut copy paste", function(e) {
                            alert('cut,copy & paste options are disabled');
                            e.preventDefault();
                        });

</script>

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