Top Questions:

  • 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>
  • 3 years-4 months

    Drag drop

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

    Drag Drop your table's data using jQuery,Ajax,php and mysql

    /**********HTML PART START**************/
    
    <div class="x_content my-data" id="">
    
                      <table class="table table-bordered">
                        <thead>
                          <tr>
                            <th>#</th>
                            <th>Image</th>
                            <th>Category</th>
                            <th>Edit</th>
                            <th>Delete</th>
                          </tr>
                        </thead>
    <?php
      
      $query = "SELECT * FROM product ORDER BY pos ASC";
      $result = mysql_query($query) or die(mysql_error().': '.$query);
      if(mysql_num_rows($result)) {
    ?>
    <form id="dd-form" action="" method="post">
      <input type="checkbox" value="1" name="autoSubmit" id="autoSubmit" class="autoooo" checked/>
    <tbody id="sortable-list">
      <?php 
        $order = array();
        $i=1;
        while($row = mysql_fetch_assoc($result)) {
            $img=explode(",",$row['product_img']);
                           $img=explode(",",$row['product_img']);
    $catqry=mysql_fetch_array(mysql_query("select * from category where id='".$row['product_cat_id']."'"));
    $scatqry=mysql_fetch_array(mysql_query("select * from subcategory where id='".$row['product_subcat_id']."'"));
    
                           echo '<tr title="',$row['id'],'"><td>',$i,'</td><td><img src="',$img[0],'" height="50" width="50"></td><td>',$catqry['cat_name_eng'].'/'.$catqry['cat_name_china'],'</td><td><a href="?edit=',$row['id'],'"><i class="fa fa-pencil"></i></a></td><td><a href="?delete=',$row['id'],'" onclick="return confirm("Are you sure you want to delete")"><i class="fa fa-trash"></i></a></td></tr>';
          $order[] = $row['id'];
          $i  ;
        }
      ?>
    </tbody>
    <br />
    <input type="hidden" name="sort_order" id="sort_order" value="<?php echo implode(',',$order); ?>" />
    </form>
    <?php } ?>
    
    
                      </table>
    
                    </div>
                  </div>
            
            </div>
    <style type="text/css" media="screen">
    #sortable-list1   { padding:0; }
    #sortable-list1 tr  { padding:4px 8px; color:#000; cursor:move; list-style:none; width:100px; background:#ddd; margin:10px 0; border:1px solid #999; }
    #sortable-list1 tr td { text-align: center; }
    #message-box1   { padding:4px 8px; margin:0 0 14px 0; width:500px; }
    .autoooo{ display : none; }
    </style>
    /**********HTML PART END**************/
    /**********SCRIPT PART START**************/
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
      <script>
    /* when the DOM is ready */
    $(document).ready(function() {
    
      /* grab important elements */
      var sortInput = $('#sort_order');
      var submit = $('#autoSubmit');
      var messageBox = $('#message-box');
      var list = $('#sortable-list');
      /* create requesting function to avoid duplicate code */
      var request = function() {
      $.ajax({
      url: "drop_ajax.php",
      data:'sort_order='   sortInput[0].value   '&ajax='   submit[0].checked   '&do_submit=1&byajax=1',
      type: "POST",
      success: function(data) {
            window.location.reload();
      }
      });
      };
      /* worker function */
      var fnSubmit = function(save) {
       
        var sortOrder = [];
        list.children('tr').each(function(e){
          sortOrder.push($(this).data('id'));
        });
        sortInput.val(sortOrder.join(','));
       // console.log(sortInput.val());
        if(save) {
          request();
        }
      };
      /* store values */
      list.children('tr').each(function(e) {
        var tr = $(this);
        tr.data('id',tr.attr('title')).attr('title','');
      });
      /* sortables */
      list.sortable({
        opacity: 0.7,
        update: function() {
          fnSubmit(true);
        }
      });
      list.disableSelection();
    });
    </script>
    /**********SCRIPT PART END**************/
    /**********AJAX PART START**************/
    <?php
    include('config.php'); /include your db file here
    /* on form submission */
    if(isset($_POST['do_submit']))  {
      /* split the value of the sortation */
      $ids = explode(',',$_POST['sort_order']);
     /* run the update query for each id */
      foreach($ids as $index=>$id) {
       $id = (int) $id;
        if($id != '') {
         $query = 'UPDATE product SET pos = '.($index   1).' WHERE id = '.$id;
         $result = mysql_query($query) or die(mysql_error().': '.$query);
        }
     }
     
      /* now what? */
     if($_POST['byajax']) { die(); } else { $message = 'Sortation has been saved.'; 
     
      echo $message;
      }
    }
    ?>
    
    
    /**********AJAX PART END**************/
  • 3 years-4 months

    Share with Whatsapp

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

    share on whatsapp using php

    <a data-text="Your message goes here.." data-link="http://dorcode.com" class="btn btn-sucess">Share</a>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    jQuery(document).ready(function() {
    
    var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };
    jQuery(document).on("click", '.whatsapp', function() {
            if( isMobile.any() ) {
    
                var text = jQuery(this).attr("data-text");
                var url = jQuery(this).attr("data-link");
                var message = encodeURIComponent(text)   " - "   encodeURIComponent(url);
                var whatsapp_url = "whatsapp://send?text="   message;
                window.location.href = whatsapp_url;
            } else {
                alert("Please share on mobile device");
            }
    
        });
    });
    </script>
     
  • 3 years-4 months

    5 Star Rating Using php,ajax,jQuery

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

    simple php rating in php

    <?php
    require "user/class.user.php";
    $auth_user = new USER();
    /********PDO Code***********/
    $email='user@gmail.com';
    $user=$auth_user->runQuery("SELECT * FROM login where email=:email");
    $user->execute(array(':email'=>$email));
    $userdatasingle=$user->fetchAll();
    $userdatasingle=$userdatasingle[0];
    ?>
    /*****HTML*******/
    <div class="rating">
                          
     <input type="hidden" name="rating" id="rating" value="<?php echo $userdatasingle["rating"]; ?>" />
           <ul onMouseOut="resetRating(<?php echo $userdatasingle["id"]; ?>);">
                 <?php
                 for($i=1;$i<=5;$i  ) {
                 $selected = "";
                 if(!empty($userdatasingle["rating"]) && $i<=$userdatasingle["rating"]) {
                 $selected = "selecteds";
                 }
         ?>
      <li class='<?php echo $selected; ?>' onmouseover="highlightStar(this,<?php echo $userdatasingle["id"]; ?>);" onmouseout="removeHighlight(<?php echo $userdatasingle["id"]; ?>);" onClick="addRating(this,<?php echo $userdatasingle["id"]; ?>);">&#9733;</li>  
                            <?php }  ?>
                        <ul>
                        <span class="ratings"><a href="#" class="Lgreen-txt font-6 rat-txt"><?php echo $userdatasingle["rating"]; ?> anmeldelser</a>
                       </span>
    </div> 
    /***********Script*************/
    <script>
    function highlightStar(obj,id) {
      removeHighlight(id);    
      $('.rating li').each(function(index) {
        $(this).addClass('highlights');
        if(index == $('.rating li').index(obj)) {
          return false; 
        }
      });
    }
    
    function removeHighlight(id) {
      $('.rating li').removeClass('selecteds');
      $('.rating li').removeClass('highlights');
    }
    
    function addRating(obj,id) {
      $('.rating li').each(function(index) {
        $(this).addClass('selecteds');
        $('#rating').val((index 1));
        if(index == $('.rating li').index(obj)) {
          return false; 
        }
      });
      $.ajax({
      url: "add_rating.php",
      data:'id=' id '&rate=' $('#rating').val(),
      type: "POST",
      success: function(data) {
      $(".rating").load(location.href " .rating>*","");
      }
      });
    }
    
    function resetRating(id) {
      if($('#rating').val() != 0) {
        $('.rating li').each(function(index) {
          $(this).addClass('selecteds');
          if((index 1) == $('#rating').val()) {
            return false; 
          }
        });
      }
    } 
    </script>
    /**********AJAX File*************/
    require "user/class.user.php";
    $auth_user = new USER();
    
    if (isset($_POST['rate']) && !empty($_POST['rate'])) {
     
        $rate = $_POST['rate'];
        $id = $_POST['id'];
    // check if user has already rated
        $sql = $auth_user->runQuery("UPDATE `login` SET rating=:rating WHERE `id`=:id");
       $sql->execute(array(':id'=>$id,':rating'=>$rate));
       
    }
     
  • 5 years-11 months

    How to Manipulating or Modify the Browser History in Complex HTML5 and JavaScript Applications

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

    URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

    // modify history
    window.history.pushState(obj, title, url);
    window.history.pushState("", "", 'www.dorcode.com');  
  • 3 years-4 months

    Column editable

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

    you can make td editable using this code

    Note: Add Table Class editableTable
    <script>
    $(function () {
        $(".qty").dblclick(function () {
            var OriginalContent = $(this).text();
            var Originalid = $(this).attr('id');
            $(this).addClass("cellEditing");
              $(this).html("<input type='text' class='qty' value='"   OriginalContent   "' />");
            $(this).children().first().focus();
            $(this).children().first().focusout(function (e) {
                    var newContent = $(this).val();
                    $(this).parent().text(newContent);
                    $(this).parent().removeClass("cellEditing");
            });
             
        $(this).children().first().blur(function(){
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
        });
        });
    });
     </script>
  • 3 years-4 months

    Refresh Particular Div On Ajax Success

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

    if you want to refresh single div not a page than you can use this code

    <div class="avlfrom">
     <span class="leftgap">
    <a  href="javascript:void(0);"  class="remove_field" id="1">delete</a>
    <a  href="javascript:void(0);"  class="remove_field" id="2">delete</a>
    <a  href="javascript:void(0);"  class="remove_field" id="3">delete</a>
    </span>
    </div>
    <script>
           $(document).on('click','.remove_field',function(){
            if (confirm("Are you sure you want to delete")) {
                   var id=$(this).attr('id');
                   $.ajax({
           url: "ajax_page.php",            
                 type: "POST",
                       data: 'id=' id,
                 success: function(data) {
                              $(".avlfrom").load(location.href " .avlfrom>*","");
          },
           }); 
       return false;
                    }
                 });
    
    <script>
  • 5 years-11 months

    UI Datepicker be made to disable Saturdays and Sundays with custom date

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

    I use a datepicker for choosing an appointment day.I want to exclude Saturdays and Sundays from the available choices. Can this be done? If so, how?

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <input name="datenew" type="text" id="datepicker">
    <script>
    var unavailableDates = ["21-6-2016","22-6-2016","23-6-2016","24-6-2016"];
    function unavailable(date) {
      var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
        dmy = date.getDate()   "-"   (date.getMonth()   1)   "-"   date.getFullYear();
      var closedDays = [[Saturday],[Sunday]];
     for (var i = 0; i < closedDays.length; i  ) {
        if (day == closedDays[i][0]) {
          return [false];
       }
    
     }
        if (jQuery.inArray(dmy, unavailableDates) == -1) {
            return [true, ""];
        } else {
            return [false, "", "Unavailable"];
        }
    }
    jQuery(function() {
      jQuery( "#datepicker" ).datepicker({    
        changeMonth: true,
        changeYear: true,
       dateFormat: 'dd MM yy',   
        autoclose: true,
        minDate:  2,
        firstDay: 1,
        beforeShowDay: unavailable
      });
    
    });
    </script>
  • 3 years-4 months

    Create textarea into a rich content/text editor using jQuery

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

    You can Create textarea into a rich content/text editor using jQuery.

    /***Footer part***/
    <script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
    <script type="text/javascript">
            bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); // convert all text areas to rich text editor on that page
    
            bkLib.onDomLoaded(function() {
                 new nicEditor().panelInstance('area1');
            }); // convert text area with id area1 to rich text editor.
    
            bkLib.onDomLoaded(function() {
                 new nicEditor({fullPanel : true}).panelInstance('area2');
            }); // convert text area with id area2 to rich text editor with full panel.
    </script>
    /***HTML PART***/
    <!DOCTYPE html>
    <html>
    <head>
      <title>How to Create textarea into a rich content/text editor using jQuery</title>  
     
      <script type="text/javascript">
    //<![CDATA[
      bkLib.onDomLoaded(function() {
            new nicEditor({maxHeight : 200}).panelInstance('area');
            new nicEditor({fullPanel : true,maxHeight : 200}).panelInstance('area1');
      });
      //]]>
      </script>
    </head>
    <body>
    <h4>How to Create textarea into a rich content/text editor using jQuery</h4>
    <div id="sample">
      <h4>Simple textarea</h4>  
      <textarea name="area" id="area" style="width:70%;height:200px;">
           Some Initial Content was in this textarea
      </textarea>
      <h4>textarea with complete panel</h4>
      <textarea name="area1" id="area1" style="width:70%;height:200px;">
           Some Initial Content was in this textarea
      </textarea>
    </div>
    </body>
    </html>