Attribute selector using css and jquery
[data-plugin~="woocommerce/woocommerce.php"] { display:none; } $('[data-plugin~="woocommerce/woocommerce.php"]').click(function(){ alert('hi'); });
0 Comments
May 16, 2025
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:…
April 1, 2025
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…
April 1, 2025
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…
February 28, 2025
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"…
February 27, 2025
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'); } });…
February 9, 2025
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,…
January 25, 2025