Top Questions:

  • 3 years-4 months

    Print specific div using jquery

    • Category : jquery
    • Location : Chandigarh
    • Posted On :
    • Posted by : Guley

    You can print specific div or area using this script

    /******Html*********/
     <a href="javascript:void(0);" id="printinvoice"  class="btn btn-warning btn-sm">PRINT INVOICE</a>
    
    <div class="print_div">
                        <div class="col-xs-6 table-responsive">
                            <div class = "sales_header">
                                <span>ORDER NO: # 11380189</span>  
                            </div>
                            <table class="table table-striped table-bordered datatables dataTable">
                                <tbody>
                                    <tr>
                                        <td>Order date</td>
                                        <td>12 Apr 2017 15:55:34</td>
                                    </tr>
                                    <tr>
                                        <td>Order Status</td>
                                        <td> Processed                                    </td>
                                    </tr>
                                    <tr>
                                        <td>Currency</td>
                                        <td>GBP</td>
                                    </tr> 
                                </tbody>
                            </table>
                        </div>  
     </div> 
    /***script**/
    <script src="/assets/js/jQuery.print.js"></script>
    $(document).ready(function() {
        $(document).on('click','#printinvoice',function(){
            //Print ele4 with custom options
            $('.print_div').print({
                //Use Global styles
                globalStyles: true,
                //Add link with attrbute media=print
                mediaPrint: true,
                //Custom stylesheet
                stylesheet: "http://fonts.googleapis.com/css?family=Inconsolata",
                //Print in a hidden iframe
                iframe: true,
                //Don't print this
                noPrintSelector: ""
            });
        });
    });
  • 3 years-4 months

    Display Multiple Images Preview

    • Category : jquery
    • Location : Chandigarh
    • Posted On :
    • Posted by : Guley

    When you select multiple images using file input..after taht display all images where you wan't before upload

    <input type='file' name="image" onchange="preview(this);" multiple="multiple" />
    <div id='previewImg'></div>
    
    <script>
    window.preview = function (input) {
        if (input.files && input.files[0]) {
            $(input.files).each(function () {
                var reader = new FileReader();
                reader.readAsDataURL(this);
                reader.onload = function (e) {
                    $("#previewImg").append("<img class='thumb' src='"   e.target.result   "'>");
                }
            });
        }
    }
    </script>
     
  • 3 years-4 months

    Drag Drop multiple divs

    • Category : php
    • Location : Chandigarh
    • Posted On :
    • Posted by : Guley

    you can drag drop all data between multiple divs

     <div id="1" dvSource dvSourceul">
    <ul id="dropul_1">
          <li class="drop"> <img alt="" src="images/Chrysanthemum.jpg" />
    <li class="drop"> <img alt="" src="images/Chrysanthemum.jpg" />
    <li class="drop"> <img alt="" src="images/Chrysanthemum.jpg" />
    <li class="drop"> <img alt="" src="images/Chrysanthemum.jpg" />
    <li class="drop"> <img alt="" src="images/Chrysanthemum.jpg" /> </li>
    </ul>
        </div>
    <div id="2">
    <ul id="dropul_2">
          <li class="drop"> <img alt="" src="images/Chrysanthemum.jpg" />
    <li class="drop"> <img alt="" src="images/Chrysanthemum.jpg" />
    <li class="drop"> <img alt="" src="images/Chrysanthemum.jpg" />
    <li class="drop"> <img alt="" src="images/Chrysanthemum.jpg" />
    <li class="drop"> <img alt="" src="images/Chrysanthemum.jpg" /> </li>
    </ul>
        </div>
    /********Jquery*********
    <script>
     $(function () {
                $("li.drop").draggable({
                    revert: "invalid",
                    refreshPositions: true,
                    drag: function (event, ui) {
                        ui.helper.addClass("draggable");
                       
                    },
                    stop: function (event, ui) {
                        if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
                             ui.helper.removeClass("ui-draggable-dragging");
                             ui.helper.removeClass("draggable");
                        }
                        else {
                            //alert(" not dropped.");
                        }
                    }
                });
                $(".dvSourceul").droppable({
                    drop: function (event, ui ) {
                      var newId=event.target.id;
                      var aworkid=ui.draggable.attr('data-id');
                        ui.draggable.addClass("dropped");
                        $("#dropul_" newId).append(ui.draggable);
                        $.ajax({
                          type: "POST",
                          url: "update_work.php",
                          data:'id=' aworkid '&wrkid=' newId,
                          success: function(data){
                          // alert(data);
                          }
                          });
                    }
                });
            });
    
    </script>
  • 5 years-11 months

    How to compress CSS files using PHP

    • Category : php
    • Location : Chandigarh, India
    • Posted On :
    • Posted by : Vikas

    When you’re using a sophisticated design, CSS files can quickly become very long, and takes time to load. I have compiled interresting ways of compressing CSS files by using PHP.

    (1.)
    <link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>
    Once you successfully rename your css files, edit it and add the following code at the beginning of the file:
    <?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>
     

    2 Answers

    View More

    vikas image

    Name: vikas

    Experiance: 5 years-11 months

    answered
    Jul 01, 2016 at 07:11

    Then, add the next line to the very bottom and save the file.
    <?php if(extension_loaded('zlib')){ob_end_flush();}?>
     
  • 5 years-11 months

    how bootstrap modal rotate and show

    • Category : css
    • Location : Chandigarh, India
    • Posted On :
    • Posted by : Vikas

    this css class add your bootstrap modal then see the magic

    rotate {
        transform:rotate(180deg);
        transition:all 0.5s;
    }
    .rotate.in {
        transform:rotate(1800deg);
        transition:all 1.5s;
    }
  • 3 years-4 months

    Loader

    • Category : html
    • Location : Chandigarh
    • Posted On :
    • Posted by : Guley
    <html>
    <head>
    <style>
      .js div#preloader { position: fixed; left: 0; top: 0; z-index:99999; width: 100%; height: 100%; overflow: visible; background:#FFFFFF url('images/load.gif') no-repeat center center;background-size:30%;}
    .ui-loader.ui-corner-all.ui-body-a.ui-loader-default {display: none;}
      </style>
    </head>
     <div class="js">
    <body>
    <div id="preloader"></div> 
    </body>
    </div>
    </html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    /*====================================================== start */
    
    
    jQuery(document).ready(function($) {  
    
    // site preloader -- also uncomment the div in the header and the css style for #preloader
    $(window).load(function(){
      $('#preloader').fadeOut('10000',function(){$(this).remove();});
    });
    });
    /*====================================================== end */
    </script>

     

  • 3 years-4 months

    Menu Active

    • Category : jquery
    • Location : Chandigarh
    • Posted On :
    • Posted by : Guley
    $(function(){
        // this will get the full URL at the address bar
        var url = window.location.href; 
        // passes on every "a" tag 
        $(".main-nav li a").each(function() {
                // checks if its the same on the address bar
            if(url == (this.href)) { 
                $(this).closest("li").addClass("current");
            }
        });
    });

     

  • 3 years-4 months

    Password Pattern

    • Category : html
    • Location : Chandigarh
    • Posted On :
    • Posted by : Guley
    <form action="demo_form.asp">
    Password: <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
    <input type="submit">
    </form>

     

  • 3 years-4 months

    Auto upload Picture

    • Category : php
    • Location : Chandigarh
    • Posted On :
    • Posted by : Guley
    <form action="" method="post" enctype="multipart/form-data" class="upload_bus"> 
    div class="btn-group col-lg-3 col-md-3 col-sm-6 col-xs-12 rightgp-btns">
      <input class="create-doc" id="upbuss"  type="file" name="upbus" >
    </div>
    </form>
    <center><div id="loader-icon" style="display:none;"><img src="images/loader-time.gif" height="100px" width="100px" /></div></center>
    <script>
    $('input#upbill').change(function(){
    $('form.upload_b').submit();
    })
    $('form.upload_b').submit(function(e){
      var formData = new FormData(this);
      $('#loader-icon').show();
    $.ajax({
    url: "upload_file.php",            
    type: "POST",
    data:  formData,
    mimeType:"multipart/form-data",
    contentType: false,
    cache: false,
    processData:false,
    success: function(data)
    {
      $('#loader-icon').hide();
       window.location.href="example.php";
    }
    });
    return false;
    });
    </script>

     

  • 3 years-4 months

    Print Query

    • Category : css
    • Location : Chandigarh
    • Posted On :
    • Posted by : Guley

    @media print {
      body * {
        visibility: hidden;
      }
      .section-to-print, .section-to-print * {
        visibility: visible;
      }
      .section-to-print {
        position: absolute;
        left: 0;
        top: 0;
      }
    }