Jquery

Html css and js / Jquery

Professional Slider or Carousel

<div class="custom-carousel"> <div class="carousel-wrapper"> <div class="carousel-slide active"> <img src="https://shivshakticoatech.com/wp-content/uploads/2025/07/slider2.jpg" alt="Office 1"> </div> <div class="carousel-slide"> <img src="https://shivshakticoatech.com/wp-content/uploads/2025/07/slider3.jpg" alt="Office 2"> </div> <div class="carousel-slide"> <img src="https://shivshakticoatech.com/wp-content/uploads/2025/07/slidera1.jpg" alt="Office 3"> </div> <div class="carousel-slide"> <img src="https://shivshakticoatech.com/wp-content/uploads/2025/07/slidera2.jpg"…

0 Comments
July 1, 2025
Jquery / Jquery UI

Drag and drop and clone

A. Drag, drop and clone <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Drag, Drop & Clone</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <style> .draggable { width: 100px; padding:…

0 Comments
April 1, 2025
Jquery

Get input type file value using jquery

  $(document).ready(function(){ $('#fileInput').change(function(){ var fileName = $(this).val().split('\\').pop(); // Get only the file name alert("Selected file: " + fileName); }); }); $(document).ready(function(){ $('#fileInput').change(function(){ var file = $(this).prop('files')[0]; // Get the first…

0 Comments
April 1, 2025
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
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