sunil1521543962
Sunil Saini@sunil1521543962

  • 5 years-7 months

    Load more content with jQuery

    • Category : jquery
    • Location : Unknown
    • Posted On : Mar 28, 2018
    • 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

    <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 : Mar 23, 2018
    • 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

    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>
No items found