Live Preview using Javascript for Design and text Changes | 2my4edge

06 October 2016

Live Preview using Javascript for Design and text Changes

Live preview using Javascript Keyup function is one of the most useful function. Recently i have worked on one invoice generating project from that. i found some interesting codes for you. Live preview we can do it Angular Js. but some people may not aware of angular js. This one very simple live preview example. i have two demo for you. one is Dynamic preview and another is static preview. check and use it.

Live preview in javascript
DOWNLOAD                DYNAMIC PREVIEW                   STATIC PREVIEW


This is Javascript Keyup() function. so we have Jquery file. Any lastest Jquery file.

JQUERY
<script src="jquery-1.10.2.min.js"></script>

FORM
<div class="invoice_form_container">
<form method="post" action="javascripr:void(0)">
    <div class="form-group">
      <input type="text" name="preheading" class="preheading required" value="" />
      <label for="input" class="input-label">Preheading</label><i class="bar"></i>
    </div>
    <div class="form-group">
      <input type="text" name="shopname" class="shopname required" value=""/>
      <label for="input" class="input-label">Shop Name</label><i class="bar"></i>
    </div>
    <div class="form-group">
      <input type="text" name="address1" class="address1 required" value=""/>
      <label for="input" class="input-label">Address line 1</label><i class="bar"></i>
    </div>
    <div class="form-group">
      <input type="text" name="address2" class="address2 required" value=""/>
      <label for="input" class="input-label">Address line 2</label><i class="bar"></i>
    </div>
    <div class="form-group">
      <input type="text" name="address3" class="address3 required" value=""/>
      <label for="input" class="input-label">Address line 3</label><i class="bar"></i>
    </div>
    <div class="form-group">
      <input type="text" name="cellnumber" class="cellnumber required" value=""/>
      <label for="input" class="input-label">Cell Number</label><i class="bar"></i>
    </div>
    <div class="form-group">
      <input type="text" name="ownername" class="ownername required" value=""/>
      <label for="input" class="input-label">Owner Name</label><i class="bar"></i>
    </div>
    <div class="form-group">
      <input type="color" name="bodycolor" class="bodycolor required" value=""/>
      <label for="input" class="input-label">Body color</label><i class="bar"></i>
    </div>
    <div class="form-group">
      <input type="color" name="fontcolor" class="fontcolor required" value=""/>
      <label for="input" class="input-label">font color</label><i class="bar"></i>
    </div>

    <div class="button-container">
    <button type="submit" class="button"><span>Set</span></button>
  </div>
  
  </form> 
</div>


PREVIEW DESIGN
<div class="invoice_container">
  <div class="invoice_header">
    <p align="center" class="ppreheading">தமிழ்</p>
    <p align="right">Cell : <strong class="pcellnumber">986523104</strong></p>
      <h5 align="center">CASH BILL</h5>
      <h1 align="center" class="pshopname"> SHOP NAME GOES HERE </h1>
      <h4 align="center" class="paddress1"> ADDRESS LINE 1 GOES HERE <h4>
        <h5 align="center" class="paddress2"> Address line 2 goes here.. </h5>
        <h6 align="center" class="paddress3"> Address line 3 goes here.. </h6>
      <p>Owner : <strong class="pownername">Arunkumar Maha</strong></p>
  </div>

  <div class="invoice_body">
    <div class="invoice_body_to_address">
      <h4 style="float:left;">Invoice No : <strong>001</strong></h4> 
      <h4 style="float:right;"><p>Date : <span>2016-10-10</span></p></h4><br>
      <br>
      <h3> Name :  <span> Arunkumar M</span> </h3>
  </div>

  <div class="invoice_body_to_details">
    <table style="width:100%">
  <tr>
    <th width="10%" align="center">S No</th>
    <th width="50%" align="center">Details</th>
    <th width="10%" align="center">Quantity</th> 
    <th width="10%" align="center">Price</th>
    <th width="20%" align="center">Amount</th>
  </tr>

    <tr>
    <td align="center" width="10%">1</td>
    <td width="50%"><strong>Product 1</strong></td> 
    <td width="10%" align="center">100</td> 
    <td width="10%" align="center">100</td> 
    <td width="20%" align="right"><strong>10000</strong></td>
  </tr>
    <tr>
    <td align="center" width="10%">2</td>
    <td width="50%"><strong>product 2</strong></td> 
    <td width="10%" align="center">100</td> 
    <td width="10%" align="center">100</td> 
    <td width="20%" align="right"><strong>10000</strong></td>
  </tr>
  


  <tr>
    <td align="center" width="10%">&nbsp;</td>
    <td width="50%">&nbsp;</td> 
    <td width="10%" colspan="2" align="center"><strong>Totol Amount</strong></td>  
    <td width="20%" align="right" ><strong>20000</strong></td>
  </tr>

</table>
  </div>
  
</div>

<div class="invoice_footer">
  <h5 align="">Signature</h5>
  <h2 align="" class="pownername">Arunkumar Maha</h2>
</div>
</div>



JAVASCRIPT
<script>
    $(function(){
      $( '.preheading' ).keyup( function(){
        var preheading = $( this ).val();
        $( '.ppreheading' ).text( preheading );
      });
      $( '.shopname' ).keyup( function(){
        var shopname = $( this ).val();
        $( '.pshopname' ).text( shopname );
      });
      $( '.address1' ).keyup( function(){
        var address1 = $( this ).val();
        $( '.paddress1' ).text( address1 );
      });
      $( '.address2' ).keyup( function(){
        var address2 = $( this ).val();
        $( '.paddress2' ).text( address2 );
      });
      $( '.address3' ).keyup( function(){
        var address3 = $( this ).val();
        $( '.paddress3' ).text( address3 );
      });
      $( '.cellnumber' ).keyup( function(){
        var cellnumber = $( this ).val();
        $( '.pcellnumber' ).text( cellnumber );
      });
      $( '.ownername' ).keyup( function(){
        var ownername = $( this ).val();
        $( '.pownername' ).text( ownername );
      });
      $(".bodycolor").on("change",function(){
        var bggcolor = $(".bodycolor").val();
        $(".invoice_container").css("background-color",bggcolor);
      });

      $(".fontcolor").on("change",function(){
        var fontcolor = $(".fontcolor").val();
        $("body").css("color",fontcolor);
      });
           
    });
  </script>

I hope this concept is really helpful to you. for more interesting tutorials be in touch with 2my4edge programming blog in social networks. keep visiting.

1 comment:

  1. I loved analyzing your articles. This is in fact a exceptional examines for me. The scholars can get the wonderful expertise from getting prepared the assertion. in this statement have to be having the samples, research tool and assets about research. see more

    ReplyDelete

^