Hey Michelle as per our live chat lets cook up some CSS

Hello,

As we were discussing I am trying to get my pricing table to have a show only differences option. You found a CSS site http://davidwalsh.name/css-flip that does exactly what I am looking for. We want to modify the CSS on the home bottom text widget to default to it closed and showing only differences and then on the plans page to default to showing all features. http://www.ffchosting.com/plans The current CSS is the same for both.

Thank you again so much for getting the quirks out. You are a rock star,

Clarke Moyer

  • Michelle Shull

    Hello! First off, I need some text from you.

    This is the rough draft of the HTML that will populate the flip boxes. I need to know the features you want listed in each of the three levels. (Where it says "List Item" below is where it will go in the code.)

    Thanks!

    <div class="three-flip-boxes">
    					<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    						<div class="flipper">
    							<div class="front">
    							<h3>Single Site</h3>
    							<p>$30.00 per month</p>
    							<!-- front content -->
    							</div>
    							<div class="back">
    								<ul>
    									<li>List Item</li>
    									<li>List Item</li>
    									<li>List Item</li>
    									<li>List Item</li>
    									<li>List Item</li>
    									<li>List Item</li>
    									<li>List Item</li>
    								</ul>
    							<!-- back content -->
    							</div>
    						</div>
    				</div>
    				<div class="flip-label">
    					<h3>Get Started Today</h3>
    				</div>
    				<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    					<div class="flipper">
    						<div class="front">
    							<h3>Unlimited Sites</h3>
    							<p>$50.00 per month</p>
    							<!-- front content -->
    						</div>
    						<div class="back">
    							<ul>
    								<li>List Item</li>
    								<li>List Item</li>
    								<li>List Item</li>
    								<li>List Item</li>
    								<li>List Item</li>
    								<li>List Item</li>
    								<li>List Item</li>
    							</ul>
    						<!-- back content -->
    						</div>
    					</div>
    				</div>
    				<div class="flip-label">
    					<h3>Get Started Today</h3>
    				</div>
    				<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    					<div class="flipper">
    						<div class="front">
    							<h3>Private Multi-site</h3>
    							<p>$99.00 per month</p>
    							<!-- front content -->
    						</div>
    						<div class="back">
    							<ul>
    								<li>List Item</li>
    								<li>List Item</li>
    								<li>List Item</li>
    								<li>List Item</li>
    								<li>List Item</li>
    								<li>List Item</li>
    								<li>List Item</li>
    							</ul>
    							<!-- back content -->
    						</div>
    					</div>
    				</div>
    				<div class="flip-label">
    					<h3>Get Started Today</h3>
    				</div>
    			</div>
    				</div>
  • Free For Charity

    The features are identical to the current boxes in the widget.

    All three packages have these features

    Free For Charity
    Managed Upgrades
    Daily Backups
    Built-in Caching
    High-end Hardware
    Firewall
    Malware Scanning
    Unlimited Data Transfer

    The the different features are called

    Wordpress Sites
    Plan 1 Single Managed Site
    Plan 2 Unlimited Managed Sites
    Plan 3 Personal Multisite Install

    Visitors
    Plan 1 30,000 Visitors Per Month
    Plan 2 50,000 Visitors Per Month
    Plan 3 100,000 Visitors Per Month

    For-profit Supporter Price
    Plan 1 $30 per month
    Plan 2 $50 per month
    Plan 3 100 per month

    Also I wanted to check on the hover over effects. We have those integrated now but if you see a better way to do it I am all ears.

  • Free For Charity

    Here is the current CSS with the hover over effect

    <script type='text/javascript'>
    var myStyleSheet = (function() {
    	// Create the <style> tag
    	var style = document.createElement("style");
    
    	// Add a media (and/or media query) here if you'd like!
    	// style.setAttribute("media", "screen")
    	// style.setAttribute("media", "@media only screen and (max-width : 1024px)")
    
    	// WebKit hack :(
    	style.appendChild(document.createTextNode(""));
    
    	// Add the <style> element to the page
    	document.head.appendChild(style);
    
    	return style.sheet;
    })();
    
    document.addEventListener('mousemove', fn, false);
    
    function fn(e) {
    
        var myRule = ".pricing_table tr.feature_tooltip:hover:after { left: " + e.pageX + "px !important; top: " + e.pageY + "px !important; }";
    
        if (myStyleSheet.insertRule) {
            if (myStyleSheet.cssRules.length > 0) {
                myStyleSheet.deleteRule(0);
            }
            myStyleSheet.insertRule(myRule, 0);
        }
    }
    </script>
    <table class="pricing_table">
        <tr>
            <th class="features"></th>
            <th class="single">Single Site</th>
            <th class="unlimited">Unlimited Sites</th>
            <th class="diy">Private Multi-site</th>
        </tr>
        <tr class="feature_tooltip" tooltip-content="FFC Hosting is, of course, free for non-profits. Simply
                use the following coupon code at checkout: ">
            <td class="features">Free For Charity</td>
            <td class="single"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="unlimited"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="diy"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
        </tr>
        <tr class="feature_tooltip" tooltip-content="Let us worry about security. Wordpress security updates
                    are tested and then applied to your site automatically.">
            <td class="features">Managed Upgrades</td>
            <td class="single"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="unlimited"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="diy"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
        </tr>
        <tr class="feature_tooltip" tooltip-content="It's hard to plan for the unexpected. But, with daily backups
                    of your files and database, that's exactly what we do!">
            <td class="features">Daily Backups</td>
            <td class="single"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="unlimited"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="diy"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
        </tr>
        <tr class="feature_tooltip" tooltip-content="Never worry about caching again! With no plugins required, we
                    handle caching so you don't have to.">
            <td class="features">Built-in Caching</td>
            <td class="single"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="unlimited"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="diy"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
        </tr>
        <tr class="feature_tooltip" tooltip-content="You'll never see the hardware hosting your site, but you'll know
                    we use the best from the speed and performance it delivers.">
            <td class="features">High-end Hardware</td>
            <td class="single"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="unlimited"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="diy"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
        </tr>
        <tr class="feature_tooltip" tooltip-content="Our firewall blocks thousands of known attacks. Sleep easy knowing
                    that your site sits safely behind it.">
            <td class="features">Firewall</td>
            <td class="single"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="unlimited"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="diy"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
        </tr>
        <tr class="feature_tooltip" tooltip-content="Your site is scanned for malware automatically. And if it's found,
                    it's fixed. Guaranteed.">
            <td class="features">Malware Scanning</td>
            <td class="single"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="unlimited"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="diy"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
        </tr>
        <tr class="feature_tooltip" tooltip-content="Unlimited Transfer of Data. Yeah. We went there.">
            <td class="features">Unlimited Data Transfer</td>
            <td class="single"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="unlimited"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
            <td class="diy"><img src="http://www.ffchosting.com/wp-content/uploads/2014/08/checkmark3.png"></img></td>
        </tr>
        <tr>
            <td class="features">Wordpress Sites</td>
            <td  class="single" tooltip-content="A single wordpress site with managed updates and a suite
                    of plugins optimized for your site.">
                Single Managed Site
            </td>
            <td  class="unlimited" tooltip-content="Unlimited wordpress sites with managed updates and a suite
                    of plugins optimized for your sites.">
                Unlimited Managed Sites
            </td>
            <td  class="diy" tooltip-content="Unlimited wordpress sites with complete control over themes and plugins.">
                Unlimited Sites
            </td>
        </tr>
        <tr>
            <td class="features">Visitors</td>
            <td  class="single" tooltip-content="30,000 daily unique visitors per month.">
                30,000 Visitors Per Month
            </td>
            <td  class="unlimited" tooltip-content="50,000 daily unique visitors per month.">
                50,000 Visitors Per Month
            </td>
            <td  class="diy" tooltip-content="100,000 daily unique visitors per month.">
                100,000 Visitors Per Month
            </td>
        </tr>
        <tr class="feature_tooltip" tooltip-content="Thank you for choosing to host with us! Your support is
                what allows us to provide free hosting for charities.">
            <td class="features">For-profit Supporter Price</td>
            <td class="single">
                <div class="price">
                    <div class="price_figure">
                        <span class="price_number">$30.00</span>
                        <span class="price_tenure">per month</span>
                    </div>
                </div>
            </td>
            <td class="unlimited">
                <div class="price">
                    <div class="price_figure">
                        <span class="price_number">$50.00</span>
                        <span class="price_tenure">per month</span>
                    </div>
                </div>
            </td>
            <td class="diy">
                <div class="price">
                    <div class="price_figure">
                        <span class="price_number">$99.00</span>
                        <span class="price_tenure">per month</span>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="buy_feature"></td>
            <td class="single">
                <div class="footer">
                    <a href="#" class="action_button">Get Started Today</a>
                </div>
            </td>
            <td class="unlimited">
                <div class="footer">
                    <a href="#" class="action_button">Get Started Today</a>
                </div>
            </td>
            <td class="diy">
                <div class="footer">
                    <a href="#" class="action_button">Get Started Today</a>
                </div>
            </td>
        </tr>
    </table>
  • Free For Charity

    I just put your test code into a widget on the homepage and now I see what your working on. You are looking at the flip effect for the panels. For those is will look exactly like what you talking about but only showing the differentiations. I had not though about incorporating those but they do look nice. I was initial talking about the 'just show me the differences' button on http://wpengine.com/plans/ down in the 'full' pricing table.

  • Michelle Shull

    Hello! I did it!

    It took a really long time and I don't want to tell you how many cups of coffee, but I finally found the right magic. Here it is: http://www.ffchosting.com/sample/

    Your spinny boxes are underneath. : )

    If you like, we can move over to the main an plan pages. The spinny boxes need a little more sass on the back.

    LET US DO A HAPPY CSS DANCE!

    http://www.ffchosting.com/sample/

  • Michelle Shull

    Here's all the code!

    jquery

    <script>
    jQuery(document).ready(function(){
        jQuery('#hideshow').live('click', function(event) {
             jQuery('tr.feature_tooltip').toggle('show');
        });
    });
    </script>

    HTML for show differences:

    <input type='button' id='hideshow' value='Show Me the Differences'>

    HTML for flip cards:

    <div class="three-flip-boxes">
    
    <div class="flip-container">
    <div class="flipper">
    <div class="front" style="background-color: #0092ce;"><span class="name">Single Site</span>
    <span class="price">$30.00 per month</span>
    <span class="list">
    <ul>
    <li>Free For Charity</li>
    <li>Managed Upgrades</li>
    <li>Daily Backups</li>
    <li>Built-in Caching</li>
    <li>High-end Hardware</li>
    <li>Firewall</li>
    <li>Malware Scanning</li>
    <li>Unlimited Data Transfer</li></ul></span></div>
    <div class="back" style="background-color: #0092ce;">
    <span class="list">
    <ul>
    	<li>Single Managed Site</li>
    	<li>30,000 Visitors Per Month</li>
            <li>For Profit Supporter Price: $30 per month</li>
    </ul>
    </span>
    </div>
    </div>
    </div>
    
    <div class="flip-container">
    <div class="flipper">
    <div class="front" style="background-color: #f57814;"><span class="name">Unlimited Sites</span>
    <span class="price">$50.00 per month</span>
    <span class="list">
    <ul>
    <li>Free For Charity</li>
    <li>Managed Upgrades</li>
    <li>Daily Backups</li>
    <li>Built-in Caching</li>
    <li>High-end Hardware</li>
    <li>Firewall</li>
    <li>Malware Scanning</li>
    <li>Unlimited Data Transfer</li></ul></span> </div>
    
    <div class="back" style="background-color: #f57814;">
    <span class="list">
    <ul>
    	<li>Unlimited Managed Sites</li>
    	<li>50,000 Visitors Per Month</li>
            <li>For Profit Supporter Price: $50 per month</li>
    </ul>
    </span>
    </div>
    </div>
    </div>
    <div class="flip-container">
    <div class="flipper">
    <div class="front" style="background-color: #1cbdff;"><span class="name">Private Multi-site</span>
    <span class="price">$99.00 per month</span>
    <span class="list">
    <ul>
    <li>Free For Charity</li>
    <li>Managed Upgrades</li>
    <li>Daily Backups</li>
    <li>Built-in Caching</li>
    <li>High-end Hardware</li>
    <li>Firewall</li>
    <li>Malware Scanning</li>
    <li>Unlimited Data Transfer</li></ul></span>
    </div>
    <div class="back" style="background-color: #1cbdff;">
    <span class="list">
    <ul>
    <li>Personal Multi-site Install</li>
    <li>100,000 Visitors Per Month</li>
    <li>For Profit Supporter Price: $99 per month</li>
    </ul>
    </span>
    </div>
    </div>
    </div>
    </div>

    CSS for flip cards:

    .three-flip-boxes {
    	width: 1140px;
    	height: 470px;
    }
    
    .flip-container {
    	-webkit-perspective: 1000px;
    	-moz-perspective: 1000px;
    	-o-perspective: 1000px;
    	perspective: 1000px;
    	float: left;
    }
    
    .flip-container:hover .flipper,
      .flip-container.hover .flipper {
    	-webkit-transform: rotateY(180deg);
    	-moz-transform: rotateY(180deg);
    	-o-transform: rotateY(180deg);
    	transform: rotateY(180deg);
    }
    
    .flip-container, .front, .back {
    	width: 320px;
    	height: 427px;
    }
    
    .flipper {
    	-webkit-transition: .6s;
    	-webkit-transform-style: preserve-3d;
    	-moz-transition: .6s;
    	-moz-transform-style: preserve-3d;
    	-o-transition: .6s;
    	-o-transform-style: preserve-3d;
    	transition: .6s;
    	transform-style: preserve-3d;
    	position: relative;
    }
    
    .front, .back {
    	-webkit-backface-visibility: hidden;
    	-moz-backface-visibility: hidden;
    	-o-backface-visibility: hidden;
    	backface-visibility: hidden;
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    
    .front {
    	z-index: 2;
    }
    
    .back {
    	-webkit-transform: rotateY(180deg);
    	-moz-transform: rotateY(180deg);
    	-o-transform: rotateY(180deg);
    	transform: rotateY(180deg);
    	background: #f8f8f8;
    }
    
    .front .name {
    	font-size: 1.3em;
    	display: inline-block;
    	color: #ffffff;
    	padding: 5px 10px;
    	bottom: 60px;
    	left: 25%;
    	position: absolute;
    }
    
    .front .price {
    	color: #ffffff;
    	padding-left: 6px;
    }
    
    .front .list {
    	font-size: .6em;
    	color: #ffffff;
    	padding-left: 6px;
    }
    
    .back .list {
    	display: block;
    	position: absolute;
    	font-size: 1.2em;
    	color: #ffffff;
    	margin: auto;
    	padding-top: 20px;
    }
    
    .back-logo {
    	position: absolute;
    	top: 40px;
    	left: 90px;
    }
    
    .back p {
    	position: absolute;
    	bottom: 40px;
    	left: 0;
    	right: 0;
    	text-align: center;
    	padding: 0 20px;
    	line-height: 2em;
    }

    Woo!

    I'm going to bed, if the caffeine will let me. : ) Have a great Wednesday!

  • Free For Charity

    You are a CSS goddess. In Chrome it looks rockstar. Only thing we need to work on is the hover tool tip. The hover over mouse effect is there but does not follow the mouse and has some code leak into the text area. My guy Jesse that made the original tool tips is looking into that now.

    I am running into some major compatibility issues with Firefox however on the new tables where the flip shows both sides in some odd way like a mirror. In IE the flips do not work at all and the hover over does not show but the table deforms for it when you mouse over it.

    Any thoughts on how to squish the FF/IE compatibility issues?

    I am going to try and hop on the 5PM chat with you again today if your still filling in for Patrick

    Thank you once again you are amazing.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.