tags gen

by shatul patil

HTML

<script src="http://www.steamdev.com/zclip/js/jquery.zclip.js"></script>
<link rel="stylesheet" href="http://coolshatul.com/copy/bootstrap-combined.min.css">
<div class="box" style="width:auto">

<h3>Meta Tags Generator</h3>
<p>Creates a well formated meta tags for your website with the entered values.</p>

<div class="form-container">
<div class="form-container" id="contact_form">
    <div id="contact_results"></div>
    <div id="contact_body">
	<div class="forms">
		<fieldset>
			<ol>
				<li class="form-row text-input-row">
                <label>Title :</label>
                <input type="text" name="Title" id="Title" class="input-field text-input" value=""/><span id="Titlecount"></span></li> 
				
                <li class="form-row text-input-row">
                <label>Description :</label>
                <input  type="text" name="Description" id="Description" class="input-field text-input" /></li> 

                
			</ol>
		</fieldset>
		
     <div id="output">
     <p id="test"><strong>Output</strong></p><br />
     <div id="copied">
       <p id="TitleoutP">&lt;title&gt;<strong><span id="Titleout"></span></strong>&lt;/title&gt;</p>
       <p id="DescriptionoutP">&lt;meta name=&quot;description&quot; content=&quot;<strong><span id="Descriptionout"></span></strong>&quot; /&gt;</p>
    </div><a href="#"><span style="float:right" class="copy">copy</span></a>
     </div>
	</div></div></div></div></div>

JavaScript

$(document).ready(function() {
			$('#output').hide();
			$('#TitleoutP').hide();
			$('#DescriptionoutP').hide();
			function myFunction () { 
     		if ($('#Title').val().length == 0 && $('#Description').val().length == 0)
			$('#output').hide();
 			}
            
			function myGen( input , psout, pout , out ) {
			$(input).keyup(function() {
             $(psout).text($(this).val());
			 	if ($(this).val() != ""){
				  $(pout).slideDown('fast');
				  $(out).addClass('download-box').slideDown('fast');}
			   else {
				  $(pout).slideUp();
				  
				 }
				 myFunction();
			});
			};
			
			myGen( '#Title' , '#Titleout', '#TitleoutP' , '#output' );
			myGen( '#Description' , '#Descriptionout', '#DescriptionoutP' , '#output' );
			
               $(".copy").zclip({
                    path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf", 
                    copy: function() {
                        return $('#copied').text();
                    },
                    afterCopy: function() {
                       $('.copy').text(" Copied"); 
                    }
                });
       
				
        });