Douglas on Web Applications

Incredibly Simple Tabs with jQuery

Whenever I need inline tabs, I find myself traveling down the same well trod paths. There are dozens of plugins but where they usually fail is in simplifying skinning. Solution:

1. Create each tab row as a graphic (so all tabs but the selected one in a row would look the same
2. Add images to page surrounding each as a DIV
3. Add a bit of jQuery to hide show appropriate tab & content on click

Here's the CSS:

 
<div id="tabs">
<div id="speakers"><img src="img/tabs-speakers.gif" width="724" height="41" alt="Speakers" /></div>
<div id="events"><img src="img/tabs-events.gif" width="724" height="41" alt="Speakers" /></div>
<div id="tabs-content">
<div id="speakers-content" class="tab-content">
 
Content for speakers
</div>
<div id="events-content" class="tab-content">
 
Content for events
</div>
</div>
</div>
 

Next, add the javascript:

var tabArray=new Array("speakers","events");
$(document).ready(function() {
   $('#events').hide();
   $('#events-content').hide();
   $('#tabs').click(function() {
	   $.each(tabArray, function(index, value) {
		   $('#'+value).toggle();
		   $('#'+value+'-content').toggle();
	   });
   });
});

Tags: images, jQuery, simple, tabs

Rounded Corners with Images using jQuery

Source: http://docs.jquery.com/Tutorials:Rounded_Corners

Javascript:

 
$(document).ready(function(){ $("div.roundbox") .wrap('
<div class="dialog">'+
'
<div class="bd">'+
'
<div class="c">'+
'
<div class="s">'+
'</div>
 
'+
'</div>
 
'+
'</div>
 
'+
'</div>
 
');
$('div.dialog').prepend('
<div class="hd">'+
'
<div class="c"></div>
 
'+
'</div>
 
')
.append('
<div class="ft">'+
'
<div class="c"></div>
 
'+
'</div>
 
');
});
 

HTML:

 
<div class="roundbox">
</div>
 

CSS:

 
body {
 font:normal 76% georgia,helvetica,verdana,tahoma,arial,"sans serif";
 background: #fff;
}
a { color: white; text-decoration: none;}
a:hover { border-bottom: 1px dashed #fff;}
.dialog {
 width:67%;
 margin:0px auto;
 min-width:20em;
 color:#fff;
}
 
.dialog .hd .c,
.dialog .ft .c {
 font-size:1px; /* ensure minimum height */
 height:13px;
}
 
.dialog .ft .c {
 height:14px;
}
 
.dialog .hd {
 background:transparent url(tl.gif) no-repeat 0px 0px;
}
 
.dialog .hd .c {
 background:transparent url(tr.gif) no-repeat right 0px;
}
 
.dialog .bd {
 background:transparent url(ml.gif) repeat-y 0px 0px;
}
 
.dialog .bd .c {
 background:transparent url(mr.gif) repeat-y right 0px;
}
 
.dialog .bd .c .s {
 margin:0px 8px 0px 4px;
 background:#000 url(ms.jpg) repeat-x 0px 0px;
 padding:1em;
}
 
.dialog .ft {
 background:transparent url(bl.gif) no-repeat 0px 0px;
}
 
.dialog .ft .c {
 background:transparent url(br.gif) no-repeat right 0px;
}
 
/* content-specific */
 
.dialog h1 {
 /* header */
 font-size:2em;
 margin:0px;
 padding:0px;
 margin-top:-0.6em;
}
 
.dialog p {
 margin:0.5em 0px 0px 0px;
 padding:0px;
 font:0.95em/1.5em arial,tahoma,"sans serif";
}
 
html>body .dialog pre {
 font-size:1.1em;
}
 

Tags: images, jQuery, rounded corners, tutorial

Image Swap Functions Via MM

Marcomedia's Image Swap Functions:

 
function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
 
function MM_swapImage(id,newimg) {
  var x;
 	if ((x=MM_findObj(id))!=null) {
		x.src=newimg;
	}
}
 
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_preloadImages() { //v3.0
    var d=document;
    if(d.images) {
        if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
        for(i=0; i<a.length; i++)
            if (a[i].indexOf("#")!=0) {
                d.MM_p[j]=new Image;
                d.MM_p[j++].src=a[i];
            }
    }
}
 

Tags: images, javascript, preload, swap