Jquery TabSlide - Keeping the tab open indefinitely
Hey Experts!!
I am using the Jquery tabslide (http://www.exfer.net/test/jquery/tabslide/) for my site.
I'm just playing around with it at this point, but does anyone know how I can keep the tabs open indefinitely? or via an onclick?
The jquery is below:
I am using the Jquery tabslide (http://www.exfer.net/test/jquery/tabslide/) for my site.
I'm just playing around with it at this point, but does anyone know how I can keep the tabs open indefinitely? or via an onclick?
The jquery is below:
var sliding = 0;
var slideTime = '';
// Set is sliding value
function setSliding(a_ISliding){
sliding = a_ISliding;
}
// Get is sliding value
function getSliding(){
return sliding;
}
// Carry out accordian styled effect
function accordion(evt) {
el = Event.element(evt);
var eldown = getNextSibling(el);
// If element is visible do nothing
if ($('visible') == el) {
return;
}
if ($('visible')) {
if( getSliding() == 1 ){
return false;
}
var elup = getNextSibling($('visible'));
setSliding( 1 );
parellelSlide( elup, eldown );
$('visible').id = '';
}
else{
setSliding( 1 );
singleSlide( eldown );
}
el.id = 'visible';
}
// Setup accordian initial state
function init() {
var bodyPanels = document.getElementsByClassName('panel_body');
var panels = document.getElementsByClassName('panel');
var noPanels = panels.length;
var percentageWidth = 100 / noPanels;
var position = 0;
// Loop through body panels and panels applying required styles and adding event listeners
for (i = 0; i < bodyPanels.length; i++) {
bodyPanels[i].hide();
panels[i].style.width = percentageWidth + '%';
panels[i].style.position = 'absolute';
panels[i].style.left = position + '%';
Event.observe(panels[i].getElementsByTagName('h3')[0], 'mouseover', accordion, false);
Event.observe(panels[i].getElementsByTagName('h3')[0], 'mousemove', accordion, false);
Event.observe(document.body, 'mousemove', resetIdle, false);
position += percentageWidth;
}
if( $('visible') ){
// Set panel with id of visible to be initial displayed
var vis = $('visible').parentNode.id+'-body';
$(vis).show();
}
setIdle();
}
// Next sibling method to work around firefox issues
function getNextSibling(startBrother){
var endBrother=startBrother.nextSibling;
while(endBrother.nodeType!=1){
endBrother = endBrother.nextSibling;
}
return endBrother;
}
function parellelSlide( elup, eldown ){
new Effect.Parallel(
[
new Effect.SlideUp(elup),
new Effect.SlideDown(eldown)
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
}
function singleSlide( eldown ){
new Effect.Parallel(
[
new Effect.SlideDown(eldown)
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
}
function resetTabs(){
var resetEl = getNextSibling( $('visible') );
setSliding( 1 );
new Effect.Parallel(
[
new Effect.SlideUp( resetEl )
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
$('visible').id = '';
}
function resetIdle(){
if($('visible')){
window.clearTimeout( slideTime);
slideTime = window.setTimeout( "resetTabs()", 1000 );
}
}
function setIdle(){
if( $('visible') ){
slideTime = window.setTimeout( "resetTabs()", 10000 );
}
}
Event.observe(window, 'load', init, false);
David S.
It looks like you can remove all of the resetIdle and setIdle calls to do that.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Yes, you could change the timeout.
In looking at this again, it seems that the code you posted is not that used in the demo. In fact, the code you posted seems to use Prototype, not jQuery. Which code are you really trying to use?
In looking at this again, it seems that the code you posted is not that used in the demo. In fact, the code you posted seems to use Prototype, not jQuery. Which code are you really trying to use?
ASKER
The code I posted is the tabslide script file. I am trying to use the prototype library on this page as of right now.
Here is the entire source code for a sample page along with a link:
http://430designs.com/expe
Here is the entire source code for a sample page along with a link:
http://430designs.com/expe
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META NAME="description" CONTENT="Michigan professional web design & solution provider. We design web sites and strategies that help you and your business." />
<meta name="keywords" content="Professional Web Design, detroit, search engine optimization, Web Site Design Solution Provider, interactive, Web development, Macomb County,internet,flash,ecommerce,E-commerce,mainenance,promotion,online marketing, Michigan, website, social media agency" />
<meta name="robots" content="all,index,follow" />
<meta name="revisit-after" content="30 days" />
<meta name="google-site-verification" content="HkKBPgGbqm_Wryrk1td9_it25-yDFIcv-s9AYhBejtA" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>430 Designs :: Michigan Web Site Development</title>
<LINK REL="SHORTCUT ICON" HREF="http://wwww.430designs.com/favicon.ico" />
<style>
/* CSS Document */
#conash3D0 {
display: none;
}
body {
background: url(images/detroit2.jpg);
}
.smaller {
font: 10px Verdana, Geneva, sans-serif;
margin-left: 10px;
color: #36F;
}
.display{
float: left;
width: 25px;
height: 310px;
margin: 0 2px 0 0;
background: #EEA5BB url(images/pinktab.jpg) no-repeat;
}
.stretcher{
float: left;
width: 310px;
}
#accordion {
width: 99%;
height: 800px;
position:absolute !important;
display:block;
overflow:hidden;
font: 16px "ITC Avant Garde", "ITC Avant Garde Demi", "ITC Bookman Demi", "ITC Bookman Light", "ITC Zapf Chancery";
color: #CCC;
bottom: 0px;
}
#contact ul li a {
color: #FFF;
text-decoration: none;
padding: 10px;
font: 16px Helvetica;
}
#contact ul li a:hover {
font-family: Helvetica;
color: #FFF;
background: url(images/trans_blk2.png);
text-decoration: none;
padding: 10px;
}
#contact {
color: #FFF;
font-family: Helvetica;
display: inline;
clear: both;
float: left;
text-align: left;
}
#contact ul li {
display: block;
list-style-type: none;
text-align: left;
padding: 10px 10px 10px 0px;
}
#header {
clear: both;
position: absolute;
width: 100%;
background: url(images/stripe_pattern5.png) repeat;
text-align: center;
top: 0px;
height: 115px;
border-bottom: 2px solid #FFF;
}
#header img {
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
#header h1 {
font: 60px Helvetica;
color: #FFF;
}
h3 {
padding: 6px 6px 4px 35px;
margin: 0;
color:#fff;
border-bottom:1px solid #333333;
cursor:pointer;
display:block;
font: 26px Helvetica;
background: url(images/h3_bg.png) no-repeat;
}
#visible {
background: url(images/trans_blk.png);
border: 1px solid #E8E8E8;
}
.panel_body {
display:block;
position:relative;
color:#FFFFFF;
width: 575px;
height:575px;
background: url(images/trans_blk.png);
}
.panel_body div {
padding:3px 5px 3px 2px;
}
.panel{
margin:0px;
padding:0px;
width: 100%;
bottom: 0px;
}
table {
background: url(images/trans_blk2.png) repeat;
font: 16px "Arial Black", Gadget, sans-serif;
color: #CCC;
}
.wrapper{
bottom:0px;
position:absolute;
}
.formFieldFocus{
border: 2px solid #0033CA;
background: #36F;
color: #FFF;
}
form div {
padding: 4px 4px 4px 4px;
}
#main {
margin: 0 auto;
width: 400px;
}
label {
float: left;
width: 100px;
}
</style>
<script src="includes/jquery-1.3.1.new.min.js"></script>
<script>
$(document).ready(function() {
$(':input:not([type="submit"])').each(function() {
$(this).focus(function() {
$(this).parent().addClass('formFieldFocus');
}).blur(function() {
$(this).parent().removeClass('formFieldFocus');});
});
});
</script>
<script src="includes/prototype.js" type="text/javascript"></script>
<script src="includes/effects.js" type="text/javascript"></script>
<script src="includes/slider.js" type="text/javascript"></script>
<script src="includes/tabslide.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10879232-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<body >
<div id="header"> <img src="images/logo1.png" alt="430 Web Design" width="100" height="100" border="0" align="absmiddle"/> <h1>Leonard Zakoor : 430 Designs </h1>
</div>
<div id="accordion">
<div class="panel" id="panel1">
<h3> Work, Work</h3>
<div id="panel1-body" class="panel_body">
<div>
Slide Panel 1 contents.
<!--end of accordian-->
</div></div></div>
<div class="panel" id="panel2">
<h3>About L.Z.</h3>
<div id="panel2-body" class="panel_body">
<div>
<img src="images/icons/lz_icon.jpg" width="100" height="100" align="left" /><p> Thank you for visiting my site. I'm Leonard Zakoor (LZ for short) and I'm around 28 years old. I've been doing web design for about <br />
8 years now and having a blast doing it. My mom always told me "Find something your really good at and you love to do." Which is great advice, except no one wants to pay me to sit around all day and watch hockey. <br />
If they did I'd be a billionaire! So instead I build great web sites! <br />
<br />
I started about 7 years ago while playing around online. I started seeing a common theme in web design. The theme seemed pretty simple, so I thought I'd try my hand at designing a web site. My company allowed me and I took off. <br />
I do what I love and love what I do. </p>
<p>I'd love to talk to you so contact me today for a free quote on getting your business on the internet! </p>
</div>
</div>
</div>
<div class="panel" id="panel3">
<h3>Contact Me</h3>
<div id="panel3-body" class="panel_body">
<form action="/cgi/gdform.cgi" method="post">
<div> <label>Name: </label>
<input name="1name" type="text" size="30"/></div>
<div><label>E-Mail: </label>
<input name="2email" type="text" size="30"/></div>
<div><label>Phone: </label>
<input name="3phone" type="text" size="30"/></div>
<div><label>Which service can I help you with:</label><br />
<input name="4service" type="text" size="30" /></div><br />
<div><label>What should I know prior to contacting you:</label><br />
<textarea name="5comment" cols="30" rows="5"></textarea></div>
<label>
<input type="submit" name="button" id="button" value="Submit" style="text-align:center" />
</label>
</form>
</div>
</div>
<div class="panel" id="panel4">
<h3>I'm Social</h3>
<div id="panel4-body" class="panel_body">
<div>
<div id="contact">
<ul>
<li><a href="mailto:lzscomputers@aol.com"><img src="images/icons/Mail2.png" width="19" height="20" border="0" /> E-mail</a></li>
<li><a href="http://www.facebook.com/lzakoor?ref=name" target="_blank"><img src="images/icons/Facebook.png" width="19" height="20" border="0" /> Facebook</a></li>
<li><a href="http://twitter.com/lz430" target="_blank"><img src="images/icons/twitter.png" width="19" height="19" border="0" /> Twitter</a></li>
<li><a href="http://delicious.com/lzakoor"><img src="images/icons/delicious_128x128.png" width="19" height="19" border="0" /> Delicious</a></li>
<li><a href="http://www.experts-exchange.com/M_4442048.html"><img src="images/rankShieldMaster_lg.png" width="19" height="29" border="0" />Experts Exchange </a></li>
<li><a href="http://www.linkedin.com/pub/leonard-zakoor/16/4a6/ba5"><img src="images/icons/linked.png" width="19" height="19" border="0"/>Linked in</a> </li>
</ul></div>
</div>
</div>
</div>
<div class="panel" id="panel5">
<h3>Services</h3>
<div id="panel5-body" class="panel_body">
<div>
Web Design & Development*<br />
<span class="smaller">*(Always cross-browser compatible)</span> <br />
Social Media Solutions <br />
Web Site Mainteannce <br />
Graphic Design <br />
Web Site Critique <br />
Custom Navigational Menus <br />
Database Development <br />
</div>
</div>
</div>
</div>
<script>init();</script>
</body>
</html>