Slider tools on left and bottom

2016-10-29T18:29:37Z

The NTVMR Manuscript Workspace page has tool panels which rest to the left and bottom and slide out on mouse hover. The magic to make this happens is as follows:

Create a page and choose a the 2-2 Column Layout:
Place the gadgets you wish to remain stationary in the top 2 positions in the layout
Place the gadget you wish to use as the tool to slide out from the left in the bottom left position
Place the gadget you wish to use as the tool to slide out from the bottom in the bottom right position

Under the page's "Look and Feel" settings, define a custom look and feel for this page and use this in the CSS setting:

	#column-3 {
	position: absolute;
	width: 620px;
	top: 200px;
	left: -90px;
	padding-left: 90px;
	padding-right: 50px;
	}

	#column-4 {
	bottom: -530px;
	height: 550px;
	overflow: hidden;
	position: fixed;
	left:15px;
	right: 15px;
	z-index: 5;
	padding-bottom: 90px;
	}

Finally, add this to your page's JavaScript setting:

	AUI().use('get', function(A) { A.Get.script('http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js', { onSuccess: function() {

	$('#column-3').find('header')
	.css('position', 'absolute')
	.css('-webkit-transform', 'rotate(90deg)')
	.css('-moz-transform', 'rotate(90deg)')
	.css('-ms-transform', 'rotate(90deg)')
	.css('-o-transform', 'rotate(90deg)')
	.css('transform', 'rotate(90deg)')
	.css('width', '200px')
	.css('right', '-60px')
	.css('top', '180px')
	.css('text-align', 'center');

	$('#column-4').find('header')
	.css('width', '200px')
	.css('margin-left', '40px')
	.css('margin-top', '-30px')
	.css('z-index', '99999')
	.css('text-align', 'center')
	.css('position', 'fixed');

	$('#column-3').mouseenter(function() {
	if (!$(this).hasClass("popped")) {
	$(this).animate({left: "-90px" }, {queue: false, duration: 500}).addClass("popped");
	}
	})
	.mouseleave(function(e) {
	if (!e.relatedTarget \|\| $(e.relatedTarget).attr('id')=='dockbar') return;
	if ($(this).hasClass("popped")) {
	$(this).animate({left:"-550px"}, {queue: false, duration: 500}).removeClass("popped");
	}
	});

	$('#column-4').mouseenter(function() {
	if (!$(this).hasClass("popped")) {
	$(this).animate({bottom: "-75px" }, {queue: false, duration: 500}).addClass("popped").css('z-index', 1001);
	}
	})
	.mouseleave(function(e) {
	if (!e.relatedTarget \|\| $(e.relatedTarget).attr('id')=='dockbar') return;
	if ($(this).hasClass("popped")){
	$(this).css('z-index', 3).animate({bottom:'-530px'}, {queue: false, duration: 500}).removeClass("popped");
	}
	});

	$(window).resize(function() {
	expandFillPageClients();
	});


	var MARGIN=67;
	function expandFillPageClients() {
	$('#column-1, #column-2, #column-3').find('.liferaygadget, .gadget').each(function () {
	$(this).height(window.innerHeight - $(this).offset().top - MARGIN);
	});
	}

	var afterLoad = function(max, n) {
	if (!n) n = 0; if (n > max) return;
	expandFillPageClients();
	setTimeout(function() { afterLoad(max, n+1); }, 1000);
	}
	afterLoad(12);

	$("body").css("overflow", "hidden");

	} }); });

Page Layout Ideas, custom CSS, JavaScript, etc.

Slider tools on left and bottom