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