A Pen by Joe Early

Thumbnail
This awesome code was written by joeefp, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright joeefp ©
  • HTML
  • CSS
  • JavaScript
    <div class="card hovercard " id="bookingCard">
  <img class="bookCardHeadImage" src="http://www.scottishlandandestates.co.uk/blog/wp-content/uploads/2014/11/img_8143-8.jpg" alt="" />
  <div class="avatar">
    <img src="https://image.ibb.co/dVZ2Cv/small_full.png" />
  </div>
  <div class="info">
    <div class="title">
      Book Now
    </div>
  </div>
  <div class="mid">
    <div class=col-md-12>
    <input type="text" class="form-control" id="weeklyDatePicker" placeholder="Select Week">
        <i class="fa fa-calendar icon" aria-hidden="true"></i>
    </div>
  </div>
  <div class="bottom">
    <div class=col-md-12>
    <button type="submit" class="btn btn-primary" id="searchBtn">Search</button>
  </div>
      </div>
</div>

/*Downloaded from https://www.codeseek.co/joeefp/a-pen-by-joe-early-xryzEL */
    .card {
  padding-top: 20px;
  margin: 10px 0 20px 0;
  background-color: #eef4f7;
  border: 1px solid #d8d8d8;
  border-top-width: 0;
  border-bottom-width: 2px;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


.card.hovercard {
  position: relative;
  width: 300px;
  padding-top: 0;
  overflow: hidden;
  text-align: center;
  background-color: #eef4f7;
}

.card.hovercard img {
  width: 300px;
  height: 200px;
}

.card.hovercard .avatar {
  position: relative;
  top: -40px;
  margin-bottom: -40px;
}

.card.hovercard .avatar img {
  width: 80px;
  height: 80px;
  max-width: 80px;
  max-height: 80px;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}

.card.hovercard .info {
  padding: 4px 8px 10px;
}

.card.hovercard .info .title {
  margin-bottom: 4px;
  font-size: 24px;
  line-height: 1;
  color: #262626;
  vertical-align: middle;
}

.card.hovercard .info .desc {
  overflow: hidden;
  font-size: 12px;
  line-height: 20px;
  color: #737373;
  text-overflow: ellipsis;
}

.card.hovercard .bottom {
  padding: 0 20px;
  margin-bottom: 17px;
}

.card.people .card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  padding: 10px 20px;
  line-height: 29px;
  text-align: center;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.icon {
    float: right;
    margin-right: 8px;
    margin-top: -24px;
    position: relative;
    color: #337ab7;
}

.spacer{
  padding: 5px;
}

/*
Book Now Button
*/
.fixedbutton {
    position: fixed;
    top: 50%;
  left:0px;
     -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}


#panelIcons{
  padding-right: 10px;
}



/*Downloaded from https://www.codeseek.co/joeefp/a-pen-by-joe-early-xryzEL */
    /*-------------------------------*/
/*     weeklyDataPicker          */
/*-------------------------------*/

$(document).ready(function () {
    moment.locale('en', {
        week: {
            dow: 1
        } // Monday is the first day of the week
    });

    //Initialize the datePicker(I have taken format as mm-dd-yyyy, you can     //have your owh)
    $("#weeklyDatePicker").datetimepicker({
        format: 'DD-MM-YYYY'


    });

    $("#weeklyDatePicker").datetimepicker({

        orientation: 'top left'

    });

    //Get the value of Start and End of Week
    $('#weeklyDatePicker').on('dp.change', function (e) {
        var value = $("#weeklyDatePicker").val();
        var firstDate = moment(value, "DD-MM-YYYY").day(1).format("DD-MM-YYYY");

        $("#weeklyDatePicker").val(firstDate);
    });
});




(function() { 
  // This is the bare minimum JavaScript. You can opt to pass no arguments to setup.
  // e.g. just plyr.setup(); and leave it at that if you have no need for events
  var instances = plyr.setup({
    // Output to console
    debug: true
  });

  // Get an element
  function get(selector) {
    return document.querySelector(selector);
  }

  // Custom event handler (just for demo)
  function on(element, type, callback) {
    if (!(element instanceof HTMLElement)) {
      element = get(element);
    }
    element.addEventListener(type, callback, false);
  }

  // Loop through each instance
  instances.forEach(function(instance) {
    // Play
    on('.js-play', 'click', function() { 
      instance.play();
    });
    
    // Pause
    on('.js-pause', 'click', function() { 
      instance.pause();
    });
    
    // Stop
    on('.js-stop', 'click', function() { 
      instance.stop();
    });
    
    // Rewind
    on('.js-rewind', 'click', function() { 
      instance.rewind();
    });
    
    // Forward
    on('.js-forward', 'click', function() { 
      instance.forward();
    });
  });
})();

Comments