Top Questions:

  • 5 years-11 months

    How to limit characters for textarea including count in jquery

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

    Here are two scenarios where the keyup event will not get fired: The user drags text into the textarea. The user copy-paste text in the textarea with a right click (contextual menu).

    Use the HTML5 input event instead for a more robust solution:

    // jquery
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    
    // html
    <div class="control">
    	<textarea spellcheck="true" maxlength="200" name="question" id="question" class="input-textarea required-entry" cols="5" rows="8" data-validate="{required:true}" aria-required="true"></textarea>
      <div class="limittext"><span class="charnum">200 Characters left</span></div>
    </div>
    
    <script type="text/javascript">
    jQuery(document).ready(function() {
      // edit area start
      var maxLength = 200;
      var textarea_id = "question";
      // edit area end
    
      var html='<span style="color:red;">'+ maxLength + ' characters allowed, excess characters trimmed</span>';
      jQuery("#"+textarea_id).on('input',function(){
          var length = this.value.length;
          if (length >= maxLength) {
            this.value = this.value.substring(0, maxLength);
            jQuery(this).next(".limittext").html(html);
          } else {
            var count=maxLength-length;
            jQuery(this).next(".limittext").html('<span class="charnum">' +count+' Characters left</span>');
          }
      });
    });
    </script>
  • 5 years-11 months

    How to create add to cart with AJAX on single and variable products programmatically

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

    default WooCommerce if the user clicks on the add to cart button, that item is added to the cart. if you want to add custom add to cart button please remove default "add to cart" button

    // custom template
    <button type="submit" class="custom_cart_button">add to cart</button>
    <script type="text/javascript">
    jQuery(document).ready(function() {
    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
        jQuery('.custom_cart_button').submit(function(e) {
            jQuery.ajax({
                url: ajaxurl,
                type: "post",
                data: {				
    		action : 'post_product_variations19'
    	    },
                success: function(data) {   
                	console.log(data);
                }
            });
    	return false;
        });
    });
    </script>
    
    
    // function.php
    add_action( 'wp_ajax_nopriv_post_product_variations19', 'post_product_variations_func19' );
    add_action( 'wp_ajax_post_product_variations19', 'post_product_variations_func19' );
    function post_product_variations_func19() {
    
        global $woocommerce;
    
        $product_id = 364; // your product id
    
        $found = false;
    
        //check if product already in cart
        if ( sizeof( $woocommerce->cart->get_cart() ) > 0 ) {
            foreach ($woocommerce->cart->get_cart() as $cart_item_key => $values ) {
                $_product = $values['data'];
                if ( $_product->id == $product_id ) {
                	//$calc_qty = $values['quantity'] < 1 ? 1 : $values['quantity']+1;
                	//$woocommerce->cart->set_quantity( $cart_item_key, $calc_qty, true );
                    $found = true;
                }
            }
            // if product not found, add it
            //if ( ! $found )
                $woocommerce->cart->add_to_cart( $product_id );
        } else {
            // if no products in cart, add it
            $woocommerce->cart->add_to_cart( $product_id );
        }
    	
    wp_die();
    }
  • 2 years-11 months

    How to change format of Phone number in input text as you type?

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

    I'm currently displaying phone numbers like 18003336523. However, I need the number to be formatted in a more human-readable form, for example: 1-800-333-6523.

    <script>
    
    jQuery('.wpcf7-tel').keydown(function (e) {
      var key = e.charCode || e.keyCode || 0;
      $phone = jQuery(this);
    
      // Auto-format- do not expose the mask as the user begins to type
      if (key !== 8 && key !== 9) {
          
    console.log($phone.val().length);
       if ($phone.val().length === 1) {
        $phone.val($phone.val() + '-');
       }
       if ($phone.val().length === 5) {
        $phone.val($phone.val() + '-');
       }   
       if ($phone.val().length === 9) {
        $phone.val($phone.val() + '-');
       }
       if ($phone.val().length === 15) {
        return false;
       }
      }
    
      // Allow numeric (and tab, backspace, delete) keys only
      return (key == 8 || 
        key == 9 ||
        key == 46 ||
        (key >= 48 && key <= 57) ||
        (key >= 96 && key <= 105)); 
     })
     
     .bind('focus click', function () {
      $phone = jQuery(this);
      
      if ($phone.val().length === 0) {
       //$phone.val('(');
      }
      else {
       var val = $phone.val();
       $phone.val('').val(val); // Ensure cursor remains at the end
      }
     })
     
     .blur(function () {
      $phone = jQuery(this);
      
      if ($phone.val() === '(') {
       $phone.val('');
      }
     });
    </script>
     
  • 5 years-7 months

    Load more content with jQuery

    • Category : jquery
    • Location : Unknown
    • Posted On :
    • Posted by : Sunil1521543962

    Load more content with jQuery

    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    
    
    <a href="#" id="loadMore">Load More</a>
    
    <p class="totop"> 
        <a href="#top">Back to top</a> 
    </p>


     

    1 Answers

    View More

    sunil1521543962 image

    Name: sunil1521543962

    Experiance: 5 years-7 months

    answered
    Mar 28, 2018 at 06:39

    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    
    
    <a href="#" id="loadMore">Load More</a>
    
    <p class="totop"> 
        <a href="#top">Back to top</a> 
    </p>
    
    <style>
    body {
        background-color: #f6f6f6;
        width: 400px;
        margin: 20px auto;
        font: normal 13px/100% sans-serif;
        color: #444;
    }
    div {
        display:none;
        padding: 10px;
        border-width: 0 1px 1px 0;
        border-style: solid;
        border-color: #fff;
        box-shadow: 0 1px 1px #ccc;
        margin-bottom: 5px;
        background-color: #f1f1f1;
    }
    .totop {
        position: fixed;
        bottom: 10px;
        right: 20px;
    }
    .totop a {
        display: none;
    }
    a, a:visited {
        color: #33739E;
        text-decoration: none;
        display: block;
        margin: 10px 0;
    }
    a:hover {
        text-decoration: none;
    }
    #loadMore {
        padding: 10px;
        text-align: center;
        background-color: #33739E;
        color: #fff;
        border-width: 0 1px 1px 0;
        border-style: solid;
        border-color: #fff;
        box-shadow: 0 1px 1px #ccc;
        transition: all 600ms ease-in-out;
        -webkit-transition: all 600ms ease-in-out;
        -moz-transition: all 600ms ease-in-out;
        -o-transition: all 600ms ease-in-out;
    }
    #loadMore:hover {
        background-color: #fff;
        color: #33739E;
    }
    </style>
    <script>
    /*
    	Load more content with jQuery - May 21, 2013
    	(c) 2013 @ElmahdiMahmoud
    */   
    
    $(function () {
        $("div").slice(0, 4).show();
        $("#loadMore").on('click', function (e) {
            e.preventDefault();
            $("div:hidden").slice(0, 4).slideDown();
            if ($("div:hidden").length == 0) {
                $("#load").fadeOut('slow');
            }
            $('html,body').animate({
                scrollTop: $(this).offset().top
            }, 1500);
        });
    });
    
    $('a[href=#top]').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 600);
        return false;
    });
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 50) {
            $('.totop a').fadeIn();
        } else {
            $('.totop a').fadeOut();
        }
    });
    </script>
     
  • 5 years-7 months

    How To Easily Add Product Variants To Your Clickfunnels 2-Step Order Form?

    • Category : php
    • Location : Unknown
    • Posted On :
    • Posted by : Sunil1521543962

    How To Easily Add Product Variants To Your Clickfunnels 2-Step Order Form?

    <script>
    var option_name = 'product_color';
    var options = ['Red', 'Blue', 'Green'];
    var label = 'Pick A Color';
    
    $('.o2step_step1').prepend('<hr style="margin-top: 3px;margin-bottom: 15px;">');
    select = $('<select type="custom_type" data-custom-type="'+option_name+'" name="custom_type" class="elS1Fullname elInput elInput100 elAlign_left elInputSmall elInputStyl0 elInputBG1 elInputBR5 elInputI0 elInputIBlack elInputIRight required1 elInputStyle1 elInputSmall elInputBG2 garlic-auto-save" data-type="extra" style="margin-top: 0px !important;margin-bottom: 10px !important; border-color: rgb(74, 137, 32); border-width: 3px;"></select>');
    for(option in options) {
       select.append('<option>'+options[option]+'</option>');
    }
    $('.o2step_step1').prepend(select);
    $('.o2step_step1').prepend('<label>'+label+'</label>');
    </script>
     

    1 Answers

    View More

    sunil1521543962 image

    Name: sunil1521543962

    Experiance: 5 years-7 months

    answered
    Mar 23, 2018 at 02:31

    In this short how-to tutorial I'm going to discuss a little trick you can implement on your order form(s) to add variants support to them, (eg. product Color, Shape, Size...etc), without having to add multiple products as long as the different variants have the same price.

    So let's get started:

    1. On your Funnel Step under Settings > Tracking Code :


       

      <script>
      var option_name = 'product_color';
      var options = ['Red', 'Blue', 'Green'];
      var label = 'Pick A Color';
      
      $('.o2step_step1').prepend('<hr style="margin-top: 3px;margin-bottom: 15px;">');
      select = $('<select type="custom_type" data-custom-type="' option_name '" name="custom_type" class="elS1Fullname elInput elInput100 elAlign_left elInputSmall elInputStyl0 elInputBG1 elInputBR5 elInputI0 elInputIBlack elInputIRight required1 elInputStyle1 elInputSmall elInputBG2 garlic-auto-save" data-type="extra" style="margin-top: 0px !important;margin-bottom: 10px !important; border-color: rgb(74, 137, 32); border-width: 3px;"></select>');
      for(option in options) {
         select.append('<option>' options[option] '</option>');
      }
      $('.o2step_step1').prepend(select);
      $('.o2step_step1').prepend('<label>' label '</label>');
      </script>
  • Word cloud with jquery

    • Category : wordpress
    • Location : Unknown
    • Posted On :
    • Posted by : Harman1514965387

    How to create Word cloud with jquery

    How to create Jquery Word cloud with custom shapes .Like wordart.com.
  • 5 years-11 months

    HTML5 Form Validation With the pattern (Regex) Attribute in html

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

    This is another Client Side Validation strategy No JavaScript or jQuery required, Thanks to HTML5 in light of the fact that approvals should now be possible utilizing HTML5 without coding of javascript or any server side dialect, utilizing HTML5 you can approve frames with design, Forms must be approve either utilizing customer side or server side since it causes you to gather redress information or substantial shape esteems from the clients, you can't trust clients aimlessly, how about we see it.

    pattern="[A-Za-z] " accepts only capital or small letters. 
    <label>Name : (letters only)*</label>
    <input type="text" pattern="[A-Za-z] " title="only letters" required />
    
    pattern="[a-z0-9._% -] @[a-z0-9.-] \.[a-z]{2,4}$" accepts valid email address 
    <label>E-mail : (xyz@zyx.com)*</label>
    <input type="email" pattern="[a-z0-9._% -] @[a-z0-9.-] \.[a-z]{2,4}$" title="xyz@something.com" required />
    
    pattern="https?://. " required title="https://dorcode.com" accepts valid web url starting with http://. 
    <label>website : (https://dorcode.com)*</label>
    <input type="url"  pattern="https?://. " title="https://dorcode.com" required />
    
    pattern="[0-9] " accepts only numbers 0, 1, 2.... 
    <label>pin code : (numbers only)</label>
    <input type="text" pattern="[0-9] " title="numbers only" required />
    
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" accepts one number one upper and lower case letters with 8 or more chars. 
    <label>password : (at least 6 chars)</label>
    <input type="password" pattern=".{6,}" title="Six or more characters" required />
    
    pattern="^\d{10}$" accepts only numeric values with 10 digit. 
    <label>phone no : (10 chars)</label>
    <input type="tel" pattern="^\d{10}$" title="10 numeric characters only" required />
    
    pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,12}$" accepts alphanumeric values letters and digits. 
     
  • 5 years-11 months

    Dynamically loading an external JavaScript or CSS file using function

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

    To load a .js or .css file dynamically, in a head section, it means using DOM methods to first create a new "SCRIPT" or "LINK" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together

    <script type="text/javascript">
    // function
    function loadheadfile(filename, filetype){
    	if(filetype=="js"){
    		var fileref=document.createElement('script')
    		fileref.setAttribute("type","text/javascript")
    		fileref.setAttribute("src", filename)
    	}
    	else if(filetype=="css") {
    		var fileref=document.createElement("link")
    		fileref.setAttribute("rel", "stylesheet")
    		fileref.setAttribute("type", "text/css")
    		fileref.setAttribute("href", filename)
    	}
    	if(typeof fileref!="undefined")
    		document.getElementsByTagName("head")[0].appendChild(fileref)
    }
    
    
    // call function
    loadheadfile('https://tsuyoshiwada.github.io/sweet-scroll/lib/icomoon/style.css','css');
    </script>
     
  • 3 years-4 months

    Countdown Timer Jquery

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

    Display countdown timer using jQuery.

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.min.js" ></script>
    
    /*html*/
    
    <span data-countdown="2017-09-25 12:10:01" ></span> // end date add here
    
    
    /*Jquery*/
    
    setTimeout(function(){
                    initCountDown()
    }, 300);            
    function initCountDown(){
        $('[data-countdown]').each(function() {
            var $this = $(this), finalDate = $(this).data('countdown');
            $this.countdown(finalDate, function(event) {
                $this.html(event.strftime('%D days %H:%M:%S'));
            });
        });
    }  
     
  • 3 years-4 months

    Jquery hide network requests from inspect element

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

    Using this module you can hide requested parameters from inspect element

    var http = new XMLHttpRequest();
    var url = "Url Path";
    var params ='Your parameters';
    http.open("GET", url, true);
    
    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    
    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            console.log(http.responseText);
        }
    http.send(params);
    }