Items filtered by date: December 2015

Sunday, 21 February 2016 10:57

Signature Tags

These are a collection of different styles of signatures that you can put at the bottom of websites you design.

Lancastrian IT

Website Design By Lancastrian IT

Website Design By Lancastrian IT

<p><a href="http://www.lancastrian-it.co.uk/" target="_blank">Website Design</a> By Lancastrian IT</p>

Website Design By Lancastrian IT - both clickable, useful for SEO

Website Design By Lancastrian IT

<p><a href="http://www.lancastrian-it.co.uk/" target="_blank"><strong>Website Design</strong></a> By <a href="http://www.lancastrian-it.co.uk/" target="_blank"><strong>Lancastrian IT</strong></a></p>

Website Design By Lancastrian IT - with anchor text and good for SEO

This is ideal (has keywords in tail and anchor text - i need to fixate my website and keyword research before using this)

Website Design By Lancastrian IT

<p><a href="http://www.lancastrian-it.co.uk/website-design" target="_blank"><strong>Website Design</strong></a> By Lancastrian IT</p>

Website Design By Lancastrian IT - additional title attribute and anchor text, good for SEO

Additional with title attribute (this appears to be optinal visavie SEO and only good for user interaction, ie click here to go to my site)

Website Design By Lancastrian IT

<p><a title="Website Design Company in Lancaster" href="http://www.lancastrian-it.co.uk/website-design" target="_blank"><strong>Website Design</strong></a> By Lancastrian IT</p>

Website Designed By Lancastrian IT - Lancastrian IT: SEO, Internet Marketing - with extra links containing keywords, format taken from SEO Quest

Website Designed By Lancastrian IT
Lancastrian IT: SEO, Internet Marketing

<p><strong>Website Designed By</strong> <a href="http://www.lancastrian-it.co.uk" target="_blank"><strong>Lancastrian IT</strong></a><br /> Lancastrian IT: <a href="http://www.lancastrian-it.co.uk/seo/" target="_blank">SEO</a>, <a href="http://www.lancastrian-it.co.uk/internet-marketing" target="_blank">Internet Marketing</a></p>

Designed by Lancastrian IT for QuantumWarp

<p>Designed by <a href="http://www.lancastrian-it.co.uk/" title="Web Design">Lancastrian IT</a> for <a href="http://quantumwarp.com.com/" title="QuantumWarp"></a>QuantumWarp</p>

<p>&copy; 2009 The Westgate Medical Practice, Designed by <a href="http://www.lancastrian-it.co.uk/">Lancastrian IT</a></p>

Must Be Media

Powered By Must Be Media

<p>Powered By <a href="http://www.mustbemedia.co.uk/">Must Be Media</a></p>

Combined Signatures (Lancastrian IT and Must Be Media)

Website Design By Lancastrian IT, Powered By Must Be Media

Website Design By Lancastrian IT, Powered By Must Be Media

<p><a href="http://www.lancastrian-it.co.uk/" target="_blank">Website Design</a> By Lancastrian IT,  Powered By <a href="http://www.mustbemedia.co.uk/" target="_blank">Must Be Media</a></p>

Website Design By Lancastrian IT, Powered By Must Be Media - Floated left and right for a static/wide footer

Website Design By Lancastrian IT

<div style="clear: both;">
	<div style="float: left;"><a href="http://www.lancastrian-it.co.uk/" target="_blank">Website Design</a> By Lancastrian IT</div>
	<div style="float: right;">Powered By <a href="http://www.mustbemedia.co.uk/">Must Be Media</a></div>
</div>

Other

SearchQuest Footer Tag

SearchQuest: Internet Marketing, SEO

<p>SearchQuest: <a href="http://www.searchquest.co.uk/#internet-marketing" target="_blank">Internet Marketing</a>, <a href="http://www.searchquest.co.uk/#seo" target="_blank">SEO</a></p>

Copyright Tag Line

<p>QuantumWarp &copy; 2008</p>

Published in Design Elements, Styling, Effects and Code

Saturday, 20 February 2016 20:39

Parallax Scrolling

This scrolls the background images behind modules or any other element you set it to.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer

took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the

leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release

of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS

#content-container {
	background: url(/images/kb/2016/742/workplace.jpg) center center fixed;
	background-size: 100% auto;
}

/* Optional and is just for this demo */
#content-container {
	padding: 10px;
}
#content-container p {		
	color: #999;
	font-size: 25px;
}

setTimeout(function() {
(function($) {
	
//----------------------------------------

/* Parallax Scrolling */
$(document).ready( function() 
	{
		
		// Manually adding settings to an element
		//$('#content-container').attr('data-type', 'background');
		//$('#content-container').attr('data-speed', '3');
		
		// Rules based adding settings to an element
		if ($( "#content-container" ).hasClass( "parallax-background" ))
		{
			$('#jsn-content-top-below').attr('data-type', 'background');
			$('#jsn-content-top-below').attr('data-speed', '3');
		}
		
		/* Trigger the Parallax Scrolling */
		$('div[data-type="background"]').each(function(){
			var $bgobj = $(this); // assigning the object
		 
			$window = $(window);
			$(window).scroll(function() {
				var yPos = -($window.scrollTop() / $bgobj.data('speed')); 
				 
				// Put together our final background position
				var coords = '50% '+ yPos + 'px';
	 
				// Move the background
				$bgobj.css({ backgroundPosition: coords });
			}); 
		});

	});	
	
//----------------------------------------	

})(jQuery);
}, 0);

HTML

<div id="content-container" class="parallax-background">
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
	<p>took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the</p>
	<p>leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release</p>
	<p>of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

Published in Styled Elements

Saturday, 20 February 2016 20:33

JSN Mini Code

This is the Raw Homepage Code from the Joomlashine Template JSN Mini and is for reference only.

Modern Design

Flat design – currently growing in popularity

Full Documentation

JSN Mini is equipped with a very comprehensive documentation package that will help you with template utilization.

Painless Configuration

You can configure the template the way you like without special technical knowledge

Responsive design

Special built-in design optimized for modern mobile devices such as iPhone, Android and Windows-based mobiles

Multi-language support

Currently, the template supports 14 languages for both front-end and back-end.

Social media integrated

You are free to integrate your social channels without digging into the code

Our latest projects

Minimalist Style

A style that uses pared-down design elements, removing everything in a piece, leaving just the necessary and needed elements

130+ font-icons for many purposes

JSN Mini is also the first JoomlaShine template with 130+ outstanding font icons for you to choose from.

Extended style for three extensions

JSN Mini is well-crafted with extended styles for three extensions: Advanced Portfolio from ExtStore, Kunena and K2.

Joomla! 2.5 &3.x Compatibility

Natively compatible with Joomla! 2.5 & Joomla! 3.x versions

Sticky menu

Sticky menu makes websites quicker to navigate.

Minimalist Style
130+ font-icons for many purposes
Extended style for three extensions
Joomla! 2.5 &3.x Compatibility
Sticky menu

Easy to start

JSN PowerAdmin facilitates delightful management and customization your Joomla website with ease and joy.

SEO Optimized

Pure html override and 2-1-3 ordered content presentation help search engines easily crawl the site.

Various Colors

6 color variations including blue, red, green, violet, orange and grey.

Portfolio Design

JSN Mini is dedicated to portfolio websites.

Client

Quantity

And more

CSS

/* ==================== JSN MINI CUSTOM CSS ==================== */
/* ===== GENERAL ===== */
.jsn-demo-page #jsn-mainbody-content {
	display: none;
}
#jsn-logo a {
	padding: 28px 0 28px 20px;
}
.jsn-direction-rtl #jsn-logo a {
	padding: 28px 20px 28px 0;
}
.jsn-demo-page #jsn-topbar,
.jsn-demo-page #jsn-topheader,
.jsn-demo-page #jsn-header,
.jsn-demo-page #jsn-logo {
	position: relative;
	z-index: 1000;
}
.jsn-demo-page #jsn-header.jsn-menu-sticky {
	position: fixed;
}
.jsn-demo-page #jsn-header {
	background-color: transparent;
	transition: background-color 0.5s ease-in-out;
	-moz-transition: background-color 0.5s ease-in-out;
	-webkit-transition: background-color 0.5s ease-in-out;
}
.jsn-demo-page #jsn-header.hasbg {
	background-color: #000;
}
.jsn-demo-page #jsn-promo {
	margin: 0;
	position: relative;
	width: 100%;
}
.jsn-demo-page #jsn-pos-promo {
	width: 100%;
	overflow: hidden;
}
.jsn-demo-page #jsn-promo:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 50;
}
.jsn-demo-page.jsn-color-blue #jsn-promo:before {
	background-color: rgba(30,41,53,0.7);
}
.jsn-demo-page.jsn-color-red #jsn-promo:before {
	background-color: rgba(97,5,0,0.7);
}
.jsn-demo-page.jsn-color-green #jsn-promo:before {
	background-color: rgba(0,76,52,0.7);
}
.jsn-demo-page.jsn-color-orange #jsn-promo:before {
	background-color: rgba(145,58,0,0.7);
}
.jsn-demo-page.jsn-color-violet #jsn-promo:before {
	background-color: rgba(44,24,53,0.7);
}
.jsn-demo-page.jsn-color-grey #jsn-promo:before {
	background-color: rgba(35,38,42,0.7);
}
/* ===== GET IT NOW BUTTON ===== */
#jsn-get-now {
	position: relative;
	-webkit-transform: rotate(90deg);
	   -moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		 -o-transform: rotate(90deg);
			transform: rotate(90deg);
}
#jsn-get-now .link-button.button-color {
	position: absolute;
	border-radius: 0 0 10px 10px;
	padding: 8px 25px 12px;
	font-size: 1.2em;
	white-space: nowrap;
	-webkit-transform: translate(-50%,0);
	   -moz-transform: translate(-50%,0);
		-ms-transform: translate(-50%,0);
		 -o-transform: translate(-50%,0);
			transform: translate(-50%,0);
}
/* ===== PROMO INTRO TEXT ===== */
.jsn-demo-page .promo-intro-text #promo-intro-text {
	text-align: center;
	font-family: 'PT Sans', Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	position: absolute;
	top: 50%;
	margin-top: -60px;
	width: 100%;
	height: 120px;
	max-height: 120px;
	z-index: 500;
}
.jsn-demo-page .promo-intro-text #promo-intro-text h4 {
	font-weight: 300;
	font-size: 1.6em;
	line-height: 30px;
	margin: 0;
	letter-spacing: 3px;
	color: #d5d5d5;
}
.jsn-demo-page .promo-intro-text #promo-intro-text h3 {
	font-weight: bold;
	font-size: 3em;
	margin: 0;
	letter-spacing: 10px;
	color: #fff;
}
.jsn-demo-page .promo-intro-text #promo-intro-text + a.scroll-down {
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -75px;
	display: block;
	width: 150px;
	padding: 5px 10px;
	background-color: #fff\9;
	background-color: rgba(255,255,255,0.4);
	color: #000;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 12px;
	text-align: center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	z-index: 200;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.jsn-demo-page .promo-intro-text #promo-intro-text + a.scroll-down:hover {
	background-color: #fff;
}
.ping {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	transform: translate(0,-20px);
	-moz-transform: translate(0,-20px);
	-webkit-transform: translate(0,-20px);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.ping.pop {
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	transform: translate(0,0);
	-moz-transform: translate(0,0);
	-webkit-transform: translate(0,0);
}
/* ===== HOMEPAGE SLIDESHOW ===== */
.jsn-demo-page #jsn-pos-promo {
	position: absolute;
	top: 50%;
}
/* Fix slider images dimension for landscape tablet */
@media only screen and (min-width: 1025px) and (max-width: 1850px), (min-device-width: 1025px) and (max-device-width: 1850px) and (orientation:landscape) {
	.jsn-demo-page .box_skitter,
	.jsn-demo-page .container_skitter,
	.jsn-demo-page .box_skitter .box_clone,
	.jsn-demo-page .box_skitter .image img,
	.jsn-demo-page .box_skitter .box_clone img {
		height: 1280px !important;
		width: 2325px !important;
	}
}
/* Fix slider images dimension for portrait tablet */

/* For general tablet and smartphone */
@media only screen and (max-width: 1024px), (max-device-width: 1024px) {
	
	.jsn-demo-page #jsn-promo{
		height: 675px !important;
	}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-demo-page #jsn-promo{
		height: 850px !important;
	}
}
/* Fix slider images dimension for landscape tablet */
@media only screen and (min-width: 1025px) and (max-width: 1850px), (min-device-width: 1025px) and (max-device-width: 1850px) and (orientation:landscape) {
	.jsn-demo-page .box_skitter,
	.jsn-demo-page .container_skitter,
	.jsn-demo-page .box_skitter .box_clone,
	.jsn-demo-page .box_skitter .image img,
	.jsn-demo-page .box_skitter .box_clone img {
		height: 1280px !important;
	}
}
/* Fix slider images dimension for portrait tablet */

/* For general tablet and smartphone */
@media only screen and (max-width: 1024px), (max-device-width: 1024px) {
	.jsn-mobile.jsn-demo-page .box_skitter,
	.jsn-mobile.jsn-demo-page .container_skitter,
	.jsn-mobile.jsn-demo-page .box_skitter .box_clone,
	.jsn-mobile.jsn-demo-page .box_skitter .image img,
	.jsn-mobile.jsn-demo-page .box_skitter .box_clone img,
	.jsn-mobile.jsn-demo-page #jsn-pos-promo {
		height: 768px !important;
		width: 1394px !important;
	}
	.jsn-demo-page #jsn-promo {
		height: auto !important;
	}
	.jsn-demo-page #jsn-pos-promo {
		position: static !important;
		top: 0 !important;
		margin-top: 0 !important;
		height: 768px !important;
	}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	
	.jsn-mobile.jsn-demo-page .box_skitter,
	.jsn-mobile.jsn-demo-page .container_skitter,
	.jsn-mobile.jsn-demo-page .box_skitter .box_clone,
	.jsn-mobile.jsn-demo-page .box_skitter .image img,
	.jsn-mobile.jsn-demo-page .box_skitter .box_clone img,
	.jsn-mobile.jsn-demo-page #jsn-pos-promo {
		height: 480px !important;
		width: 870px !important;
	}
	.jsn-demo-page #jsn-promo {
		height: auto !important;
	}
	.jsn-demo-page #jsn-pos-promo {
		position: static !important;
		top: 0 !important;
		margin-top: 0 !important;
		height: 480px !important;
	}
}
/* ===== CONTENT TOP ===== */
#jsn-content-top {
	background-color: #f5f5f5;
}
#welcome-to-jsn-mini {
	padding: 80px 0;
}
#welcome-to-jsn-mini .welcome .grid-col_inner {
	padding: 0 20px;
}
#welcome-to-jsn-mini .welcome .img img {
	max-width: 100%;
}
  #welcome-to-jsn-mini .welcome .text {
	padding: 140px 0 40px;
}
#welcome-to-jsn-mini .welcome .text .heading {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 1.9em;
}
#welcome-to-jsn-mini .welcome .text .desc {
	margin: 30px 0 40px;
	font-size: 1em;
	line-height: 2em;
	color: #888;
}

/* ===== CONTENT TOP BELOW ===== */
#jsn-content-top-below {
	background: url(../../../media/joomlashine/jsn-mini/custom-html/bg/workplace.jpg) center center fixed;
	background-size: 100% auto;
}
#demo-main-features {
	padding: 30px 0;
}
#demo-main-features .main-features {
	padding: 40px 0;
}
#demo-main-features .main-features .grid-col_inner {
	padding: 0 20px;
}
#demo-main-features .main-features .feature-item [class*="jsn-icon-"] {
	font-size: 2.5em;
}
#demo-main-features .main-features .feature-item .heading {
	color: #fff;
	text-transform: uppercase;
	font-size: 1.2em;
	letter-spacing: 5px;
}
#demo-main-features .main-features .feature-item .desc {
	color: #999;
}

/* ===== USER TOP ===== */
.jsn-demo-page #jsn-pos-user-top {
	border: none;
	padding: 0;
}
.jsn-demo-page #jsn-centercol {
	padding: 0 !important;
}
.jsn-modulecontainer.demo-latest-projects {
	margin-top: 0 !important;
}
#demo-latest-projects .section-heading {
	background-color: #111;
	color: #fff;
	font-size: 1.8em;
	text-transform: uppercase;
	letter-spacing: 5px;
	text-align: center;
	margin: 0;
	padding: 45px 0;
}
.jsn-color-blue #demo-latest-projects .section-heading {
	background-color: #1c8bbe;
}
.jsn-color-red #demo-latest-projects .section-heading {
	background-color: #d85544;
}
.jsn-color-green #demo-latest-projects .section-heading {
	background-color: #139d6b;
}
.jsn-color-orange #demo-latest-projects .section-heading {
	background-color: #c78f23;
}
.jsn-color-violet #demo-latest-projects .section-heading {
	background-color: #8762ae;
}
.jsn-color-grey #demo-latest-projects .section-heading {
	background-color: #333;
}
#demo-latest-projects .latest-projects .grid-col {
	width: 25%;
}
#demo-latest-projects .latest-projects .grid-col_inner {
	margin: 0;
}
#demo-latest-projects .latest-projects .project-item a {
	display: block;
	position: relative;
	z-index: 90;
	top: 0;
	left: 0;
}
#demo-latest-projects .latest-projects .project-item a img {
	max-width: 100%;
	display: block;
}
#demo-latest-projects .latest-projects .project-item {
	position: relative;
	overflow: hidden;
}
#demo-latest-projects .latest-projects .project-item a:before,
#demo-latest-projects .latest-projects .project-item a:after {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
#demo-latest-projects .latest-projects .project-item a:before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000\9;
	background-color: rgba(0,0,0,0.75);
	z-index: 100;
}
#demo-latest-projects .latest-projects .project-item a:after {
	content: "\e61e";
	font-family: 'JSN-Mini-Icon';
	font-size: 1.6em;
	position: absolute;
	display: block;
	width: 80px;
	height: 80px;
	line-height: 70px;
	text-align: center;
	color: #fff;
	top: 40%;
	left: 50%;
	margin-top: -40px;
	margin-left: -40px;
	border: 3px solid #fff;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	z-index: 110;
}
#demo-latest-projects .latest-projects .project-item a:hover:before,
#demo-latest-projects .latest-projects .project-item a:hover:after {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
} 
#demo-latest-projects .latest-projects .project-item a:hover:after {
	top: 50%;
}

/* ===== MAINBODY TOP ===== */
/* TABULOUS by http://git.aaronlumsden.com/tabulous.js/ */
#demo-tab-news {
	padding: 50px 0;
}
#demo-tab-news #tabs {
	width: 1100px;
	max-width: 100%;
	margin: 50px auto;
}

#demo-tab-news ul.tabs_title {
	display: inline-block;
	float: right;
	width: 50%;
	margin: 0;
	padding: 20px 0;
	border-left: 1px solid #e1e1e1;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#demo-tab-news #tabs ul.tabs_title li {
	display: block;
	margin-right: 2px;
	margin: 0;
}

#demo-tab-news #tabs ul.tabs_title li a {
	position: relative;
	display: block;
	padding: 20px 0 20px 60px;
	text-decoration: none;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
#demo-tab-news #tabs ul.tabs_title li a:hover,
#demo-tab-news #tabs ul.tabs_title li a.tabulous_active {
	color: #000;
}
#demo-tab-news #tabs ul.tabs_title li a:before {
	content: "";
	display: block;
	position: absolute;
	left: -10px;
	width: 9px;
	height: 9px;
	background-color: #ddd;
	border: 5px solid #fff;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
#demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	transform: scale(1.5,1.5);
	-moz-transform: scale(1.5,1.5);
	-webkit-transform: scale(1.5,1.5);
}
.jsn-color-blue #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #34a7c8;
}
.jsn-color-red #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #e95e53;
}
.jsn-color-green #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #40af6f;
}
.jsn-color-orange #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #f39c12;
}
.jsn-color-violet #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #b485c7;
}
.jsn-color-grey #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #222;
}

#demo-tab-news #tabs_container {
	overflow: hidden;
	float: left;
	position: relative;
	padding-top: 40px;
	width: 50%;
	color: #999;
	line-height: 2em;
}
#demo-tab-news #tabs_container > div {
	margin-right: 60px;
}
#demo-tab-news #tabs_container .news-title {
	text-transform: uppercase;
	color: #000;
	letter-spacing: 5px;
	font-size: 1.8em;
	margin: 0 0 30px;
}

.transition {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.make_transist {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.hidescale {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
}

.showscale {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.hideleft {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

.showleft {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.hidescaleup {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

.showscaleup {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.hideflip {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;

	-webkit-transform: rotatey(-90deg) scale(1.1);
	-moz-transform: rotatey(-90deg) scale(1.1);
	-o-transform: rotatey(-90deg) scale(1.1);
	-ms-transform: rotatey(-90deg) scale(1.1);
	transform: rotatey(-90deg) scale(1.1);

	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.showflip {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;

	-webkit-transform: rotatey(0deg) scale(1);
	-moz-transform: rotatey(0deg) scale(1);
	-o-transform: rotatey(0deg) scale(1);
	-ms-transform: rotatey(0deg) scale(1);
	transform: rotatey(0deg) scale(1);

	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.tabulousclear {
	display: block;
	clear: both;
}

/* FEATURE GRAPH */
.jsn-demo-page #demo-feature-graph {
	padding: 50px 0;
	background-color: #f6fafc;
}
.jsn-demo-page #demo-feature-graph .feature-graph {
	padding: 0;
}
.jsn-demo-page #demo-feature-graph .feature-graph:first-child {
	border-bottom: 3px solid #cbd4d8;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item {
	overflow: hidden;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
	padding: 60px 0;
	width: 400px;
	max-width: 100%;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="jsn-icon-"] {
	position: relative;
	float: left;
	display: block;
	width: 75px;
	height: 75px;
	color: #fff;
	background-color: #222;
	font-size: 2.5em;
	line-height: 72px;
	text-align: center;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	transform: scale(1,1);
	-moz-transform: scale(1,1);
	-webkit-transform: scale(1,1);
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item-inner:hover [class*="jsn-icon-"] {
	transform: scale(1.5,1.5);
	-moz-transform: scale(1.5,1.5);
	-webkit-transform: scale(1.5,1.5);
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 [class*="jsn-icon-"] {
	background-color: #5bace2;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 [class*="jsn-icon-"] {
	background-color: #6ece97;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 [class*="jsn-icon-"] {
	background-color: #e9974e;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item4 [class*="jsn-icon-"] {
	background-color: #c08dd7;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text {
	padding-left: 120px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text .heading {
	text-transform: uppercase;
	font-size: 1.65em;
	line-height: 1.65em;
	margin: 0;
	padding: 20px 0 0;
	letter-spacing: 3px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner,
.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
	float: right;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner,
.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
	float: left;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
	padding-right: 150px;
}
.jsn-desktop.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
	padding-right: 0;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner {
	padding-left: 50px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
	padding-right: 0;
	width: 350px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
	padding-left: 100px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="jsn-icon-"]:after {
	content: "";
	display: block;
	position: absolute;
	width: 3px;
	height: 200px;
	background-color: #cbd4d8;
	left: 50%;
	margin-left: -2px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 [class*="jsn-icon-"]:after,
.jsn-demo-page #demo-feature-graph .feature-graph .item2 [class*="jsn-icon-"]:after {
	top: 90px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 [class*="jsn-icon-"]:after,
.jsn-demo-page #demo-feature-graph .feature-graph .item4 [class*="jsn-icon-"]:after {
	bottom: 90px;
}

/* ===== COUNTING UP STATISTICS ===== */
.jsn-demo-page #jsn-usermodules1,
.jsn-demo-page #jsn-usermodules2 {
	border: none;
	padding: 0;
}
.jsn-demo-page #demo-countingup-stats {
	background: #2e353c url(../../../media/joomlashine/jsn-mini/custom-html/bg/triangles.jpg) center center fixed;
	background-size: 100% auto;
	color: #fff;
}
.jsn-demo-page #demo-countingup-stats {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
	padding: 100px 0;
}
.jsn-demo-page #demo-countingup-stats .stat-group {
	text-align: center;
	padding: 0 30px;
	border-right: 1px solid rgba(255,255,255,0.1);
}
.jsn-demo-page #demo-countingup-stats .grid-lastcol .stat-group {
	border-right: none;
}
.jsn-demo-page #demo-countingup-stats .stat-group .heading {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 2.2em;
	line-height: 36px;
	margin: 0;
}
.jsn-demo-page #demo-countingup-stats .stat-group .sub-heading {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 1.5em;
	line-height: 20px;
	margin: 0;
	color: #ddd;
	font-weight: 400;
}
.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
	font-family: 'PT Sans', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 8.5em;
	line-height: 90px;
	padding: 30px 0 20px;
	text-transform: uppercase;
	color: #fff;
}
.jsn-demo-page #demo-countingup-stats .stat-group .desc {
	text-transform: uppercase;
	font-size: 1.3em;
	letter-spacing: 4px;
	line-height: 30px;
	margin: 0;
	color: #ddd;
}

/* ===== PROMOTION BOX ===== */
.jsn-demo-page #demo-promotion-box {
	padding: 40px 0;
}
.jsn-demo-page #demo-promotion-box .promotion-box h3 {
	letter-spacing: 2px;
	color: #666;
}
.jsn-demo-page #demo-promotion-box .promotion-box a.link-button {
	float: right;
}

/* ===== MAP INFO ===== */
#demo-map-info .map-wrapper {
	width: 100%;
	height: 160px;
	margin: 15px 0;
}

/* ===== SUBCRIPTION FORM ===== */
/* =============== DEMO CONTACT INFO =============== */
.demo-contact-info .jsn-modulecontent {
	padding: 12px 0;
}
.demo-contact-info .jsn-uniform .jsn-row-container {
	margin: 0;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions {
	margin: 15px 0;
	padding: 0;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions + .jsn-text-center {
	display: none;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions .btn-toolbar {
	margin: 0;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions .btn-toolbar .jsn-form-submit {
	background: #6ece97;
	box-shadow: none;
	border: none;
	color: #fff;
	text-shadow: none;
	font-family: 'PT Sans', Arial, Helvetica, sans-serif;
	cursor: pointer;
	margin: 0;
	padding: 6px 30px;
	display: inline-block;
	text-decoration: none;
	border-radius: 100px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 400 !important;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions .btn-toolbar .jsn-form-submit:hover {
	background-color: #439968;
}
.demo-contact-info .jsn-uniform .jsn-row-container .control-group {
	padding: 0 !important;
}
.demo-contact-info .jsn-uniform .jsn-row-container .control-group.ui-state-highlight {
	border: none !important;
	background: none !important;
}
.demo-contact-info .jsn-uniform .jsn-row-container label {
	display: none !important;
}

.demo-contact-info .jsn-uniform .jsn-row-container input.email {
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 15px 10px;
}
.demo-contact-info .jsn-uniform .demo-contact-desc {
	margin: 5px 0;
	padding: 10px;
}

/* ===== WAYPOINT ONSCROLL ACTION ===== */
/* Waypoint by http://imakewebthings.com/jquery-waypoints/ */

/* Declare scale-fade animation */
@keyframes scale-fade
	{
		0% 		{ 	transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes scale-fade
	{
		0% 		{ 	-moz-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes scale-fade
	{
		0% 		{ 	-webkit-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

/* Declare translate-fade animation */
@keyframes translate-fade
	{
		0% 		{ 	transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes translate-fade
	{
		0% 		{ 	-moz-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes translate-fade
	{
		0% 		{ 	-webkit-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

.appearing .project-item,
.appearing .main-features .feature-item [class*="jsn-icon-"],
.appearing .graph-item .graph-item-inner,
.appearing .stat-group .counting-number {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .project-item,
.appearing.scroll-action .main-features .feature-item [class*="jsn-icon-"],
.appearing.scroll-action .graph-item .graph-item-inner,
.appearing.scroll-action .stat-group .counting-number  {
	-webkit-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	-moz-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.appearing .apple-devices {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: translate(0,50px);
	-webkit-transform: translate(0,50px);
	-ms-transform: translate(0,50px);
	transform: translate(0,50px);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .apple-devices  {
	-webkit-animation: translate-fade 1s 1 ease-in-out;
	-moz-animation: translate-fade 1s 1 ease-in-out;
	animation: translate-fade 1s 1 ease-in-out;
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
}
.scroll-down {
}
.scroll-down.scroll-action {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}


/* ===== RESPONSIVE OPTIMIZING ===== */
@media only screen and (max-width: 1100px), (max-device-width: 1100px) {
	.jsn-desktop #demo-tab-news #tabs_container > div {
		margin-left: 60px;
	}
	.jsn-desktop.jsn-demo-page #demo-feature-graph {
		padding: 50px;
	}
	.jsn-desktop #jsn-pos-content-bottom-below {
		padding: 80px 20px;
	}
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {

	.jsn-mobile.jsn-demo-page #jsn-usermodules1,
	.jsn-mobile.jsn-demo-page #jsn-usermodules2 {
		padding: 0 !important;
	}

	/* Welcome to JSN Mini */
	.jsn-mobile.jsn-demo-page #welcome-to-jsn-mini .welcome .text {
		padding: 0;
	}

	/* Demo main features */
	.jsn-mobile.jsn-demo-page #demo-main-features .main-features {
		padding: 30px 0;
	}

	/* Latest project */
	.jsn-mobile.jsn-demo-page #jsn-pos-user-top {
		padding: 0 !important;
	}

	.jsn-mobile #demo-tab-news {
		padding: 30px 50px;
	}
	
	/* Feature graph */
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
		width: 300px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
		padding-right: 50px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner {
		padding-left: 0;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
		padding-right: 0;
		width: 280px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
		padding-left: 50px;
	}

	/* Counting Stats */
	.jsn-mobile.jsn-demo-page #demo-countingup-stats div.grid-layout4 div.grid-col {
		width: 24.96%;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .heading {
		font-size: 1.4em;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
		font-size: 6em;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .sub-heading,
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .desc {
		font-size: 1em;
	}
	
	/* Promotion box */
	.jsn-mobile.jsn-demo-page #demo-promotion-box .promotion-box h3 {
		font-size: 1em;
	}

}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile.jsn-demo-page .promo-intro-text #promo-intro-text h4 {
		font-size: 1.2em;
	}
	.jsn-mobile.jsn-demo-page .promo-intro-text #promo-intro-text h3 {
		font-size: 2em;
	}
	.jsn-mobile #welcome-to-jsn-mini .welcome .text .heading {
		font-size: 1.4em;
		margin-top: 20px;
	}
	.jsn-mobile #jsn-content-top-below {
		background-size: 300% auto;
	}
	.jsn-mobile.jsn-demo-page #demo-main-features .main-features {
		padding: 20px;
	}
	.jsn-mobile.jsn-demo-page #demo-main-features .main-features .grid-col {
		margin-bottom: 30px;
	}
	.jsn-mobile #demo-latest-projects .latest-projects .grid-col {
		width: 100%;
	}
	.jsn-mobile #demo-latest-projects .section-heading {
		font-size: 1.2em;
		padding: 30px 0;
	}
	.jsn-mobile #demo-tab-news #tabs_container {
		width: 89%;
		padding-top: 0;
	}
	.jsn-mobile #demo-tab-news ul.tabs_title {
		width: 10%;
	}
	.jsn-mobile #demo-tab-news #tabs ul.tabs_title li a {
		text-indent: -1000px;
		padding-left: 0px;
	}
	.jsn-mobile #demo-tab-news #tabs_container .news-title {
		font-size: 1.4em;
		margin-bottom: 10px;
	}
	.jsn-mobile #demo-tab-news #tabs_container > div {
		margin-right: 30px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="jsn-icon-"]:after {
		display: none;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item {
		padding: 0 40px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
		padding: 30px 0;
		float: none;
		width: auto;
		text-align: center;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph:first-child {
		border: none;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text {
		padding-left: 0;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text .heading {
		font-size: 1.2em;
		line-height: 1.8em;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="jsn-icon-"] {
		float: none;
		margin: 0 auto;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item-inner:hover [class*="jsn-icon-"] {
		transform: none;
		-moz-transform: none;
		-webkit-transform: none;
	}
	.jsn-mobile.jsn-demo-page .demo-countingup-stats {
		background-size: 300% auto;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats {
		padding: 60px 0;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats div.grid-layout4 div.grid-col {
		width: 100%;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group {
		padding: 30px 0;
		margin: 0 40px;
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
		padding: 10px 0 0;
	}
	.jsn-mobile.jsn-demo-page #demo-promotion-box .promotion-box a.link-button {
		float: none;
		margin-bottom: 20px;
	}
	.jsn-mobile #jsn-pos-content-bottom-below {
		padding: 60px 40px 40px !important;
	}
	.jsn-mobile #jsn-footermodules {
		padding: 60px 40px !important;
	}
	.jsn-mobile #jsn-pos-content-bottom-below div.jsn-modulecontainer {
		margin-top: 50px;
	}
	.jsn-mobile #jsn-pos-content-bottom-below div.jsn-modulecontainer:first-child {
		margin-top: 0;
	}
}

CSS Fixes for this template

/* Latest Projects - Correct gap between images in mobile view for this template */
@media only screen and (max-width: 480px), (max-device-width: 480px) {  
	div.grid-col {
		margin-bottom: 0px;
	}
}

/* Tabulous - Fixes White / Missing Balls */
/* Correct an applied global rule - template.css line 8 */ 
	*:before,
	*:after {
		box-sizing: content-box;
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
}

Javascript

/* ==================== JSN MINI CUSTOM JS ==================== */

// i have seperated out each complete function with //----------------------------------------
// use the whole file for Mini effects and just delete stuff you do not want

setTimeout(function() {
(function($) {
	
//----------------------------------------

// Tabulous - The Vertical Line Thing

/* Set negative margin-top value to #jsn-promo */
/* Tab function */
(function ( $, window, document, undefined ) {

	var pluginName = "tabulous",
		defaults = {
			effect: 'scale'
		};

	   // $('<style>body { background-color: red; color: white; }</style>').appendTo('head');

	function Plugin( element, options ) {
		this.element = element;
		this.$elem = $(this.element);
		this.options = $.extend( {}, defaults, options );
		this._defaults = defaults;
		this._name = pluginName;
		this.init();
	}

	Plugin.prototype = {

		init: function() {

			var links = this.$elem.find('ul li a');
			var firstchild = this.$elem.find('li:first-child').find('a');
			var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');

			if (this.options.effect == 'scale') {
			 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
			} else if (this.options.effect == 'slideLeft') {
				 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
			} else if (this.options.effect == 'scaleUp') {
				 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
			} else if (this.options.effect == 'flip') {
				 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
			}

			var firstdiv = this.$elem.find('#tabs_container');
			var firstdivheight = firstdiv.find('div:first').height();

			var alldivs = this.$elem.find('div:first').find('div');

			alldivs.css({'position': 'absolute'});

			firstdiv.css('height',firstdivheight+'px');

			firstchild.addClass('tabulous_active');

			links.bind('click', {myOptions: this.options}, function(e) {
				e.preventDefault();

				var $options = e.data.myOptions;
				var effect = $options.effect;

				var mythis = $(this);
				var thisform = mythis.parent().parent().parent();
				var thislink = mythis.attr('href');


				firstdiv.addClass('transition');

				links.removeClass('tabulous_active');
				mythis.addClass('tabulous_active');
				thisdivwidth = thisform.find('div'+thislink).height();

				if (effect == 'scale') {
					alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
					thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');
				} else if (effect == 'slideLeft') {
					alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
					thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');
				} else if (effect == 'scaleUp') {
					alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
					thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');
				} else if (effect == 'flip') {
					alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
					thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');
				}

				firstdiv.css('height',thisdivwidth+'px');

			});         
			
		},

		yourOtherFunction: function(el, options) {
			// some logic
		}
	};

	// A really lightweight plugin wrapper around the constructor,
	// preventing against multiple instantiations
	$.fn[pluginName] = function ( options ) {
		return this.each(function () {
			new Plugin( this, options );
		});
	};

})( jQuery, window, document );

//----------------------------------------

// intiates the Waypoints codebase
// This causes animations to be paused until triggered by the Waypoints code
// Waypoints are configured later


/* Waypoints */
(function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(window,function(n,r){var i,o,l,s,f,u,c,a,h,d,p,y,v,w,g,m;i=n(r);a=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;c={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};this.element[u]=this.id;c[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||a)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(a&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return l.push(e)}});l.sort(function(t,e){return t.offset-e.offset});if(!o){l.reverse()}return n.each(l,function(t,e){if(e.options.continuous||t===l.length-1){return e.trigger([i])}})});return this.oldScroll={x:t.horizontal.newScroll,y:t.vertical.newScroll}};t.prototype.refresh=function(){var t,e,r,i=this;r=n.isWindow(this.element);e=this.$element.offset();this.doScroll();t={horizontal:{contextOffset:r?0:e.left,contextScroll:r?0:this.oldScroll.x,contextDimension:this.$element.width(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:r?0:e.top,contextScroll:r?0:this.oldScroll.y,contextDimension:r?n[m]("viewportHeight"):this.$element.height(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};return n.each(t,function(t,e){return n.each(i.waypoints[t],function(t,r){var i,o,l,s,f;i=r.options.offset;l=r.offset;o=n.isWindow(r.element)?0:r.$element.offset()[e.offsetProp];if(n.isFunction(i)){i=i.apply(r.element)}else if(typeof i==="string"){i=parseFloat(i);if(r.options.offset.indexOf("%")>-1){i=Math.ceil(e.contextDimension*i/100)}}r.offset=o-e.contextOffset+e.contextScroll-i;if(r.options.onlyOnScroll&&l!=null||!r.enabled){return}if(l!==null&&l<(s=e.oldScroll)&&s<=r.offset){return r.trigger([e.backward])}else if(l!==null&&l>(f=e.oldScroll)&&f>=r.offset){return r.trigger([e.forward])}else if(l===null&&e.oldScroll>=r.offset){return r.trigger([e.forward])}})})};t.prototype.checkEmpty=function(){if(n.isEmptyObject(this.waypoints.horizontal)&&n.isEmptyObject(this.waypoints.vertical)){this.$element.unbind([p,y].join(" "));return delete c[this.id]}};return t}();l=function(){function t(t,e,r){var i,o;if(r.offset==="bottom-in-view"){r.offset=function(){var t;t=n[m]("viewportHeight");if(!n.isWindow(e.element)){t=e.$element.height()}return t-n(this).outerHeight()}}this.$element=t;this.element=t[0];this.axis=r.horizontal?"horizontal":"vertical";this.callback=r.handler;this.context=e;this.enabled=r.enabled;this.id="waypoints"+v++;this.offset=null;this.options=r;e.waypoints[this.axis][this.id]=this;s[this.axis][this.id]=this;i=(o=this.element[w])!=null?o:[];i.push(this.id);this.element[w]=i}t.prototype.trigger=function(t){if(!this.enabled){return}if(this.callback!=null){this.callback.apply(this.element,t)}if(this.options.triggerOnce){return this.destroy()}};t.prototype.disable=function(){return this.enabled=false};t.prototype.enable=function(){this.context.refresh();return this.enabled=true};t.prototype.destroy=function(){delete s[this.axis][this.id];delete this.context.waypoints[this.axis][this.id];return this.context.checkEmpty()};t.getWaypointsByElement=function(t){var e,r;r=t[w];if(!r){return[]}e=n.extend({},s.horizontal,s.vertical);return n.map(r,function(t){return e[t]})};return t}();d={init:function(t,e){var r;e=n.extend({},n.fn[g].defaults,e);if((r=e.handler)==null){e.handler=t}this.each(function(){var t,r,i,s;t=n(this);i=(s=e.context)!=null?s:n.fn[g].defaults.context;if(!n.isWindow(i)){i=t.closest(i)}i=n(i);r=c[i[0][u]];if(!r){r=new o(i)}return new l(t,r,e)});n[m]("refresh");return this},disable:function(){return d._invoke.call(this,"disable")},enable:function(){return d._invoke.call(this,"enable")},destroy:function(){return d._invoke.call(this,"destroy")},prev:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e>0){return t.push(n[e-1])}})},next:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e<n.length-1){return t.push(n[e+1])}})},_traverse:function(t,e,i){var o,l;if(t==null){t="vertical"}if(e==null){e=r}l=h.aggregate(e);o=[];this.each(function(){var e;e=n.inArray(this,l[t]);return i(o,e,l[t])});return this.pushStack(o)},_invoke:function(t){this.each(function(){var e;e=l.getWaypointsByElement(this);return n.each(e,function(e,n){n[t]();return true})});return this}};n.fn[g]=function(){var t,r;r=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(d[r]){return d[r].apply(this,t)}else if(n.isFunction(r)){return d.init.apply(this,arguments)}else if(n.isPlainObject(r)){return d.init.apply(this,[null,r])}else if(!r){return n.error("jQuery Waypoints needs a callback function or handler option.")}else{return n.error("The "+r+" method does not exist in jQuery Waypoints.")}};n.fn[g].defaults={context:r,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};h={refresh:function(){return n.each(c,function(t,e){return e.refresh()})},viewportHeight:function(){var t;return(t=r.innerHeight)!=null?t:i.height()},aggregate:function(t){var e,r,i;e=s;if(t){e=(i=c[n(t)[0][u]])!=null?i.waypoints:void 0}if(!e){return[]}r={horizontal:[],vertical:[]};n.each(r,function(t,i){n.each(e[t],function(t,e){return i.push(e)});i.sort(function(t,e){return t.offset-e.offset});r[t]=n.map(i,function(t){return t.element});return r[t]=n.unique(r[t])});return r},above:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset<=t.oldScroll.y})},below:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset>t.oldScroll.y})},left:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset<=t.oldScroll.x})},right:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset>t.oldScroll.x})},enable:function(){return h._invoke("enable")},disable:function(){return h._invoke("disable")},destroy:function(){return h._invoke("destroy")},extendFn:function(t,e){return d[t]=e},_invoke:function(t){var e;e=n.extend({},s.vertical,s.horizontal);return n.each(e,function(e,n){n[t]();return true})},_filter:function(t,e,r){var i,o;i=c[n(t)[0][u]];if(!i){return[]}o=[];n.each(i.waypoints[e],function(t,e){if(r(i,e)){return o.push(e)}});o.sort(function(t,e){return t.offset-e.offset});return n.map(o,function(t){return t.element})}};n[m]=function(){var t,n;n=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(h[n]){return h[n].apply(null,t)}else{return h.aggregate.call(null,n)}};n[m].settings={resizeThrottle:100,scrollThrottle:30};return i.on("load.waypoints",function(){return n[m]("refresh")})})}).call(this);

//----------------------------------------

// The 'Counting Up' module with 4 numbers 


/* Count Up */
function countUp(a,b,c,d,e,f){for(var g=0,h=["webkit","moz","ms"],i=0;i<h.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[h[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[h[i]+"CancelAnimationFrame"]||window[h[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(a){var c=(new Date).getTime(),d=Math.max(0,16-(c-g)),e=window.setTimeout(function(){a(c+d)},d);return g=c+d,e}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)}),this.options=f||{useEasing:!0,useGrouping:!0,separator:",",decimal:"."},""==this.options.separator&&(this.options.useGrouping=!1);var j=this;this.d="string"==typeof a?document.getElementById(a):a,this.startVal=Number(b),this.endVal=Number(c),this.countDown=this.startVal>this.endVal?!0:!1,this.startTime=null,this.timestamp=null,this.remaining=null,this.frameVal=this.startVal,this.rAF=null,this.decimals=Math.max(0,d||0),this.dec=Math.pow(10,this.decimals),this.duration=1e3*e||2e3,this.version=function(){return"1.1.1"},this.easeOutExpo=function(a,b,c,d){return 1024*c*(-Math.pow(2,-10*a/d)+1)/1023+b},this.count=function(a){null===j.startTime&&(j.startTime=a),j.timestamp=a;var b=a-j.startTime;if(j.remaining=j.duration-b,j.options.useEasing)if(j.countDown){var c=j.easeOutExpo(b,0,j.startVal-j.endVal,j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.easeOutExpo(b,j.startVal,j.endVal-j.startVal,j.duration);else if(j.countDown){var c=(j.startVal-j.endVal)*(b/j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.startVal+(j.endVal-j.startVal)*(b/j.duration);j.frameVal=Math.round(j.frameVal*j.dec)/j.dec,j.frameVal=j.countDown?j.frameVal<j.endVal?j.endVal:j.frameVal:j.frameVal>j.endVal?j.endVal:j.frameVal,j.d.innerHTML=j.formatNumber(j.frameVal.toFixed(j.decimals)),b<j.duration?j.rAF=requestAnimationFrame(j.count):null!=j.callback&&j.callback()},this.start=function(a){return j.callback=a,isNaN(j.endVal)||isNaN(j.startVal)?(console.log("countUp error: startVal or endVal is not a number"),j.d.innerHTML="--"):j.rAF=requestAnimationFrame(j.count),!1},this.stop=function(){cancelAnimationFrame(j.rAF)},this.reset=function(){j.startTime=null,cancelAnimationFrame(j.rAF),j.d.innerHTML=j.formatNumber(j.startVal.toFixed(j.decimals))},this.resume=function(){j.startTime=null,j.duration=j.remaining,j.startVal=j.frameVal,requestAnimationFrame(j.count)},this.formatNumber=function(a){a+="";var b,c,d,e;if(b=a.split("."),c=b[0],d=b.length>1?j.options.decimal+b[1]:"",e=/(\d+)(\d{3})/,j.options.useGrouping)for(;e.test(c);)c=c.replace(e,"$1"+j.options.separator+"$2");return c+d},j.d.innerHTML=j.formatNumber(j.startVal.toFixed(j.decimals))}

/* i think this set the physical dimensions in readyness for Counting Up */
function setHeightToHeaderElement()
	{
		var height = $(window).height();
		var TopHeaderHeight = 0;
		var HeaderHeight = 0;
		var TopBarHeight = 0;
		var PosPromoHeight = 0;
		if (typeof $('#jsn-topheader') !== 'undefined')
		{
			var TopHeaderHeight = $('#jsn-topheader').outerHeight();
		}
		if (typeof $('#jsn-header') !== 'undefined')
		{
			var HeaderHeight = $('#jsn-header').outerHeight();
		}

		if (typeof $('#jsn-topbar') !== 'undefined')
		{
			var TopBarHeight = $('#jsn-topbar').outerHeight();
		}
		if (typeof $('#jsn-pos-promo') !== 'undefined')
		{
			var PosPromoHeight = $('#jsn-pos-promo').outerHeight();
		}	
		var topMarginOffsetPromo =  - (TopHeaderHeight + HeaderHeight + TopBarHeight);
		var topMarginOffsetIS = - (height / 2);
		$( '#jsn-promo' ).css('margin-top',topMarginOffsetPromo+'px'); // Set negative margin value for #jsn promo
		$( '#jsn-promo' ).height(height); // Set height to #jsn-promo equals to height of windows
		$( '#jsn-pos-promo' ).css('margin-top',topMarginOffsetIS+'px'); // Set margin-top to #jsn-pos-promo to vertically align it
		$( '#jsn-pos-promo' ).height(height);
	}

//----------------------------------------
	
/* Perform smooth scrolling */
$(document).ready(function ()
		{
	$('a.smooth[href*=#]:not([href=#])').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
		var target = $(this.hash);
		target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
		if (target.length) {
			$('html,body').animate({
				scrollTop: target.offset().top
			}, 600);
			return false;
		}
	}
	});
});

//----------------------------------------

/* Add style for sticky menu when scroll down an specific distance from top */

	$(window).on("scroll", function() 
		{
			var startScroll = $(window).scrollTop();
			if ($( "#jsn-master" ).hasClass( "jsn-demo-page" ))
				{
					if (startScroll >= 300)
					{
						$( '#jsn-header' ).addClass( 'hasbg' );
					}
					else
					{
						$( '#jsn-header' ).removeClass( 'hasbg' );
					}
				}
		});
	
//----------------------------------------

// Now the javascript has been setup this code triggers all the effects
		
$(document).ready( function() 
	{
	/* Add class 'fullwidth' to element if in #jsn-master.jsn-demo-page */
	// To make the promo area full width
		if ($( "#jsn-master" ).hasClass( "jsn-demo-page" ))
		{
			$( '#jsn-promo-inner' ).addClass( 'fullwidth' );
			$( '#jsn-content' ).addClass( 'fullwidth' );
			setHeightToHeaderElement();
		};

	/* Fabulous tab news */
		$('#tabs').tabulous({
			effect: 'scale' // Available effects: scale, slideLeft, scaleUp, flip
		});

	/* Add timeout for animation */
	// 'Back to', simplicity, the 6 grid with icons starting 'modern design'
		setTimeout(function(){
			$(".ping.title").addClass("pop");
		},1000);
		setTimeout(function(){
			$(".ping.desc").addClass("pop");
		},1200);
		setTimeout(function(){
			$(".ping.scroll-down").addClass("pop");
		},4500);

		/* Waypoint script to add action when scroll onto objects */
		/* This effect brought by http://imakewebthings.com/jquery-waypoints/ */
		
		// This sets the Waypoint triggers
		// Waypoints is the easiest way to trigger a function when you scroll to an element.
		// this adds a scrolling action to elements but not the 'counting up'
		// delete the ones you dont use
		
		$( 'a.scroll-down' ).waypoint(function()
			{
				$( 'a.scroll-down' ).addClass( 'scroll-action' );
			}, {
				offset: '25%'
			})
		$( '#welcome-to-jsn-mini' ).waypoint(function()
			{
				$( '#welcome-to-jsn-mini' ).addClass( 'scroll-action' );
			}, {
				offset: '75%'
			})
		$( '#demo-latest-projects' ).waypoint(function()
			{
				$( '#demo-latest-projects' ).addClass( 'scroll-action' );
			}, {
				offset: '70%'
			})
		$( '#demo-main-features' ).waypoint(function()
			{
				$( '#demo-main-features' ).addClass( 'scroll-action' );
			}, {
				offset: '70%'
			})
		$( '#demo-feature-graph' ).waypoint(function()
			{
				$( '#demo-feature-graph' ).addClass( 'scroll-action' );
			}, {
				offset: '70%'
			})

		/* CountUp Number by https://github.com/inorganik/countUp.js */
		if ($('#jsn-master').hasClass('jsn-demo-page')) {
		if (typeof(countUp) !== 'undefined')
		{
			var options = {
			  useEasing : true, 
			  useGrouping : true, 
			  separator : ',', 
			  decimal : '.' 
			}
			// set the counting up module numbers here
			// ( Starting Number / Target Number / Number of decimals / Time to get to Final Number / Additional Options)
			// ( startVal / endVal / decimals / duration / options )
			var countup1 = new countUp("counting-1", 01, 36, 0, 5, options);
			var countup2 = new countUp("counting-2", 01, 54, 0, 5, options);
			var countup3 = new countUp("counting-3", 01, 12, 0, 5, options);
			var countup4 = new countUp("counting-4", 01, 90, 0, 5, options);
		}

		$( '#demo-countingup-stats' ).waypoint(function()
			{
				$( '#demo-countingup-stats' ).addClass( 'scroll-action' );
				countup1.start();
				countup2.start();
				countup3.start();
				countup4.start();
			}, {
				offset: '80%'
			})
		}
		/* Parallax Scrolling */
		// this scolls the background images behind the modules
		$('.demo-countingup-stats').attr('data-type', 'background');
		$('.demo-countingup-stats').attr('data-speed', '3');

		if ($( "#jsn-master" ).hasClass( "jsn-demo-page" ))
		{
			$('#jsn-content-top-below').attr('data-type', 'background');
			$('#jsn-content-top-below').attr('data-speed', '3');
		}

		$('div[data-type="background"]').each(function(){
			var $bgobj = $(this); // assigning the object
		 
			$window = $(window);
			$(window).scroll(function() {
				var yPos = -($window.scrollTop() / $bgobj.data('speed')); 
				 
				// Put together our final background position
				var coords = '50% '+ yPos + 'px';
	 
				// Move the background
				$bgobj.css({ backgroundPosition: coords });
			}); 
		});

	});		
	
//----------------------------------------		

})(jQuery);
}, 0);

HTML

<div id="demo-main-features" class="appearing">
	<div class="grid-layout main-features">
		<div class="grid-col">
			<div class="feature-item">
				<a href="#"><span class="jsn-icon-pencil-ruler"></span></a>
				<h3 class="heading">Modern Design</h3>
				<p class="desc">Flat design – currently growing in popularity</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="feature-item">
				<a href="#"><span class="jsn-icon-book"></span></a>
				<h3 class="heading">Full Documentation</h3>
				<p class="desc">JSN Mini is equipped with a very comprehensive documentation package that will help you with template utilization.</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="feature-item">
				<a href="#"><span class="jsn-icon-lightning"></span></a>
				<h3 class="heading">Painless Configuration</h3>
				<p class="desc">You can configure the template the way you like without special technical knowledge</p>
			</div>
		</div>
	</div>
	<div class="grid-layout main-features">
		<div class="grid-col">
			<div class="feature-item">
				<a href="#"><span class="jsn-icon-eye"></span></a>
				<h3 class="heading">Responsive design</h3>
				<p class="desc">Special built-in design optimized for modern mobile devices such as iPhone, Android and Windows-based mobiles</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="feature-item">
				<a href="#"><span class="jsn-icon-equalizer"></span></a>
				<h3 class="heading">Multi-language support</h3>
				<p class="desc"> Currently, the template supports 14 languages for both front-end and back-end.</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="feature-item">
				<a href="#"><span class="jsn-icon-diamond"></span></a>
				<h3 class="heading">Social media integrated</h3>
				<p class="desc">You are free to integrate your social channels without digging into the code</p>
			</div>
		</div>
	</div>
</div>

<div id="demo-latest-projects" class="appearing">
	<h2 class="section-heading">Our latest projects</h2>
	<div class="grid-layout latest-projects">
		<div class="grid-col">
			<div class="project-item">
				<a href="/media/joomlashine/jsn-mini/custom-html/latest-projects/1.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
					<img src="/media/joomlashine/jsn-mini/custom-html/latest-projects/1.jpg" alt="" />
				</a>
			</div>
		</div>
		<div class="grid-col">
			<div class="project-item">
				<a href="/media/joomlashine/jsn-mini/custom-html/latest-projects/2.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
					<img src="/media/joomlashine/jsn-mini/custom-html/latest-projects/2.jpg" alt="" />
				</a>
			</div>
		</div>
		<div class="grid-col">
			<div class="project-item">
				<a href="/media/joomlashine/jsn-mini/custom-html/latest-projects/3.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
					<img src="/media/joomlashine/jsn-mini/custom-html/latest-projects/3.jpg" alt="" />
				</a>
			</div>
		</div>
		<div class="grid-col">
			<div class="project-item">
				<a href="/media/joomlashine/jsn-mini/custom-html/latest-projects/4.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
					<img src="/media/joomlashine/jsn-mini/custom-html/latest-projects/4.jpg" alt="" />
				</a>
			</div>
		</div>
	</div>
</div>

<div id="demo-tab-news">
	<div id="tabs" class="clearfix">

		<div id="tabs_container">

			<div id="tabs-1">
				<h3 class="news-title">Minimalist Style</h3>
				<p>A style that uses pared-down design elements, removing everything in a piece, leaving just the necessary and needed elements</p>
			</div>

			<div id="tabs-2">
				<h3 class="news-title">130+ font-icons for many purposes</h3>
				<p>JSN Mini is also the first JoomlaShine template with 130+ outstanding font icons for you to choose from.</p>
		
			</div>

			<div id="tabs-3">
				<h3 class="news-title">Extended style for three extensions</h3>
				<p>JSN Mini is well-crafted with extended styles for three extensions: Advanced Portfolio from ExtStore, Kunena and K2.</p>
			</div>

			<div id="tabs-4">
				<h3 class="news-title">Joomla! 2.5 &3.x Compatibility</h3>
				<p>Natively compatible with Joomla! 2.5 & Joomla! 3.x versions</p>
				
			</div>

			<div id="tabs-5">
				<h3 class="news-title">Sticky menu </h3>
				<p>Sticky menu makes websites quicker to navigate.</p>
				
			</div>

		</div><!--End tabs container-->

		<ul class="tabs_title">
			<li><a href="#tabs-1" title="">Minimalist Style</a></li>
			<li><a href="#tabs-2" title="">130+ font-icons for many purposes</a></li>
			<li><a href="#tabs-3" title="">Extended style for three extensions</a></li>
			<li><a href="#tabs-4" title="">Joomla! 2.5 &3.x Compatibility</a></li>
			<li><a href="#tabs-5" title="">Sticky menu </a></li>
		</ul>
		
	</div><!--End tabs-->	
</div>

<div id="demo-feature-graph" class="appearing">

	<div class="grid-layout feature-graph">
		<div class="grid-col">
			<div class="graph-item item1 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="jsn-icon-cup"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Easy to start</a></h3>
						<p class="desc">JSN PowerAdmin facilitates delightful management and customization your Joomla website with ease and joy.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-col">
			<div class="graph-item item2 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="jsn-icon-basketball"></a>
					<div class="text">
						<h3 class="heading"><a href="#">SEO Optimized</a></h3>
						<p class="desc">Pure html override and 2-1-3 ordered content presentation help search engines easily crawl the site.</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="grid-layout feature-graph">
		<div class="grid-col">
			<div class="graph-item item3 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="jsn-icon-handspeaker"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Various Colors</a></h3>
						<p class="desc">6 color variations including blue, red, green, violet, orange and grey.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-col">
			<div class="graph-item item4 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="jsn-icon-command"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Portfolio Design</a></h3>
						<p class="desc">JSN Mini is dedicated to portfolio websites.</p>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>

<div id="demo-countingup-stats" class="appearing">
	<div class="grid-layout countingup-stats">
		<div class="grid-col">
			<div class="stat-group">
				<h3 class="heading"><a href="#">Our Team</a></h3>
				<h4 class="sub-heading">Powered by</h4>
				<div id="counting-1" class="counting-number">01</div>
				<p class="desc">Soldiers</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="stat-group">
				<h3 class="heading"><a href="#">Works</a></h3>
				<h4 class="sub-heading">Done</h4>
				<div id="counting-2" class="counting-number">01</div>
				<p class="desc">Projects</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="stat-group">
				<h3 class="heading"><a href="#">Design</a></h3>
				<h4 class="sub-heading">Winning</h4>
				<div id="counting-3" class="counting-number">01</div>
				<p class="desc">Awards</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="stat-group">
				<h3 class="heading"><a href="#">Client</a></h3>
				<h4 class="sub-heading">Quantity</h4>
				<div id="counting-4" class="counting-number">01</div>
				<p class="desc">And more</p>
			</div>
		</div>
	</div>
</div>

Notes

The code is untouched from the JSN Mini Template
This is for reference only aas these modules have be made standalone elsewhere in the KB
You need to add the page suffix jsn-demo-page to get this working or

you can wrap the code in

<div class="jsn-mobile jsn-demo-page">

</div>

This code is not 100% working, use the standalone version of the modules if you want them.
Instuctions on those articles hold the information on how to get the missing icons and other broken things working

Published in Joomlashine

Saturday, 20 February 2016 12:26

Main Features

6 Item Grid with FontAwesome Icons than animate in (possibly when displayed on screen and not straight away) and a Parallax Scrolling background.

Modern Design

Flat design â€“ currently growing in popularity

Full Documentation

JSN Mini is equipped with a very comprehensive documentation package that will help you with template utilization.

Painless Configuration

You can configure the template the way you like without special technical knowledge

Responsive design

Special built-in design optimized for modern mobile devices such as iPhone, Android and Windows-based mobiles

Multi-language support

Currently, the template supports 14 languages for both front-end and back-end.

Social media integrated

You are free to integrate your social channels without digging into the code

CSS

/* ===== Main Features ===== */
#off-jsn-content-top-below, #demo-main-features {
	background: url(../../../media/joomlashine/jsn-mini/custom-html/bg/workplace.jpg) center center fixed;
	background-size: 100% auto;
}
#demo-main-features {
	padding: 30px 0;
}
#demo-main-features .main-features {
	padding: 40px 0;
}
#demo-main-features .main-features .grid-col_inner {
	padding: 0 20px;
}
#demo-main-features .main-features .feature-item [class*="fa fa-"] {
	font-size: 2.5em;
}
#demo-main-features .main-features .feature-item .heading {
	color: #fff;
	text-transform: uppercase;
	font-size: 1.2em;
	letter-spacing: 5px;
}
#demo-main-features .main-features .feature-item .desc {
	color: #999;
}

CSS (Optional / Animation / Waypoints)

/* ===== WAYPOINT ONSCROLL ACTION ===== */
/* Waypoint by http://imakewebthings.com/jquery-waypoints/ */

/* Declare scale-fade animation */
@keyframes scale-fade
	{
		0% 		{ 	transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes scale-fade
	{
		0% 		{ 	-moz-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes scale-fade
	{
		0% 		{ 	-webkit-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

/* Declare translate-fade animation */
@keyframes translate-fade
	{
		0% 		{ 	transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes translate-fade
	{
		0% 		{ 	-moz-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes translate-fade
	{
		0% 		{ 	-webkit-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

.appearing .project-item,
.appearing .main-features .feature-item [class*="fa fa-"],
.appearing .graph-item .graph-item-inner,
.appearing .stat-group .counting-number {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .project-item,
.appearing.scroll-action .main-features .feature-item [class*="fa fa-"],
.appearing.scroll-action .graph-item .graph-item-inner,
.appearing.scroll-action .stat-group .counting-number  {
	-webkit-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	-moz-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.appearing .apple-devices {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: translate(0,50px);
	-webkit-transform: translate(0,50px);
	-ms-transform: translate(0,50px);
	transform: translate(0,50px);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .apple-devices  {
	-webkit-animation: translate-fade 1s 1 ease-in-out;
	-moz-animation: translate-fade 1s 1 ease-in-out;
	animation: translate-fade 1s 1 ease-in-out;
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
}
.scroll-down {
}
.scroll-down.scroll-action {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

JS (Optional / Animation / Waypoints)

/* ==================== JSN MINI CUSTOM JS ==================== */
setTimeout(function() {
(function($) {

//----------------------------------------
	
// intiates the Waypoints codebase
// This causes animations to be paused until triggered by the Waypoints code
// Waypoints are configured later


/* Waypoints */
(function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(window,function(n,r){var i,o,l,s,f,u,c,a,h,d,p,y,v,w,g,m;i=n(r);a=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;c={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};this.element[u]=this.id;c[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||a)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(a&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return l.push(e)}});l.sort(function(t,e){return t.offset-e.offset});if(!o){l.reverse()}return n.each(l,function(t,e){if(e.options.continuous||t===l.length-1){return e.trigger([i])}})});return this.oldScroll={x:t.horizontal.newScroll,y:t.vertical.newScroll}};t.prototype.refresh=function(){var t,e,r,i=this;r=n.isWindow(this.element);e=this.$element.offset();this.doScroll();t={horizontal:{contextOffset:r?0:e.left,contextScroll:r?0:this.oldScroll.x,contextDimension:this.$element.width(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:r?0:e.top,contextScroll:r?0:this.oldScroll.y,contextDimension:r?n[m]("viewportHeight"):this.$element.height(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};return n.each(t,function(t,e){return n.each(i.waypoints[t],function(t,r){var i,o,l,s,f;i=r.options.offset;l=r.offset;o=n.isWindow(r.element)?0:r.$element.offset()[e.offsetProp];if(n.isFunction(i)){i=i.apply(r.element)}else if(typeof i==="string"){i=parseFloat(i);if(r.options.offset.indexOf("%")>-1){i=Math.ceil(e.contextDimension*i/100)}}r.offset=o-e.contextOffset+e.contextScroll-i;if(r.options.onlyOnScroll&&l!=null||!r.enabled){return}if(l!==null&&l<(s=e.oldScroll)&&s<=r.offset){return r.trigger([e.backward])}else if(l!==null&&l>(f=e.oldScroll)&&f>=r.offset){return r.trigger([e.forward])}else if(l===null&&e.oldScroll>=r.offset){return r.trigger([e.forward])}})})};t.prototype.checkEmpty=function(){if(n.isEmptyObject(this.waypoints.horizontal)&&n.isEmptyObject(this.waypoints.vertical)){this.$element.unbind([p,y].join(" "));return delete c[this.id]}};return t}();l=function(){function t(t,e,r){var i,o;if(r.offset==="bottom-in-view"){r.offset=function(){var t;t=n[m]("viewportHeight");if(!n.isWindow(e.element)){t=e.$element.height()}return t-n(this).outerHeight()}}this.$element=t;this.element=t[0];this.axis=r.horizontal?"horizontal":"vertical";this.callback=r.handler;this.context=e;this.enabled=r.enabled;this.id="waypoints"+v++;this.offset=null;this.options=r;e.waypoints[this.axis][this.id]=this;s[this.axis][this.id]=this;i=(o=this.element[w])!=null?o:[];i.push(this.id);this.element[w]=i}t.prototype.trigger=function(t){if(!this.enabled){return}if(this.callback!=null){this.callback.apply(this.element,t)}if(this.options.triggerOnce){return this.destroy()}};t.prototype.disable=function(){return this.enabled=false};t.prototype.enable=function(){this.context.refresh();return this.enabled=true};t.prototype.destroy=function(){delete s[this.axis][this.id];delete this.context.waypoints[this.axis][this.id];return this.context.checkEmpty()};t.getWaypointsByElement=function(t){var e,r;r=t[w];if(!r){return[]}e=n.extend({},s.horizontal,s.vertical);return n.map(r,function(t){return e[t]})};return t}();d={init:function(t,e){var r;e=n.extend({},n.fn[g].defaults,e);if((r=e.handler)==null){e.handler=t}this.each(function(){var t,r,i,s;t=n(this);i=(s=e.context)!=null?s:n.fn[g].defaults.context;if(!n.isWindow(i)){i=t.closest(i)}i=n(i);r=c[i[0][u]];if(!r){r=new o(i)}return new l(t,r,e)});n[m]("refresh");return this},disable:function(){return d._invoke.call(this,"disable")},enable:function(){return d._invoke.call(this,"enable")},destroy:function(){return d._invoke.call(this,"destroy")},prev:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e>0){return t.push(n[e-1])}})},next:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e<n.length-1){return t.push(n[e+1])}})},_traverse:function(t,e,i){var o,l;if(t==null){t="vertical"}if(e==null){e=r}l=h.aggregate(e);o=[];this.each(function(){var e;e=n.inArray(this,l[t]);return i(o,e,l[t])});return this.pushStack(o)},_invoke:function(t){this.each(function(){var e;e=l.getWaypointsByElement(this);return n.each(e,function(e,n){n[t]();return true})});return this}};n.fn[g]=function(){var t,r;r=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(d[r]){return d[r].apply(this,t)}else if(n.isFunction(r)){return d.init.apply(this,arguments)}else if(n.isPlainObject(r)){return d.init.apply(this,[null,r])}else if(!r){return n.error("jQuery Waypoints needs a callback function or handler option.")}else{return n.error("The "+r+" method does not exist in jQuery Waypoints.")}};n.fn[g].defaults={context:r,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};h={refresh:function(){return n.each(c,function(t,e){return e.refresh()})},viewportHeight:function(){var t;return(t=r.innerHeight)!=null?t:i.height()},aggregate:function(t){var e,r,i;e=s;if(t){e=(i=c[n(t)[0][u]])!=null?i.waypoints:void 0}if(!e){return[]}r={horizontal:[],vertical:[]};n.each(r,function(t,i){n.each(e[t],function(t,e){return i.push(e)});i.sort(function(t,e){return t.offset-e.offset});r[t]=n.map(i,function(t){return t.element});return r[t]=n.unique(r[t])});return r},above:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset<=t.oldScroll.y})},below:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset>t.oldScroll.y})},left:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset<=t.oldScroll.x})},right:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset>t.oldScroll.x})},enable:function(){return h._invoke("enable")},disable:function(){return h._invoke("disable")},destroy:function(){return h._invoke("destroy")},extendFn:function(t,e){return d[t]=e},_invoke:function(t){var e;e=n.extend({},s.vertical,s.horizontal);return n.each(e,function(e,n){n[t]();return true})},_filter:function(t,e,r){var i,o;i=c[n(t)[0][u]];if(!i){return[]}o=[];n.each(i.waypoints[e],function(t,e){if(r(i,e)){return o.push(e)}});o.sort(function(t,e){return t.offset-e.offset});return n.map(o,function(t){return t.element})}};n[m]=function(){var t,n;n=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(h[n]){return h[n].apply(null,t)}else{return h.aggregate.call(null,n)}};n[m].settings={resizeThrottle:100,scrollThrottle:30};return i.on("load.waypoints",function(){return n[m]("refresh")})})}).call(this);

//----------------------------------------

// Now the javascript has been setup this code triggers all the effects
		
$(document).ready( function() 
	{
	
	/* Add timeout for animation */
	// 'Back to', simplicity, the 6 grid with icons starting 'modern design'
		setTimeout(function(){
			$(".ping.title").addClass("pop");
		},1000);
		setTimeout(function(){
			$(".ping.desc").addClass("pop");
		},1200);
		setTimeout(function(){
			$(".ping.scroll-down").addClass("pop");
		},4500);

		/* Waypoint script to add action when scroll onto objects */
		/* This effect brought by http://imakewebthings.com/jquery-waypoints/ */
		
		// This sets the Waypoint triggers
		// Waypoints is the easiest way to trigger a function when you scroll to an element.
		// this adds a scrolling action to elements but not the 'counting up'
		// delete the ones you dont use		
		$( '#demo-main-features' ).waypoint(function()
			{
				$( '#demo-main-features' ).addClass( 'scroll-action' );
			}, {
				offset: '70%'
			})
		
		/* Parallax Scrolling */
		// this scolls the background images behind the modules
		$('.demo-countingup-stats').attr('data-type', 'background');
		$('.demo-countingup-stats').attr('data-speed', '3');

		if ($( "#jsn-master" ).hasClass( "jsn-demo-page" ))
		{
			$('#jsn-content-top-below').attr('data-type', 'background');
			$('#jsn-content-top-below').attr('data-speed', '3');
		}

		$('div[data-type="background"]').each(function(){
			var $bgobj = $(this); // assigning the object
		 
			$window = $(window);
			$(window).scroll(function() {
				var yPos = -($window.scrollTop() / $bgobj.data('speed')); 
				 
				// Put together our final background position
				var coords = '50% '+ yPos + 'px';
	 
				// Move the background
				$bgobj.css({ backgroundPosition: coords });
			}); 
		});

	});		
	
//----------------------------------------		

})(jQuery);
}, 0);

HTML

<div id="demo-main-features" class="appearing">
	<div class="grid-layout main-features">
		<div class="grid-col">
			<div class="feature-item"><a href="#"><i class="fa fa-pencil"></i></a>
				<h3 class="heading">Modern Design</h3>
				<p class="desc">Flat design &acirc;&euro;&ldquo; currently growing in popularity</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="feature-item"><a href="#"><i class="fa fa-book"></i></a>
				<h3 class="heading">Full Documentation</h3>
				<p class="desc">JSN Mini is equipped with a very comprehensive documentation package that will help you with template utilization.</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="feature-item"><a href="#"><i class="fa fa-bolt"></i></a>
				<h3 class="heading">Painless Configuration</h3>
				<p class="desc">You can configure the template the way you like without special technical knowledge</p>
			</div>
		</div>
	</div>
	<div class="grid-layout main-features">
		<div class="grid-col">
			<div class="feature-item"><a href="#"><i class="fa fa-eye"></i></a>
				<h3 class="heading">Responsive design</h3>
				<p class="desc">Special built-in design optimized for modern mobile devices such as iPhone, Android and Windows-based mobiles</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="feature-item"><a href="#"><i class="fa fa-bar-chart"></i></a>
				<h3 class="heading">Multi-language support</h3>
				<p class="desc">Currently, the template supports 14 languages for both front-end and back-end.</p>
			</div>
		</div>
		<div class="grid-col">
			<div class="feature-item"><a href="#"><i class="fa fa-share-alt"></i></a>
				<h3 class="heading">Social media integrated</h3>
				<p class="desc">You are free to integrate your social channels without digging into the code</p>
			</div>
		</div>
	</div>
</div>

Notes

This code has been modified to use FontAwesome
I have changed [class*="jsn-icon-"] to [class*="fa fa-"] to allow the use of FontAwesome instead of the JSN-Mini-Icon set which is not available.
You need to add the Optional Javascript and CSS to get the animation effects.

Published in Packages

Tuesday, 16 February 2016 16:03

Failed upgrade of Matrix Rates

We had the Premium Matrix Rates running and then we purchased Product Matrix Rates with volumetrics. We have installed the new extension over the top of the old one and several issues have occurred.

So far the shipping tab with the dimensions on has not appeared and there was some issues with the package_id attribute not being created so my colleague had to manually create this attribute for the checkout to work.

These fault both point to the database not getting upgraded correctely (I think). Is it possible for you to look in to the issue for me so we can apply the extension to our live site.

Solution

As Premium Matrix Rates was previously installed and Product Matrix Rates (with Volume support) was being added in its stead, the package_id attribute would not need to be created as it is an attribute created by the standard version.

This article details the correct installation procedure and includes notes for upgrading at the bottom of the article: http://support.webshopapps.com/productmatrix/installing-extension-2/ (Option 1)
If the SQL has not run successfully you will need the "Manually rewind core_resource" section of this article for upgrading: http://support.webshopapps.com/productmatrix/sql-failed-to-run-successfully/ (Option 2)

This should resolve the issue of the missing package_id attribute. You can manually create it but i would avoid that. If you do see the notes below.

Shipping Tab Still not appearing

The above deals with failed upgrades but if you are still having problems with the shipping tab not appearing it could be because of the extension not being configured correctly

Assumptions

The upgrade was successful or repaired as above
The attributes all exist in the database

I spoke with the developers and the fix/final step is easier.

Assign the variables to the shipping group attribute set. The drag attributes thing.
- http://wiki.webshopapps.com/extensions/product-matrix/product-matrix-with-volume-support#TOC-Adding-Volume-Attribute-to-your-Attribute-Set
- My instructions
  - Go to Catalog --> Manage Attribute Sets
  - Edit default
  - Now drag the ship_height, ship_weight and ship_depth Unassigned Attributes over to the shipping Group.
    
    "the set_resource script (provided previously) needs to be used" when was this provided? I don't seem to have this.
When you have assigned these attributes the shipping tab appears. So the extension has installed correctely.

The package_id has been set as a text-based attribute after manually creating it

The attribute will function as a text-based attribute, though this would cause discrepancies if there are any spelling mistakes.

If you choose to use the attribute as a text-based attribute, rather than drop-down you will need to select "Use text based shipping group" from system > configuration > shipping methods > Product Matrix > "Advanced Options"

To re-create the attribute as a drop-down you can delete the attribute then re-run the SQL using the set_resouce script, as per this article: http://support.webshopapps.com/productmatrix/sql-failed-to-run-successfully/

The Wiki steps omitted the specific attribute set name as this can vary by website though yes, the default attribute set would need to be edited.

For reference, the Wiki has been superseded by our Knowledgebase here: http://support.webshopapps.com/productmatrix/

Notes from webshopapps

The package_id attribute should have been created when the original version of Product Matrix was installed on the site. Without that attribute the shipping rates would not have been returned correctly with the older version of the extension.

The attributes are not created on installation when the SQL has not run correctly, which is often caused by the SQL running before all of the files have finished copying across correctly. To avoid this, the "etc" directory from the ZIP file should be copied last.

In the event that the SQL is not run correctly the set_resource script (provided previously) needs to be used. This will run the SQL installation steps accordingly.

My Way Forward Notes

When I intially had this issue this is what I decided to do.

After deciphering the answers this is what I have worked out and I hope it makes sense for a way forward of fixing the matrix rates

Option 2 that you ran worked and added the shipping tab, and I guess the height/depth/width attributes. The attributes are not automatically assigned, these have to be done manually so they appear in the shipping tab

What he did to fix the dev site one

He manually assigned the ship_depth/ship_height/ship_width by following these instructions here……. (but it should say edit the ‘default’)

Issues with the dev site one

The package_id, the attribute you created manually is a text box, and should be a dropdown in the global scope

What I propose with the Dev site

Delete the package_id and recreate but selecting it as a dropdown in the global scope and its label name = “Shipping Group”
or
Uninstall the matrix rates, delete the attributes package_id/ship_depth/ship_height/ship_width and re-run the install procedure but copying in the etc folder last as per webshopapp instructions(see response below)……….. so the SQL is run last which should create all the attributes again
or
Perform ‘option 2’ again as you did last time but after deleting package_id/ship_depth/ship_height/ship_width

What I propose with the live site

Run ‘option 2’ to remove any traces of the old matrix rates extension and then install the new version
or
Copy the new extension over except the /etc/ folder and put this in last so the SQL is correctely triggered. as per webshopapp instructions(see response below)

With all of these it will require manual actions by myself or you to install the attributes for the shipping tab.

Published in Magento

Monday, 15 February 2016 21:34

Latest Projects

4 Images in a row that animate into existance with an icon that appears upon hover, once clicked it will open the image in a modal box.

Our latest projects

CSS

/* Might not be required */
/*
.jsn-demo-page #jsn-pos-user-top {
    border: none;
    padding: 0;
}
.jsn-demo-page #jsn-centercol {
    padding: 0 !important;
}
*/
 
/* Latest Projects */
.jsn-modulecontainer.demo-latest-projects {
    margin-top: 0 !important;
}
 
#demo-latest-projects .section-heading {
    background-color: #111;
    color: #fff;
    font-size: 1.8em;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-align: center;
    margin: 0;
    padding: 45px 0;
}
.jsn-color-blue #demo-latest-projects .section-heading {
    background-color: #1c8bbe;
}
.jsn-color-red #demo-latest-projects .section-heading {
    background-color: #d85544;
}
.jsn-color-green #demo-latest-projects .section-heading {
    background-color: #139d6b;
}
.jsn-color-orange #demo-latest-projects .section-heading {
    background-color: #c78f23;
}
.jsn-color-violet #demo-latest-projects .section-heading {
    background-color: #8762ae;
}
.jsn-color-grey #demo-latest-projects .section-heading {
    background-color: #333;
}
#demo-latest-projects .latest-projects .grid-col {
    width: 25%;
}
#demo-latest-projects .latest-projects .grid-col_inner {
    margin: 0;
}
#demo-latest-projects .latest-projects .project-item a {
    display: block;
    position: relative;
    z-index: 90;
    top: 0;
    left: 0;
}
#demo-latest-projects .latest-projects .project-item a img {
    max-width: 100%;
    display: block;
}
#demo-latest-projects .latest-projects .project-item {
    position: relative;
    overflow: hidden;
}
#demo-latest-projects .latest-projects .project-item a:before,
#demo-latest-projects .latest-projects .project-item a:after {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
#demo-latest-projects .latest-projects .project-item a:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000\9;
    background-color: rgba(0,0,0,0.75);
    z-index: 100;
}
#demo-latest-projects .latest-projects .project-item a:after {
    content: "\f00e";
    font-family: 'FontAwesome';
    font-size: 1.6em;
    position: absolute;
    display: block;
    width: 80px;
    height: 80px;
    line-height: 70px;
    text-align: center;
    color: #fff;
    top: 40%;
    left: 50%;
    margin-top: -40px;
    margin-left: -40px;
    border: 3px solid #fff;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    z-index: 110;
}
#demo-latest-projects .latest-projects .project-item a:hover:before,
#demo-latest-projects .latest-projects .project-item a:hover:after {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
} 
#demo-latest-projects .latest-projects .project-item a:hover:after {
    top: 50%;
}
/* ===== RESPONSIVE OPTIMIZING ===== */
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile #demo-latest-projects .latest-projects .grid-col {
		width: 100%;
	}
	.jsn-mobile #demo-latest-projects .section-heading {
		font-size: 1.2em;
		padding: 30px 0;
	}
}

CSS (Optional / Animation / Waypoints)

/* ===== WAYPOINT ONSCROLL ACTION ===== */
/* Waypoint by http://imakewebthings.com/jquery-waypoints/ */

/* Declare scale-fade animation */
@keyframes scale-fade
	{
		0% 		{ 	transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes scale-fade
	{
		0% 		{ 	-moz-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes scale-fade
	{
		0% 		{ 	-webkit-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

/* Declare translate-fade animation */
@keyframes translate-fade
	{
		0% 		{ 	transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes translate-fade
	{
		0% 		{ 	-moz-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes translate-fade
	{
		0% 		{ 	-webkit-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

.appearing .project-item,
.appearing .main-features .feature-item [class*="fa fa-"],
.appearing .graph-item .graph-item-inner,
.appearing .stat-group .counting-number {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .project-item,
.appearing.scroll-action .main-features .feature-item [class*="fa fa-"],
.appearing.scroll-action .graph-item .graph-item-inner,
.appearing.scroll-action .stat-group .counting-number  {
	-webkit-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	-moz-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.appearing .apple-devices {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: translate(0,50px);
	-webkit-transform: translate(0,50px);
	-ms-transform: translate(0,50px);
	transform: translate(0,50px);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .apple-devices  {
	-webkit-animation: translate-fade 1s 1 ease-in-out;
	-moz-animation: translate-fade 1s 1 ease-in-out;
	animation: translate-fade 1s 1 ease-in-out;
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
}
.scroll-down {
}
.scroll-down.scroll-action {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

JS (Optional / Animation / Waypoints)

/* ==================== JSN MINI CUSTOM JS ==================== */

// i have seperated out each complete function with //----------------------------------------
// use the whole file for Mini effects and just delete stuff you do not want

setTimeout(function() {
(function($) {
	

//----------------------------------------
// intiates the Waypoints codebase
// This causes animations to be paused until triggered by the Waypoints code
// Waypoints are configured later


/* Waypoints */
(function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(window,function(n,r){var i,o,l,s,f,u,c,a,h,d,p,y,v,w,g,m;i=n(r);a=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;c={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};this.element[u]=this.id;c[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||a)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(a&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return l.push(e)}});l.sort(function(t,e){return t.offset-e.offset});if(!o){l.reverse()}return n.each(l,function(t,e){if(e.options.continuous||t===l.length-1){return e.trigger([i])}})});return this.oldScroll={x:t.horizontal.newScroll,y:t.vertical.newScroll}};t.prototype.refresh=function(){var t,e,r,i=this;r=n.isWindow(this.element);e=this.$element.offset();this.doScroll();t={horizontal:{contextOffset:r?0:e.left,contextScroll:r?0:this.oldScroll.x,contextDimension:this.$element.width(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:r?0:e.top,contextScroll:r?0:this.oldScroll.y,contextDimension:r?n[m]("viewportHeight"):this.$element.height(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};return n.each(t,function(t,e){return n.each(i.waypoints[t],function(t,r){var i,o,l,s,f;i=r.options.offset;l=r.offset;o=n.isWindow(r.element)?0:r.$element.offset()[e.offsetProp];if(n.isFunction(i)){i=i.apply(r.element)}else if(typeof i==="string"){i=parseFloat(i);if(r.options.offset.indexOf("%")>-1){i=Math.ceil(e.contextDimension*i/100)}}r.offset=o-e.contextOffset+e.contextScroll-i;if(r.options.onlyOnScroll&&l!=null||!r.enabled){return}if(l!==null&&l<(s=e.oldScroll)&&s<=r.offset){return r.trigger([e.backward])}else if(l!==null&&l>(f=e.oldScroll)&&f>=r.offset){return r.trigger([e.forward])}else if(l===null&&e.oldScroll>=r.offset){return r.trigger([e.forward])}})})};t.prototype.checkEmpty=function(){if(n.isEmptyObject(this.waypoints.horizontal)&&n.isEmptyObject(this.waypoints.vertical)){this.$element.unbind([p,y].join(" "));return delete c[this.id]}};return t}();l=function(){function t(t,e,r){var i,o;if(r.offset==="bottom-in-view"){r.offset=function(){var t;t=n[m]("viewportHeight");if(!n.isWindow(e.element)){t=e.$element.height()}return t-n(this).outerHeight()}}this.$element=t;this.element=t[0];this.axis=r.horizontal?"horizontal":"vertical";this.callback=r.handler;this.context=e;this.enabled=r.enabled;this.id="waypoints"+v++;this.offset=null;this.options=r;e.waypoints[this.axis][this.id]=this;s[this.axis][this.id]=this;i=(o=this.element[w])!=null?o:[];i.push(this.id);this.element[w]=i}t.prototype.trigger=function(t){if(!this.enabled){return}if(this.callback!=null){this.callback.apply(this.element,t)}if(this.options.triggerOnce){return this.destroy()}};t.prototype.disable=function(){return this.enabled=false};t.prototype.enable=function(){this.context.refresh();return this.enabled=true};t.prototype.destroy=function(){delete s[this.axis][this.id];delete this.context.waypoints[this.axis][this.id];return this.context.checkEmpty()};t.getWaypointsByElement=function(t){var e,r;r=t[w];if(!r){return[]}e=n.extend({},s.horizontal,s.vertical);return n.map(r,function(t){return e[t]})};return t}();d={init:function(t,e){var r;e=n.extend({},n.fn[g].defaults,e);if((r=e.handler)==null){e.handler=t}this.each(function(){var t,r,i,s;t=n(this);i=(s=e.context)!=null?s:n.fn[g].defaults.context;if(!n.isWindow(i)){i=t.closest(i)}i=n(i);r=c[i[0][u]];if(!r){r=new o(i)}return new l(t,r,e)});n[m]("refresh");return this},disable:function(){return d._invoke.call(this,"disable")},enable:function(){return d._invoke.call(this,"enable")},destroy:function(){return d._invoke.call(this,"destroy")},prev:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e>0){return t.push(n[e-1])}})},next:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e<n.length-1){return t.push(n[e+1])}})},_traverse:function(t,e,i){var o,l;if(t==null){t="vertical"}if(e==null){e=r}l=h.aggregate(e);o=[];this.each(function(){var e;e=n.inArray(this,l[t]);return i(o,e,l[t])});return this.pushStack(o)},_invoke:function(t){this.each(function(){var e;e=l.getWaypointsByElement(this);return n.each(e,function(e,n){n[t]();return true})});return this}};n.fn[g]=function(){var t,r;r=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(d[r]){return d[r].apply(this,t)}else if(n.isFunction(r)){return d.init.apply(this,arguments)}else if(n.isPlainObject(r)){return d.init.apply(this,[null,r])}else if(!r){return n.error("jQuery Waypoints needs a callback function or handler option.")}else{return n.error("The "+r+" method does not exist in jQuery Waypoints.")}};n.fn[g].defaults={context:r,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};h={refresh:function(){return n.each(c,function(t,e){return e.refresh()})},viewportHeight:function(){var t;return(t=r.innerHeight)!=null?t:i.height()},aggregate:function(t){var e,r,i;e=s;if(t){e=(i=c[n(t)[0][u]])!=null?i.waypoints:void 0}if(!e){return[]}r={horizontal:[],vertical:[]};n.each(r,function(t,i){n.each(e[t],function(t,e){return i.push(e)});i.sort(function(t,e){return t.offset-e.offset});r[t]=n.map(i,function(t){return t.element});return r[t]=n.unique(r[t])});return r},above:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset<=t.oldScroll.y})},below:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset>t.oldScroll.y})},left:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset<=t.oldScroll.x})},right:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset>t.oldScroll.x})},enable:function(){return h._invoke("enable")},disable:function(){return h._invoke("disable")},destroy:function(){return h._invoke("destroy")},extendFn:function(t,e){return d[t]=e},_invoke:function(t){var e;e=n.extend({},s.vertical,s.horizontal);return n.each(e,function(e,n){n[t]();return true})},_filter:function(t,e,r){var i,o;i=c[n(t)[0][u]];if(!i){return[]}o=[];n.each(i.waypoints[e],function(t,e){if(r(i,e)){return o.push(e)}});o.sort(function(t,e){return t.offset-e.offset});return n.map(o,function(t){return t.element})}};n[m]=function(){var t,n;n=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(h[n]){return h[n].apply(null,t)}else{return h.aggregate.call(null,n)}};n[m].settings={resizeThrottle:100,scrollThrottle:30};return i.on("load.waypoints",function(){return n[m]("refresh")})})}).call(this);

//----------------------------------------

// Now the javascript has been setup this code triggers all the effects

		
$(document).ready( function() 
	{


		/* Waypoint script to add action when scroll onto objects */
		/* This effect brought by http://imakewebthings.com/jquery-waypoints/ */
		
		// This sets the Waypoint triggers
		// Waypoints is the easiest way to trigger a function when you scroll to an element.
		// this adds a scrolling action to elements but not the 'counting up'
		// delete the ones you dont use
		
		$( '#demo-latest-projects' ).waypoint(function()
			{
				$( '#demo-latest-projects' ).addClass( 'scroll-action' );
			}, {
				offset: '70%'
			})

	});
	
	
//----------------------------------------	
	

})(jQuery);
}, 0);

HTML

<div id="demo-latest-projects" class="appearing">
	<h2 class="section-heading">Our latest projects</h2>
	<div class="grid-layout latest-projects">
		<div class="grid-col">
			<div class="project-item">
				<a href="/media/joomlashine/jsn-mini/custom-html/738/1.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
					<img src="/media/joomlashine/jsn-mini/custom-html/738/1.jpg" alt="" />
				</a>
			</div>
		</div>
		<div class="grid-col">
			<div class="project-item">
				<a href="/media/joomlashine/jsn-mini/custom-html/738/2.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
					<img src="/media/joomlashine/jsn-mini/custom-html/738/2.jpg" alt="" />
				</a>
			</div>
		</div>
		<div class="grid-col">
			<div class="project-item">
				<a href="/media/joomlashine/jsn-mini/custom-html/738/3.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
					<img src="/media/joomlashine/jsn-mini/custom-html/738/3.jpg" alt="" />
				</a>
			</div>
		</div>
		<div class="grid-col">
			<div class="project-item">
				<a href="/media/joomlashine/jsn-mini/custom-html/738/4.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
					<img src="/media/joomlashine/jsn-mini/custom-html/738/4.jpg" alt="" />
				</a>
			</div>
		</div>
	</div>
</div>

To use JSN-Mini-Icon font instead of FontAwesome icons

The 'Latest Projects' code above does not fully work because the JSN-Mini-Icon font is not available in this template, however you can use whatever font you want so i changed the following code to get it to work. Tthis assumes you have FontAwesome as part of your template or you have added it in with an extension.

Change

#demo-latest-projects .latest-projects .project-item a:after {
    content: "\f00e";
    font-family: 'FontAwesome';
	
To

#demo-latest-projects .latest-projects .project-item a:after {
    content: "\e61e";
    font-family: 'JSN-Mini-Icon';

Remove the circle with Font Icon in it (New version)

if you dont want that circle with font, you can just remove the following code which leaves the fade effect and leaves it like the new version of 'Latest Projects' in the JSN Mini demo. You could probably also just add display:none

/* This adds circle with a Icon via a font call on item hover */	
	#demo-latest-projects .latest-projects .project-item a:after {
		content: "\e61e";
		font-family: 'JSN-Mini-Icon';
		font-size: 1.6em;
		position: absolute;
		display: block;
		width: 80px;
		height: 80px;
		line-height: 70px;
		text-align: center;
		color: #fff;
		top: 40%;
		left: 50%;
		margin-top: -40px;
		margin-left: -40px;
		border: 3px solid #fff;
		border-radius: 100%;
		-moz-border-radius: 100%;
		-webkit-border-radius: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		z-index: 110;
	}

Code used to correct issues in this template

/* Correct gap between images in mobile view for this template */
@media only screen and (max-width: 480px), (max-device-width: 480px) {	
	div.grid-col {
		margin-bottom: 0px;
	}
}

Notes

This is taken from the JSN Mini tempalte demo
The animations will only work if you include the optional CSS and Javascript
I have also changed [class*="jsn-icon-"] to [class*="fa fa-"] to allow the use of FontAwesome instead of the JSN-Mini-Icon set which is not available.
You can probably type messages/words instead of icons by changing font-family: 'FontAwesome'; to a normal font
This code has a waypoint attached.
Add the class jsn-demo-page to the page suffix to get the code to work
To get this demo working without adding the page suffix jsn-demo-page I wrapped the code in
```
<div class="jsn-mobile jsn-demo-page"></div>
```
- This simulates adding the class but this technique can also be used if you want to use it in a module.
- You can remove the .jsn-demo-page from the CSS as another option instead of wrapping the CSS code in the<div> above.
There is a new version of 'Latest Projects' without the use of icons. I will add it here at some point or you can check out the current demo at Joomlashine.

Published in Packages

Monday, 15 February 2016 20:43

Counting Up

This a block on counting Up numbers that start when they come into view.

Our-Team

Powered-By

Soldiers

Works

Done

Projects

Design

Winning

Awards

Client

Quantity

And more

CSS

/* ===== COUNTING UP STATISTICS ===== */
.jsn-demo-page #jsn-usermodules1,
.jsn-demo-page #jsn-usermodules2 {
	border: none;
	padding: 0;
}
.jsn-demo-page #demo-countingup-stats {
	background: #2e353c url(/images/kb/2016/737/triangles.jpg) center center fixed;
	background-size: 100% auto;
	color: #fff;
}
.jsn-demo-page #demo-countingup-stats {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
	padding: 100px 0;
}
.jsn-demo-page #demo-countingup-stats .stat-group {
	text-align: center;
	padding: 0 30px;
	border-right: 1px solid rgba(255,255,255,0.1);
}
.jsn-demo-page #demo-countingup-stats .grid-lastcol .stat-group {
	border-right: none;
}
.jsn-demo-page #demo-countingup-stats .stat-group .heading {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 2.2em;
	line-height: 36px;
	margin: 0;
}
.jsn-demo-page #demo-countingup-stats .stat-group .sub-heading {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 1.5em;
	line-height: 20px;
	margin: 0;
	color: #ddd;
	font-weight: 400;
}
.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
	font-family: 'PT Sans', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 8.5em;
	line-height: 90px;
	padding: 30px 0 20px;
	text-transform: uppercase;
	color: #fff;
}
.jsn-demo-page #demo-countingup-stats .stat-group .desc {
	text-transform: uppercase;
	font-size: 1.3em;
	letter-spacing: 4px;
	line-height: 30px;
	margin: 0;
	color: #ddd;
}

/* ===== RESPONSIVE OPTIMIZING ===== */
@media only screen and (max-width: 1100px), (max-device-width: 1100px) {
}

@media only screen and (max-width: 960px), (max-device-width: 960px) {
	/* Counting Stats */
	.jsn-mobile.jsn-demo-page #demo-countingup-stats div.grid-layout4 div.grid-col {
		width: 24.96%;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .heading {
		font-size: 1.4em;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
		font-size: 6em;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .sub-heading,
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .desc {
		font-size: 1em;
	}
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile.jsn-demo-page .demo-countingup-stats {
		background-size: 300% auto;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats {
		padding: 60px 0;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats div.grid-layout4 div.grid-col {
		width: 100%;
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group {
		padding: 30px 0;
		margin: 0 40px;
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}
	.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
		padding: 10px 0 0;
	}
}

CSS (Optional / Animation / Waypoints)

This code might not be optional , it causes the counting to happen when it comes into view, so this on its own, might make this code mandatory. The required Waypoint javascript is already included.

/* ===== WAYPOINT ONSCROLL ACTION ===== */
/* Waypoint by http://imakewebthings.com/jquery-waypoints/ */

/* Declare scale-fade animation */
@keyframes scale-fade
	{
		0% 		{ 	transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes scale-fade
	{
		0% 		{ 	-moz-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes scale-fade
	{
		0% 		{ 	-webkit-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

/* Declare translate-fade animation */
@keyframes translate-fade
	{
		0% 		{ 	transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes translate-fade
	{
		0% 		{ 	-moz-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes translate-fade
	{
		0% 		{ 	-webkit-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

.appearing .project-item,
.appearing .main-features .feature-item [class*="fa fa-"],
.appearing .graph-item .graph-item-inner,
.appearing .stat-group .counting-number {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .project-item,
.appearing.scroll-action .main-features .feature-item [class*="fa fa-"],
.appearing.scroll-action .graph-item .graph-item-inner,
.appearing.scroll-action .stat-group .counting-number  {
	-webkit-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	-moz-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.appearing .apple-devices {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: translate(0,50px);
	-webkit-transform: translate(0,50px);
	-ms-transform: translate(0,50px);
	transform: translate(0,50px);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .apple-devices  {
	-webkit-animation: translate-fade 1s 1 ease-in-out;
	-moz-animation: translate-fade 1s 1 ease-in-out;
	animation: translate-fade 1s 1 ease-in-out;
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
}
.scroll-down {
}
.scroll-down.scroll-action {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

// The 'Counting Up' module with 4 numbers  - with waypoint configured

setTimeout(function() {
(function($) {

//----------------------------------------	

// intiates the Waypoints codebase
// This causes animations to be paused until triggered by the Waypoints code
// Waypoints are configured later

/* Waypoints */
(function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(window,function(n,r){var i,o,l,s,f,u,c,a,h,d,p,y,v,w,g,m;i=n(r);a=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;c={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};this.element[u]=this.id;c[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||a)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(a&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return l.push(e)}});l.sort(function(t,e){return t.offset-e.offset});if(!o){l.reverse()}return n.each(l,function(t,e){if(e.options.continuous||t===l.length-1){return e.trigger([i])}})});return this.oldScroll={x:t.horizontal.newScroll,y:t.vertical.newScroll}};t.prototype.refresh=function(){var t,e,r,i=this;r=n.isWindow(this.element);e=this.$element.offset();this.doScroll();t={horizontal:{contextOffset:r?0:e.left,contextScroll:r?0:this.oldScroll.x,contextDimension:this.$element.width(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:r?0:e.top,contextScroll:r?0:this.oldScroll.y,contextDimension:r?n[m]("viewportHeight"):this.$element.height(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};return n.each(t,function(t,e){return n.each(i.waypoints[t],function(t,r){var i,o,l,s,f;i=r.options.offset;l=r.offset;o=n.isWindow(r.element)?0:r.$element.offset()[e.offsetProp];if(n.isFunction(i)){i=i.apply(r.element)}else if(typeof i==="string"){i=parseFloat(i);if(r.options.offset.indexOf("%")>-1){i=Math.ceil(e.contextDimension*i/100)}}r.offset=o-e.contextOffset+e.contextScroll-i;if(r.options.onlyOnScroll&&l!=null||!r.enabled){return}if(l!==null&&l<(s=e.oldScroll)&&s<=r.offset){return r.trigger([e.backward])}else if(l!==null&&l>(f=e.oldScroll)&&f>=r.offset){return r.trigger([e.forward])}else if(l===null&&e.oldScroll>=r.offset){return r.trigger([e.forward])}})})};t.prototype.checkEmpty=function(){if(n.isEmptyObject(this.waypoints.horizontal)&&n.isEmptyObject(this.waypoints.vertical)){this.$element.unbind([p,y].join(" "));return delete c[this.id]}};return t}();l=function(){function t(t,e,r){var i,o;if(r.offset==="bottom-in-view"){r.offset=function(){var t;t=n[m]("viewportHeight");if(!n.isWindow(e.element)){t=e.$element.height()}return t-n(this).outerHeight()}}this.$element=t;this.element=t[0];this.axis=r.horizontal?"horizontal":"vertical";this.callback=r.handler;this.context=e;this.enabled=r.enabled;this.id="waypoints"+v++;this.offset=null;this.options=r;e.waypoints[this.axis][this.id]=this;s[this.axis][this.id]=this;i=(o=this.element[w])!=null?o:[];i.push(this.id);this.element[w]=i}t.prototype.trigger=function(t){if(!this.enabled){return}if(this.callback!=null){this.callback.apply(this.element,t)}if(this.options.triggerOnce){return this.destroy()}};t.prototype.disable=function(){return this.enabled=false};t.prototype.enable=function(){this.context.refresh();return this.enabled=true};t.prototype.destroy=function(){delete s[this.axis][this.id];delete this.context.waypoints[this.axis][this.id];return this.context.checkEmpty()};t.getWaypointsByElement=function(t){var e,r;r=t[w];if(!r){return[]}e=n.extend({},s.horizontal,s.vertical);return n.map(r,function(t){return e[t]})};return t}();d={init:function(t,e){var r;e=n.extend({},n.fn[g].defaults,e);if((r=e.handler)==null){e.handler=t}this.each(function(){var t,r,i,s;t=n(this);i=(s=e.context)!=null?s:n.fn[g].defaults.context;if(!n.isWindow(i)){i=t.closest(i)}i=n(i);r=c[i[0][u]];if(!r){r=new o(i)}return new l(t,r,e)});n[m]("refresh");return this},disable:function(){return d._invoke.call(this,"disable")},enable:function(){return d._invoke.call(this,"enable")},destroy:function(){return d._invoke.call(this,"destroy")},prev:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e>0){return t.push(n[e-1])}})},next:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e<n.length-1){return t.push(n[e+1])}})},_traverse:function(t,e,i){var o,l;if(t==null){t="vertical"}if(e==null){e=r}l=h.aggregate(e);o=[];this.each(function(){var e;e=n.inArray(this,l[t]);return i(o,e,l[t])});return this.pushStack(o)},_invoke:function(t){this.each(function(){var e;e=l.getWaypointsByElement(this);return n.each(e,function(e,n){n[t]();return true})});return this}};n.fn[g]=function(){var t,r;r=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(d[r]){return d[r].apply(this,t)}else if(n.isFunction(r)){return d.init.apply(this,arguments)}else if(n.isPlainObject(r)){return d.init.apply(this,[null,r])}else if(!r){return n.error("jQuery Waypoints needs a callback function or handler option.")}else{return n.error("The "+r+" method does not exist in jQuery Waypoints.")}};n.fn[g].defaults={context:r,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};h={refresh:function(){return n.each(c,function(t,e){return e.refresh()})},viewportHeight:function(){var t;return(t=r.innerHeight)!=null?t:i.height()},aggregate:function(t){var e,r,i;e=s;if(t){e=(i=c[n(t)[0][u]])!=null?i.waypoints:void 0}if(!e){return[]}r={horizontal:[],vertical:[]};n.each(r,function(t,i){n.each(e[t],function(t,e){return i.push(e)});i.sort(function(t,e){return t.offset-e.offset});r[t]=n.map(i,function(t){return t.element});return r[t]=n.unique(r[t])});return r},above:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset<=t.oldScroll.y})},below:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset>t.oldScroll.y})},left:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset<=t.oldScroll.x})},right:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset>t.oldScroll.x})},enable:function(){return h._invoke("enable")},disable:function(){return h._invoke("disable")},destroy:function(){return h._invoke("destroy")},extendFn:function(t,e){return d[t]=e},_invoke:function(t){var e;e=n.extend({},s.vertical,s.horizontal);return n.each(e,function(e,n){n[t]();return true})},_filter:function(t,e,r){var i,o;i=c[n(t)[0][u]];if(!i){return[]}o=[];n.each(i.waypoints[e],function(t,e){if(r(i,e)){return o.push(e)}});o.sort(function(t,e){return t.offset-e.offset});return n.map(o,function(t){return t.element})}};n[m]=function(){var t,n;n=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(h[n]){return h[n].apply(null,t)}else{return h.aggregate.call(null,n)}};n[m].settings={resizeThrottle:100,scrollThrottle:30};return i.on("load.waypoints",function(){return n[m]("refresh")})})}).call(this);

//----------------------------------------		

// The 'Counting Up' module with 4 numbers 

/* Count Up */
function countUp(a,b,c,d,e,f){for(var g=0,h=["webkit","moz","ms"],i=0;i<h.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[h[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[h[i]+"CancelAnimationFrame"]||window[h[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(a){var c=(new Date).getTime(),d=Math.max(0,16-(c-g)),e=window.setTimeout(function(){a(c+d)},d);return g=c+d,e}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)}),this.options=f||{useEasing:!0,useGrouping:!0,separator:",",decimal:"."},""==this.options.separator&&(this.options.useGrouping=!1);var j=this;this.d="string"==typeof a?document.getElementById(a):a,this.startVal=Number(b),this.endVal=Number(c),this.countDown=this.startVal>this.endVal?!0:!1,this.startTime=null,this.timestamp=null,this.remaining=null,this.frameVal=this.startVal,this.rAF=null,this.decimals=Math.max(0,d||0),this.dec=Math.pow(10,this.decimals),this.duration=1e3*e||2e3,this.version=function(){return"1.1.1"},this.easeOutExpo=function(a,b,c,d){return 1024*c*(-Math.pow(2,-10*a/d)+1)/1023+b},this.count=function(a){null===j.startTime&&(j.startTime=a),j.timestamp=a;var b=a-j.startTime;if(j.remaining=j.duration-b,j.options.useEasing)if(j.countDown){var c=j.easeOutExpo(b,0,j.startVal-j.endVal,j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.easeOutExpo(b,j.startVal,j.endVal-j.startVal,j.duration);else if(j.countDown){var c=(j.startVal-j.endVal)*(b/j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.startVal+(j.endVal-j.startVal)*(b/j.duration);j.frameVal=Math.round(j.frameVal*j.dec)/j.dec,j.frameVal=j.countDown?j.frameVal<j.endVal?j.endVal:j.frameVal:j.frameVal>j.endVal?j.endVal:j.frameVal,j.d.innerHTML=j.formatNumber(j.frameVal.toFixed(j.decimals)),b<j.duration?j.rAF=requestAnimationFrame(j.count):null!=j.callback&&j.callback()},this.start=function(a){return j.callback=a,isNaN(j.endVal)||isNaN(j.startVal)?(console.log("countUp error: startVal or endVal is not a number"),j.d.innerHTML="--"):j.rAF=requestAnimationFrame(j.count),!1},this.stop=function(){cancelAnimationFrame(j.rAF)},this.reset=function(){j.startTime=null,cancelAnimationFrame(j.rAF),j.d.innerHTML=j.formatNumber(j.startVal.toFixed(j.decimals))},this.resume=function(){j.startTime=null,j.duration=j.remaining,j.startVal=j.frameVal,requestAnimationFrame(j.count)},this.formatNumber=function(a){a+="";var b,c,d,e;if(b=a.split("."),c=b[0],d=b.length>1?j.options.decimal+b[1]:"",e=/(\d+)(\d{3})/,j.options.useGrouping)for(;e.test(c);)c=c.replace(e,"$1"+j.options.separator+"$2");return c+d},j.d.innerHTML=j.formatNumber(j.startVal.toFixed(j.decimals))}

/* i think this set the physical dimensions in readyness for Counting Up */
function setHeightToHeaderElement()
	{
		var height = $(window).height();
		var TopHeaderHeight = 0;
		var HeaderHeight = 0;
		var TopBarHeight = 0;
		var PosPromoHeight = 0;
		if (typeof $('#jsn-topheader') !== 'undefined')
		{
			var TopHeaderHeight = $('#jsn-topheader').outerHeight();
		}
		if (typeof $('#jsn-header') !== 'undefined')
		{
			var HeaderHeight = $('#jsn-header').outerHeight();
		}

		if (typeof $('#jsn-topbar') !== 'undefined')
		{
			var TopBarHeight = $('#jsn-topbar').outerHeight();
		}
		if (typeof $('#jsn-pos-promo') !== 'undefined')
		{
			var PosPromoHeight = $('#jsn-pos-promo').outerHeight();
		}	
		var topMarginOffsetPromo =  - (TopHeaderHeight + HeaderHeight + TopBarHeight);
		var topMarginOffsetIS = - (height / 2);
		$( '#jsn-promo' ).css('margin-top',topMarginOffsetPromo+'px'); // Set negative margin value for #jsn promo
		$( '#jsn-promo' ).height(height); // Set height to #jsn-promo equals to height of windows
		$( '#jsn-pos-promo' ).css('margin-top',topMarginOffsetIS+'px'); // Set margin-top to #jsn-pos-promo to vertically align it
		$( '#jsn-pos-promo' ).height(height);
	}

//----------------------------------------

// Now the javascript has been setup this code triggers all the effects
		
$(document).ready( function() 
	{

		/* CountUp Number by https://github.com/inorganik/countUp.js */
		if ($('#demo-countingup-stats').hasClass('appearing')) {
		if (typeof(countUp) !== 'undefined')
		{
			var options = {
			  useEasing : true, 
			  useGrouping : true, 
			  separator : ',', 
			  decimal : '.' 
			}
			// set the counting up module numbers here
			// ( Starting Number / Target Number / Number of decimals / Time to get to Final Number / Additional Options)
			// ( startVal / endVal / decimals / duration / options )
			var countup1 = new countUp("counting-1", 01, 36, 0, 5, options);
			var countup2 = new countUp("counting-2", 01, 54, 0, 5, options);
			var countup3 = new countUp("counting-3", 01, 12, 0, 5, options);
			var countup4 = new countUp("counting-4", 01, 90, 0, 5, options);
		}

		$( '#demo-countingup-stats' ).waypoint(function()
			{
				$( '#demo-countingup-stats' ).addClass( 'scroll-action' );
				countup1.start();
				countup2.start();
				countup3.start();
				countup4.start();
			}, {
				offset: '80%'
			})
		}

	});
	
//----------------------------------------	

})(jQuery);
}, 0);

HTML

<div class="jsn-mobile jsn-demo-page">

	<div id="demo-countingup-stats" class="appearing">
		<div class="grid-layout countingup-stats">
			<div class="grid-col">
				<div class="stat-group">
					<h3 class="heading"><a href="#">Our-Team</a></h3>
					<h4 class="sub-heading">Powered-By</h4>
					<div id="counting-1" class="counting-number">01</div>
					<p class="desc">Soldiers</p>
				</div>
			</div>
			<div class="grid-col">
				<div class="stat-group">
					<h3 class="heading"><a href="#">Works</a></h3>
					<h4 class="sub-heading">Done</h4>
					<div id="counting-2" class="counting-number">01</div>
					<p class="desc">Projects</p>
				</div>
			</div>
			<div class="grid-col">
				<div class="stat-group">
					<h3 class="heading"><a href="#">Design</a></h3>
					<h4 class="sub-heading">Winning</h4>
					<div id="counting-3" class="counting-number">01</div>
					<p class="desc">Awards</p>
				</div>
			</div>
			<div class="grid-col">
				<div class="stat-group">
					<h3 class="heading"><a href="#">Client</a></h3>
					<h4 class="sub-heading">Quantity</h4>
					<div id="counting-4" class="counting-number">01</div>
					<p class="desc">And more</p>
				</div>
			</div>
		</div>
	</div>

</div>

Notes

This is taken from the JSN Mini template
This is based on the Javascript called CountUp from https://github.com/inorganik/countUp.js
Add the class jsn-demo-page to the page suffix to get the code to work
To get this demo working without adding the page suffix jsn-demo-page I wrapped the code in
```
<div class="jsn-mobile jsn-demo-page"></div>
```
- This simulates adding the class but this technique can also be used if you want to use it in a module.
- You can remove the .jsn-demo-page from the CSS as another option instead of wrapping the CSS code in the<div> above.
I also had to change the following Javascript to get the demo to work. You can use whatever you want, but these alterations work.
```
if ($('#jsn-master').hasClass('jsn-demo-page')) {
```
to
```
if ($('#demo-countingup-stats').hasClass('appearing')) {
```
The numbers are altered in the Javascript
The counting is triggered by a waypoint which is configured in the Javascript as needed.
The Parallax effect does not require any more code.
The background is optional and is black unless covered, but if you dont use the triangles background make sure you disable the background reference in the css
'physical dimensions in readyness for Counting Up' section might not be required, delete it and try.
I dont know where the Parallax Scrolling effect is coming from, might be built into CountUp.

Published in Packages

Monday, 15 February 2016 15:28

Feature Graph

This is a cool 4 point graph with animation and CSS effects. I have changed this to work with FontAwesome. You need to include the optional CSS and Javascript to get some of the animations which are triggered by the Waypoint code.

Easy to start

JSN PowerAdmin facilitates delightful management and customization your Joomla website with ease and joy.

SEO Optimized

Pure html override and 2-1-3 ordered content presentation help search engines easily crawl the site.

Various Colors

6 color variations including blue, red, green, violet, orange and grey.

Portfolio Design

JSN Mini is dedicated to portfolio websites.

CSS

/* FEATURE GRAPH */

/* It is the padding of the items and the amnount of text, the template.css rule and the amount of text that is causing the boggle */
/* I need to hive off each of the top items so the text push and padding matchines up*/
/* less text would make things better */
/* the grey bar goes to the bottom of the padding */

/* from template.css line 667 - corrects the template.css rule 'div.grid-col' - check for others in yopur template */
.jsn-demo-page #demo-feature-graph div.grid-col {
	margin-bottom: 0;
}

.jsn-demo-page #demo-feature-graph {
	/*padding: 50px 0;*/
	/*background-color: #f6fafc;*/
}
.jsn-demo-page #demo-feature-graph .feature-graph {
	padding: 0;
}
.jsn-demo-page #demo-feature-graph .feature-graph:first-child {
	border-bottom: 3px solid #cbd4d8;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item {
	overflow: hidden;
}
/* this controls the height of the items - i might need to hive this of for indivduals items */
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
	padding: 60px 0 0 0; /* slightly different removing the bottom padding makes the first bubble work correctely*/
	width: 300px; /* This controls the width of an item */
	max-width: 100%;
}
/* add individual item overrides here for padding to correct the vertical bar meeting */
/*.jsn-demo-page #demo-feature-graph .feature-graph .graph-item.item2 .graph-item-inner {
	padding-bottom: 52px;
}*/

.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="link-icon fa fa-"] {
	position: relative;
	float: left;
	display: block;
	width: 75px;
	height: 75px;
	color: #fff;
	background-color: #222;
	font-size: 2.5em;
	line-height: 72px;
	text-align: center;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	transform: scale(1,1);
	-moz-transform: scale(1,1);
	-webkit-transform: scale(1,1);
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item-inner:hover [class*="link-icon fa fa-"] {
	transform: scale(1.5,1.5);
	-moz-transform: scale(1.5,1.5);
	-webkit-transform: scale(1.5,1.5);
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 [class*="link-icon fa fa-"] {
	background-color: #5bace2;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 [class*="link-icon fa fa-"] {
	background-color: #6ece97;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 [class*="link-icon fa fa-"] {
	background-color: #e9974e;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item4 [class*="link-icon fa fa-"] {
	background-color: #c08dd7;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text {
	padding-left: 120px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text .heading {
	text-transform: uppercase;
	font-size: 1.65em;
	line-height: 1.65em;
	margin: 0;
	padding: 20px 0 0;
	letter-spacing: 3px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner,
.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
	float: right;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner,
.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
	float: left;
}

/* BOF Item offset */
.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
	padding-right: 150px;
}
.jsn-desktop.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
	padding-right: 0;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner {
	padding-left: 50px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
	padding-right: 0;
	width: 350px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
	padding-left: 100px;
}
/* EOF Of Item offset */

.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="link-icon fa fa-"]:after {
	content: "";
	display: block;
	position: absolute;
	width: 3px;
	height: 200px;
	background-color: #cbd4d8;
	left: 50%;
	margin-left: -2px;
}
/* top item vertical bar location */
.jsn-demo-page #demo-feature-graph .feature-graph .item1 [class*="link-icon fa fa-"]:after,
.jsn-demo-page #demo-feature-graph .feature-graph .item2 [class*="link-icon fa fa-"]:after {
	top: 90px;
}
/* bottom item vertical grey bars this controls the height - the smaller the number the longer the line */
.jsn-demo-page #demo-feature-graph .feature-graph .item3 [class*="link-icon fa fa-"]:after,
.jsn-demo-page #demo-feature-graph .feature-graph .item4 [class*="link-icon fa fa-"]:after {
	bottom: 90px;
}

/* ===== RESPONSIVE OPTIMIZING ===== */
@media only screen and (max-width: 1100px), (max-device-width: 1100px) {
	.jsn-desktop.jsn-demo-page #demo-feature-graph {
		padding: 50px;
	}
}

@media only screen and (max-width: 960px), (max-device-width: 960px) {	
	/* Feature graph */
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
		width: 300px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
		padding-right: 50px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner {
		padding-left: 0;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
		padding-right: 0;
		width: 280px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
		padding-left: 50px;
	}
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="link-icon fa fa-"]:after {
		display: none;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item {
		padding: 0 40px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
		padding: 30px 0;
		float: none;
		width: auto;
		text-align: center;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph:first-child {
		border: none;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text {
		padding-left: 0;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text .heading {
		font-size: 1.2em;
		line-height: 1.8em;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="link-icon fa fa-"] {
		float: none;
		margin: 0 auto;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item-inner:hover [class*="link-icon fa fa-"] {
		transform: none;
		-moz-transform: none;
		-webkit-transform: none;
	}
}

CSS (Optional / Animation / Waypoints)

This code allows the icons to animate into existance when they are scolled too. I do not know if all of this code is required.

/* ===== WAYPOINT ONSCROLL ACTION ===== */
/* Waypoint by http://imakewebthings.com/jquery-waypoints/ */

/* Declare scale-fade animation */
@keyframes scale-fade
	{
		0% 		{ 	transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes scale-fade
	{
		0% 		{ 	-moz-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes scale-fade
	{
		0% 		{ 	-webkit-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

/* Declare translate-fade animation */
@keyframes translate-fade
	{
		0% 		{ 	transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes translate-fade
	{
		0% 		{ 	-moz-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes translate-fade
	{
		0% 		{ 	-webkit-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

.appearing .project-item,
.appearing .main-features .feature-item [class*="fa fa-"],
.appearing .graph-item .graph-item-inner,
.appearing .stat-group .counting-number {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .project-item,
.appearing.scroll-action .main-features .feature-item [class*="fa fa-"],
.appearing.scroll-action .graph-item .graph-item-inner,
.appearing.scroll-action .stat-group .counting-number  {
	-webkit-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	-moz-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.appearing .apple-devices {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: translate(0,50px);
	-webkit-transform: translate(0,50px);
	-ms-transform: translate(0,50px);
	transform: translate(0,50px);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .apple-devices  {
	-webkit-animation: translate-fade 1s 1 ease-in-out;
	-moz-animation: translate-fade 1s 1 ease-in-out;
	animation: translate-fade 1s 1 ease-in-out;
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
}
.scroll-down {
}
.scroll-down.scroll-action {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

JS (Optional / Animation / Waypoints)

/* ==================== JSN MINI CUSTOM JS ==================== */

// i have seperated out each complete function with //----------------------------------------
// use the whole file for Mini effects and just delete stuff you do not want

setTimeout(function() {
(function($) {

//----------------------------------------

// intiates the Waypoints codebase
// This causes animations to be paused until triggered by the Waypoints code
// Waypoints are configured later

/* Waypoints */
(function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(window,function(n,r){var i,o,l,s,f,u,c,a,h,d,p,y,v,w,g,m;i=n(r);a=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;c={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};this.element[u]=this.id;c[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||a)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(a&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return l.push(e)}});l.sort(function(t,e){return t.offset-e.offset});if(!o){l.reverse()}return n.each(l,function(t,e){if(e.options.continuous||t===l.length-1){return e.trigger([i])}})});return this.oldScroll={x:t.horizontal.newScroll,y:t.vertical.newScroll}};t.prototype.refresh=function(){var t,e,r,i=this;r=n.isWindow(this.element);e=this.$element.offset();this.doScroll();t={horizontal:{contextOffset:r?0:e.left,contextScroll:r?0:this.oldScroll.x,contextDimension:this.$element.width(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:r?0:e.top,contextScroll:r?0:this.oldScroll.y,contextDimension:r?n[m]("viewportHeight"):this.$element.height(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};return n.each(t,function(t,e){return n.each(i.waypoints[t],function(t,r){var i,o,l,s,f;i=r.options.offset;l=r.offset;o=n.isWindow(r.element)?0:r.$element.offset()[e.offsetProp];if(n.isFunction(i)){i=i.apply(r.element)}else if(typeof i==="string"){i=parseFloat(i);if(r.options.offset.indexOf("%")>-1){i=Math.ceil(e.contextDimension*i/100)}}r.offset=o-e.contextOffset+e.contextScroll-i;if(r.options.onlyOnScroll&&l!=null||!r.enabled){return}if(l!==null&&l<(s=e.oldScroll)&&s<=r.offset){return r.trigger([e.backward])}else if(l!==null&&l>(f=e.oldScroll)&&f>=r.offset){return r.trigger([e.forward])}else if(l===null&&e.oldScroll>=r.offset){return r.trigger([e.forward])}})})};t.prototype.checkEmpty=function(){if(n.isEmptyObject(this.waypoints.horizontal)&&n.isEmptyObject(this.waypoints.vertical)){this.$element.unbind([p,y].join(" "));return delete c[this.id]}};return t}();l=function(){function t(t,e,r){var i,o;if(r.offset==="bottom-in-view"){r.offset=function(){var t;t=n[m]("viewportHeight");if(!n.isWindow(e.element)){t=e.$element.height()}return t-n(this).outerHeight()}}this.$element=t;this.element=t[0];this.axis=r.horizontal?"horizontal":"vertical";this.callback=r.handler;this.context=e;this.enabled=r.enabled;this.id="waypoints"+v++;this.offset=null;this.options=r;e.waypoints[this.axis][this.id]=this;s[this.axis][this.id]=this;i=(o=this.element[w])!=null?o:[];i.push(this.id);this.element[w]=i}t.prototype.trigger=function(t){if(!this.enabled){return}if(this.callback!=null){this.callback.apply(this.element,t)}if(this.options.triggerOnce){return this.destroy()}};t.prototype.disable=function(){return this.enabled=false};t.prototype.enable=function(){this.context.refresh();return this.enabled=true};t.prototype.destroy=function(){delete s[this.axis][this.id];delete this.context.waypoints[this.axis][this.id];return this.context.checkEmpty()};t.getWaypointsByElement=function(t){var e,r;r=t[w];if(!r){return[]}e=n.extend({},s.horizontal,s.vertical);return n.map(r,function(t){return e[t]})};return t}();d={init:function(t,e){var r;e=n.extend({},n.fn[g].defaults,e);if((r=e.handler)==null){e.handler=t}this.each(function(){var t,r,i,s;t=n(this);i=(s=e.context)!=null?s:n.fn[g].defaults.context;if(!n.isWindow(i)){i=t.closest(i)}i=n(i);r=c[i[0][u]];if(!r){r=new o(i)}return new l(t,r,e)});n[m]("refresh");return this},disable:function(){return d._invoke.call(this,"disable")},enable:function(){return d._invoke.call(this,"enable")},destroy:function(){return d._invoke.call(this,"destroy")},prev:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e>0){return t.push(n[e-1])}})},next:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e<n.length-1){return t.push(n[e+1])}})},_traverse:function(t,e,i){var o,l;if(t==null){t="vertical"}if(e==null){e=r}l=h.aggregate(e);o=[];this.each(function(){var e;e=n.inArray(this,l[t]);return i(o,e,l[t])});return this.pushStack(o)},_invoke:function(t){this.each(function(){var e;e=l.getWaypointsByElement(this);return n.each(e,function(e,n){n[t]();return true})});return this}};n.fn[g]=function(){var t,r;r=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(d[r]){return d[r].apply(this,t)}else if(n.isFunction(r)){return d.init.apply(this,arguments)}else if(n.isPlainObject(r)){return d.init.apply(this,[null,r])}else if(!r){return n.error("jQuery Waypoints needs a callback function or handler option.")}else{return n.error("The "+r+" method does not exist in jQuery Waypoints.")}};n.fn[g].defaults={context:r,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};h={refresh:function(){return n.each(c,function(t,e){return e.refresh()})},viewportHeight:function(){var t;return(t=r.innerHeight)!=null?t:i.height()},aggregate:function(t){var e,r,i;e=s;if(t){e=(i=c[n(t)[0][u]])!=null?i.waypoints:void 0}if(!e){return[]}r={horizontal:[],vertical:[]};n.each(r,function(t,i){n.each(e[t],function(t,e){return i.push(e)});i.sort(function(t,e){return t.offset-e.offset});r[t]=n.map(i,function(t){return t.element});return r[t]=n.unique(r[t])});return r},above:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset<=t.oldScroll.y})},below:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset>t.oldScroll.y})},left:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset<=t.oldScroll.x})},right:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset>t.oldScroll.x})},enable:function(){return h._invoke("enable")},disable:function(){return h._invoke("disable")},destroy:function(){return h._invoke("destroy")},extendFn:function(t,e){return d[t]=e},_invoke:function(t){var e;e=n.extend({},s.vertical,s.horizontal);return n.each(e,function(e,n){n[t]();return true})},_filter:function(t,e,r){var i,o;i=c[n(t)[0][u]];if(!i){return[]}o=[];n.each(i.waypoints[e],function(t,e){if(r(i,e)){return o.push(e)}});o.sort(function(t,e){return t.offset-e.offset});return n.map(o,function(t){return t.element})}};n[m]=function(){var t,n;n=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(h[n]){return h[n].apply(null,t)}else{return h.aggregate.call(null,n)}};n[m].settings={resizeThrottle:100,scrollThrottle:30};return i.on("load.waypoints",function(){return n[m]("refresh")})})}).call(this);
	
//----------------------------------------

// Now the javascript has been setup this code triggers all the effects
		
$(document).ready( function() 
	{	

	/* Add timeout for animation */
	// 'Back to', simplicity, the 6 grid with icons starting 'modern design'
		setTimeout(function(){
			$(".ping.title").addClass("pop");
		},1000);
		setTimeout(function(){
			$(".ping.desc").addClass("pop");
		},1200);
		setTimeout(function(){
			$(".ping.scroll-down").addClass("pop");
		},4500);

		/* Waypoint script to add action when scroll onto objects */
		/* This effect brought by http://imakewebthings.com/jquery-waypoints/ */
		
		// This sets the Waypoint triggers
		// Waypoints is the easiest way to trigger a function when you scroll to an element.
		// this adds a scrolling action to elements but not the 'counting up'
		// delete the ones you dont use
		$( '#demo-feature-graph' ).waypoint(function()
			{
				$( '#demo-feature-graph' ).addClass( 'scroll-action' );
			}, {
				offset: '70%'
			})
			
	});		
	
//----------------------------------------			

})(jQuery);
}, 0);

HTML

<div id="demo-feature-graph" class="appearing">

	<div class="grid-layout feature-graph">
		<div class="grid-col">
			<div class="graph-item item1 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="link-icon fa fa-mobile"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Mobile Ready</a></h3>
						<p class="desc">We have specialized in mobile ready websites for more than 2 years so we understand what is required when designing a responsive website.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-col">
			<div class="graph-item item2 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="link-icon fa fa-search"></a>
					<div class="text">
						<h3 class="heading"><a href="#">SEO Optimized</a></h3>
						<p class="desc">Our websites as standard come with a lot of SEO work already done.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="grid-layout feature-graph">
		<div class="grid-col">
			<div class="graph-item item3 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="link-icon fa fa-eyedropper"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Various Styles</a></h3>
						<p class="desc">We have many styles and colours we can build your personalized site with.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-col">
			<div class="graph-item item4 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="link-icon fa fa-folder-open-o"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Our Portfolio</a></h3>
						<p class="desc">We have built up a good customer base because of our ongoing customer support</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</div>

Notes

This code is untouched from the original JSN Mini demo but collated in one place.
The module name in JSN Mini is 'Feature Graph'
There are notes in the CSS about which elements to alter
you could swap jsn-demo-page for jsn-feature-graph-module etc.. in the css and java script and then either use that in the menu item or put it in the module
Add the class suffix, jsn-demo-page, to page
To get this demo working without adding the page suffix .jsn-demo-page I wrapped the code in
```
<div class="jsn-mobile jsn-demo-page"></div>
```
- This simulates adding the class but this technique can also be used if you want to use it in a module.
- You can remove the .jsn-demo-page from the CSS as another option instead of wrapping the CSS code in the<div> above.

I changed the following from the original code to get working

Remmed out (Disabled background colour and padding)

.jsn-demo-page #demo-feature-graph {
	padding: 50px 0;
	background-color: #f6fafc;
}

Changed width 400px to 300px

.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
	padding: 60px 0 0 0; /* slightly different removing the bottom padding makes the first bubble work correctely*/
	width: 400px; /* This controls the width of an item */
	max-width: 100%;
}

Changed all the icon references to a Font Awesome reference so I could use Font Awesome icons instead
```
[class*="jsn-icon-"]

to

[class*="link-icon fa fa-"]
```
and I changed the icon references in the HTML. Each icon can be different reference.
```
class="jsn-icon-cup"

to

class="link-icon fa fa-mobile"
```

added this extra rule

	/* add individual item overrides here for padding to correct the vertical bar meeting */
	.jsn-demo-page #demo-feature-graph .feature-graph .graph-item.item2 .graph-item-inner {
		padding-bottom: 52px;
	}

There is a new version of the 'Feature Graph' without the use of icons. I will add it here at some point or you can check out the current demo at Joomlashine.

Published in Packages

Sunday, 14 February 2016 20:28

Tabulous

This responsive module is a great way to display Quotes or testimonials from your customers.

Minimalist Style

A style that uses pared-down design elements, removing everything in a piece, leaving just the necessary and needed elements

130+ font-icons for many purposes

JSN Mini is also the first JoomlaShine template with 130+ outstanding font icons for you to choose from.

Extended style for three extensions

JSN Mini is well-crafted with extended styles for three extensions: Advanced Portfolio from ExtStore, Kunena and K2.

Joomla! 2.5 &3.x Compatibility

Natively compatible with Joomla! 2.5 & Joomla! 3.x versions

Sticky menu

Sticky menu makes websites quicker to navigate.

Minimalist Style
130+ font-icons for many purposes
Extended style for three extensions
Joomla! 2.5 &3.x Compatibility
Sticky menu

CSS

/* TABULOUS by http://git.aaronlumsden.com/tabulous.js/ */
#demo-tab-news {
	padding: 50px 0;
}
#demo-tab-news #tabs {
	width: 1100px;
	max-width: 100%;
	margin: 50px auto;
}

#demo-tab-news ul.tabs_title {
	display: inline-block;
	float: right;
	width: 50%;
	margin: 0;
	padding: 20px 0;
	border-left: 1px solid #e1e1e1;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#demo-tab-news #tabs ul.tabs_title li {
	display: block;
	margin-right: 2px;
	margin: 0;
}

#demo-tab-news #tabs ul.tabs_title li a {
	position: relative;
	display: block;
	padding: 20px 0 20px 60px;
	text-decoration: none;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
#demo-tab-news #tabs ul.tabs_title li a:hover,
#demo-tab-news #tabs ul.tabs_title li a.tabulous_active {
	color: #000;
}
#demo-tab-news #tabs ul.tabs_title li a:before {
	content: "";
	display: block;
	position: absolute;
	left: -10px;
	width: 9px;
	height: 9px;
	background-color: #ddd;
	border: 5px solid #fff;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
#demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	transform: scale(1.5,1.5);
	-moz-transform: scale(1.5,1.5);
	-webkit-transform: scale(1.5,1.5);
}
.jsn-color-blue #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #34a7c8;
}
.jsn-color-red #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #e95e53;
}
.jsn-color-green #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #40af6f;
}
.jsn-color-orange #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #f39c12;
}
.jsn-color-violet #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #b485c7;
}
.jsn-color-grey #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
	background-color: #222;
}

#demo-tab-news #tabs_container {
	overflow: hidden;
	float: left;
	position: relative;
	padding-top: 40px;
	width: 50%;
	color: #999;
	line-height: 2em;
}
#demo-tab-news #tabs_container > div {
	margin-right: 60px;
}
#demo-tab-news #tabs_container .news-title {
	text-transform: uppercase;
	color: #000;
	letter-spacing: 5px;
	font-size: 1.8em;
	margin: 0 0 30px;
}

.transition {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.make_transist {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.hidescale {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
}

.showscale {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.hideleft {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

.showleft {
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.hidescaleup {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

.showscaleup {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;
}

.hideflip {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;

	-webkit-transform: rotatey(-90deg) scale(1.1);
	-moz-transform: rotatey(-90deg) scale(1.1);
	-o-transform: rotatey(-90deg) scale(1.1);
	-ms-transform: rotatey(-90deg) scale(1.1);
	transform: rotatey(-90deg) scale(1.1);

	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.showflip {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition-delay: .3s;
	-moz-transition-delay: .3s;
	-o-transition-delay: .3s;
	-ms-transition-delay: .3s;
	transition-delay: .3s;

	-webkit-transform: rotatey(0deg) scale(1);
	-moz-transform: rotatey(0deg) scale(1);
	-o-transform: rotatey(0deg) scale(1);
	-ms-transform: rotatey(0deg) scale(1);
	transform: rotatey(0deg) scale(1);

	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.tabulousclear {
	display: block;
	clear: both;
}

/* ===== RESPONSIVE OPTIMIZING ===== */
@media only screen and (max-width: 1100px), (max-device-width: 1100px) {
	.jsn-desktop #demo-tab-news #tabs_container > div {
		margin-left: 60px;
	}
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {

	/*.jsn-mobile.jsn-demo-page #jsn-usermodules1,
	.jsn-mobile.jsn-demo-page #jsn-usermodules2 {
		padding: 0 !important;
	}*/

	.jsn-mobile #demo-tab-news {
		padding: 30px 50px;
	}
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile #demo-tab-news #tabs_container {
		width: 89%;
		padding-top: 0;
	}
	.jsn-mobile #demo-tab-news ul.tabs_title {
		width: 10%;
	}
	.jsn-mobile #demo-tab-news #tabs ul.tabs_title li a {
		text-indent: -1000px;
		padding-left: 0px;
	}
	.jsn-mobile #demo-tab-news #tabs_container .news-title {
		font-size: 1.4em;
		margin-bottom: 10px;
	}
	.jsn-mobile #demo-tab-news #tabs_container > div {
		margin-right: 30px;
	}
}

setTimeout(function() {
(function($) {
	
//----------------------------------------

// Tabulous - The Vertical Line Thing

/* Tab function */
(function ( $, window, document, undefined ) {

    var pluginName = "tabulous",
        defaults = {
            effect: 'scale'
        };

       // $('<style>body { background-color: red; color: white; }</style>').appendTo('head');

    function Plugin( element, options ) {
        this.element = element;
        this.$elem = $(this.element);
        this.options = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype = {

        init: function() {

            var links = this.$elem.find('ul li a');
            var firstchild = this.$elem.find('li:first-child').find('a');
            var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');

            if (this.options.effect == 'scale') {
             tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
            } else if (this.options.effect == 'slideLeft') {
                 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
            } else if (this.options.effect == 'scaleUp') {
                 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
            } else if (this.options.effect == 'flip') {
                 tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
            }

            var firstdiv = this.$elem.find('#tabs_container');
            var firstdivheight = firstdiv.find('div:first').height();

            var alldivs = this.$elem.find('div:first').find('div');

            alldivs.css({'position': 'absolute'});

            firstdiv.css('height',firstdivheight+'px');

            firstchild.addClass('tabulous_active');

            links.bind('click', {myOptions: this.options}, function(e) {
                e.preventDefault();

                var $options = e.data.myOptions;
                var effect = $options.effect;

                var mythis = $(this);
                var thisform = mythis.parent().parent().parent();
                var thislink = mythis.attr('href');


                firstdiv.addClass('transition');

                links.removeClass('tabulous_active');
                mythis.addClass('tabulous_active');
                thisdivwidth = thisform.find('div'+thislink).height();

                if (effect == 'scale') {
                    alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');
                } else if (effect == 'slideLeft') {
                    alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');
                } else if (effect == 'scaleUp') {
                    alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');
                } else if (effect == 'flip') {
                    alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
                    thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');
                }

                firstdiv.css('height',thisdivwidth+'px');

            });         
            
        },

        yourOtherFunction: function(el, options) {
            // some logic
        }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
	// not 100% if this is required for Tabulous
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            new Plugin( this, options );
        });
    };

})( jQuery, window, document );


// Now the javascript has been setup this code triggers all the effects
		
$(document).ready( function() 
	{
	/* Fabulous tab news */
		$('#tabs').tabulous({
	    	effect: 'scale' // Available effects: scale, slideLeft, scaleUp, flip
	    });
	});

//----------------------------------------	

})(jQuery);
}, 0);

HTML

<div id="demo-tab-news">
	<div id="tabs" class="clearfix">

		<div id="tabs_container">

			<div id="tabs-1">
				<h3 class="news-title">Minimalist Style</h3>
			    <p>A style that uses pared-down design elements, removing everything in a piece, leaving just the necessary and needed elements</p>
			</div>

			<div id="tabs-2">
				<h3 class="news-title">130+ font-icons for many purposes</h3>
			    <p>JSN Mini is also the first JoomlaShine template with 130+ outstanding font icons for you to choose from.</p>
		
			</div>

			<div id="tabs-3">
				<h3 class="news-title">Extended style for three extensions</h3>
			    <p>JSN Mini is well-crafted with extended styles for three extensions: Advanced Portfolio from ExtStore, Kunena and K2.</p>
			</div>

			<div id="tabs-4">
				<h3 class="news-title">Joomla! 2.5 &3.x Compatibility</h3>
			    <p>Natively compatible with Joomla! 2.5 & Joomla! 3.x versions</p>
			    
			</div>

			<div id="tabs-5">
				<h3 class="news-title">Sticky menu </h3>
			    <p>Sticky menu makes websites quicker to navigate.</p>
			    
			</div>

		</div><!--End tabs container-->

		<ul class="tabs_title">
			<li><a href="#tabs-1" title="">Minimalist Style</a></li>
			<li><a href="#tabs-2" title="">130+ font-icons for many purposes</a></li>
			<li><a href="#tabs-3" title="">Extended style for three extensions</a></li>
			<li><a href="#tabs-4" title="">Joomla! 2.5 &3.x Compatibility</a></li>
			<li><a href="#tabs-5" title="">Sticky menu </a></li>
		</ul>
		
	</div><!--End tabs-->	
</div>

CSS Fix for this template

/* Fixes White / Missing Balls */
/* Correct an applied global rule - template.css line 8 */	
	*:before,
	*:after {
		box-sizing: content-box;
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
}

Changed settings for a client

These were made to make Tabulous for a better fit on a clients website.

/* Tabulous - changes for a better fit */
#demo-tab-news {
	padding: 1px 0;
}

#demo-tab-news #tabs {
	width: 1100px;
	max-width: 100%;
	margin: 20px auto;
}

#demo-tab-news #tabs_container > div {
	margin-right: 30px;
}

Notes

The Tabulous script is from http://git.aaronlumsden.com/tabulous.js/
This is taken from the JSN Mini template demo
In the JSN Mini demo the module is called 'Tab News'
Add the class jsn-demo-page to the page suffix to get the code to work
To get this demo working without adding the page suffix .jsn-demo-page I wrapped the code in
```
<div class="jsn-mobile jsn-demo-page"></div>
```
- This simulates adding the class but this technique can also be used if you want to use it in a module
- You can remove the .jsn-demo-page from the CSS as another option instead of wrapping the CSS code in the<div> above.
If the text looks of center it is probably down to the module that you select that is right on the edge. The telling sign is that the dividing line is in the very middle of the page
- outer container = <div id="demo-tab-news" style="margin: auto auto; max-width: 1100px;"> - this will show you the edges clearly in firebug
- inner container = <div id="tabs" class="clearfix"> - this will show you the edges clearly in firebug
This code can cause everything to look off center especially if the website you are adding this on is not a wide website. Try reducing it
```
#demo-tab-news #tabs_container > div {
	margin-right: 60px;
}
```
Also the title and the main content of the tab is used to push the container wider as you would expect. So if you have short titles and less than 1 long line of text, the content the tab will also appear of center to the left.

Published in Packages

Sunday, 14 February 2016 19:59

Module - Pink Paint Title

Module Title

This is the modules content

CSS

/* Module - Pink Paint Title - Background */
.module-pink-paint-title h3 {
	/*padding-top: 100px;
	padding-left: 20px;*/
	height: 80px;
	background-image: url(../images/custom/module-title.jpg) !important;
	background-repeat: no-repeat !important;
}

/* Module - Pink Paint Title - Text */
.module-pink-paint-title h3.jsn-moduletitle span {
	color: white;
	padding-top: 20px;
	padding-left: 20px;
}

Published in JSN Modules

Page 29 of 96

Items filtered by date: December 2015

Lancastrian IT

Must Be Media

Combined Signatures (Lancastrian IT and Must Be Media)

Other

Modern Design

Full Documentation

Painless Configuration

Responsive design

Multi-language support

Social media integrated

Our latest projects

Minimalist Style

130+ font-icons for many purposes

Extended style for three extensions

Joomla! 2.5 &3.x Compatibility

Sticky menu

Powered by

Done

Winning

Quantity

Modern Design

Full Documentation

Painless Configuration

Responsive design

Multi-language support

Social media integrated

Notes

Solution

Shipping Tab Still not appearing

The package_id has been set as a text-based attribute after manually creating it

My Way Forward Notes

Our latest projects

Notes

Powered-By

Done

Winning

Quantity

Notes

Notes

Minimalist Style

130+ font-icons for many purposes

Extended style for three extensions

Joomla! 2.5 &3.x Compatibility

Sticky menu

Notes

Module Title

Legal

Resources

QuantumWarp

Follow Us