Skip to content

Instantly share code, notes, and snippets.

@tomfuertes

tomfuertes/notes.md

Forked from mona87/notes.md
Last active August 28, 2015 16:53
Show Gist options
  • Save tomfuertes/c02f742cf4fe94fa3c60 to your computer and use it in GitHub Desktop.
Save tomfuertes/c02f742cf4fe94fa3c60 to your computer and use it in GitHub Desktop.
Download ZIP
clearhead hw
Raw
notes.md

##V1 Sticky-Reminder

###The Struggle Originally I started off using jQuery.noConflict() in my code in:

jQuery.noConflict();
(function( $ ) {
  $(function() {
    //my code
  });
})(jQuery);

And it was fine, until I had to write html without multiline functionality. So I'm quite thankful for the timpl templates. :)

###The Easy The first thing I did was create the modal. The CSS was the most tedious, but the easiest. I used a fixed position to stick it to the bottom of the page.

	jQuery('.modal').css({
		'border': '1px solid #b7b5b6',
		'width': '575px',
		'height': '200px',
		'overflow': 'hidden',
		'font-family': 'Arial',
		'position': 'fixed',
		'z-index': '10000',
		'bottom' : '0',
		'right' : '-575px',

	});

###The Challenge However, the sliding animation took me a bit longer to figure out. I already knew slideToggle() was not an option because it only slides up and down. jQuery UI has that functionality, but requires importing a new library. I almost went the CSS transitions route and then I discovered the awesomeness of .animate(), and how it accomplished what I wanted it in one line!

	jQuery('.modal').animate({'right': '0'}, 500, function(){
	//	jQuery('#cartHeader').css({'color': '#ffa933'})
	// 	#winning!
	})

###Just for Fun I used a little regex to display the amount of items from the 'my cart string', which worked really nicely with the timpl templates. I also wanted to see if I could get the random image and data from the cart items, but I wasn't sure how to pull that off, so I stuck a random image as a placeholder. :/

var regEx = new RegExp(/\(([^)]+)\)/);
var items = regEx.exec($('#cartHeader').text());

###Goal-Tracking I have three goals/alerts on all the clickable elements of the modal: the X button, the view cart, and continue shopping.

##V2 Mini-Cart Auto PopUp

###Show and Tell This one was relatively easy compared to the sticky assignment. First I targeted the .top-cart and #topCartContent to unhide the elements.

	jQuery('.top-cart').css({'z-index':'1000'});
	jQuery('#topCartContent').css({'display':'block'});

###Prepend vs Before I used .prepend() first, but it gave me the issue of inserting the welcome box inside the element, so I changed it to .before() which appends the box right above the content.

	jQuery('.inner-wrapper').before(timpl(function () {/**/}

###Hide Me The notes mentioned the welcome box only appears when the user returns and then functions normally afterwards. I attached a click function to the closed button, so that the box gets hidden when the user clicks the closed link.

	jQuery('.close-btn').click(function(){
		jQuery('#topCartContent').hide();
	});

###Goal-Tracking I added alerts to the closed button, view cart, and checkout buttons.

Raw
v1-sticky-reminder.js
jQuery( document ).ready(function( $ ) {
!function(n){"use strict";function r(n){var r=i.exec(n.toString());if(!r)throw new TypeError("Multiline comment missing.");return r[1]}function t(n,r){return n.replace(c,function(n,t){for(var i=t.split("."),o=i.length,s=r,u=0;o>u;u++){if(s=s[i[u]],s===e)throw'tim: "'+i[u]+'" not found in '+n;if(u===o-1)return s}})}n.timpl=function(n,e){return t(n.call?r(n):n,e||{}).replace(/^\s+|\s+$/g,"")};var e,i=/\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)[ \t]*\*\//,o="{{",s="}}",u="[a-z0-9_$][\\.a-z0-9_]*",c=new RegExp(o+"\\s*("+u+")\\s*"+s,"gi")}(window);
//get value from cart
var regEx = new RegExp(/\(([^)]+)\)/);
var items = regEx.exec($('#cartHeader').text());
jQuery('body').append(timpl(function () {/*
<div class="modal">
<div class="col1">
<div class="title">Welcome Back!</div>
<div class="subhead">We saved your cart for you.</div>
<div class="mod-txt">Your shopping cart</div>
<div class="mod-txt"> {{items}}</div>
</div>
<div class="col2">
<div class="item-info">
<div class="close close-button">X</div>
<div class="image-item"><img src={{image}}></div>
<div class="image-detail">
<div class="mod-txt"><strong>{{name}}</strong></div>
<div class="mod-txt">$3,598.00</div>
<div class="mod-txt">Qty: 1</div>
</div>
</div>
<div class="buttons">
<button class="close cont-shop">continue shopping</button>
<button class="checkout"><a href="http://www.bludot.com/checkout/cart">VIEW CART</a></button>
</div>
</div>
</div>
*/}, {
name: 'Paramount Left Sectional Sofa',
items: items[1] +' items',
image: "http://www.bludot.com/media/catalog/product/cache/1/thumbnail/256x160/9df78eab33525d08d6e5fb8d27136e95/p/m/pm1_lsectl_as_paramount-left-sectional-sofa-ash_1.jpg"
}));
//css for modal
jQuery('.modal').css({ 'border': '1px solid #b7b5b6', 'width': '575px', 'height': '200px', 'overflow': 'hidden', 'font-family': 'Arial', 'position': 'fixed', 'z-index': '10000', 'bottom' : '0', 'right' : '-575px', });
jQuery('.col1').css({ 'float': 'left', 'background-color': '#308BA6', 'color':'white', 'width':'45%', 'padding-left': '30px', 'box-sizing':'border-box', 'height': '100%'});
jQuery('.col2').css({ 'color':'white', 'width':'55%', 'float': 'left', 'color': 'black', 'background-color':'white', 'height': '100%'});
jQuery('.cont-shop').css({ 'background-color': '#9a9a9a', 'height': '24px', 'line-height': '12px', 'color': 'white', 'border': 'none', 'padding':'5px 15px', 'font-weight': 'bold', 'margin-right': '10px', at':'left', 'margin-left':'20px', 'cursor':'pointer');
jQuery('.checkout').css({ 'background': '#ffa933', 'font-weight': 'bold', 'text-decoration': 'none', 'line-height': '14px', 'border': 'none', 'height': '24px', 'text-align': 'center', 'padding': '5px ', or':'white');
jQuery('.checkout a').css({ 'color':'white', 'text-decoration':'none' });
jQuery('.title').css({ 'font-size': '25px', 'padding': '40px 0 5px 0', 'text-align': 'left' });
jQuery('.subhead').css({ 'font-size': '16px', 'padding': '0 0 20px 0', 'text-align': 'left' });
jQuery('.mod-txt').css({ 'font-size': '14px', 'padding': '0 0 10px 0', 'text-align': 'left' });
jQuery('.item-info').css({ 'height':'150px' });
jQuery('.image-item').css({ 'float':'left', 'width':'150px', 'clear':'both' });
jQuery('.buttons').css({ 'clear':'both' });
jQuery('.image-detail').css({ 'width':'40%', 'float': 'right', 'margin-top': '20px' });
jQuery('.image-item img').css({ 'float':'left', 'width':'180px' });
jQuery('.close-button').css({ 'float':'right', 'font-size': '18px', 'width' : '35px', 'cursor':'pointer' });
jQuery('.checkout a').click(function(){
window.alert('view cart button was clicked.');
})
//slides modal and changes color to orange
jQuery('.modal').animate({'right': '0'}, 500, function(){
jQuery('#cartHeader').css({'color': '#ffa933'})
})
//hides modal and changes color back to grey
jQuery('.close').click(function(){
jQuery('.modal').hide();
jQuery('#cartHeader').css({'color': '#b7b5b6'})
window.alert($(this).text()+ ' button was clicked. modal is closed.');
})
});
Raw
v2-mini-cart-auto-popup.js
jQuery( document ).ready(function( $ ) {
!function(n){"use strict";function r(n){var r=i.exec(n.toString());if(!r)throw new TypeError("Multiline comment missing.");return r[1]}function t(n,r){return n.replace(c,function(n,t){for(var i=t.split("."),o=i.length,s=r,u=0;o>u;u++){if(s=s[i[u]],s===e)throw'tim: "'+i[u]+'" not found in '+n;if(u===o-1)return s}})}n.timpl=function(n,e){return t(n.call?r(n):n,e||{}).replace(/^\s+|\s+$/g,"")};var e,i=/\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)[ \t]*\*\//,o="{{",s="}}",u="[a-z0-9_$][\\.a-z0-9_]*",c=new RegExp(o+"\\s*("+u+")\\s*"+s,"gi")}(window);
//unhides mini-cart pop-up
jQuery('.top-cart').css({'z-index':'1000'});
jQuery('#topCartContent').css({'display':'block'});
//tracking goals with alerts
jQuery('.close-btn').click(function(){
jQuery('#topCartContent').hide();
$('.blue-block').css({'display':'none'});
window.alert('closed button was clicked');
});
//
jQuery('.button').click(function(){
window.alert('checkout button was clicked');
})
jQuery('.top-cart .actions a').click(function(){
window.alert('view shopping cart was clicked');
})
jQuery('.inner-wrapper').before(timpl(function () {/*
<div class="blue-block">
<div class="title">Welcome back!</div>
<div class="subhead">Your cart is ready when you are.</div>
<div class="mod-txt"><em>Questions? Give us a call at 844.425.8368.<br/> M-F 9:00-5:00 CT</em></div>
</div>
*/}, { }));
$('.blue-block').css({ 'height':'130px', 'background-color':'#308BA6', 'color':'white', 'padding': '0px 20px 10px 20px', 'width': '323px', 'margin-left': '4px', 'text-align' :'left', 'box-sizing':'border-box', 'text-transform': 'none', 'box-shadow': '0 0 10px black' });
$('.mod-txt').css({ 'font-size':'11px' });
$('.title').css({ 'font-size':'22px', 'padding-top':'20px' });
$('.subhead').css({ 'font-size':'14px', 'padding-bottom':'20px' })
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment