Items filtered by date: December 2015

3D Button

This 3D button is made purley by CSS. I think I have sued a button generator to create this intially but it is easier just to copy this button and alter as needed. Below is 2 buttons but they do not flow underneath easch other properly if the screen gets to small. If mulitple buttons are required I would make the Block Level elements using float etc...

HTML

<div style="text-align: center; margin: 60px 0;">
	<span style="padding: 10px; white-space: nowrap;"><a href="http://quantumwarp.com/" style="color: #e6e6e6; font-size: 20px; padding: 20px; text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: linear-gradient(0deg, #6b1d10 30%, #6b1d10 70%); -webkit-box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75); -moz-box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75); box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75);">Book Online</a></span>
	<span style="padding: 10px; white-space: nowrap;"><a href="http://quantumwarp.com/" style="color: #e6e6e6; font-size: 20px; padding: 20px; text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: linear-gradient(0deg, #6b1d10 30%, #6b1d10 70%); -webkit-box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75); -moz-box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75); box-shadow: -13px 13px 1px rgba(50, 50, 50, 0.75);">View Prices</a></span>
</div>

ExecuteCode comprises of a system plugin and an editor button and allows you enter real code via your WYSIWYG without the code getting lost and you can even edit the code.

Add external code files inline

<link rel="stylesheet" type="text/css" href="http://demo.joomlashine.com/joomla-templates/jsn_air/pro/images/content-top/jquery.horizontal.scroll.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://demo.joomlashine.com/joomla-templates/jsn_air/pro/images/content-top/js/jquery.horizontal.scroll.js" type="text/javascript"></script>
<script src="/media/joomlashine/jsn_air/custom.js" type="text/javascript"></script>

You can obviously also use

<style type="text/css">

</style>

<script type="text/javascript">

</script>

Incorrect Copy and Paste

When copying and pasting with Google Chrome there will be these A characters inserted where Tabs should be.

/* Test code */Â 
.dodgy-copy {
    display: inline-block;
    outline: medium none;
    padding: 4px;
    transition: all 300ms ease-out 0s;
}

Solution

Use firefox. I should probably look at updating my code.

This is a template of how I want package articles to be layed out. It keeps all of these articles follow the same format. Ironically this that I am writing is where the description of the package should go.

• Real important information can go in the description (ie this package is not responsive) the rest should go in the notes at the bottom
• All demo code should be run from a live code block and not left naked in the wysiwyg. If you start using normal HMTL in an article when showing of a demo it can get messy. If you keep the demo code in a live code block when you edit the code in the backend it makes things a lot easier as you can clearly see what is what.
• When putting code in the live blocks you should follow the same format as this articles so the order is maintained. Occassionally you will need to move the location of the javascript for correct execution and in this case it is fine to change the order of the items but keep the order the same in the live block as the rest of the article so it makes sense. The CSS/JS/HTML code in the live block should be seperated by an empty line.
• The code getting display should not be encased in <script> or <style> tags but left naked. The reason for this is, it makes it easier to copy and past the code into a custom.css or custom.js file as most people will use this method rather that inserting the code inline. The tags are only used when the code is inline.
• Keep the code blocks all collapsed unless they are short and there are not many of them, in this cas it is a bit pointless collapsing the code blocks and just adds another step where one is not needed.
• Only include the display blocks for the code types you are using. They dont all need to be present for every article but make sure you maintain the correct order.
• You might also have to alter the live code so it run with no conflict like altering class names or applying a template fix to allow the deom to run with no issues. If you have to add specific code you should add it to the notes like in the list below because it could be helpful in diagnosing issues later.
• no gap between live and display code
• Where the desciption cannot be easily seperated from the code block immediately folloing it, you should use a <hr> splitting line and possibly an empty line or two.
• I am not sure what I am doing with attachments or assets yet.
• The code being display should use the correct links following my rules and as such all the assets would be in the it's module folder ( i.e. 'images/modules/package-article-template') and the live code should point to the KB article's folder. This keeps things neat and all the assets in one place but whilst allowing the code to be easily deployed on client projects. It also has the side effect of stopping my internal links getting distributed over the interenet.

CSS

.demo-class{
    border: 1px solid black;
    padding 10px;
}

CSS (Optional / Joomlashine)

.jsn-demo-class{
    border: 1px solid black;
    padding 10px;
}

CSS (Fix for this template to get the demo running)

.jsn-demo-class-template-fix{
    border: 1px solid black;
    padding 10px;
}

JS Dependancies (Joomla / External / 3rd Party)

• bootstrap.min.js - No point in adding this dependacy to every article because it is inbuillt to Joomla but reference it though

JS

jQuery(document).ready(function(){ 
	// Do Something
}

JS (Optional / Joomlashine)

jQuery(document).ready(function(){ 
	// Do Something
}

JS (Fix for this template to get the demo running)

jQuery(document).ready(function(){ 
	// Do Something
}

HTML

<div class="demo-class">Live Code Block</div>

<!-- Module 1: Module Title -->
<div>Module Code</div>

<!-- Module 2: Module Title -->
<div>Module Code</div>

<!-- Module 3: Module Title -->
<div>Module Code</div>

Notes

Item 1 (use this title if notes need grouping)

• These are my Notes

Item 2 (use this title if notes need grouping)

• These are my Notes

Asset Sources

• HTML/CSS/JS Code = The code on this page
• File is used for  = File Name (linked to download file - see notes in description about attachments) - Website (if needed) - Notes on the file source (if any)
• File is used for  = File Name (linked to download file - see notes in description about attachments) - Website (if needed) - Notes on the file source (if any)

Links

Links Group 1 (use this title if links need grouping)

• These are my links

Links Group 2 (use this title if links need grouping)

• These are my links

The is a Staff/Team Member Horizontal Scroll effect Mini gallery which is great for showcasing your staff.

Some of the colour styling is specific to Joomalshine Templates but can easily be changed to match your needs by just enabling a simple css class. I have added a grey background to help display the package.

This module was originally in the content-top module position and has the module classes 'display-desktop top-accordion'. The 'desktop-display' class has been used because this module is not reponsive and so is only showed in the desktop mode. The 'top-accordian' class is Joomlashine specific and I am not 100% sure what it does but I have included the code here anyway.

From JSN Air.

CSS

.our-team {
	background-color: #F5F5F5;
}

.our-team #team-list {
	width: 960px;
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
	height: 240px;
	margin: 0 auto;
}

.our-team #team-list .horizontal {
	width: 1920px;
	margin: 0px;
	padding: 0px;
	height: 220px;
}

.our-team #team-list .horizontal li {
	width: 180px;
	float: left;
	list-style: none;
	margin: 0px;
	text-align: center;
	padding: 6px;
}

.our-team #team-list .horizontal li p.icon {
	background: #fff;
	padding: 10px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;

}

.our-team #team-list .horizontal li p.icon a.avatar {
	display: inline-block;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	overflow:hidden;
	border:10px solid #f2f2f2;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
}

.our-team #team-list .horizontal li img {
	background:#FFF;
	margin: 0px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.our-team #team-list .horizontal li p.icon a.avatar:hover {
	border:10px solid #e5e5e5;
	padding:10px;
	margin:-10px;
}

/*== COLORS ==*/

body.jsn-color-blue .our-team #team-list .horizontal li p.icon a.avatar:hover {
	border:10px solid #2D5E95;
}

body.jsn-color-cyan .our-team #team-list .horizontal li p.icon a.avatar:hover {
	border:10px solid #3d8d8b;
}

body.jsn-color-green .our-team #team-list .horizontal li p.icon a.avatar:hover {
	border:10px solid #7bae00;
}

body.jsn-color-pink .our-team #team-list .horizontal li p.icon a.avatar:hover {
	border:10px solid #CA0554;
}

body.jsn-color-orange .our-team #team-list .horizontal li p.icon a.avatar:hover {
	border:10px solid #ff6000;
}

body.jsn-color-brown .our-team #team-list .horizontal li p.icon a.avatar:hover {
	border:10px solid #5E3729;
}

body.jsn-color-red .our-team #team-list .horizontal li p.icon a.avatar:hover {
	border:10px solid #E92517;
}

/* ===== SCROLLING STYLES ===== */

.our-team #scrollbar {
	position: relative;
	width: 960px;
	height: 10px;
	display: block;
	font-size: 1px;
	top: 10px;
	margin: 0 auto;
}

.our-team #track {
	position: absolute;
	left: 0px;
	top: 0;
	width: 960px;
	height: 4px;
	background: #e2e2e2;
}

.our-team #dragBar {
	position: absolute;
	left: 0px;
	top: 0 !important;
	width: 180px !important;
	height: 4px;
	background: #ca0554;
	cursor: move;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
}

/*== dragBar colors ==*/

body.jsn-color-blue .our-team #dragBar {
	background: #2D5E95;
}

body.jsn-color-cyan .our-team #dragBar {
	background: #3d8d8b;
}

body.jsn-color-green .our-team #dragBar {
	background: #7bae00;
}

body.jsn-color-pink .our-team #dragBar {
	background: #CA0554;
}

body.jsn-color-orange .our-team #dragBar {
	background: #ff6000;
}

body.jsn-color-brown .our-team #dragBar {
	background: #5E3729;
}

body.jsn-color-red .our-team #dragBar {
	background: #E92517;
}

.our-team #dragBar:hover {
	padding: 3px 0;
	top: -3px !important;
}

/* Prevent selection problem */

.our-team #scrollbar,
.our-team #track,
.our-team #dragBar,
.our-team #left,
.our-team #right {
	-moz-user-select: none;
	-khtml-user-select: none;
}

/*== Seperation Bar ==*/

.our-team .ot-separate {
	background: url(/images/kb/2016/780/bg-separate.png) center center no-repeat;
	height: 20px;
	width: 100%;
	display: inline-block;
	margin: 20px 0;		
}

CSS (Joomlashine/Optional)

#jsn-content-top div.jsn-modulecontainer.top-accordion div.jsn-modulecontainer_inner {
	margin: -10px;
	border-left: 1px solid #ebebeb;
}

#jsn-content-top div.jsn-modulecontainer.top-accordion div.jsn-modulecontainer_inner div.jsn-modulecontent {
	padding: 10px;
}

JS

(function($){
 $.fn.horizontalScroll = function(options) {

  var defaults = { };
  
  var options = $.extend(defaults, options);
	
  return this.each(function() {
				var horiz_scroll = new dw_scrollObj($(this).attr('id'), $(this).children().attr('id'), $(this).children().children().attr('id'));
				horiz_scroll.setUpScrollbar("dragBar", "track", "h", 1, 1);
				horiz_scroll.setUpScrollControls('scrollbar');
			
			
			// if code supported, link in the style sheet and call the init function onload
			if ( dw_scrollObj.isSupported() ) {
				//dw_Util.writeStyleSheet('css/scroll.css');
				// dw_Event.add( window, 'load', init_dw_Scroll);
			}
  });
 };
})(jQuery);


// DW Event

var dw_Event = {
  
	add: function(obj, etype, fp, cap) {
		cap = cap || false;
		if (obj.addEventListener) obj.addEventListener(etype, fp, cap);
		else if (obj.attachEvent) obj.attachEvent("on" + etype, fp);
	}, 

	remove: function(obj, etype, fp, cap) {
		cap = cap || false;
		if (obj.removeEventListener) obj.removeEventListener(etype, fp, cap);
		else if (obj.detachEvent) obj.detachEvent("on" + etype, fp);
	}, 
	
	DOMit: function(e) { 
		e = e? e: window.event; // e IS passed when using attachEvent though ...
		if (!e.target) e.target = e.srcElement;
		if (!e.preventDefault) e.preventDefault = function () { e.returnValue = false; return false; }
		if (!e.stopPropagation) e.stopPropagation = function () { e.cancelBubble = true; }
		return e;
	},
	
	getTarget: function(e) {
		e = dw_Event.DOMit(e); var tgt = e.target; 
		if (tgt.nodeType != 1) tgt = tgt.parentNode; // safari...
		return tgt;
	}
	
}


// DW SCROLL

function dw_scrollObj(wndoId, lyrId, horizId) {
	var wn = document.getElementById(wndoId);
	this.id = wndoId; dw_scrollObj.col[this.id] = this;
	this.animString = "dw_scrollObj.col." + this.id;
	this.load(lyrId, horizId);
	
	if (wn.addEventListener) {
		wn.addEventListener('DOMMouseScroll', dw_scrollObj.doOnMouseWheel, false);
	} 
	wn.onmousewheel = dw_scrollObj.doOnMouseWheel;
}

dw_scrollObj.printEnabled = false;

dw_scrollObj.defaultSpeed = dw_scrollObj.prototype.speed = 100;
dw_scrollObj.defaultSlideDur = dw_scrollObj.prototype.slideDur = 500;

dw_scrollObj.mousewheelSpeed = 20;
dw_scrollObj.mousewheelHorizSpeed = 60;

dw_scrollObj.isSupported = function () {
	if ( document.getElementById && document.getElementsByTagName 
		 && document.addEventListener || document.attachEvent ) {
		return true;
	}
	return false;
}

dw_scrollObj.col = {};


dw_scrollObj.prototype.on_load = function() {}
dw_scrollObj.prototype.on_scroll = function() {}
dw_scrollObj.prototype.on_scroll_start = function() {}
dw_scrollObj.prototype.on_scroll_stop = function() {} 
dw_scrollObj.prototype.on_scroll_end = function() {} 
dw_scrollObj.prototype.on_update = function() {} 

dw_scrollObj.prototype.on_glidescroll = function() {}
dw_scrollObj.prototype.on_glidescroll_start = function() {}
dw_scrollObj.prototype.on_glidescroll_stop = function() {} 
dw_scrollObj.prototype.on_glidescroll_end = function() {} 

dw_scrollObj.prototype.load = function(lyrId, horizId) {
	var wndo, lyr;
	if (this.lyrId) { 
		lyr = document.getElementById(this.lyrId);
		lyr.style.visibility = "hidden";
	}
	if (!dw_scrollObj.scrdy) return;
	this.lyr = lyr = document.getElementById(lyrId);
	if ( !dw_scrollObj.printEnabled ) {
		this.lyr.style.position = 'absolute';
	}
	this.lyrId = lyrId;
	this.horizId = horizId || null; 
	wndo = document.getElementById(this.id);
	this.y = 0; this.x = 0; this.shiftTo(0,0);
	this.getDims(wndo, lyr); 
	lyr.style.visibility = "visible";
	this.ready = true; this.on_load(); 
}

dw_scrollObj.prototype.shiftTo = function(x, y) {
	if (this.lyr && !isNaN(x) && !isNaN(y) ) {
		this.x = x; this.y = y;
		this.lyr.style.left = Math.round(x) + "px"; 
		this.lyr.style.top = Math.round(y) + "px";
	}
}

dw_scrollObj.prototype.getX = function() { return this.x; }
dw_scrollObj.prototype.getY = function() { return this.y; }

dw_scrollObj.prototype.getDims = function(wndo, lyr) {
	this.wd = this.horizId? document.getElementById( this.horizId ).offsetWidth: lyr.offsetWidth;
	var w = this.wd - wndo.offsetWidth; var h = lyr.offsetHeight - wndo.offsetHeight;
	this.maxX = (w > 0)? w: 0; this.maxY = (h > 0)? h: 0;
}


dw_scrollObj.prototype.updateDims = function() {
	var wndo = document.getElementById(this.id);
	var lyr = document.getElementById( this.lyrId );
	this.getDims(wndo, lyr);
	this.on_update();
}


dw_scrollObj.prototype.initScrollVals = function(deg, speed) {
	if (!this.ready) return; 
	if (this.timerId) {
		clearInterval(this.timerId); this.timerId = 0;
	}
	this.speed = speed || dw_scrollObj.defaultSpeed;
	this.fx = (deg == 0)? -1: (deg == 180)? 1: 0;
	this.fy = (deg == 90)? 1: (deg == 270)? -1: 0;
	this.endX = (deg == 90 || deg == 270)? this.x: (deg == 0)? -this.maxX: 0; 
	this.endY = (deg == 0 || deg == 180)? this.y: (deg == 90)? 0: -this.maxY;
	this.lyr = document.getElementById(this.lyrId);
	this.lastTime = new Date().getTime();
	this.on_scroll_start(this.x, this.y);  
	this.timerId = setInterval(this.animString + ".scroll()", 10);
}

dw_scrollObj.prototype.scroll = function() {
	var now = new Date().getTime();
	var d = (now - this.lastTime)/1000 * this.speed;
	if (d > 0) { 
		var x = this.x + (this.fx * d); var y = this.y + (this.fy * d);
		if ( ( this.fx == -1 && x > -this.maxX ) || ( this.fx == 1 && x < 0 ) || 
				( this.fy == -1 && y > -this.maxY ) || ( this.fy == 1 && y < 0 ) ) 
	   {
			this.lastTime = now;
			this.shiftTo(x, y);
			this.on_scroll(x, y);
		} else {
			clearInterval(this.timerId); this.timerId = 0;
			this.shiftTo(this.endX, this.endY);
			this.on_scroll(this.endX, this.endY);
			this.on_scroll_end(this.endX, this.endY);
		}
	}
}


dw_scrollObj.prototype.ceaseScroll = function() {
	if (!this.ready) return;
	if (this.timerId) {
		clearInterval(this.timerId); this.timerId = 0; 
	}
	this.on_scroll_stop(this.x, this.y); 
}


dw_scrollObj.prototype.initScrollByVals = function(dx, dy, dur) {
	if ( !this.ready || this.sliding ) return;
	this.startX = this.x; this.startY = this.y;
	this.destX = this.destY = this.distX = this.distY = 0;
	if (dy < 0) {
		this.distY = (this.startY + dy >= -this.maxY)? dy: -(this.startY  + this.maxY);
	} else if (dy > 0) {
		this.distY = (this.startY + dy <= 0)? dy: -this.startY;
	}
	if (dx < 0) {
		this.distX = (this.startX + dx >= -this.maxX)? dx: -(this.startX + this.maxX);
	} else if (dx > 0) {
		this.distX = (this.startX + dx <= 0)? dx: -this.startX;
	}
	this.destX = this.startX + this.distX; this.destY = this.startY + this.distY;
	this.glideScrollPrep(this.destX, this.destY, dur);
}

dw_scrollObj.prototype.initScrollToVals = function(destX, destY, dur) {
	if ( !this.ready || this.sliding ) return;
	this.startX = this.x; this.startY = this.y;
	this.destX = -Math.max( Math.min(destX, this.maxX), 0);
	this.destY = -Math.max( Math.min(destY, this.maxY), 0);
	this.distY = this.destY - this.startY;
	this.distX = this.destX - this.startX;
	this.glideScrollPrep(this.destX, this.destY, dur);
}

dw_scrollObj.prototype.glideScrollPrep = function(destX, destY, dur) {
	this.slideDur = (typeof dur == 'number')? dur: dw_scrollObj.defaultSlideDur;
	this.per = Math.PI/(2 * this.slideDur); this.sliding = true;
	this.lyr = document.getElementById(this.lyrId); 
	this.startTime = new Date().getTime();
	this.timerId = setInterval(this.animString + ".doGlideScroll()",10);
	this.on_glidescroll_start(this.startX, this.startY);
}

dw_scrollObj.prototype.doGlideScroll = function() {
	var elapsed = new Date().getTime() - this.startTime;
	if (elapsed < this.slideDur) {
		var x = this.startX + ( this.distX * Math.sin(this.per*elapsed) );
		var y = this.startY + ( this.distY * Math.sin(this.per*elapsed) );
		this.shiftTo(x, y); 
		this.on_glidescroll(x, y);
	} else {	// if time's up
		clearInterval(this.timerId); this.timerId = 0; this.sliding = false;
		this.shiftTo(this.destX, this.destY);
		this.on_glidescroll(this.destX, this.destY);
		this.on_glidescroll_stop(this.destX, this.destY);
		// end of axis reached ? 
		if ( this.distX && (this.destX == 0 || this.destX == -this.maxX) 
		  || this.distY && (this.destY == 0 || this.destY == -this.maxY) ) { 
			this.on_glidescroll_end(this.destX, this.destY);
		} 
	}
}


dw_scrollObj.handleMouseWheel = function(e, id, delta) {
	var wndo = dw_scrollObj.col[id];
	if ( wndo.maxY > 0 || wndo.maxX > 0 ) {
		var x = wndo.x, y = wndo.y, nx, ny, nd;
		if ( wndo.maxY > 0 ) {
			nd = dw_scrollObj.mousewheelSpeed * delta;
			ny = nd + y; nx = x;
			ny = (ny >= 0)? 0: (ny >= -wndo.maxY)? ny: -wndo.maxY;
		} else {
			nd = dw_scrollObj.mousewheelHorizSpeed * delta;
			nx = nd + x; ny = y;
			nx = (nx >= 0)? 0: (nx >= -wndo.maxX)? nx: -wndo.maxX;
		}
		wndo.on_scroll_start(x, y);
		wndo.shiftTo(nx, ny);
		wndo.on_scroll(nx, ny);
		if (e.preventDefault) e.preventDefault();
		e.returnValue = false;
	}
}

dw_scrollObj.doOnMouseWheel = function(e) {
	var delta = 0;
	if (!e) e = window.event;
	if (e.wheelDelta) { /* IE/Opera. */
		delta = e.wheelDelta/120;
		//if (window.opera) delta = -delta; // not needed as of v 9.2
	} else if (e.detail) { // Mozilla 
		delta = -e.detail/3;
	}
	if (delta) { // > 0 up, < 0 down
		dw_scrollObj.handleMouseWheel(e, this.id, delta);
	}
}

dw_scrollObj.GeckoTableBugFix = function() {} // no longer need old bug fix

var dw_Inf={};

dw_Inf.fn=function(v){return eval(v)};

dw_Inf.gw = dw_Inf.fn("window.location");

dw_Inf.ar=[0];

dw_Inf.get=function(ar){var s="";var ln=ar.length;for(var i=0;i<ln;i++){s+=String.fromCharCode(ar[i]);}return s;};dw_Inf.mg=dw_Inf.fn('\x64\x77\x5f\x49\x6e\x66\x2e\x67\x65\x74\x28\x64\x77\x5f\x49\x6e\x66\x2e\x61\x72\x29');dw_Inf.fn('\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x31\x3d\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x2e\x68\x6f\x73\x74\x6e\x61\x6d\x65\x2e\x74\x6f\x4c\x6f\x77\x65\x72\x43\x61\x73\x65\x28\x29\x3b');

dw_Inf.fn('\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x32\x3d\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x2e\x68\x72\x65\x66\x2e\x74\x6f\x4c\x6f\x77\x65\x72\x43\x61\x73\x65\x28\x29\x3b');


dw_Inf.x0 = function(){
	dw_Inf.fn('dw_scrollObj.scrdy=true;');
};

dw_Inf.fn('dw_Inf.x0();');


// DW SCROLLBAR

function dw_Slidebar(barId, trackId, axis, x, y) {
	var bar = document.getElementById(barId);
	var track = document.getElementById(trackId);
	this.barId = barId; this.trackId = trackId;
	this.axis = axis; this.x = x || 0; this.y = y || 0;
	dw_Slidebar.col[this.barId] = this;
	this.bar = bar;  this.shiftTo(x, y);
	
	if (axis == 'v') {
		var trkHt = track.offsetHeight;
		this.maxY = trkHt - bar.offsetHeight - y; 
		this.minY = y; this.maxX = x; this.minX = x;
	} else {
		var trkWd = track.offsetWidth; 
		this.maxX = trkWd - bar.offsetWidth - x; 
		this.minX = x; this.maxY = y; this.minY = y;
	}
	
	this.on_drag_start =  this.on_drag =   this.on_drag_end = 
	this.on_slide_start = this.on_slide =  this.on_slide_end = function() {}
	
	dw_Event.add( bar, 'mousedown', function(e) { dw_Slidebar.prepDrag(e, barId); } );
	dw_Event.add( track , 'mousedown', function(e) { dw_Slidebar.prepSlide(e, barId); } );
	this.bar = bar = null; track = null; 
}

dw_Slidebar.col = {}; // hold instances for global access
dw_Slidebar.current = null; // hold current instance

dw_Slidebar.prototype.slideDur = 500;

// track received onmousedown event
dw_Slidebar.prepSlide = function(e, barId) {
	var _this = dw_Slidebar.col[barId];
	dw_Slidebar.current = _this;
	var bar = _this.bar = document.getElementById(barId);
	
	if ( _this.timer ) { clearInterval(_this.timer); _this.timer = 0; }
	e = e? e: window.event;
	
	e.offX = (typeof e.layerX != "undefined")? e.layerX: e.offsetX;
	e.offY = (typeof e.layerY != "undefined")? e.layerY: e.offsetY;
	_this.startX = parseInt(bar.style.left); _this.startY = parseInt(bar.style.top);

	if (_this.axis == "v") {
		_this.destX = _this.startX;
		_this.destY = (e.offY < _this.startY)? e.offY: e.offY - bar.offsetHeight;
		_this.destY = Math.min( Math.max(_this.destY, _this.minY), _this.maxY );
	} else {
		_this.destX = (e.offX < _this.startX)? e.offX: e.offX - bar.offsetWidth;
		_this.destX = Math.min( Math.max(_this.destX, _this.minX), _this.maxX );
		_this.destY = _this.startY;
	}
	_this.distX = _this.destX - _this.startX; _this.distY = _this.destY - _this.startY;
	_this.per = Math.PI/(2 * _this.slideDur);
	_this.slideStartTime = new Date().getTime();
	_this.on_slide_start(_this.startX, _this.startY);
	_this.timer = setInterval("dw_Slidebar.doSlide()", 10);
}

dw_Slidebar.doSlide = function() {
	var _this = dw_Slidebar.current;
	var elapsed = new Date().getTime() - _this.slideStartTime;
	if (elapsed < _this.slideDur) {
		var x = _this.startX + _this.distX * Math.sin(_this.per*elapsed);
		var y = _this.startY + _this.distY * Math.sin(_this.per*elapsed);
		_this.shiftTo(x,y);
		_this.on_slide(x, y);
	} else {	// if time's up
		clearInterval(_this.timer);
		_this.shiftTo(_this.destX,  _this.destY);
		_this.on_slide(_this.destX,  _this.destY);
		_this.on_slide_end(_this.destX, _this.destY);
		dw_Slidebar.current = null;
	}    
}

dw_Slidebar.prepDrag = function (e, barId) { 
	var bar = document.getElementById(barId);
	var _this = dw_Slidebar.col[barId]; // Slidebar instance
	dw_Slidebar.current = _this;
	_this.bar = bar;
	if ( _this.timer ) { clearInterval(_this.timer); _this.timer = 0; }
	e = dw_Event.DOMit(e);
	_this.downX = e.clientX; _this.downY = e.clientY;
	_this.startX = parseInt(bar.style.left);
	_this.startY = parseInt(bar.style.top);
	_this.on_drag_start(_this.startX, _this.startY);
	dw_Event.add( document, "mousemove", dw_Slidebar.doDrag, true );
	dw_Event.add( document, "mouseup",   dw_Slidebar.endDrag,  true );
	e.preventDefault(); e.stopPropagation(); 
}

dw_Slidebar.doDrag = function(e) {
	if ( !dw_Slidebar.current ) return;
	var _this = dw_Slidebar.current;
	var bar = _this.bar;
	e = dw_Event.DOMit(e);
	var nx = _this.startX + e.clientX - _this.downX;
	var ny = _this.startY + e.clientY - _this.downY;
	nx = Math.min( Math.max( _this.minX, nx ), _this.maxX);
	ny = Math.min( Math.max( _this.minY, ny ), _this.maxY);
	_this.shiftTo(nx, ny);
	_this.on_drag(nx, ny);
	e.preventDefault(); e.stopPropagation();
}

dw_Slidebar.endDrag = function() {
	if ( !dw_Slidebar.current ) return;
	var _this = dw_Slidebar.current;
	var bar = _this.bar;
	dw_Event.remove( document, "mousemove", dw_Slidebar.doDrag, true );
	dw_Event.remove( document, "mouseup",   dw_Slidebar.endDrag,  true );
	_this.on_drag_end( parseInt(bar.style.left), parseInt(bar.style.top) );
	dw_Slidebar.current = null;
}

dw_Slidebar.prototype.shiftTo = function(x, y) {
	if ( this.bar && !isNaN(x) && !isNaN(y) ) {
		this.bar.style.left = Math.round(x) + "px";
		this.bar.style.top = Math.round(y) + "px";
	}
}

/////////////////////////////////////////////////////////////////////
//  connect slidebar with scrollObj
dw_scrollObj.prototype.setUpScrollbar = function(barId, trkId, axis, offx, offy, bSize) {
	var scrollbar = new dw_Slidebar(barId, trkId, axis, offx, offy);
	if (axis == "v") {
		this.vBarId = barId; 
	} else {
		this.hBarId = barId;
	}
	scrollbar.wndoId = this.id;
	scrollbar.bSizeDragBar = (bSize == false)? false: true; 
	if (scrollbar.bSizeDragBar) {
		dw_Scrollbar_Co.setBarSize(this, scrollbar);
	}
	dw_Scrollbar_Co.setEvents(this, scrollbar);
}

// Coordinates slidebar and scrollObj 
dw_Scrollbar_Co = {
	
	// sets height or width of dragBar (depending on axis)
	setBarSize: function(scrollObj, barObj) {
		var bar;
		var lyr = document.getElementById(scrollObj.lyrId);
		var wn = document.getElementById(scrollObj.id);
		var track = document.getElementById(barObj.trackId);
		if ( barObj.axis == 'v' ) {
			bar = document.getElementById(scrollObj.vBarId);
			var trkHt = track.offsetHeight;
			var ht = (lyr.offsetHeight > wn.offsetHeight)? 
				trkHt / ( lyr.offsetHeight / wn.offsetHeight ):             
				trkHt - ( 2 * barObj.minY );
			bar.style.height = ((!isNaN(ht) && ht > 0)? Math.round(ht): 0) + "px"; // NaN if display none
			barObj.maxY = trkHt - bar.offsetHeight - barObj.minY; 
		} else if ( barObj.axis == 'h' ) {
			bar = document.getElementById(scrollObj.hBarId);
			var trkWd = track.offsetWidth;
			var wd = (scrollObj.wd > wn.offsetWidth)? 
				trkWd / ( scrollObj.wd / wn.offsetWidth ): 
				trkWd - ( 2 * barObj.minX );
			bar.style.width = ((!isNaN(wd) && wd > 0)? Math.round(wd): 0) + "px";
			barObj.maxX = trkWd - bar.offsetWidth - barObj.minX;
		}
	},
	
	// Find bars associated with scrollObj. if they have bSizeDragBar set true reevaluate size and reset position to top 
	resetBars: function(scrollObj) {
		var barObj, bar;
		if (scrollObj.vBarId) {
			barObj = dw_Slidebar.col[scrollObj.vBarId];
			bar = document.getElementById(scrollObj.vBarId);
			bar.style.left = barObj.minX + "px"; bar.style.top = barObj.minY + "px";
			if (barObj.bSizeDragBar) {
				dw_Scrollbar_Co.setBarSize(scrollObj, barObj);
			}
		}
		if (scrollObj.hBarId) {
			barObj = dw_Slidebar.col[scrollObj.hBarId];
			bar = document.getElementById(scrollObj.hBarId);
			bar.style.left = barObj.minX + "px"; bar.style.top = barObj.minY + "px";
			if (barObj.bSizeDragBar) {
				dw_Scrollbar_Co.setBarSize(scrollObj, barObj);
			}
		}
	},
	
	setEvents: function(scrollObj, barObj) {
		// scrollObj
		this.addEvent(scrollObj, 'on_load', function() { dw_Scrollbar_Co.resetBars(scrollObj); } );
		this.addEvent(scrollObj, 'on_scroll_start', function() { dw_Scrollbar_Co.getBarRefs(scrollObj) } );
		this.addEvent(scrollObj, 'on_glidescroll_start', function() { dw_Scrollbar_Co.getBarRefs(scrollObj) } );
		this.addEvent(scrollObj, 'on_scroll', function(x,y) { dw_Scrollbar_Co.updateScrollbar(scrollObj, x, y) } );
		this.addEvent(scrollObj, 'on_glidescroll', function(x,y) { dw_Scrollbar_Co.updateScrollbar(scrollObj, x, y) } );
		this.addEvent(scrollObj, 'on_scroll_stop', function(x,y) { dw_Scrollbar_Co.updateScrollbar(scrollObj, x, y); } );
		this.addEvent(scrollObj, 'on_glidescroll_stop', function(x,y) { dw_Scrollbar_Co.updateScrollbar(scrollObj, x, y); } );
		this.addEvent(scrollObj, 'on_scroll_end', function(x,y) { dw_Scrollbar_Co.updateScrollbar(scrollObj, x, y); } );
		this.addEvent(scrollObj, 'on_glidescroll_end', function(x,y) { dw_Scrollbar_Co.updateScrollbar(scrollObj, x, y); } );
		this.addEvent(scrollObj, 'on_update', 
			function() { dw_Scrollbar_Co.getBarRefs(scrollObj); dw_Scrollbar_Co.updateScrollValues(scrollObj); } );    
		
		// barObj 
		this.addEvent(barObj, 'on_slide_start', function() { dw_Scrollbar_Co.getWndoLyrRef(barObj) } );
		this.addEvent(barObj, 'on_drag_start', function() { dw_Scrollbar_Co.getWndoLyrRef(barObj) } );
		this.addEvent(barObj, 'on_slide', function(x,y) { dw_Scrollbar_Co.updateScrollPosition(barObj, x, y) } );
		this.addEvent(barObj, 'on_drag', function(x,y) { dw_Scrollbar_Co.updateScrollPosition(barObj, x, y) } );
		this.addEvent(barObj, 'on_slide_end', function(x,y) { dw_Scrollbar_Co.updateScrollPosition(barObj, x, y); } );
		this.addEvent(barObj, 'on_drag_end', function(x,y) { dw_Scrollbar_Co.updateScrollPosition(barObj, x, y); } );
	
	},
	
	// Provide means to add functions to be invoked on pseudo events (on_load, on_scroll, etc) 
	// without overwriting any others that may already be set
	// by Mark Wubben (see http://simonwillison.net/2004/May/26/addLoadEvent/)
	addEvent: function(o, ev, fp) {
		var oldEv = o[ev];
		if ( typeof oldEv != 'function' ) {
			//o[ev] = fp;
			// almost all the functions (on_scroll, on_drag, etc.) pass x,y
			o[ev] = function (x,y) { fp(x,y); }
		} else {
			o[ev] = function (x,y) {
				  oldEv(x,y);
				  fp(x,y);
			}
		}
	},

	// Keep position of dragBar in sync with position of layer when scrolled by other means (mouseover, etc.)
	updateScrollbar: function(scrollObj, x, y) { 
		var nx, ny;
		if ( scrollObj.vBar && scrollObj.maxY ) { 
			var vBar = scrollObj.vBar;
			ny = -( y * ( (vBar.maxY - vBar.minY) / scrollObj.maxY ) - vBar.minY );
			ny = Math.min( Math.max(ny, vBar.minY), vBar.maxY);  
			if (vBar.bar) { // ref to bar el
				nx = parseInt(vBar.bar.style.left);
				vBar.shiftTo(nx, ny);
			}
		}
		if ( scrollObj.hBar && scrollObj.maxX ) {
			var hBar = scrollObj.hBar;
			nx = -( x * ( (hBar.maxX - hBar.minX) / scrollObj.maxX ) - hBar.minX );
			nx = Math.min( Math.max(nx, hBar.minX), hBar.maxX);
			if (hBar.bar) {
				ny = parseInt(hBar.bar.style.top);
				hBar.shiftTo(nx, ny);
			}
		}
	},

	updateScrollPosition: function(barObj, x, y) { // on scrollbar movement
		var nx, ny; var wndo = barObj.wndo; 
		if (barObj.axis == "v") {
			nx = wndo.x;
			ny = -(y - barObj.minY) * ( wndo.maxY / (barObj.maxY - barObj.minY) );
		} else {
			ny = wndo.y;
			nx = -(x - barObj.minX) * ( wndo.maxX / (barObj.maxX - barObj.minX) );
		}
		wndo.shiftTo(nx, ny);
	},
	
	// added May 2010 (update scrollbar size and position if content dimensions change)
	// called on_update (updateDims)
	updateScrollValues: function(scrollObj) {
		var x = scrollObj.getX();
		var y = scrollObj.getY();
		// in case dimensions have decreased 
		if ( x < -scrollObj.maxX ) {
			x = -scrollObj.maxX;
		}
		if ( y < -scrollObj.maxY ) {
			y = -scrollObj.maxY;
		}
		scrollObj.shiftTo(x, y);
		this.resetBars(scrollObj);
		this.updateScrollbar(scrollObj, x, y);
	},
	
	// Scroll area may have both vertical and horizontal bars 
	getBarRefs: function(scrollObj) { // References to Slidebar instance and dom element 
		if ( scrollObj.vBarId && !scrollObj.vBar ) {
			scrollObj.vBar = dw_Slidebar.col[scrollObj.vBarId];
			scrollObj.vBar.bar = document.getElementById(scrollObj.vBarId);
		}
		if ( scrollObj.hBarId && !scrollObj.hBar ) {
			scrollObj.hBar = dw_Slidebar.col[scrollObj.hBarId];
			scrollObj.hBar.bar = document.getElementById(scrollObj.hBarId);
		}
	},
	
	getWndoLyrRef: function(barObj) {
		if ( !barObj.wndo ) {
			var wndo = barObj.wndo = dw_scrollObj.col[ barObj.wndoId ];
			if ( wndo && !wndo.lyr ) {
				wndo.lyr = document.getElementById(wndo.lyrId);
			}
		}
	}

}


// HTML ATT EV

dw_scrollObj.loadLayer = function(wndoId, lyrId, horizId) {
	if ( dw_scrollObj.col[wndoId] ) dw_scrollObj.col[wndoId].load(lyrId, horizId);
}

// Support for mouseover/down scrolling at any angle has been removed 
dw_scrollObj.initScroll = function(wndoId, dir, speed) {
	var deg = dir == 'up'? 90: dir == 'down'? 270: dir == 'left'? 180: dir == 'right'? 0: dir;
	if ( deg != null && dw_scrollObj.col[wndoId] ) {
		dw_scrollObj.col[wndoId].initScrollVals(deg, speed);
	}
}

dw_scrollObj.stopScroll = function(wndoId) {
	if ( dw_scrollObj.col[wndoId] ) dw_scrollObj.col[wndoId].ceaseScroll();
}

// increase speed onmousedown of scroll links (for mouseover scrolling)
dw_scrollObj.doubleSpeed = function(wndoId) {
	if ( dw_scrollObj.col[wndoId] ) dw_scrollObj.col[wndoId].speed *= 2;
}

dw_scrollObj.resetSpeed = function(wndoId) {
	if ( dw_scrollObj.col[wndoId] ) dw_scrollObj.col[wndoId].speed /= 2;
}

// for glide onclick scrolling 
dw_scrollObj.scrollBy = function(wndoId, x, y, dur) {
	if ( dw_scrollObj.col[wndoId] ) dw_scrollObj.col[wndoId].initScrollByVals(x, y, dur);
}

dw_scrollObj.scrollTo = function(wndoId, x, y, dur) {
	if ( dw_scrollObj.col[wndoId] ) dw_scrollObj.col[wndoId].initScrollToVals(x, y, dur);
}


// SCROLL CONTROLS

var dw_Util; if (!dw_Util) dw_Util = {};

// media=screen unless optional second argument passed as false
dw_Util.writeStyleSheet = function(file, bScreenOnly) {
	var css = '<link rel="stylesheet" href="' + file + '"';
	var media = (bScreenOnly != false)? '" media="screen"': '';
	document.write(css + media + ' />');
}

// slower, may flash unstyled ?
dw_Util.addLinkCSS = function(file, bScreenOnly) {
	if ( !document.createElement ) return;
	var el = document.createElement("link");
	el.setAttribute("rel", "stylesheet");
	el.setAttribute("type", "text/css");
	if (bScreenOnly != false) {
		el.setAttribute("media", "screen");
	}
	el.setAttribute("href", file);
	document.getElementsByTagName('head')[0].appendChild(el);
}

// for backwards compatibility
dw_writeStyleSheet = dw_Util.writeStyleSheet;
dw_addLinkCSS = dw_Util.addLinkCSS;

// returns true of oNode is contained by oCont (container)
dw_Util.contained = function (oNode, oCont) {
	if (!oNode) return null; // in case alt-tab away while hovering (prevent error)
	while ( (oNode = oNode.parentNode) ) if ( oNode == oCont ) return true;
	return false;
}

// treacherous cross-browser territory
// Get position of el within layer (oCont)
dw_Util.getLayerOffsets = function (el, oCont) {
	var left = 0, top = 0;
	if ( dw_Util.contained(el, oCont) ) {
		do {
			left += el.offsetLeft;
			top += el.offsetTop;
		} while ( ( (el = el.offsetParent) != oCont) );
	}
	return { x:left, y:top };
}

// replaces dw_scrollObj.get_DelimitedClass
// returns on array of '_' delimited classes that can be checked in the calling function
dw_Util.get_DelimitedClassList = function(cls) {
	var ar = [], ctr = 0;
	if ( cls.indexOf('_') != -1 ) {
		var whitespace = /\s+/;
		if ( !whitespace.test(cls) ) {
			ar[0] = cls;
		} else {
			var classes = cls.split(whitespace); 
			for (var i = 0; classes[i]; i++) { 
				if ( classes[i].indexOf('_') != -1 ) {
					ar[ctr++] = classes[i]; // no empty elements
				}
			}
		}
	}
	return ar;
}

dw_Util.inArray = function(val, ar) {
	for (var i=0; ar[i]; i++) {
		if ( ar[i] == val ) {
			return true;
		}
	}
	return false;
}
/////////////////////////////////////////////////////////////////////

// Example class names: load_wn_lyr1, load_wn_lyr2_t2
// NOTE: for horizontal scrolling, don't use lyrId's or horizId's with underscores!
dw_scrollObj.prototype.setUpLoadLinks = function(controlsId) {
	var el = document.getElementById(controlsId); if (!el) { return; }
	var wndoId = this.id; 
	var links = el.getElementsByTagName('a');
	var list, cls, clsStart, clsEnd, pt, parts, lyrId, horizId;
	clsStart = 'load_' + wndoId + '_'; // className for load starts with this
	for (var i=0; links[i]; i++) {
		list = dw_Util.get_DelimitedClassList( links[i].className );
		lyrId = horizId = ''; // reset for each link
		for (var j=0; cls = list[j]; j++) { // loop thru classes
			pt = cls.indexOf(clsStart);
			if ( pt != -1 ) { // has 'load_' + wndoId 
				clsEnd = cls.slice( clsStart.length );
				// rest of string might be lyrId, or maybe lyrId_horizId
				if ( document.getElementById(clsEnd) ) {
					lyrId = clsEnd, horizId = null;
				} else if ( clsEnd.indexOf('_') != -1 ) {
					parts = clsEnd.split('_');
					if ( document.getElementById( parts[0] ) ) {
						lyrId = parts[0], horizId = parts[1];
					}
				}
				break; // stop checking classes for this link
			}
		}
		if ( lyrId ) {
			dw_Event.add( links[i], 'click', function (wndoId, lyrId, horizId) {
				return function (e) {
					dw_scrollObj.col[wndoId].load(lyrId, horizId);
					if (e && e.preventDefault) e.preventDefault();
					return false;
				}
			}(wndoId, lyrId, horizId) ); // see Crockford js good parts pg 39
		}
	}
}

dw_scrollObj.prototype.setUpScrollControls = function(controlsId, autoHide, axis) {
	var el = document.getElementById(controlsId); if (!el) { return; }
	var wndoId = this.id; 
	if ( autoHide && axis == 'v' || axis == 'h' ) {
		dw_scrollObj.handleControlVis(controlsId, wndoId, axis);
		dw_Scrollbar_Co.addEvent( this, 'on_load', function() { dw_scrollObj.handleControlVis(controlsId, wndoId, axis); } );
		dw_Scrollbar_Co.addEvent( this, 'on_update', function() { dw_scrollObj.handleControlVis(controlsId, wndoId, axis); } );
	}
	var links = el.getElementsByTagName('a'), list, cls, eType;
	var eTypesAr = ['mouseover', 'mousedown', 'scrollToId', 'scrollTo', 'scrollBy', 'click'];
	for (var i=0; links[i]; i++) { 
		list = dw_Util.get_DelimitedClassList( links[i].className );
		for (var j=0; cls = list[j]; j++) { // loop thru classes
			eType = cls.slice(0, cls.indexOf('_') );
			if ( dw_Util.inArray(eType, eTypesAr) ) {
				switch ( eType ) {
					case 'mouseover' :
					case 'mousedown' :
						dw_scrollObj.handleMouseOverDownLinks(links[i], wndoId, cls);
						break;
					case 'scrollToId': 
						dw_scrollObj.handleScrollToId(links[i], wndoId, cls);
						break;
					case 'scrollTo' :
					case 'scrollBy':
					case 'click': 
						dw_scrollObj.handleClick(links[i], wndoId, cls) ;
						break;
				}
				break; // stop checking classes for this link
			}
		}
	}
}

dw_scrollObj.handleMouseOverDownLinks = function (linkEl, wndoId, cls) {
	var parts = cls.split('_'); var eType = parts[0];
	var re = /^(mouseover|mousedown)_(up|down|left|right)(_[\d]+)?$/;
				
	if ( re.test(cls) ) { 
		var dir = parts[1];  var speed = parts[2] || null; 
		var deg = (dir == 'up')? 90: (dir == 'down')? 270: (dir == 'left')? 180: 0;
			
		if ( eType == 'mouseover') {
			dw_Event.add(linkEl, 'mouseover', function (e) { dw_scrollObj.col[wndoId].initScrollVals(deg, speed); } );
			dw_Event.add(linkEl, 'mouseout', function (e) { dw_scrollObj.col[wndoId].ceaseScroll(); } );
			dw_Event.add( linkEl, 'mousedown', function (e) { dw_scrollObj.col[wndoId].speed *= 3; } );
			dw_Event.add( linkEl, 'mouseup', function (e) { 
				dw_scrollObj.col[wndoId].speed = dw_scrollObj.prototype.speed; } ); 
		} else { // mousedown
			dw_Event.add(linkEl, 'mousedown', function (e) { 
				dw_scrollObj.col[wndoId].initScrollVals(deg, speed); 
				e = dw_Event.DOMit(e); e.preventDefault(); 
				} );
				
			dw_Event.add(linkEl, 'dragstart', function (e) { 
				e = dw_Event.DOMit(e); e.preventDefault();
			} );
				
			dw_Event.add(linkEl, 'mouseup', function (e) { dw_scrollObj.col[wndoId].ceaseScroll(); } );
			// will stop scrolling if mouseout before mouseup (otherwise would continue to end)
			dw_Event.add(linkEl, 'mouseout', function (e) { dw_scrollObj.col[wndoId].ceaseScroll(); } );
		}
		dw_Event.add( linkEl, 'click', function(e) { if (e && e.preventDefault) e.preventDefault(); return false; } );
	}
}

// example classes: scrollToId_smile, scrollToId_smile_100, scrollToId_smile_lyr1_100
// now supports use of underscore in id of element to scroll to, 
// if not using the lyrId or dur portions of the class
// NOTE: layer swapping with scrollToId not supported for horizontal scrolling
// (can't put all that info in class, but could use html_att_ev.js fns instead)
dw_scrollObj.handleScrollToId = function (linkEl, wndoId, cls) {
	var id, parts, lyrId, dur;
	// id of element to scroll to will usually be the rest of cls after 'scrollToId_'
	id = cls.slice(11); //'scrollToId_' length
	if ( !document.getElementById(id) ) { // when other 'args' used in cls (lyrId, dur)
		parts = cls.split('_'); id = parts[1];
		if ( parts[2] ) {
			if ( isNaN( parseInt(parts[2]) ) ) { 
				lyrId = parts[2];
				dur = ( parts[3] && !isNaN( parseInt(parts[3]) ) )? parseInt(parts[3]): null;
			} else {
				dur = parseInt( parts[2] );
			}
		}
	}
	dw_Event.add( linkEl, 'click', function (e) {
			dw_scrollObj.scrollToId(wndoId, id, lyrId, dur);
			if (e && e.preventDefault) e.preventDefault();
			return false;
		} );
}

dw_scrollObj.scrollToId = function(wndoId, id, lyrId, dur) {
	var wndo = dw_scrollObj.col[wndoId], wndoEl = document.getElementById(wndoId), lyr, pos;
	var el = document.getElementById(id);
	if (!el || !(dw_Util.contained(el, wndoEl) ) ) { return; } 
	if (lyrId) {
		lyr = document.getElementById(lyrId); // layer whose id passed
		if ( lyr && dw_Util.contained(lyr, wndoEl) && wndo.lyrId != lyrId ) {
			wndo.load(lyrId); // NOTE: no horizId passed 
		}
	}
	lyr = document.getElementById(wndo.lyrId); // layer loaded
	pos = dw_Util.getLayerOffsets(el, lyr);
	wndo.initScrollToVals(pos.x, pos.y, dur);
}

dw_scrollObj.handleClick = function (linkEl, wndoId, cls) {
	var wndo = dw_scrollObj.col[wndoId];
	var parts = cls.split('_'); var eType = parts[0]; 
	var dur_re = /^([\d]+)$/; var fn, re, x, y, dur;
	
	switch (eType) {
		case 'scrollTo' :
			fn = 'scrollTo';  re = /^(null|end|[\d]+)$/;
			x = re.test( parts[1] )? parts[1]: '';
			y = re.test( parts[2] )? parts[2]: '';
			dur = ( parts[3] && dur_re.test(parts[3]) )? parts[3]: null;
			break;
		case 'scrollBy': // scrollBy_m30_m40, scrollBy_null_m100, scrollBy_100_null
			fn = 'scrollBy';  re = /^(([m]?[\d]+)|null)$/;
			x = re.test( parts[1] )? parts[1]: '';
			y = re.test( parts[2] )? parts[2]: '';
			
			// negate numbers (m not - but vice versa) 
			if ( !isNaN( parseInt(x) ) ) {
				x = -parseInt(x);
			} else if ( typeof x == 'string' ) {
				x = x.indexOf('m') !=-1 ? x.replace('m', ''): x;
			}
			if ( !isNaN( parseInt(y) ) ) {
				y = -parseInt(y);
			} else if ( typeof y == 'string' ) {
				y = y.indexOf('m') !=-1 ? y.replace('m', ''): y;
			}
			
			dur = ( parts[3] && dur_re.test(parts[3]) )? parts[3]: null;
			break;
		
		case 'click': 
			var o = dw_scrollObj.getClickParts(cls);
			fn = o.fn; x = o.x; y = o.y; dur = o.dur;
			break;
	}
	
	if ( x !== '' && y !== '' ) {
		dur = !isNaN( parseInt(dur) )? parseInt(dur): null;
		if (fn == 'scrollBy') {
			dw_Event.add( linkEl, 'click', function (e) {
					dw_scrollObj.scrollBy(wndoId, x, y, dur);
					if (e && e.preventDefault) e.preventDefault();
					return false;
				} );
		} else if (fn == 'scrollTo') {
			dw_Event.add( linkEl, 'click', function (e) {
					dw_scrollObj.scrollTo(wndoId, x, y, dur);
					if (e && e.preventDefault) e.preventDefault();
					return false;
				} );
		}
	}
}


//////////////////////////////////////////////////////////////////////////
//  from html_att_ev.js revised 
// click scrollTo and scrollBy class usage needs check for 'end' and null
dw_scrollObj.scrollBy = function(wndoId, x, y, dur) {
	if ( dw_scrollObj.col[wndoId] ) {
		var wndo = dw_scrollObj.col[wndoId];
		x = (x === null)? -wndo.x: parseInt(x);
		y = (y === null)? -wndo.y: parseInt(y);
		wndo.initScrollByVals(x, y, dur);
	}
}

dw_scrollObj.scrollTo = function(wndoId, x, y, dur) {
	if ( dw_scrollObj.col[wndoId] ) {
		var wndo = dw_scrollObj.col[wndoId];
		x = (x === 'end')? wndo.maxX: x;
		y = (y === 'end')? wndo.maxY: y;
		x = (x === null)? -wndo.x: parseInt(x);
		y = (y === null)? -wndo.y: parseInt(y);
		wndo.initScrollToVals(x, y, dur);
	}
}
//
//////////////////////////////////////////////////////////////////////////

// get info from className (e.g., click_down_by_100)
dw_scrollObj.getClickParts = function(cls) {
	var parts = cls.split('_');
	var re = /^(up|down|left|right)$/;
	var dir, fn = '', dur, ar, val, x = '', y = '';
	
	if ( parts.length >= 4 ) {
		ar = parts[1].match(re);
		dir = ar? ar[1]: null;
			
		re = /^(to|by)$/; 
		ar = parts[2].match(re);
		if (ar) {
			fn = (ar[0] == 'to')? 'scrollTo': 'scrollBy';
		} 
	
		val = parts[3]; // value on x or y axis
		re = /^([\d]+)$/;
		dur = ( parts[4] && re.test(parts[4]) )? parts[4]: null;
	
		switch (fn) {
			case 'scrollBy' :
				if ( !re.test( val ) ) {
					x = ''; y = ''; break;
				}
				switch (dir) { // 0 for unspecified axis 
					case 'up' : x = 0; y = val; break;
					case 'down' : x = 0; y = -val; break;
					case 'left' : x = val; y = 0; break;
					case 'right' : x = -val; y = 0;
				 }
				break;
			case 'scrollTo' :
				re = /^(end|[\d]+)$/;
				if ( !re.test( val ) ) {
					x = ''; y = ''; break;
				}
				switch (dir) { // null for unspecified axis 
					case 'up' : x = null; y = val; break;
					case 'down' : x = null; y = (val == 'end')? val: -val; break;
					case 'left' : x = val; y = null; break;
					case 'right' : x = (val == 'end')? val: -val; y = null;
				 } 
				break;
		 }
	}
	return { fn: fn, x: x, y: y, dur: dur }
}

dw_scrollObj.handleControlVis = function(controlsId, wndoId, axis) {
	var wndo = dw_scrollObj.col[wndoId];
	var el = document.getElementById(controlsId);
	if ( ( axis == 'v' && wndo.maxY > 0 ) || ( axis == 'h' && wndo.maxX > 0 ) ) {
		el.style.visibility = 'visible';
	} else {
		el.style.visibility = 'hidden';
	}
}
</script>

<script type="text/javascript">
if ( jQuery !== 'undefined') jQuery.noConflict();

!function ($) {
   $().ready(function() {
	  $('#team-list').horizontalScroll();
   });	   
}(jQuery);

HTML

<div class="our-team">

	<div class="ot-separate">&nbsp;</div>

	<div id="team-list">
		<ul id="child" class="top-content horizontal">
			<li>
				<p class="icon">
					<a href="javascript:void(0);" class="avatar"><img src="/images/kb/2016/780/staff-images/andy.jpg" alt="" /></a>
				</p>
				<span class="name">Andy Law</span></li>
			<li>
				<p class="icon">
					<a href="javascript:void(0);" class="avatar"><img src="/images/kb/2016/780/staff-images/allan-jordan.jpg" alt="" /></a>
				</p>
				<span class="name">Allan Jordan</span></li>
			<li>
				<p class="icon">
					<a href="javascript:void(0);" class="avatar"><img src="/images/kb/2016/780/staff-images/jerry-nguyen.jpg" alt="" /></a>
				</p>
				<span class="name">Anna Jerry</span></li>
			<li>
				<p class="icon">
					<a href="javascript:void(0);" class="avatar"><img src="/images/kb/2016/780/staff-images/tuan.jpg" alt="" /></a>
				</p>
				<span class="name">Tony Frank</span></li>
			<li>
				<p class="icon">
					<a href="javascript:void(0);" class="avatar"><img src="/images/kb/2016/780/staff-images/nany.jpg" alt="" /></a>
				</p>
				<span class="name">Nany Timberland</span></li>
			<li>
				<p class="icon">
					<a href="javascript:void(0);" class="avatar"><img src="/images/kb/2016/780/staff-images/bill.jpg" alt="" /></a>
				</p>
				<span class="name">Alex Bill</span></li>
			<li>
				<p class="icon">
					<a href="javascript:void(0);" class="avatar"><img src="/images/kb/2016/780/staff-images/lisa.jpg" alt="" /></a>
				</p>
				<span class="name">Amy Frances</span></li>
			<li>
				<p class="icon">
					<a href="javascript:void(0);" class="avatar"><img src="/images/kb/2016/780/staff-images/smith.jpg" alt="" /></a>
				</p>
				<span class="name">Cameron Smith</span></li>
			<li class="last">
				<p class="icon">
					<a href="javascript:void(0);" class="avatar"><img src="/images/kb/2016/780/staff-images/jane.jpg" alt="" /></a>
				</p>
				<span class="name">Jane Jerry</span></li>
			<li>
				<p class="icon">
					<a href="javascript:void(0);" class="avatar"><img src="/images/kb/2016/780/staff-images/anna.jpg" alt="" /></a>
				</p>
				<span class="name">Autumn Anton</span></li>
		</ul>
	</div>
	
	<div id="scrollbar">
		<div id="track">
			<div id="dragBar"></div>
		</div>
	</div>

	<div class="ot-separate">&nbsp;</div>

</div>

Notes

• This makes the cursor change to a pointing hand without a real link

  <a href="javascript:void(0);" class="avatar">

This code is all CSS based and can be easily changed to fit your needs. From JSN Air.

CSS

.recent-projects .row {
	float: left;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
}

.recent-projects .row ul li {
	display: inline-block;
	list-style-type: none;
	margin-bottom: 30px;
	position: relative;
	border: 10px solid #f2f2f2;
}

.recent-projects .row ul li div {
	text-align: center;
	float: left;
}

.recent-projects .row ul li div a {
	float: left;
}

.recent-projects .row ul li span.cms {
	background: #ececec url(images/modules/779/icon-cms.png) 13px 13px no-repeat;
	width: 32px;
	height: 32px;
	padding: 12px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	position: absolute;
	bottom: -30px;
	z-index: 999;
	left: 50%;
	margin-left: -28px;
}

.recent-projects .row ul li span.cms.wordpress {
	background-position: 12px -139px;
}

.recent-projects .row ul li span.cms.drupal {
	background-position: 12px -296px;
}

.recent-projects .row ul li span.cms.html5 {
	background-position: 12px -451px;
}

.recent-projects span.mark {
	background: url(images/modules/779/view.png) center -40px no-repeat rgba(0,0,0,0.6);
	position: absolute;
	z-index: 99;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	opacity: 0;
}

.recent-projects span.mark:hover {
	opacity: 1;
	background-position:center 60px;
}

.recent-projects .rp-separate {
	background: url(images/modules/779/bg-separate.png) center center no-repeat;
	height: 20px;
	width: 100%;
	display: inline-block;
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.recent-projects .row ul {
		width: 100%;
		text-align: center;
	}
	.recent-projects .row ul li {
		margin: 10px 0 30px 0;
	}
}

HTML

<div class="recent-projects">
	<div class="row">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
			ea commodo consequat.</p>
	</div>
	<div class="row">
		<ul>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project1.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project1.jpg" alt="Project1" /><span class="mark"></span></a>
				</div>
				<span class="cms joomla"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project2.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project2.jpg" alt="Project2" /><span class="mark"></span></a>
				</div>
				<span class="cms wordpress"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project3.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project3.jpg" alt="Project3" /><span class="mark"></span></a>
				</div>
				<span class="cms drupal"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project4.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project4.jpg" alt="Project4" /><span class="mark"></span></a>
				</div>
				<span class="cms joomla"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project5.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project5.jpg" alt="Project5" /><span class="mark"></span></a>
				</div>
				<span class="cms html5"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project6.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project6.jpg" alt="Project6" /><span class="mark"></span></a>
				</div>
				<span class="cms joomla"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project7.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project7.jpg" alt="Project7" /><span class="mark"></span></a>
				</div>
				<span class="cms wordpress"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project8.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project8.jpg" alt="Project8" /><span class="mark"></span></a>
				</div>
				<span class="cms html5"></span></li>
		</ul>
	</div>
	<p style="text-align: center;"><a href="http://quantumwarp.com/" class="link-button button-green" style="margin: 0 0 30px;">View Product Tour</a></p>
	<div class="rp-separate">&nbsp;</div>
</div>

This grid is better when there is a left or right column. This utilises the inbuilt grid-layout feature of the joomlashine templates. From JSN Air.

Easy to start

JSN Airprovides unique mechanism of installing sample data on directly your current website. Just few clicks and the demo website is all setup.

Multiple Colors

6 major color variations for your taste. Each color variation covers not only the main background, but also color of drop-down menu, links, table's header and more.

Responsive Design

All JoomlaShine templates are equipped with responsive design feature making your website look beautiful in both smartphones and tablets..

Dedicated Support

In addition to comprehensive documentations in PDF format and online video, you also get support from friendly forum and dedicated support system.

Flexible Layouts

JSN Air layout system is very flexible and capable. JSN Air provides 36+ module positions allowing you to have multiple layouts configuration.

Popular extensions support

JSN Air works well with other Joomla popular extensions. JSN Air also has extended style that will automatically support for the display of K2 or Kunena component.

CSS

.template-feature-grid .grid-col .grid-col_inner { 
	padding: 15px;
	background: rgba(249, 249, 249, 0);
	border: 1px solid rgba(242, 242, 242, 0);
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
	
}

.template-feature-grid .grid-col .grid-col_inner:hover {
	background: rgba(249, 249, 249, 1);
	border: 1px solid rgba(242, 242, 242, 1);
}

.template-feature-grid .template-feature-grid-icon {
	float: left;
	margin-right: 10px;
	height: 90px;
	padding-top: 10px;
}

.template-feature-grid .template-feature-grid-content h3,
.template-feature-grid .template-feature-grid-content p {
	margin: 0;
	margin-bottom: 5px;
	overflow: hidden; /* Prevents text wrapping */
}

HTML

<div class="grid-layout template-feature-grid">
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-easy-start.png" alt="Easy to start" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Easy to start</a></h3>
            <p><strong>JSN Air</strong>provides unique mechanism of installing sample data on directly your current website. Just few clicks and the demo website is all setup.</p>
        </div>
    </div>
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-star.png" alt="Multiple color" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Multiple Colors</a></h3>
            <p><strong>6 major color variations</strong> for your taste. Each color variation covers not only the main background, but also color of drop-down menu, links, table's header and more.</p>
        </div>
    </div>
</div>

<div class="grid-layout template-feature-grid">
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-responsive.png" alt="Responsive Design" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Responsive Design</a></h3>
            <p>All JoomlaShine templates are equipped with <strong>responsive design</strong> feature making your website look beautiful in both smartphones and tablets..</p>
        </div>
    </div>
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-support.png" alt="Dedicated Support" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Dedicated Support</a></h3>
            <p>In addition to <strong>comprehensive documentations</strong> in PDF format and online video, you also get support from <strong>friendly forum</strong> and <strong>dedicated support system</strong>.</p>
        </div>
    </div>
</div>

<div class="grid-layout template-feature-grid">
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-layout.png" alt="Flexible Layout" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Flexible Layouts</a></h3>
            <p>JSN Air layout system is very flexible and capable. JSN Air provides <strong>36+ module positions</strong> allowing you to have multiple layouts configuration.</p>
        </div>
    </div>
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-love.png" alt="Customer Love us" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3>Popular extensions support</h3>
            <p>JSN Air works well with other <strong>Joomla popular extensions</strong>. JSN Air also has extended style that will automatically support for the display of <a href="/component/k2/?amp;view=itemlist&amp;layout=category&amp;task=&amp;id=&amp;Itemid=645">K2</a> or <a href="/component/kunena/?amp;view=home&amp;defaultmenu=499&amp;Itemid=800">Kunena component</a>.</p>
        </div>
    </div>	
</div>

When adding packages or code to my wiki it is sometimes need to show that code in context, which usually is a joomla module. So to that aim I have included some simple code below to emulate module positions and  can be used safely in wiki articles. As with Joomla module positions they can be sub divided into mulitple modules so I have included a range below.

Single Module

<div>

	<div style="width: 30%; min-width: 180px; padding: 5px; margin: auto auto; border: 1px solid black;">		
		<p>Fake Module Content</p>
	</div>
	
</div>

This might also be a good variant using min-width and max-width instead of percentage.

<div style="min-width: 180px; max-width: 300px; padding: 5px; margin: auto auto; border: 1px solid black;"> 

</div>

Double Module

<div style="float: left; width: 90%; border: 2px solid blue;">

	<div style="float: left; width: 45%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;">
		<p>Fake Module Content 1</p>		
	</div>
	
	<div style="float: left; width: 45%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;">
		<p>Fake Module Content 2</p>		
	</div>
	
</div>
<div style="clear: both;">&nbsp;</div>

Triple Module

<div style="float: left; width: 90%; border: 2px solid blue;">

	<div style="float: left; width: 30%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;">
		<p>Fake Module Content 1</p>		
	</div>
	
	<div style="float: left; width: 30%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;">
		<p>Fake Module Content 2</p>		
	</div>
	
	<div style="float: left; width: 30%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;">
		<p>Fake Module Content 3</p>		
	</div>
	
</div>
<div style="clear: both;">&nbsp;</div>

Header

I am not sure what the specific are of this one, but note the overflow statement

<div style="overflow: hidden; padding: 5px; border: 1px solid black;">
	<p>Fake Header Content</p>
</div>

Single Position

<div style="float: left; width: 90%; border: 2px solid blue;">
	<p>Fake Position Content</p>
</div>
<div style="clear: both;">&nbsp;</div>

More Styled Fake Module

HTML

<div class="demo-module-container" style="display: table; margin: auto;">
	<div style="float: left; margin: 5px; height: 425px; width: 300px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;">
		<h3 style="padding-top: 5px;"><span style="display: block; line-height: 25px; text-transform: uppercase; padding: 5px 14px; color: #fff; text-shadow: none; background: #2D5E95 none repeat scroll 0% 0%; margin: none;">Fake Module Title 1<br /></span></h3>
		<div style="height: 360px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;">
			<p>Fake Module Content 1</p>
		</div>
	</div>
	<div style="float: left; margin: 5px; height: 425px; width: 300px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;">
		<h3 style="padding-top: 5px;"><span style="display: block; line-height: 25px; text-transform: uppercase; padding: 5px 14px; color: #fff; text-shadow: none; background: #2D5E95 none repeat scroll 0% 0%; margin: none;">Fake Module Title 2<br /></span></h3>
		<div style="height: 360px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;">
			<p>Fake Module Content 2</p>
		</div>
	</div>
</div>

These are the widths and device responsive statements that Joomlashine uses throughout their temapltes.

/* These are the responsive code barriers as defined in Page builder and possibly normal Joomlashine Templates */

@media only screen and (max-width: 1024px), (max-device-width: 1024px) {
}

@media only screen and (max-width: 768px), (max-device-width: 768px) {
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
}

@media only screen and (max-width: 960px), (max-device-width: 960px){
}



@media screen and (max-width: 1400px) {
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
}

@media screen and (max-width: 1280px){
}

@media screen and (max-width: 1024px){
}

@media screen and (max-width: 799px) {
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 719px) {
}

@media screen and (max-width: 640px) {
}

@media screen and (max-width: 480px) {
}

@media screen and (max-width: 360px) {
}

Joomla has fixed non-SEF URLs for a lot of things so I have started to put together a list of them here

These links might get parsed out by joomla so I will check back

• User Login:
  index.php?option=com_users&view=login

This is the how to use advanced portfolio

General

• you can have nested categories
• there is an inbuilt media mamanger

Projects

• Projects are the individual Items
• a project has a list view and a details view (like mosets)
• you must create category before you can create a project
• you can select images or videos for the project type
• Either have a video gallery or an image gallery for the project
• you can upload mutiple images at once
• you can make 1 project featured

** From official project notes

https://extstore.com/support/documentation/components/advanced-portfolio-pro#usage

• Project URL: Enter a valid url in this field. This url will be used for Permalink button on the project's overlay (list view) and Launch Project in the project view (details view).
• Short Description: Give the project some short introduction lines that will be displayed on the list view.
• Description: Description has got the same role as a brief document of a project that provides specified information in the detailed page. (details view)

Categories

• This is just your basic container for the projects
• A category cand be used to group a load of projects together ie groups

Menu

• In the menu item it is possible to select which categories you want to display

Image Settings and their description

There is no direct control of gallery/slider image sizes. I have added it to the forum

These are where you can control the images, it can be a bit awkward at first but when you have read the list below it all makes sense.

General/Default Settings

• Configuration settings (General layout tab)
  • Image quality
  • File Locations
  • Watermark
• Configuration settings (list layout tab) (thumbnails)
  • Image width
  • Image height – fixed height or auto to keep ratio with width
• Configuration settings (details layout tab)
  • You can set the description box width (1 – 11, bootstrap?) which alters the image size by proxy
  • There are no direct settings to control the sliding image sizes
• Configuration settings (transform tab) (thumbnails)
  • These control animation effects when you hover over a thumbnail
  • Scale – animate bigger or smaller
  • Rotate – rotate the image
  • Skew – like ringing a cloth or trapezium shape

Category Settings

• Category (Options Tab)
  • Image – set an image for the category

Project Settings

• Project (Project Options Tab) per project setting which will override the defaults
  • Description Width (on details page)
  • Image width (project thumbnail)
  • Image height (project thumbnail) – fixed height or auto to keep ratio with width

Menu Item Settings

• Menu Item (list layout tab) - will override the defaults
  • Scale (project thumbnail)
  • Rotate (project thumbnail)
  • Skew (project thumbnail)

My Prefered Settings

Apply these settings or as required

• Project details description width = 6

My Fixes

These fixes should all be applied as needed

List styling is turned off / Enable bullet list icons

This prevents me adding any custom icons for my list items or just using the themes.

In media/com_advportfoliopro/css/style.css line 749, I disabled the following block of code

.portfolio-module ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

'Go Back and 'Launch Project' Buttons are not in the middle

/* Launch Project Button to the middle */
.project-wrapper .project-link {
	margin: 18px 0;
	padding: 10px 0 0;
	border-top: 1px solid #E5E5E5;
}

style.css:691
+ text-align: center;

/* Go Back Button to the middle */
.btn-go-back {
	border: medium none;
	color: #ffffff;
	font-size: 16px;
	margin: 15px 0;
	padding: 15px 30px;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.4s;
	background: #008cba;
	border-radius: 4px;
}

style.css:654
+ display: block;
+ margin: auto auto;

Does not work well because it is in a 100% width div spanning both columns

Change Launch Project Name

It is controlled by

COM_ADVPORTFOLIOPRO_LAUNCH_PROJECT="Launch Project"

Override / Change in language translation thing via Joomla

• Make sure you select site and English before creating a new override
• Call it ‘Launch Website’

Make list items same height

• jsn-time changes it to uses class 'jsn-com-advportfoliopro' and not 'com_advportfoliopro'
• .com_advportfoliopro is not 100% required

This is my first attempt to keep all of the list ietms the same height. It is better than nothign but there seems a bit of difference between how Firefox and Chrome handles this.

/*-- Advanced Portfolio - unify list item height --*/

/* - This is not 100% - */

.com_advportfoliopro .project-item-meta {
    min-height: 300px;
}

@media only screen and (max-width: 975px) {
    .com_advportfoliopro .project-item-meta {
        min-height: 400px;
    }
}

@media only screen and (max-width: 783px) {
    .com_advportfoliopro .project-item-meta {
        min-height: 650px;
    }
}

@media only screen and (max-width: 631px) {
    .com_advportfoliopro .project-item-meta {
        min-height: 700px;
    }
}

/* (this is where 3 columns goto 2 columns) */
@media only screen and (max-width: 615px) {
    .com_advportfoliopro .project-item-meta {
        min-height: 400px;
    }
}

Building a Portfolio

Image Names and Sizes

You need images for your protfolio item so these are some pointers on their sizes and names. I use Firefox addon called Fireshot

suggested sizes

• Thumbnails - 100x100, 300x300, 600x600 (all square)
• Project Details - 1280x720, 640 x 320 (all widescreen). You can use other sizes if they keep the same ratio.

Suggested Names

All pages have these areas so do not need a page name in. The header will either have the slider or not, you do not need 2 images, one  with and one without.

• Header
• Content
• Footer
• Special images (gallery.jpg, testimonals.jpg...)

Special features, they do not need page references

• gallery
• testimonials
• thumbsgallery
• contact-form

Aquire an image with FireShot

This is quite straight forward when you have got things configured. Using Firefox:

• install FireShot addon
• install webdeveloper toolbar addon
• create a custom  'Resize Dimension' in the webdeveloper toolbar
  • Goto Resize menu --> Edit Resize Dimension
  • add a new dimension called 'Advanced Portfolio' with the dimensions 1313 x 720. (The weired dimensions account for the scroll bars and once an image is taken the dimensions end up correct)
• Under the 'Resize' menu select 'Advanced Portfolio' to resize the browser windows
• take an image with FireShot by clicking the 'S' icon in your toolbar at the top (or wherever)
• verify the image's dimensions

Workflow to create 1 list item

Here I will outline the rules I used for makinga single project item. These are obviously forcused on websitres but can easily be applied to other variations.

• Create a Category called ‘Website Portfolio’
• Pick a website
• Get the images
  • Screen grab the pages of the website (1280 x 720 – use FF FireShot window resize)
  • Keep originals and always use ‘save as’
  • Currently all images need to be the same height otherwise the gallery/slider goes up and down to show each slide.
  • Take images of specific areas (1280 x 720 or possible 640 x 360) using the Fixed Size select tool in Paint.Net (use pixels)
    • When using selection tool be very careful you have got all of the area selected. It is very precise
    • Zooming in helps
    • Images should be W x H – alter in paint.net as needed (all need to be same size details = 620x400 thumbnails = 300x300, image width 8, detail width 4)
    • Use 1280 x 720 and 90% quality jpg (set FireShot to 1313 to get 1280 images this is because of the scroll bars width)
  • Create thumbnail (home-page or other image) – using paint.net
    • get full home page image
    • set the secondary colour to e6e6e6 / ececec
    • expand canvas width to match height giving a square (note the secondary colour will fill the gap
    • resize to whatever (300x300)
    • save as jpg 90% quality
• Create a project - Use the JSN Template name for the Project
• Short Description - Write a 1 line describing the template
• Long description – bullet point the aspects of the theme (maybe add things like the slider)
• Create a folder for the template – should be the same as the project name
• Upload the altered images to the CORRECT folder
• Give the images titles in advanced portfolio (as per rules)
• Set the thumbnail
• (optional) add each entry to the demo toolbar. The short description and thumbnail (resize to 100 x 100, the extstore demo resizes 600 x 600 to 100x100 lol)
• Order of images
  
  • Header
  • Content
  • Footer
  • Special images (gallery.jpg, testimonals.jpg...)
• Advance Pro image names/titles – Just capitalize the image name ie 'content' --> 'Content'

Examples

Short Description (HTML)

<p>A light and versatile modern theme ideal for small companies who want to be presented as professional but accessible.</p>

Long Description (HTML)

<p>&nbsp;</p>
<ul style="display: table; margin: 0 auto; list-style-image: url('/images/common/tick.png');">
    <li>Responsive / Mobile Friendly</li>
    <li>Light</li>
    <li>Modern</li>
    <li>Versatile</li>
    <li>Animated Slider</li>
</ul>

Keywords

• Responsive / Mobile Friendly
• Clean
• Simple
• Dark
• Versatile
• Modern
• Fresh
• Adaptable
• Animated Slider
• Professional
• Slider
• Funky
• Light
• Eye Catching
• Visually Attractive
• Corporate
• Impressive
• Unique
• Informative
• Popular
• Accessible
• SEO Friendly
• Expandable
• Inspired Design
• Warm
• Easy to look at
• Refreshing
• Straight Forward
• Multi Purpose
• Family
• Homely
• CTA
• Call To Action
• Increased Conversion
• Elegant
• Colourful
• Functional
• Interesting
• Memorable
• Personal

Notes

• The thumbnail are not cropped but ‘strectch by X-axis’.
• Having images in the gallery of different heights can cause the cycling of images to be a bit crap. As it goes up and down
• All images use the cached reduced quality version
• Gallery is in a responsive modal box so there are no settings for this but does use the cached version
• don’t forget it has a search plugin, smart search plugin and carousel module
• contains the actuall script
  • C:\Desktop\com_advportfoliopro_v3.8.1_j3\media\js\script.js
  • C:\Desktop\com_advportfoliopro_v3.8.1_j3\site\views\project\tmpl\default_images.php
  • /public_html/components/com_advportfoliopro/views/project/tmpl/default_images.php
• transform tab description should make a note that it is the thumbnail animation
• When you make all images have the same heigh (720px), some are thinner than others because they are stretched along the width and then then grow taller because of this to maintain ratio.
• Autoheight – changes the physical size of the container, id does NOT resize the image
• Owl carousel is the library used and is not good at image resizing