Web Analytics Made Easy -
StatCounter A small change in a pricing table template - CodingForum

Announcement

Collapse
No announcement yet.

A small change in a pricing table template

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • A small change in a pricing table template

    Hey everyone,

    I'm new here. I am not a developer, but I'm trying to fluke my way by making a modification on a pricing table template. This is the original template CodePen - Responsive Flip Pricing Table

    What I want to do, is change the toggle switch so it can switch between monthly, quarterly and yearly. I have managed to make the toggle switch show all three Screenshot by Lightshot
    but no matter what I do it's not working properly.

    I will show you screenshots of what happens when I press:
    Monthly: Screenshot by Lightshot
    Quarterly: Screenshot by Lightshot
    Yearly: Screenshot by Lightshot

    Obviously I have no idea, but I'm closer than I was before I tried. At least now I have a feeling it is possible to have 3 switch settings.

    Any help would be very much appreciated

    Thanks in advance

  • #2
    Here is the untouched code for the template


    <!DOCTYPE html>
    <html >
    <head>
    <meta charset="UTF-8">
    <title>Responsive Flip Pricing Table</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <meta name="viewport" content="width=device-width">



    <link rel="stylesheet" href="css/style.css">




    </head>

    <body>

    <div class="pricing-container">
    <div class="pricing-switcher">
    <p class="fieldset">
    <input type="radio" name="duration-1" value="monthly" id="monthly-1" checked>
    <label for="monthly-1">Monthly</label>
    <input type="radio" name="duration-1" value="yearly" id="yearly-1">
    <label for="yearly-1">Yearly</label>
    <span class="switch"></span>
    </p>
    </div>
    <ul class="pricing-list bounce-invert">
    <li>
    <ul class="pricing-wrapper">
    <li data-type="monthly" class="is-visible">
    <header class="pricing-header">
    <h2>Basic</h2>
    <div class="price">
    <span class="currency">$</span>
    <span class="value">30</span>
    <span class="duration">mo</span>
    </div>
    </header>
    <div class="pricing-body">
    <ul class="pricing-features">
    <li><em>5</em> Email Accounts</li>
    <li><em>1</em> Template Style</li>
    <li><em>25</em> Products Loaded</li>
    <li><em>1</em> Image per Product</li>
    <li><em>Unlimited</em> Bandwidth</li>
    <li><em>24/7</em> Support</li>
    </ul>
    </div>
    <footer class="pricing-footer">
    <a class="select" href="#">Sign Up</a>
    </footer>
    </li>
    <li data-type="yearly" class="is-hidden">
    <header class="pricing-header">
    <h2>Basic</h2>
    <div class="price">
    <span class="currency">$</span>
    <span class="value">320</span>
    <span class="duration">yr</span>
    </div>
    </header>
    <div class="pricing-body">
    <ul class="pricing-features">
    <li><em>5</em> Email Accounts</li>
    <li><em>1</em> Template Style</li>
    <li><em>25</em> Products Loaded</li>
    <li><em>1</em> Image per Product</li>
    <li><em>Unlimited</em> Bandwidth</li>
    <li><em>24/7</em> Support</li>
    </ul>
    </div>
    <footer class="pricing-footer">
    <a class="select" href="#">Sign Up</a>
    </footer>
    </li>
    </ul>
    </li>
    <li class="exclusive">
    <ul class="pricing-wrapper">
    <li data-type="monthly" class="is-visible">
    <header class="pricing-header">
    <h2>Exclusive</h2>
    <div class="price">
    <span class="currency">$</span>
    <span class="value">60</span>
    <span class="duration">mo</span>
    </div>
    </header>
    <div class="pricing-body">
    <ul class="pricing-features">
    <li><em>15</em> Email Accounts</li>
    <li><em>3</em> Template Styles</li>
    <li><em>40</em> Products Loaded</li>
    <li><em>7</em> Images per Product</li>
    <li><em>Unlimited</em> Bandwidth</li>
    <li><em>24/7</em> Support</li>
    </ul>
    </div>
    <footer class="pricing-footer">
    <a class="select" href="#">Sign Up</a>
    </footer>
    </li>
    <li data-type="yearly" class="is-hidden">
    <header class="pricing-header">
    <h2>Exclusive</h2>
    <div class="price">
    <span class="currency">$</span>
    <span class="value">630</span>
    <span class="duration">yr</span>
    </div>
    </header>
    <div class="pricing-body">
    <ul class="pricing-features">
    <li><em>15</em> Email Accounts</li>
    <li><em>3</em> Template Styles</li>
    <li><em>40</em> Products Loaded</li>
    <li><em>7</em> Images per Product</li>
    <li><em>Unlimited</em> Bandwidth</li>
    <li><em>24/7</em> Support</li>
    </ul>
    </div>
    <footer class="pricing-footer">
    <a class="select" href="#">Sign Up</a>
    </footer>
    </li>
    </ul>
    </li>
    <li>
    <ul class="pricing-wrapper">
    <li data-type="monthly" class="is-visible">
    <header class="pricing-header">
    <h2>Pro</h2>
    <div class="price">
    <span class="currency">$</span>
    <span class="value">90</span>
    <span class="duration">mo</span>
    </div>
    </header>
    <div class="pricing-body">
    <ul class="pricing-features">
    <li><em>20</em> Email Accounts</li>
    <li><em>5</em> Template Styles</li>
    <li><em>50</em> Products Loaded</li>
    <li><em>10</em> Images per Product</li>
    <li><em>Unlimited</em> Bandwidth</li>
    <li><em>24/7</em> Support</li>
    </ul>
    </div>
    <footer class="pricing-footer">
    <a class="select" href="#">Sign Up</a>
    </footer>
    </li>
    <li data-type="yearly" class="is-hidden">
    <header class="pricing-header">
    <h2>Pro</h2>
    <div class="price">
    <span class="currency">$</span>
    <span class="value">950</span>
    <span class="duration">yr</span>
    </div>
    </header>
    <div class="pricing-body">
    <ul class="pricing-features">
    <li><em>20</em> Email Accounts</li>
    <li><em>5</em> Template Styles</li>
    <li><em>50</em> Products Loaded</li>
    <li><em>10</em> Images per Product</li>
    <li><em>Unlimited</em> Bandwidth</li>
    <li><em>24/7</em> Support</li>
    </ul>
    </div>
    <footer class="pricing-footer">
    <a class="select" href="#">Sign Up</a>
    </footer>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>

    <script src="js/index.js"></script>




    </body>
    </html>

    Comment


    • #3
      Solly, Your switch should cause a jquery function to start and that in turn controls what the user sees on the web page. We need the jquery to help you. It should be what is called with this line:
      <script src="js/index.js"></script>
      </body>
      </html>

      You must post it here BUT PLEASE use code tags to put it here.

      And it would be nice to give us a link to your site where this is active.
      Evolution - The non-random survival of random variants.
      Physics is actually atoms trying to understand themselves.

      Comment


      • #4
        Hey Sunfighter,
        Firstly thank for the reply. I do not have this on the site yet. My aim is to replace the current pricing table with this new one. So the only thing I can show you is the link to the site that you can download the template.
        Here is the index.js

        Code:
        jQuery(document).ready(function($){
        	//hide the subtle gradient layer (.pricing-list > li::after) when pricing table has been scrolled to the end (mobile version only)
        	checkScrolling($('.pricing-body'));
        	$(window).on('resize', function(){
        		window.requestAnimationFrame(function(){checkScrolling($('.pricing-body'))});
        	});
        	$('.pricing-body').on('scroll', function(){ 
        		var selected = $(this);
        		window.requestAnimationFrame(function(){checkScrolling(selected)});
        	});
        
        	function checkScrolling(tables){
        		tables.each(function(){
        			var table= $(this),
        				totalTableWidth = parseInt(table.children('.pricing-features').width()),
        		 		tableViewport = parseInt(table.width());
        			if( table.scrollLeft() >= totalTableWidth - tableViewport -1 ) {
        				table.parent('li').addClass('is-ended');
        			} else {
        				table.parent('li').removeClass('is-ended');
        			}
        		});
        	}
        
        	//switch from monthly to annual pricing tables
        	bouncy_filter($('.pricing-container'));
        
        	function bouncy_filter(container) {
        		container.each(function(){
        			var pricing_table = $(this);
        			var filter_list_container = pricing_table.children('.pricing-switcher'),
        				filter_radios = filter_list_container.find('input[type="radio"]'),
        				pricing_table_wrapper = pricing_table.find('.pricing-wrapper');
        
        			//store pricing table items
        			var table_elements = {};
        			filter_radios.each(function(){
        				var filter_type = $(this).val();
        				table_elements[filter_type] = pricing_table_wrapper.find('li[data-type="'+filter_type+'"]');
        			});
        
        			//detect input change event
        			filter_radios.on('change', function(event){
        				event.preventDefault();
        				//detect which radio input item was checked
        				var selected_filter = $(event.target).val();
        
        				//give higher z-index to the pricing table items selected by the radio input
        				show_selected_items(table_elements[selected_filter]);
        
        				//rotate each pricing-wrapper 
        				//at the end of the animation hide the not-selected pricing tables and rotate back the .pricing-wrapper
        				
        				if( !Modernizr.cssanimations ) {
        					hide_not_selected_items(table_elements, selected_filter);
        					pricing_table_wrapper.removeClass('is-switched');
        				} else {
        					pricing_table_wrapper.addClass('is-switched').eq(0).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {		
        						hide_not_selected_items(table_elements, selected_filter);
        						pricing_table_wrapper.removeClass('is-switched');
        						//change rotation direction if .pricing-list has the .bounce-invert class
        						if(pricing_table.find('.pricing-list').hasClass('bounce-invert')) pricing_table_wrapper.toggleClass('reverse-animation');
        					});
        				}
        			});
        		});
        	}
        	function show_selected_items(selected_elements) {
        		selected_elements.addClass('is-selected');
        	}
        
        	function hide_not_selected_items(table_containers, filter) {
        		$.each(table_containers, function(key, value){
        	  		if ( key != filter ) {	
        				$(this).removeClass('is-visible is-selected').addClass('is-hidden');
        
        			} else {
        				$(this).addClass('is-visible').removeClass('is-hidden is-selected');
        			}
        		});
        	}
        });
        Thank you again.

        Comment


        • #5
          Problem with your JS:
          Code:
          function bouncy_filter(container) {
          container.each(function(){
          var pricing_table = $(this);
          var filter_list_container = pricing_table.children('.pricing-switcher'),
          filter_radios = filter_list_container.find('inpute="radio"]'),
          pricing_table_wrapper = pricing_table.find('.pricing-wrapper     [COLOR="#FF0000"]//MISSING REST OF LINE[/COLOR]
          //store pricing table items
          Be aware; I am not going to spend more time on this so I hope what I say will help you.
          This is set up for two things: Basic and Exclusive so it uses a if/else structure. You want three thing so you must differentiate between them and have a if/else if/ else structure.

          Please notice they only look at word "exclusive" they have nothing for the basic; you must id the basic area and add a third.
          Here is where the basic lies:
          Code:
          <ul class="pricing-list bounce-invert">  [COLOR="#FF0000"]EVERY THING IS CONTAINED IN HERE[/COLOR]
          	<li>    [COLOR="#FF0000"]THIS STARTS THE BASIC LISTS[/COLOR] --- give this a class like the one shown next
          	<ul class="pricing-wrapper">       [COLOR="#FF0000"] JUST SO YOU KNOW WHERE WE'RE AT[/COLOR]
          Here is the list for the exclusive portion:
          Code:
          <li class="exclusive">                            [COLOR="#FF0000"] THIS HAS A CLASS[/COLOR]
          <ul class="pricing-wrapper">
          You need to duplicate the list for your quarterly prices and modify the last function to chose which list is shown.
          Code:
          function hide_not_selected_items(table_containers, filter) {
          	$.each(table_containers, function(key, value){
          	if ( key != filter ) {	
          		$(this).removeClass('is-visible is-selected').addClass('is-hidden');
          	} else {
          		$(this).addClass('is-visible').removeClass('is-hidden is-selected');
          	}
          });
          And maybe the function above it.
          Last edited by sunfighter; Oct 1, 2016, 04:41 PM.
          Evolution - The non-random survival of random variants.
          Physics is actually atoms trying to understand themselves.

          Comment

          Working...
          X