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.
<?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> |
// npm install gulp | |
//---- TODO'S ----// | |
// TODO: smarter linting | |
// Include gulp | |
var gulp = require('gulp'); | |
// Include Our Plugins |
// 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 { |
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'), |
$.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) { |
$( document ).ready(function() { | |
$(function() { // TOGGLE CLASS ON ELEMENT | |
$(".tile-top").on("click", function() { | |
$(this).toggleClass('active'); }); | |
}); //END TOGGLE CLASS | |
$(function() { // REMOVE CLASS WHEN YOU CLICK, EXCLUDE ELEMENTS | |
var ignore= Array(".tile-top", // elements to ignore | |
".tile-bottom"); |
.hero-cta-title { | |
display: inline-block; | |
position: relative; | |
&:before, &:after { | |
content: ""; | |
position: absolute; | |
border-top: 1px solid white; | |
top: 9px; | |
width: 200%; | |
}//. &:before, &:after |
//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); |