Browse Source

final countdown

windhamdavid 9 years ago
parent
commit
90d2505b17
5 changed files with 235 additions and 89 deletions
  1. 1 1
      functions.php
  2. 16 69
      index.php
  3. 1 1
      js/init.js
  4. 206 0
      js/jquery.countdown.js
  5. 11 18
      style.css

+ 1 - 1
functions.php

@@ -48,7 +48,7 @@ function bml_scripts() {
     {
 		wp_enqueue_script( 'bmlskroll', get_template_directory_uri() . '/js/skrollr.min.js', array(), '1.0.0', true );
 		wp_enqueue_script( 'bmlskrollmenu', get_template_directory_uri() . '/js/skrollr.menu.min.js', array(), '1.0.0', true );
-		wp_enqueue_script( 'bmlcount', get_template_directory_uri() . '/js/jquery.countdown.min.js', array(), '1.0.0', true );
+		wp_enqueue_script( 'bmlcountdown', get_template_directory_uri() . '/js/jquery.countdown.js', array(), '1.0.0', true);
 		//wp_enqueue_script( 'bmlscript', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );
 		wp_enqueue_script( 'bmlinit', get_template_directory_uri() . '/js/init.js', array(), '1.0.0', true );
     }

+ 16 - 69
index.php

@@ -16,8 +16,8 @@
 <body>
 	
 	<div id="bg1" data-0="display:none;" data-1000="display:block;background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
-	<div id="bg2" data-0="display:none;" data-8000="display:block;background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
-	<div id="bg3" data-0="display:none;" data-20000="display:block;background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
+	<div id="bg2" data-0="display:none;" data-4000="display:block;background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
+	<div id="bg3" data-0="display:none;" data-8000="display:block;background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
 	<div id="progress" data-0="width:0%;background:rgb(130, 104, 130);" data-end="width:100%;background:rgb(103, 130, 91);"></div>
 	
 	<div id="intro" data-0="display:block;" data-1400="display:none;">
@@ -32,8 +32,8 @@
 		</div>
 	</div>
 	
-	<div id="intro2" data-0="display:none;" data-1400="display:block;" data-4000="display:none;">
-		<div class="intro_ease" data-1400="left:0%" data-2100="left:93%;">
+	<div id="intro2" data-1400="display:block;" data-4100="display:none;">
+		<div class="intro_ease" data-1400="left:0%" data-2100="left:93%;" data-3100="left:93%;" data-4100="left:150%;">
 			<h4 class="vibes">No need to dress up, no need to wrap gifts.</h4>
 			<h4 class="vibes">Just stay at home, and send us a good wish.</h4>
 			<h4 class="vibes">We appreciate your love and cheer.</h4>
@@ -41,31 +41,31 @@
 		</div>
 	</div>
 	
-	<div id="story_wrap" data-3400="background:rgba(0,0,0,0);" data-8000="background:rgba(104,130,91,.25);">
+	<div id="story_wrap" data-3200="top:200%" data-4400="top:0%;" data-11000="top:0%;" data-12200="top:-100%;" data-3400="background:rgba(0,0,0,0);" data-3700="background:rgba(104,130,91,.25);">
 		<div id="story">
-			<div class="story_ease" data-3400="top:100%" data-4400="top:20%;" data-6400="top:20%;" data-7400="top:-35%;">
+			<div class="story_ease" data-3400="top:100%" data-4400="top:5%;" data-8000="top:5%;" data-9000="top:-35%;">
 					<h4 class="beanie">About 10 years ago<br /> a guy named Dave met a girl named Ginny.<br />
 					Soon after, the two would take a trip to New York City.</h4>
 			</div>
-			<div class="story_ease" data-4000="top:100%" data-5000="top:45%;" data-6400="top:45%;" data-7400="top:-35%;">
+			<div class="story_ease" data-4000="top:100%" data-5000="top:20%;" data-8000="top:20%;" data-9000="top:-35%;">
 					<h4 class="beanie">Days and weeks and many more,<br />
 					The couple found love they could not ignore.<br />
 					They dwelled in cities, the trees, and farm,<br />
 					Each would have its newfound charm.</h4>
 			</div>
-			<div class="story_ease" data-7000="top:100%;" data-8000="top:15%;" data-10000="top:15%;" data-15000="top:-40%;">	
+			<div class="story_ease" data-5000="top:100%;" data-6000="top:40%;" data-8000="top:40%;" data-9000="top:-40%;">	
 					<h4 class="beanie">And then one day came when they decided to marry.<br />
 					They had made it 10 years, after all, it’s not so scary.<br />
 					Money can’t buy love, this they knew.<br />
 					But it sure could pay for a trip, to start anew.</h4>
 			</div>
-			<div class="story_ease" data-8000="top:100%;" data-9000="top:50%;" data-10000="top:50%;" data-15000="top:-40%;">
+			<div class="story_ease" data-6000="top:100%;" data-7000="top:60%;" data-8000="top:60%;" data-9000="top:-40%;">
 					<h4 class="beanie">So tip your hat to these big-hearted.<br />
 					Who are embarking on a journey to where it all started.<br />
 					To jumpstart another decade, with its ups and downs.<br />
 					New experiences and perhaps new towns.</h4>
 			</div>
-			<div class="story_ease" data-12000="top:100%" data-14000="top:35%;" data-15000="top:35%;" data-20000="top:-40%;">
+			<div class="story_ease" data-8000="top:100%" data-9000="top:35%;" data-10000="top:35%;" data-11000="top:-40%;">
 					<h4 class="beanie">But have no worries for this one of many couples.<br />
 					Because they’re a good team and can tackle life’s troubles.<br />
 					For it is their love that will make them last.<br />
@@ -74,70 +74,16 @@
 		</div>
 	</div>
 	
-	<div id="trip" data-20000="top:-150%" data-22000="top:0%;" data-28000="top:-100%;" data-20000="background:rgba(0,0,0,0);" data-27000="background:rgba(130,104,130,.5);">
-		<div class="easing" data-20000="bottom:-250%" data-22000="bottom:0%;">
-				<div id="gform">
+	<div id="trip" data-11000="top:-200%" data-12000="top:0%;" data-13000="top:0%;" data-14000="top:-100%;" data-9500="background:rgba(130,104,130,.5);" data-12000="background:rgba(130,104,130,.5);">
+		<div class="easing">
+			<div id="bmlcount"></div>
+			<div id="gform">
 				<?php gravity_form(1, false, false, false, '', true); ?>
-				</div>
 				<div id="heart">&nbsp;</div>
-				<div id="bmlcount">
-					<h3>September 27<sup>th</sup>, &nbsp;<span id="year">2014</span>.</h3>	
-				</div>
-				
 				<div class="buy-love">
 					<a id="inline" href="#buy-love"><button>Buy Some Love</button></a>
 				</div>
-		</div>
-	</div>
-	
-	<div style="display:none">
-		<div id="buy-love">
-			<div id="wp-stripe-wrap">
-				<form id="wp-stripe-payment-form">
-				<input type="hidden" name="action" value="wp_stripe_charge_initiate" />
-				<input type="hidden" name="nonce" value="bd39ddb4d5" />
-				<div class="wp-stripe-details">
-				    <div class="wp-stripe-notification wp-stripe-failure payment-errors" style="display:none"></div>
-				    <div class="stripe-row"><input type="text" name="wp_stripe_name" class="wp-stripe-name" placeholder="Name *" autofocus required /></div>
-				    <div class="stripe-row"><input type="email" name="wp_stripe_email" class="wp-stripe-email" placeholder="E-mail" /></div>
-				    <div class="stripe-row"><textarea name="wp_stripe_comment" class="wp-stripe-comment" placeholder="Comments?"></textarea></div>
-				</div>
-				<div class="wp-stripe-card">
-				    <div class="stripe-row"><input type="text" name="wp_stripe_amount" autocomplete="off" class="wp-stripe-card-amount" id="wp-stripe-card-amount" placeholder="Amount (USD) *" required /></div>
-				    <div class="stripe-row"><input type="text" autocomplete="off" class="card-number" placeholder="Card Number *" required /></div>
-				    <div class="stripe-row">
-				        <div class="stripe-row-left"><input type="text" autocomplete="off" class="card-cvc" placeholder="CVC Number *" maxlength="4" required /></div>
-				        <div class="stripe-row-right">
-				            <span class="stripe-expiry">EXP</span>
-				            <select class="card-expiry-month">
-				                <option value="1">01</option>
-				                <option value="2">02</option>
-				                <option value="3">03</option>
-				                <option value="4">04</option>
-				                <option value="5">05</option>
-				                <option value="6">06</option>
-				                <option value="7">07</option>
-				                <option value="8">08</option>
-				                <option value="9">09</option>
-				                <option value="10">10</option>
-				                <option value="11">11</option>
-				                <option value="12">12</option>
-				            </select>
-				            <span></span>
-				            <select class="card-expiry-year">
-				            <option value="2014">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option>
-							</select>
-				        </div>
-				    </div>
-				    </div>
-				    <div class="stripe-row">
-				        <input type="checkbox" name="wp_stripe_public" value="public" checked="checked" /> <label class="public">share your comments on our event page
-				    </div>
-				    <div style="clear:both"></div>
-				    <input type="hidden" name="wp_stripe_form" value="1"/>
-				    <button type="submit" class="stripe-submit-button">Buy</button>
-				    <div class="stripe-spinner"></div>
-				</form>
+				
 			</div>
 		</div>
 	</div>
@@ -153,6 +99,7 @@ var s = skrollr.init({
 	}
 });
 </script>
+
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

+ 1 - 1
js/init.js

@@ -1,4 +1,4 @@
-$(document).ready(function() {
+jQuery(document).ready(function ($) {
 	$("#bmlcount")
 	.countdown("2014/09/27", function(event) {
 		 $(this).text(event.strftime('%D days %H:%M:%S'));

+ 206 - 0
js/jquery.countdown.js

@@ -0,0 +1,206 @@
+/*!
+ * The Final Countdown for jQuery v2.0.4 (http://hilios.github.io/jQuery.countdown/)
+ * Copyright (c) 2014 Edson Hilios
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+(function(factory) {
+    "use strict";
+    if (typeof define === "function" && define.amd) {
+        define([ "jquery" ], factory);
+    } else {
+        factory(jQuery);
+    }
+})(function($) {
+    "use strict";
+    var PRECISION = 100;
+    var instances = [], matchers = [];
+    matchers.push(/^[0-9]*$/.source);
+    matchers.push(/([0-9]{1,2}\/){2}[0-9]{4}( [0-9]{1,2}(:[0-9]{2}){2})?/.source);
+    matchers.push(/[0-9]{4}([\/\-][0-9]{1,2}){2}( [0-9]{1,2}(:[0-9]{2}){2})?/.source);
+    matchers = new RegExp(matchers.join("|"));
+    function parseDateString(dateString) {
+        if (dateString instanceof Date) {
+            return dateString;
+        }
+        if (String(dateString).match(matchers)) {
+            if (String(dateString).match(/^[0-9]*$/)) {
+                dateString = Number(dateString);
+            }
+            if (String(dateString).match(/\-/)) {
+                dateString = String(dateString).replace(/\-/g, "/");
+            }
+            return new Date(dateString);
+        } else {
+            throw new Error("Couldn't cast `" + dateString + "` to a date object.");
+        }
+    }
+    var DIRECTIVE_KEY_MAP = {
+        Y: "years",
+        m: "months",
+        w: "weeks",
+        d: "days",
+        D: "totalDays",
+        H: "hours",
+        M: "minutes",
+        S: "seconds"
+    };
+    function strftime(offsetObject) {
+        return function(format) {
+            var directives = format.match(/%(-|!)?[A-Z]{1}(:[^;]+;)?/gi);
+            if (directives) {
+                for (var i = 0, len = directives.length; i < len; ++i) {
+                    var directive = directives[i].match(/%(-|!)?([a-zA-Z]{1})(:[^;]+;)?/), regexp = new RegExp(directive[0]), modifier = directive[1] || "", plural = directive[3] || "", value = null;
+                    directive = directive[2];
+                    if (DIRECTIVE_KEY_MAP.hasOwnProperty(directive)) {
+                        value = DIRECTIVE_KEY_MAP[directive];
+                        value = Number(offsetObject[value]);
+                    }
+                    if (value !== null) {
+                        if (modifier === "!") {
+                            value = pluralize(plural, value);
+                        }
+                        if (modifier === "") {
+                            if (value < 10) {
+                                value = "0" + value.toString();
+                            }
+                        }
+                        format = format.replace(regexp, value.toString());
+                    }
+                }
+            }
+            format = format.replace(/%%/, "%");
+            return format;
+        };
+    }
+    function pluralize(format, count) {
+        var plural = "s", singular = "";
+        if (format) {
+            format = format.replace(/(:|;|\s)/gi, "").split(/\,/);
+            if (format.length === 1) {
+                plural = format[0];
+            } else {
+                singular = format[0];
+                plural = format[1];
+            }
+        }
+        if (Math.abs(count) === 1) {
+            return singular;
+        } else {
+            return plural;
+        }
+    }
+    var Countdown = function(el, finalDate, callback) {
+        this.el = el;
+        this.$el = $(el);
+        this.interval = null;
+        this.offset = {};
+        this.instanceNumber = instances.length;
+        instances.push(this);
+        this.$el.data("countdown-instance", this.instanceNumber);
+        if (callback) {
+            this.$el.on("update.countdown", callback);
+            this.$el.on("stoped.countdown", callback);
+            this.$el.on("finish.countdown", callback);
+        }
+        this.setFinalDate(finalDate);
+        this.start();
+    };
+    $.extend(Countdown.prototype, {
+        start: function() {
+            if (this.interval !== null) {
+                clearInterval(this.interval);
+            }
+            var self = this;
+            this.update();
+            this.interval = setInterval(function() {
+                self.update.call(self);
+            }, PRECISION);
+        },
+        stop: function() {
+            clearInterval(this.interval);
+            this.interval = null;
+            this.dispatchEvent("stoped");
+        },
+        pause: function() {
+            this.stop.call(this);
+        },
+        resume: function() {
+            this.start.call(this);
+        },
+        remove: function() {
+            this.stop();
+            instances[this.instanceNumber] = null;
+            delete this.$el.data().countdownInstance;
+        },
+        setFinalDate: function(value) {
+            this.finalDate = parseDateString(value);
+        },
+        update: function() {
+            if (this.$el.closest("html").length === 0) {
+                this.remove();
+                return;
+            }
+            this.totalSecsLeft = this.finalDate.getTime() - new Date().getTime();
+            this.totalSecsLeft = Math.ceil(this.totalSecsLeft / 1e3);
+            this.totalSecsLeft = this.totalSecsLeft < 0 ? 0 : this.totalSecsLeft;
+            this.offset = {
+                seconds: this.totalSecsLeft % 60,
+                minutes: Math.floor(this.totalSecsLeft / 60) % 60,
+                hours: Math.floor(this.totalSecsLeft / 60 / 60) % 24,
+                days: Math.floor(this.totalSecsLeft / 60 / 60 / 24) % 7,
+                totalDays: Math.floor(this.totalSecsLeft / 60 / 60 / 24),
+                weeks: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 7),
+                months: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 30),
+                years: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 365)
+            };
+            if (this.totalSecsLeft === 0) {
+                this.stop();
+                this.dispatchEvent("finish");
+            } else {
+                this.dispatchEvent("update");
+            }
+        },
+        dispatchEvent: function(eventName) {
+            var event = $.Event(eventName + ".countdown");
+            event.finalDate = this.finalDate;
+            event.offset = $.extend({}, this.offset);
+            event.strftime = strftime(this.offset);
+            this.$el.trigger(event);
+        }
+    });
+    $.fn.countdown = function() {
+        var argumentsArray = Array.prototype.slice.call(arguments, 0);
+        return this.each(function() {
+            var instanceNumber = $(this).data("countdown-instance");
+            if (instanceNumber !== undefined) {
+                var instance = instances[instanceNumber], method = argumentsArray[0];
+                if (Countdown.prototype.hasOwnProperty(method)) {
+                    instance[method].apply(instance, argumentsArray.slice(1));
+                } else if (String(method).match(/^[$A-Z_][0-9A-Z_$]*$/i) === null) {
+                    instance.setFinalDate.call(instance, method);
+                    instance.start();
+                } else {
+                    $.error("Method %s does not exist on jQuery.countdown".replace(/\%s/gi, method));
+                }
+            } else {
+                new Countdown(this, argumentsArray[0], argumentsArray[1]);
+            }
+        });
+    };
+});

+ 11 - 18
style.css

@@ -138,7 +138,7 @@ h4.cardo {
 }
 h4.beanie {
 	font-family: Reenie Beanie;
-	font-size:48px;
+	font-size:39px;
 }
 p.beanie {
 	font-family: Reenie Beanie;
@@ -210,7 +210,6 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 	height:100%;
 }
 #story {
-	top:200px;
 	padding:2em;
 	width:60%;
 	text-align:center;
@@ -234,6 +233,10 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 	width:100%;
 	height:100%;
 }
+#trip_wrap {
+	width:100%;
+	height:100%;
+}
 #vows {
 	width:100%;
 	height:100%;
@@ -249,25 +252,15 @@ html, body {width:100%;height:100%;padding:0;margin:0;overflow-x:hidden;}
 
 #bml { width: 450px; height: 55px; margin:0;}
 
+#bmlcount {
+	font-family: Reenie Beanie;
+	font-size:39px;
+}
+
 .buy-love {
-	bottom:20%;
-	margin: 100px 0 0 0;
+	margin: 0px 0 0 0;
 }
 
-.hasCountdown {}
-.countdown_rtl {direction: rtl;}
-.countdown_holding span {color: #000;}
-.countdown_row {clear: both;width: 100%;padding: 0px 2px;text-align: center;}
-.countdown_show1 .countdown_section {width: 9%;}
-.countdown_show2 .countdown_section {width: 48%;}
-.countdown_show3 .countdown_section {width: 32.5%;}
-.countdown_show4 .countdown_section {width: 24.5%;}
-.countdown_show5 .countdown_section {width: 19.5%;}
-.countdown_show6 .countdown_section {width: 16.25%;}
-.countdown_show7 .countdown_section {width: 14%;}
-.countdown_section {display: block;float: left;margin:4px;font-size: 25px;font-family:Reenie Beanie;text-align: left;}
-.countdown_amount {font-size:54px;font-family:Reenie Beanie;}
-.countdown_descr {display: block;width: 100%;}
 
 #inline button {
 	font-family: Reenie Beanie;