Canvas Support

sticky tab

6 replies · opened Jun 9, 2016

FfotobobJun 9, 2016

I've just spent a good bit of time browsing through the template pages and did to see something I would be interested in being able to have - a sticky tab on either the right or left side of the screen. (i.e. a small tab 50px or so wide and 100px or so tall that remains on either side of the screen and when clicked slide out to reveal a larger box) Is there one in the template and I just missed it?

SSemicolon WebSTAFFJun 13, 2016

Hello,

We really apologize but we are unsure of the Layout you are requesting. Can you please provide us with an Example or a Screenshot so that we can provide you further assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

FfotobobJun 15, 2016

I realize I may not have been too clear - attached is an image that might explain the concept better.

📎 sticky_tab.tiff217 KB
SSemicolon WebSTAFFJun 15, 2016

Hello,

Can you please upload a JPG, PNG or a GIF Image. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

FfotobobJun 16, 2016

Here it is in jpg.

Also I found some styling in style.ccs for styling Facebook like/share popups, but no examples in any of the pages. Did I miss something?

SSemicolon WebSTAFFJun 17, 2016

Hello,

Thank You so much for taking time in proving us with the Image. This is currently not available out of the box. However, this can definitely be added by adding some Customized Codes:

  1. Please add the following CSS Code:
.sticky-tab-flyout {
	position: fixed;
	top: 200px;
	left: auto;
	right: 0;
	width: 300px;
	z-index: 999;
	-webkit-transform: translate3d(300px, 0, 0);
	-o-transform: translate3d(300px, 0, 0);
	transform: translate3d(300px, 0, 0);
	-webkit-transition: -webkit-transform .3s ease;
	-o-transition: -o-transform .3s ease;
	transition: transform .3s ease;
}

.sticky-tab-flyout.sticky-tab-flyout-open {
	-webkit-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.tab-flyout-trigger {
	position: absolute;
	top: 0;
	left: -100px;
	width: 100px;
	height: 40px;
	line-height: 40px;
	background: #DDD;
	color: #444;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.tab-flyout-content {
	position: relative;
	display: block;
	padding: 20px 25px;
	width: 300px;
	background: #DDD;
}
  1. Add the following HTML Code:

	Sticky Tab
	
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita accusamus ab, quos minus quaerat impedit nihil minima repellat veniam non atque odio dignissimos, consequuntur, neque. Blanditiis dolores, quidem amet. Sapiente.
  1. Now, add the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking:

	jQuery(document).ready( function($){
		$('.tab-flyout-trigger').click( function(){
			$(this).parents('.sticky-tab-flyout').toggleClass('sticky-tab-flyout-open');
			return false;
		});
	});

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

FfotobobJun 17, 2016

Thank you very much.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard