<html>
<head>
<title>test 2</title>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="js/brwsrdtct.js"></script>
<script>
$(document).ready(function(){
if(BrowserDetect.browser=="Firefox"){
$('#placeholder').css('left','390px');
$('#placeholder').css('position','absolute');
$('#theMenu').css('position','inherit');
$('#content').css('position','relative');
$('#tab').css('position','inherit');
$('#one').css('marginLeft','0px');
$('#two').css('marginLeft','23px');
$('#three').css('marginLeft','72px');
$('#four').css('marginLeft','119px');
$('#five').css('marginLeft','165px');
$('#six').css('marginLeft','209px');
}
if(BrowserDetect.browser=="MSIExplorer"){
$('#placeholder').css('left','390px');
$('#one').css('marginLeft','0px');
$('#two').css('marginLeft','23px');
$('#three').css('marginLeft','72px');
$('#four').css('marginLeft','119px');
$('#five').css('marginLeft','165px');
$('#six').css('marginLeft','209px');
}
$("div.content").hide();
//begin double click bug script segments
//$("div.tab").mouseover(focus);
//focus( function() { alert("Hello"); } )
//$('#one').hover('focus', function() { alert("Hello"); } );
//$('#five').hover('focus', function() {$(this).focus();} );
/*$("div.tab").mouseover(function() {
$(this).focus();
});
*/
/*
$("#nav a.daddy").mouseout(function() {
$(this).find("+ ul").pause(2000).fadeOut("slow");
});*/
//end double click script segments
selected=0; /*true/false to control slideUp/slideDown*/
$('div.tab a').click(function(){
if(selected==0){
selected=1;
$('#one').css('zIndex','99');
$(this).parent().prev().css('zIndex','0');
$(this).parent().parent().className="theMenu_active";
$("div.theMenu").children("div.content").slideUp("fast");
$(this).parent().prev().slideDown("slow");
}
else if(selected==1){
selected=0;
$(this).parent().parent().className="theMenu";
$(this).parent().prev().slideUp("fast");
}
return false;
});
});
</script>
<LINK REL=StyleSheet HREF="css/css.css" TYPE="text/css" MEDIA="screen" />
</head>
<body>
<div id="background"><img border="0" align="left" width="694" height="414" hspace="0" vspace="0" src="img/bg.jpg" /></div>
<div id="placeholder">
<div class="theMenu">
<div class="content">
Imagination is only rivaled by
ignorance... <div align="right" style="padding-right:15px;">Kenneth G. Bice</div>
<div id="bio">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vitae urna a mauris semper sodales.
Morbi sit amet odio. Maecenas semper odio nec nisl. Suspendisse potenti. In felis. Donec non tellus
non mauris porttitor condimentum. Sed at diam. Morbi dolor mauris, consequat vel, sollicitudin
condimentum, semper dignissim, urna. Nulla in metus sit amet lacus porta vulputate. Aliquam at ipsum.
Aenean velit leo, pharetra sit amet, semper nec, euismod a, arcu. Maecenas euismod fringilla pede.
Vestibulum et pede. Duis in elit at odio faucibus ornare. Cras purus. Nulla venenatis congue ligula.
Nunc nulla libero, condimentum quis, accumsan sit amet, sagittis nec, purus.
Aenean iaculis aliquet augue. Phasellus adipiscing. Sed ut tellus. Etiam porta auctor mauris. Proin
elementum lacus vel turpis. Vestibulum consectetuer dui in arcu. Nam semper ante. Nam ornare massa vitae
sapien. Phasellus non lorem at urna euismod aliquam. Nunc eros velit, congue varius, imperdiet consectetuer,
ullamcorper eget, nulla. Curabitur dapibus mollis turpis. Fusce pellentesque turpis nec quam. Maecenas egestas.
Praesent pulvinar vulputate augue. Etiam dui dolor, dignissim et, aliquet ultricies, dignissim id, nunc.
Vestibulum eget tellus vel velit commodo pretium. Sed interdum leo id nunc. Nam facilisis. Duis id nulla sed
eros sagittis faucibus. Nullam semper auctor neque.
</div>
</div><!-- hidden content-->
<div class="tab" id="one" style="z-index:1;width:26;"><a href="javascript:;">
<img border="0" align="left" width="26" height="16" hspace="0" vspace="0" src="img/bio_tab.gif" /></a></div><!-- tab to show/hide content-->
</div>
<div class="theMenu">
<div class="content">
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
</div><!-- hidden content-->
<div class="tab" id="two" style="z-index:2;width:52;"><a href="javascript:;">
<img border="0" align="left" width="52" height="16" hspace="0" vspace="0" src="img/portfolio_tab.gif" /></a></div><!-- tab to show/hide content-->
</div>
<div class="theMenu">
<div class="content">
333333333333333333333333333333
333333333333333333333333333333
333333333333333333333333333333
</div><!-- hidden content-->
<div class="tab" id="three" style="z-index:3;width:50;"><a href="javascript:;">
<img border="0" align="left" width="50" height="16" hspace="0" vspace="0" src="img/contact_tab.gif" /></a></div><!-- tab to show/hide content-->
</div>
<div class="theMenu">
<div class="content">
444444444444444444444444444444
444444444444444444444444444444
444444444444444444444444444444
</div><!-- hidden content-->
<div class="tab" id="four" style="z-index:4;width:49;"><a href="javascript:;">
<img border="0" align="left" width="49" height="16" hspace="0" vspace="0" src="img/msgme_tab.gif" /></a></div><!-- tab to show/hide content-->
</div>
<div class="theMenu">
<div class="content">
555555555555555555555555555555
555555555555555555555555555555
555555555555555555555555555555
</div><!-- hidden content-->
<div class="tab" id="five" style="z-index:5;width:47;"><a href="javascript:;">
<img border="0" align="left" width="47" height="16" hspace="0" vspace="0" src="img/addme_tab.gif" /></a></div><!-- tab to show/hide content-->
</div>
<div class="theMenu">
<div class="content">
666666666666666666666666666666
666666666666666666666666666666
666666666666666666666666666666
</div><!-- hidden content-->
<div class="tab" id="six" style="z-index:6;width:73;"><a href="javascript:;">
<img border="0" align="left" width="73" height="16" hspace="0" vspace="0" src="img/picsnvids_tab.gif" /></a></div><!-- tab to show/hide content-->
</div>
</div><!-- placeholder-->
</body>
</html>
body{
}
a:link{color:#FFFFFF;}
#background{
position:absolute;
top:0px;
left:165px;
width:694px;
height:414px;
}
#placeholder{
position:absolute;
top:313px;
width:275px;
}
.theMenu{
position:absolute;
width:275px;
}
.content{
background-color:#7d7d7d;
position:relative;
width:275px;
height:250px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
padding-top:20px;
padding-left:5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:10px;
}
.tab{
position:inherit;
}
#bio{
height:215px;
margin-top:10px;
overflow:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:10px;
}