• Home

Items filtered by date: Friday, 06 February 2026

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

01

Soldiers

Works

Done

01

Projects

Design

Winning

01

Awards

Client

Quantity

01

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)";
}

JS

// 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
Read more...
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
Read more...
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.

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;
	}
}

JS

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
Read more...
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
Read more...
Sunday, 14 February 2016 19:56

Fonts 

/* Change all Font colors */
#jsn-page {
	color: #6B1D10;
}

 

/* Set Site Font */
p, #jsn-body{
	font-family: "Comic Sans MS",cursive;
}

Adding a Font into the Template Framework

If you want to add google font into your template. You can add google font into

plugins/system/jsntplframework/libraries/joomlashine/form/fields/jsnfont.php

protected $google = array(
		'Open Sans',
		'Oswald',
		'Droid Sans',
		'Lato',
		'Open Sans Condensed',
		'PT Sans',
		'Ubuntu',
		'PT Sans Narrow',
		'Yanone Kaffeesatz',
		'Roboto Condensed',
		'Source Sans Pro',
		'Nunito',
		'Francois One',
		'Roboto',
		'Raleway',
		'Arimo',
		'Cuprum',
		'Play',
		'Dosis',
		'Abel',
		'Droid Serif',
		'Arvo',
		'Lora',
		'Rokkitt',
		'PT Serif',
		'Bitter',
		'Merriweather',
		'Vollkorn',
		'Cantata One',
		'Kreon',
		'Josefin Slab',
		'Playfair Display',
		'Bree Serif',
		'Crimson Text',
		'Old Standard TT',
		'Sanchez',
		'Crete Round',
		'Cardo',
		'Noticia Text',
		'Judson',
		'Lobster',
		'Unkempt',
		'Changa One',
		'Special Elite',
		'Chewy',
		'Comfortaa',
		'Boogaloo',
		'Fredoka One',
		'Luckiest Guy',
		'Cherry Cream Soda',
		'Lobster Two',
		'Righteous',
		'Squada One',
		'Black Ops One',
		'Happy Monkey',
		'Passion One',
		'Nova Square',
		'Metamorphous',
		'Poiret One',
		'Bevan',
		'Shadows Into Light',
		'The Girl Next Door',
		'Coming Soon',
		'Dancing Script',
		'Pacifico',
		'Crafty Girls',
		'Calligraffitti',
		'Rock Salt',
		'Amatic SC',
		'Leckerli One',
		'Tangerine',
		'Reenie Beanie',
		'Satisfy',
		'Gloria Hallelujah',
		'Permanent Marker',
		'Covered By Your Grace',
		'Walter Turncoat',
		'Patrick Hand',
		'Schoolbell',
		'Indie Flower'
	);

and plugins/system/jsnframework/assets/joomlashine/js/visualdesignstyle.js

var listFont = {
                    "Open Sans":"Open Sans", "Oswald":"Oswald", "Droid Sans":"Droid Sans", "Lato":"Lato", "Open Sans Condensed":"Open Sans Condensed", "PT Sans":"PT Sans", "Ubuntu":"Ubuntu", "PT Sans Narrow":"PT Sans Narrow",
                    "Yanone Kaffeesatz":"Yanone Kaffeesatz", "Roboto Condensed":"Roboto Condensed", "Source Sans Pro":"Source Sans Pro", "Nunito":"Nunito", "Francois One":"Francois One", "Roboto":"Roboto", "Raleway":"Raleway", "Arimo":"Arimo",
                    "Cuprum":"Cuprum", "Play":"Play", "Dosis":"Dosis", "Abel":"Abel", "Droid Serif":"Droid Serif", "Arvo":"Arvo", "Lora":"Lora", "Rokkitt":"Rokkitt", "PT Serif":"PT Serif", "Bitter":"Bitter", "Merriweather":"Merriweather", "Vollkorn":"Vollkorn",
                    "Cantata One":"Cantata One", "Kreon":"Kreon", "Josefin Slab":"Josefin Slab", "Playfair Display":"Playfair Display", "Bree Serif":"Bree Serif", "Crimson Text":"Crimson Text", "Old Standard TT":"Old Standard TT", "Sanchez":"Sanchez",
                    "Crete Round":"Crete Round", "Cardo":"Cardo", "Noticia Text":"Noticia Text", "Judson":"Judson", "Lobster":"Lobster", "Unkempt":"Unkempt", "Changa One":"Changa One", "Special Elite":"Special Elite",
                    "Chewy":"Chewy", "Comfortaa":"Comfortaa", "Boogaloo":"Boogaloo", "Fredoka One":"Fredoka One", "Luckiest Guy":"Luckiest Guy", "Cherry Cream Soda":"Cherry Cream Soda",
                    "Lobster Two":"Lobster Two", "Righteous":"Righteous", "Squada One":"Squada One", "Black Ops One":"Black Ops One", "Happy Monkey":"Happy Monkey", "Passion One":"Passion One", "Nova Square":"Nova Square", "Metamorphous":"Metamorphous", "Poiret One":"Poiret One", "Bevan":"Bevan", "Shadows Into Light":"Shadows Into Light", "The Girl Next Door":"The Girl Next Door", "Coming Soon":"Coming Soon",
                    "Dancing Script":"Dancing Script", "Pacifico":"Pacifico", "Crafty Girls":"Crafty Girls", "Calligraffitti":"Calligraffitti", "Rock Salt":"Rock Salt", "Amatic SC":"Amatic SC", "Leckerli One":"Leckerli One", "Tangerine":"Tangerine", "Reenie Beanie":"Reenie Beanie", "Satisfy":"Satisfy", "Gloria Hallelujah":"Gloria Hallelujah", "Permanent Marker":"Permanent Marker", "Covered By Your Grace":"Covered By Your Grace", "Walter Turncoat":"Walter Turncoat", "Patrick Hand":"Patrick Hand", "Schoolbell":"Schoolbell", "Indie Flower":"Indie Flower"
                }

 

Published in Joomlashine
Read more...
Sunday, 14 February 2016 19:50

General / Misc 

/* Correct Modal Positioning */
@media (max-width: 767px) {
.modal {
		position: inherit !important;
	}
}

 

/* Rounded Logo Border CSS - thebayhorsearkholme.co.uk */
logo-background {
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border: 4px solid #000000;
}

 

 

Published in Design Elements, Styling, Effects and Code
Read more...
Sunday, 14 February 2016 11:07

Page Adornments

Page Adornments are images that are tagged on to pages without affecting its functionality to make the look nicer or unique.

The technique is easy when you know the CSS to add.

Depending on the extension you want these effect to appear on you might need to change the element that you have them attached to. Also do not forget the order of the elements so they look correct. i.e. the Barber's Line needs to appear before the paint can as the paint is falling on the line etc..

Barber Line

This can be any image you want running alone the bottom of your page to make it look nice. You can make it global or specific to a page by making a specific class.

/* Barber Line at the bottom of articles */
#jsn-mainbody-content{
	background: url(../images/custom/article-footer.jpg) repeat-x bottom;
	padding-bottom: 10px !important;
}

Page Icons

These look great in conjuction with the Barber Line effect. The icons do not need to go in the bottom right corner.

These are set as classes so you can use them on multiple pages easily. all you have to do is add the appropriate .page-footer-branding-pack-1 to the page class suffix.

/* Page Icons */
#jsn-mainbody{padding-bottom: 150px !important;}
.page-footer-branding-pack-1 #jsn-mainbody {background: url(../images/custom/pages/branding-pack-1.png) no-repeat bottom right;}
.page-footer-branding-pack-2 #jsn-mainbody {background: url(../images/custom/pages/branding-pack-2.png) no-repeat bottom right;}
.page-footer-desk-clip #jsn-mainbody {background: url(../images/custom/pages/desk-clip.png) no-repeat bottom right;}
.page-footer-easel #jsn-mainbody {background: url(../images/custom/pages/easel.png) no-repeat bottom right;}
.page-footer-paint-can #jsn-mainbody {background: url(../images/custom/pages/paint-can.png) no-repeat bottom right;}
.page-footer-search #jsn-mainbody {background: url(../images/custom/pages/search.png) no-repeat bottom right;}
.page-footer-services #jsn-mainbody {background: url(../images/custom/pages/services.png) no-repeat bottom right;}

 

Published in Styled Elements
Read more...
Sunday, 14 February 2016 10:30

Simple Image Gallery Pro

sigProPolaroids can possibly be swapped for sigProContainer so you can alter the settings for other styles.

/* Simple Image Gallery Pro - Make Polaroid container slimmer - Polaroids Line 15 */
ul.sigProPolaroids {
    /*clear: both;
    list-style: outside none none;
    margin: 20px !important;
    overflow: hidden;
    padding: 40px 60px !important;*/
	padding: 20px 20px !important;
}

 

/* Simple Image Gallery Pro - Add baclground to the gallery container - Polaroids Line 15 */.
ul.sigProPolaroids {
  
  /*background-image: url('../../../images/pages/home/farm-shadow.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  
  or shorthand below
  
  */
  
  background: url('../../../images/pages/home/farm-shadow.jpg') no-repeat center;
  background-size: 100%;
}

Center Simple Image Gallery

This works for both the Pro and non-Pro, but does not centre properly in mobile/narrow view.

<div style="margin: auto auto; max-width: 80%;">{gallery}images{/gallery}</div>

The key is that the div must have a width set less than 100%. you cannot center somethign that is 100% wide.

The following does not work:

<div style="max-width: 80%; text-align: center;">{gallery}images{/gallery}</div>

Center Single/Multiple Simple Image Gallery

This works in desktop, when in mobile, the galleries do not center but do form a single column

<div style="text-align: center;">
    <div style="display: inline-block;">
        <div style="float: left;">{gallery}sophie/1{/gallery}</div>
        <div style="float: left;">{gallery}sophie/2{/gallery}</div>
    </div>
</div>
<div style="clear: both;">&nbsp;</div>

This code works in all viewports (using floats)

<div style="text-align: center;">
    <div style="display: inline-block;">
        <div style="float: left;">{gallery}sophie/1{/gallery}</div>
    </div>
    <div style="display: inline-block;">
        <div style="float: left;">{gallery}sophie/2{/gallery}</div>
    </div>
</div>
<div style="clear: both;">&nbsp;</div>

This code works in all viewports (inline version) and is the prefered option.

<div style="text-align: center;">
    <div style="display: inline-block;">{gallery}sophie/1{/gallery}</div>    
    <div style="display: inline-block;">{gallery}sophie/2{/gallery}</div>    
</div>
<div style="clear: both;">&nbsp;</div>

Gallery Images are rotated

when you upload images to use in the simple image gallery some or all images have been rotated 90 deg.

This is down to the the image dimensions, there seems to be an issue with the max size. You will notice this more with portrait.

eg:

A portrait image of 1536px wide X 2048px High will rotate 90deg both in the thumbnail and the full size image (possibly points to the liabry or server).

To fix this just reduce the image height (keep ratio if you want) down from 2048. Reducing it even by 1px fixes the issue as it seems to be >= 2048px that the setup does not like

Published in Joomla Extensions
Read more...
Sunday, 14 February 2016 10:28

JComments

This is a style that I used for a client on the Nuru template but at the very least shows you the classes you need to alter.

/* JComments Wrapper */
#jc {
	padding: 5px;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
	background-color: #220203;
	/*border: 1px solid #DBB054;*/
	max-width: 1070px;
	margin: 0 auto;
}

/* Comment Box */
#jc .rbox {
	background: transparent;
	border: none;  
	padding: 10px;
	border-top: 1px dotted #ee9200; 
	border-radius: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Comment Content - Set Font for the comments */
#jc .comment-body{
  font-family: Georgia,"Times New Roman",Times,serif;
  font-size: 18px;
  line-height: 22px;
  color: #ee9200;
  text-align: left;
  margin-bottom: 20px;
}

/* Latest Module */
.jcomments-latest {
	font-family: Georgia,"Times New Roman",Times,serif;
	font-size: 18px;
	line-height: 22px;
	color: #ee9200;
	padding: 20px !important;
	border-radius: 25px;
	background-color: #220203;
	border: 1px solid #DBB054;
}

/* Latest Module - Rounded Corners */
ul.jcomments-latest .rounded {
	padding: 20px !important;
	border: none !important;
	border-top: 1px dotted #ee9200 !important;
    -moz-border-radius: 5px;
    border-radius: 0px !important;
	margin-top: 20px;
}

 

Published in Joomla Extensions
Read more...
Sunday, 14 February 2016 10:22

Modules / Positions

Modules / Positions

/* make bottom module backgrounds white */
#jsn-content-bottom .jsn-modulescontainer {
    background: #fff;
}

 

/* make menu and footer background purple */
#jsn-header, #jsn-footer {
	background: #162156;
}

 

/* make header background orange */
.jsn-color-orange #jsn-promo {
  background-color: #DC2B02;
}

 

/* make footer background orange */
#jsn-footer {
  background-color: #DC2B02; 
}

 

/* change footer menus to white */
#jsn-footer a {
	color: white;
 }

 

/* Make Module background this color */
div.solid-1 div.jsn-modulecontainer_inner {
	background: #162156;
}

 

/* make header black */
#jsn-headerright-inner {background: black;}

 

/* Reduce border to inner only */
#jsn-header_inner {border: none;}
#jsn-header_inner2 {border-bottom: 1px solid #DDD;}

 

/* remove gap between content and footer */
#jsn-footer {padding: 0px 0px 10px;}

 

/* add padding to the content as it is on the edge */
#jsn-mainbody { padding-left: 10px; padding-right: 10px;}

 

/* corrects login box background - same as jsn uni-form - grey */
.well {background-color: #444444;}

 

/* main content area*/
#jsn-page {
	color:#e4e4e4;
	overflow: hidden;
	margin: 0 auto;
	background: url(../images/lancastrian/content-background-strip.png) repeat;
	padding: 0 20px;
}

 

/* main page styling - Black background and gold border */
#jsn-mainbody {
	padding: 10px 10px;
	background-color: black;
	border: 1px solid #DBB054;
}

 

#jsn-content-bottom {
	background: none;
	/*border-top: 1px solid #e4e4e4;*/
	border-top: none;
	padding: 10px 0;
}

 

/* Main Page Content Area */
#jsn-page {
	color:#e4e4e4;
	overflow: hidden;
	margin: 0 auto;
	background: url(../images/lancastrian/content-background-strip.png) repeat;
	padding: 0 20px;
}

 

/* main page styling - Black background and gold border - this is the main content DIV */
#jsn-mainbody {
	padding: 10px 10px;
	background-color: black;
	border: 1px solid #DBB054;
}

 

/* Make Header White */
#jsn-header {
    background: #fff none repeat scroll 0 0;
}

 

/* style footer */
#jsn-footer {
	color: #5f5f5f;
	font-size: 12px;
	background: #EFEFEF;
}
#jsn-footer-inner {
	border-top: none;
}

 

Published in Joomlashine
Read more...
Page 31 of 96