miguel-perez

Bootstrap Checkout Sample

Pen with Bootstrap CDN Links

A Pen by Miguel Ángel Pérez on CodePen.

License.

miguel-perez

// IIFE for protection
;(function(win, doc, $){

  var
    newStyles = [
      '<style>',
        '.home .navbar-inverse .navbar-nav > li a:hover {',
            'background-color: #f56226;',
            'transition: background-color ease-in-out 0.5s;',
        '}',

miguel-perez

        <footer id="lwf-footer" role="contentinfo">
          <div class="content">
            <div class="footer">
              <div class="corset">
                <div class="footer__row">
                  <div class="footer__left">
                    <section class="footer__section">
                      <h1 class="visuallyhidden">Social media links</h1>
                      <ul class="link-list link-list--social">
                        <li class="link-list__item">

miguel-perez

<p>Hello world</p>

miguel-perez

/**
 * Replace jQuery's $.fn.ready() function with a mod exec
 *
 * Sites that make heavy use of the $(document).ready function
 * are generally incompatable with asynchrounous content. The
 * the $.fn.ready function only runs once. This script replaces
 * the ready function with a module execution controller that
 * let's us register functions and execute all of the functions
 * as we need them. This is useful after HTML gets injected on the
 * page and we want to rebind functionally to the new content.

miguel-perez

var
/**
 * Fires a custom event when all animations are complete
 * @param   {object}    $element - jQuery object that should trigger event
 * 
 */
 triggerAllAnimationEndEvent = function ($element) {
    var animationCount      = 0,
        animationstart      = "animationstart webkitAnimationStart oanimationstart MSAnimationStart",

miguel-perez

// Contents of functions.js
;(function($) {
  'use strict';
  var $body = $('html, body'),
      content = $('#main').smoothState({
        // Runs when a link has been activated
        onStart: function(url, $container) {
          // toggleAnimationClass() is a public method
          // for restarting css animations with a class
          content.toggleAnimationClass('is-exiting');

miguel-perez

// DISQUS
var MP = MP || {};
MP.comments = {
    init: function(){
        "use strict";
        var disqus_shortname = 'miguelperez';
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';

miguel-perez

An example of how to implement cool page transitions with jQuery.smoothState.js.

miguel-perez

A typical implementation of jQuery.smoothState.js using a simple fade effect for page transitoins.