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.