Yearly Archives: 2025

Read more about the article Image crop using cropper js
Javascript / Jquery

Image crop using cropper js

A. Single Photo <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script> <div class="container"> <div class="item up-load"> <input type="file" id="product_thumbnail" name="product_thumbnail" required> <input type="hidden" name="cropped_thumbnail" id="cropped_thumbnail"> </div> <div class="upload-image…

0 Comments
February 28, 2025
Jquery

Duplicate and insert any field using jquery

  <script> $(document).ready(function(){ $('#add_more').click(function(){ $(".lasts:last").clone().insertAfter("#lasts:last"); }); }); </script> <fieldset class="name lasts" id="lasts"> <div class="body-title">Attribute Value</div> <input class="flex-grow" type="text" placeholder="value" name="value[]" tabindex="0" value="" aria-required="true" required=""><hr/> </fieldset> <fieldset> <div class="body-title"></div> <button class="tf-button"…

0 Comments
February 27, 2025
Laravel / Laravel Project

Create variations for ecommerce using laravel and javascript

  <!-- create variations start --> <input type="hidden" name="select_attributes" id="select_attributes" /> <div class="dropdown"> <input type="text" name="" class="tf-button dropdown-toggle" type="button" id="multiSelectDropdown" data-bs-toggle="dropdown" aria-expanded="false" placeholder="Select" id="" /> <!-- </button> --> <ul class="dropdown-menu"…

0 Comments
February 27, 2025
Html css and js

Multiple select dropdown

  <div class="dropdown"> <input type="text" name="select_attributes" class="tf-button dropdown-toggle" type="button" id="multiSelectDropdown" data-bs-toggle="dropdown" aria-expanded="false" placeholder="Select" /> <!-- </button> --> <ul class="dropdown-menu" aria-labelledby="multiSelectDropdown" style="width:100%; height:auto"> <?php $attributes = DB::table('attributes')->distinct()->get(['attribute_name']); foreach ($attributes as $key…

0 Comments
February 27, 2025
Read more about the article Form Serialize method using ajax and php
Jquery / PHP

Form Serialize method using ajax and php

  <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(function () { $('form').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: 'post.php', data: $('form').serialize(), success: function () { alert('form was submitted'); } });…

0 Comments
February 9, 2025
Read more about the article Instagram Reels-like Video Uploader / video cropper
Javascript

Instagram Reels-like Video Uploader / video cropper

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Instagram Reels-like Video Uploader</title> <style> /* Container for the video preview */ .video-container { position: relative; width: 100%;…

0 Comments
February 5, 2025
Jquery

Maximum words in textarea

Maximum words <textarea maxlength ="number" id="textarea"> <span id="txt-length-left1" style="color:red"></span> <script>     $(document).ready(function(){      var maxchars = 25; $('body').on('keyup paste', '#textarea', function () {         $(this).val($(this).val().substring(0,…

0 Comments
January 25, 2025