treykane

// This could be used for many things, however in my case, this was use to show a price that was slashed through. 

.slashed-rate {
	display: inline-block;
	padding-top: 10px;
	color: $grey-darker;
	.currency {font-size: 15px;}
	.dollars {font-size: 30px;}
	.frequency {font-size: 10px;}
	&::before {

treykane

$.post("ajax_rope_check.php", { //FORM AJAX
   street: s.step_two_street.val(),
   city: s.step_two_city.val(),
   state: s.step_two_state.val(),
   zip: s.step_two_zip.val()  
 })
 
 .done(function(response){ //AJAX RESPONSE
    response = $.parseJSON(response);//CHANGE STR TO OBJ
    if(response.serviceable === true) { 

treykane

 var modal_steps = (function() {

        // variables
        var s = {
            step_one: $('.address-check__step.step-1'),
            step_two: $('.address-check__step.step-2'),
            step_three: $('.address-check__step.step-3'),
            step_one_bar_mask: $('.js-step-bar-1 .bar-mask'),
            step_two_bar_mask: $('.js-step-bar-2 .bar-mask'),
            step_one_circle: $('.step-circle.circle-1'),

treykane

Click to activate (jQuery)

Simple click to activate demo with jQuery. Allows the user to click the element to toggle it on or off, or click anywhere to deactivate.

Using "Excluded Areas" to allow user interaction with the revealed content.

A Pen by Trey Kane on CodePen.

License.

treykane

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<!-- Generated by: TmTheme-Editor                 -->
<!-- ============================================ -->
<!-- app:  http://tmtheme-editor.herokuapp.com    -->
<!-- code: https://github.com/aziz/tmTheme-Editor -->
<plist version="1.0">
<dict>
	<key>author</key>
	<string>Domenico Carbotta</string>

treykane

.hero-cta-title {
    display: inline-block;
    position: relative;
    &:before, &:after {
      content: "";
      position: absolute;
      border-top: 1px solid white;
      top: 9px;
      width: 200%;
    }//. &:before, &:after

treykane

//Red Circle Background
	.circle-red{
        @include linear-gradient(#E71323, #5D0006);
        border-radius: 50%;
        box-shadow: ;
		width: 250px;
		height: 250px;
		z-index: 1;
		&:after { //BORDERS WITH BORDER RADUIS WORK AROUND
            @include linear-gradient(#FB323C, #990007);

treykane

// You can use this set of IF/ELSE statments to check and use a basic cookie value. 

if(document.location.pathname === "/") { // CHECK THE PAGE

    if( $.cookie('homepage-redirect' ) !== '1') { // CHECK FOR EXISTING COOKIE

         $.cookie('homepage-redirect', 1); // SET THE COOKIE IF IT DIDN'T EXIST
         document.location="/other.html"; // THEN REDIRECT TO OTHER PAGE

    } else {

treykane

.is-sticky {
	position: fixed; /* why it sticks */
	top: 0; /* can be adjusted as needed */
	margin: 0;
	z-index: 999; /* be on top of all the things */
}/* is-sticky */

treykane

if( $.cookie('address-check' ) !== '1') {
    // set cookie to only pop once
     $.cookie('address-check', 1);
  }