Customized Dynamic AJAX Tabs for Prototype

Jake Hurst — Sun, 15 Mar 2009 19:11:32 +0000

I found these cool AJAX Tabs for Prototype and added some of my own style to them. If you need something like this then you might want to check these tabs out,Â they are slick!Â These AJAX tabs where built by 20bits.com. I needed to add more style to them for the new TMS theme that I was building yesterday.Â Anyway take a look at the before and after screen shots. IF you install theme why not try out my CSS located at the bottom of this post.

Don’t forget to check out the Live Demo!!

Prototype AJAX Tabs Before

Prototype AJAX Tabs After

Install the tabs by following the directions at this site. 20bits.com

Once you have installed the tabs grab the CSS below and have some fun!

.tabbed-pane * {
	margin: 0;
	padding: 0;
}
.tabbed-pane {
	margin:0 0 0 2px;
	width:305px;
	text-align:left;
        background: #222;
	color:#888;
	border:1px solid #333;
    padding:3px;
}

.tabbed-pane img
{
	width:300px;
	height:200px;
	margin:0 0 8px 0px;
	padding:1px;
	float:left;
	border:1px solid #000;
}

 .tabs {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #111;
	border-bottom: 1px solid #333;

}

.tabbed-pane ol {
       height:28px;
       margin-bottom:5px;
}
 .tabs li a.active {
	float: left;
	display: block;
	padding: 6px 8px 6px 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	color: #EEE;
	background: #222;
        border: 1px solid #222;
}
 .tabs li {
	float: left;
	margin: 0 0px 0 0;
}

 .tabs li a {
	float: left;
	display: block;
	padding: 6px 8px 6px 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	background: #111;
        color:#FFF000;

}

 .tabs li a:hover {
	float: left;
	display: block;
	padding: 6px 8px 8px 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%;
	color: #EEE;
	background: #333;
}

.tabbed-container {
	position: relative;
	clear: both;
	min-height: 10em;
}
.tabbed-container .overlay {
	position: absolute;
	clear: both;
	padding: 0px 5px 0px 5px;
	width: 290px;
        height: 100%;
	top: 0;
	left: 0;
	opacity:.70;
	filter:alpha(opacity=70);
	background:#222;
	text-align: center;
	z-index: 100;

}

.tabbed-container .overlay h3{
       	font-size:18px;
	font-weight:700;
        color:#ffF000;
}

Customized Sliding Carousel For Prototype

Jake Hurst — Fri, 28 Nov 2008 07:29:04 +0000

I have looked all over the web for a Prototype content slider that I can use on some of the sites that I am building. Finally I stumbled on this one. Its called Glider-0.0.3. Out of the box it isn’t very pretty, so I went ahead and added my own styles to it. Maybe some one out there might find it useful.

Script Built By:missingmethod.com

Slider options

Auto Scroll:
var my_glider = new Glider(‘my-glider’, {autoGlide: true, frequency: 6});

Scroll with only the buttons:
var my_glider = new Glider(‘my-glider’, {duration:0.5});

Buttons Below

Live Demo

DownLoad

Screen Shots

Buttons left and right

Live Demo

Download

Screen Shot

Control.Tabs, Unobtrusive CSS tabs for Prototype

Jake Hurst — Tue, 12 Aug 2008 07:30:59 +0000

If your looking for some nice tabs well you need to check this out, its called Control.Tabs . I really like the hover effect with the image thumbnails!

Link: http://livepipe.net/control/tabs#image_1

DesignerFied.com » Prototype

Customized Dynamic AJAX Tabs for Prototype

Customized Sliding Carousel For Prototype

Control.Tabs, Unobtrusive CSS tabs for Prototype