slinky slider jquery help!

I am using the slinkyslider and am trying to figure out how I can replace the built in command that expands the slides on hoverm to make it work when someone clicks a link(onclick event)

Lets say I have 6 links on the left side of the page, when the user clicks link1 panel1 opens and so on. Seems like it would be pretty straight forward, but I cannot get this to work. I have included all of my code.

Thanks in advance. Keep iin mind you must have jquery 1.3.min.js  library installed to test...

Judson
<!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">
<head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Wellness Coalition America</title>
<script>
			/*
			 #		jQuery Slinky Slider Plugin
			 #		---------------------------
			 #		Version:			1.0
			 #		---------------------------
			 #		Author:				samhs
			 # 		http://ohwrite.co.uk/jquery/jquery-plugin-slinky-slider/
			 #		http://docs.jquery.com/Plugins/SlinkySlider
			 #
			 # 		Copyright (c) 2009 Sam Hampton-Smith
			 #
			 #		Dual licensed under the MIT and GPL licenses:
			 #	 	http://www.opensource.org/licenses/mit-license.php
			 #		http://www.gnu.org/licenses/gpl.html
			 #
			 #		Please view files mit.txt and gpl.txt for full license terms
			 #		And include these two files if you redistribute this software
			 */


(function($) {
		   
			$.fn.slinkySlider = function(settings) {	
				// Utility variables - do not alter
				var currentpanel;
				var panelwidth;
				var goforward = true;
				var t;
				settings = $.extend({}, $.fn.slinkySlider.defaults, settings);	

				return $(this).each(function(){
					panelwidth = $(this).width();
					$(this).css("overflow","hidden");
					settings.largesize = panelwidth-((settings.numberofpanels-1)*(settings.smallsize+settings.panelspacing));
					container = $(this);
					elheight = $(this).height();
					for (var i=1;i<=settings.numberofpanels;i++) {
						$(this).append("<div class='panelwrappers'><div class='panel'></div></div>");
						$(".panelwrappers:last .panel").load(settings.panelname+i+".cfm").parents(".panelwrappers").data("number",i);
					}
					currentpanel = $(".panelwrappers:first");
					$(".panelwrappers").css({
							"width"		:	settings.smallsize+"px", 
							"float"		:	"left",
							"height"	:	elheight+"px"});
					$(".panels").css({
							"width"		:	settings.largesize+"px",
							"height"	:	"100%"}); 
					$(currentpanel).css("width",settings.largesize+"px");
					$(".panelwrappers").not(":last").css("margin-right",settings.panelspacing+"px");
					$(".panelwrappers").each(function(){
						$(this).mouseover(function(){switchpanel(this);});
					});
					if (settings.doauto) t = setTimeout(function(){switchpanel(null);},settings.autotimer);
				});

				function switchpanel(newpanel) {
					if (newpanel==currentpanel) {
						// do nothing because we're already on this panel
					} else {
						var auto = false;
						if (newpanel==null) {
							auto = true;
							if (goforward && $(currentpanel).data("number")==settings.numberofpanels) {
								goforward=false;
							}
							if (!goforward && $(currentpanel).data("number")==1) {
								goforward=true;
							}						
							if (goforward) {
								newpanel = $(currentpanel).next();
							} else {
								newpanel = $(currentpanel).prev();
							}							
						}
						else {
							$(".panelwrappers").stop();
							clearTimeout(t);
						}
						$(".panelwrappers").not(newpanel).animate({width: settings.smallsize+"px"},settings.transition, "swing");
						$(newpanel).animate({width: settings.largesize+"px"},settings.transition, "swing");				
						currentpanel = newpanel;
						if (auto) t = setTimeout(function(){switchpanel(null);},settings.autotimer); 
				}
			}
		}
			
		$.fn.slinkySlider.defaults = {
			autotimer:8000,
			transition:1000,
			panelspacing:2,
			smallsize:24,
			numberofpanels:6,
			largesize:50,
			doauto:true,
			panelname:"panel"
		}

})(jQuery);
</script>
<style>
html,body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-image: url(images/backgroundMain.png);
	background-repeat: repeat-y;
	margin: 0px;
	padding: 0px;
	background-size: auto;
	background-attachment: fixed;
	background-position: center top;
	background-color:#FFF;
}

	#content {
	min-width:714px;
	min-height:340px;
	background:white;
	overflow:auto;
	border-bottom:1px solid #336699;
	border-left:1px solid #336699;
	border-right:1px solid #336699;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 0px;
	right: 10px;
	}
.contentPages {
	background-color: #FFF;
	padding-top: 5px;
	padding-bottom: 20px;
	padding-left: 20px;
	position: relative;
	width:694px;
}
.contentPages2 {
	background-color: #FFF;
	padding-top: 5px;
	padding-bottom: 20px;
	padding-left: 20px;
	position: relative;
	width:970px;
}
.contentBottomImage {
	background-image: url(images/contentBoxBottom.jpg);
	background-repeat: no-repeat;
	height: 34px;
	width: 716px;
	margin-right: 10px;
	float: right;
	position: relative;
}
.bottomArea {
	height: auto;
	width: 990px;
	min-height: 220px;
	clear: both;
}
.footer {
	height: 30px;
	width: 970px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #336699;
	color: #666;
	padding: 5px;
	margin-top: 25px;
	position: absolute;
	vertical-align: top;
	white-space: nowrap;
}
.bottomAreaContent {
	width: 310px;
	padding-left: 20px;
	float: left;
	height: auto;
}
.titleBottomMain {
	color: #336699;
	font-size: 16px;
	height: auto;
	width: auto;
}
.banner {
	height: 110px;
	width: 980px;
	background-image: url(images/logoBanner.jpg);
	background-repeat: no-repeat;
	text-align: right;
	position: relative;
}
.leftNavLinks {
	height: auto;
	width: auto;
	padding-top: 4px;
	padding-bottom: 4px;
}
.linksBanner {
	float: right;
	height: auto;
	width: auto;
	color: #336699;
	padding-top: 4px;
	padding-right: 20px;
	padding-bottom: 4px;
	padding-left: 20px;
}
.wrapper {
	margin: auto;
	height: auto;
	width: 990px;
}
.contMain {
	height: 340px;
	width: 990px;
	background-image: url(images/mainBoxCenter.jpg);
	background-repeat: no-repeat;
	position: relative;
	z-index: 2;
}
.panelwrappers {
		overflow:hidden;
	}
.MainBoxTop {
	height: 24px;
	width: 990px;
	background-image: url(images/MainBoxTop.jpg);
	background-repeat: no-repeat;
}
.MainBoxBottom {
	height: 34px;
	width: 990px;
	background-image: url(images/mainBoxBottom.jpg);
	background-repeat: no-repeat;
	clear: both;
}
.leftNavMain {
	height: 300px;
	width: 222px;
	float: left;
	padding-top: 20px;
	padding-left: 20px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #336699;
	background-color: #FFF;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #336699;
	padding-right: 10px;
	padding-bottom: 10px;
}
.leftNavMain a {
	text-decoration: none;
}
.linksBannerHolder {
	float: right;
	height: auto;
	width: auto;
	position: absolute;
	right: 0px;
	bottom: 0px;
}

.alert1 {
	font-weight: bold;
	color: #F00;
}

</style>
<script type="text/javascript" src="scripts/jquery-1.3.min.js"></script>
<script type="text/javascript" src="scripts/jquery.slinkySlider.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#content").slinkySlider();
	});
</script>
</head>
<body>
<div class="wrapper">
    <div class="banner">
      <div class="linksBannerHolder">
            <div class="linksBanner"><a href="demo.cfm?" style="text-decoration:none; color:#336699">Home</a></div>
            <div class="linksBanner"><a href="##"  style="text-decoration:none; color:#336699" onclick="ColdFusion.navigate('contentPages.cfm?id=9', 'content');">Testimonials</a></div>    
            <div class="linksBanner"><a href="##"  style="text-decoration:none; color:#336699" onclick="ColdFusion.navigate('contentPages.cfm?id=11', 'content');">Contact</a></div>
        <div class="linksBanner"><a href="##"  style="text-decoration:none; color:#336699" onclick="ColdFusion.navigate('contentPages.cfm?id=12', 'content');">Company</a></div>
      </div>
    <a href="demo.cfm"><img src="images/logoBanner.jpg" width="240" height="110" border="0" align="left" /></a>
  </div>
<div class="MainBoxTop"></div>
<div class="contMain">
<div class="leftNavMain">
  <p><strong><a href="##" style="color#:33669" onclick="">Corporate Wellness</a></strong></p>
  <p><strong><a href="##" style="color#:33669">Onsite Medical Clinics</a></strong></p>
  <p><strong><a href="##" style="color#:33669">Medical Management Programs</a></strong></p>
  <p><strong><a href="##" style="color#:33669">Software and Reporting</a></strong></p>
  <p><strong><a href="##" style="color#:33669">HRA's and Screenings</a></strong></p>
  <p><strong><a href="##" style="color#:33669">Educational Tools</a></strong></p>
</div>
<cfdiv id="content"></cfdiv>                          
</div>

<div class="MainBoxBottom"></div>


<!---<div class="bottomArea">
<DIV CLASS="bottomAreaContent">
<div class="titleBottomMain">
<p>Title here</p>
</div>
<p>This is the area where you can type something about nothing or something.
This is the area where you can type something about nothing or something.
This is the area where you can type something about nothing or something. This is the area where you can type something about nothing or something. </p>
</DIV>

<DIV CLASS="bottomAreaContent">
<div class="titleBottomMain">
<p>Title here</p>
</div>
<p>This is the area where you can type something about nothing or something.
This is the area where you can type something about nothing or something.
This is the area where you can type something about nothing or something. This is the area where you can type something about nothing or something.</p>
</DIV>

<DIV CLASS="bottomAreaContent">
<div class="titleBottomMain">
<p>Title here</p>
</div>
<p>This is the area where you can type something about nothing or something.
This is the area where you can type something about nothing or something.
This is the area where you can type something about nothing or something. This is the area where you can type something about nothing or somethi</p
</DIV>
</div>--->
<div class="footer">Copyright 2010 Wellness Coalition America</div>
</div>
</body>
</html>

Open in new window

LVL 3
judsonmusicAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rjdownCommented:
I'm not able to test as I have to leave shortly, but on line 59 you could try replacing $(this).mouseover with $(this).click
0
judsonmusicAuthor Commented:
I need to be able to do the onclick on external links. Like call the event that way instead of clicking or mousinf over the current frame. Call it from a label like "panel1" etc.
0
StealthyDevCommented:
Hi...

To open panels, you can do something like this:

haccordion.expandli('slices', 0);

slices is the id of the div-according
0-n numbers is the index of the panel.

Best Regards.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

judsonmusicAuthor Commented:
Is this based on the attached code??? Can u explain in more detail??
0
StealthyDevCommented:
i hope in your version:

.panelname(string) will work to open the panel you require
0
judsonmusicAuthor Commented:
Can u put the exact code that I woild place in the onclick="" event please? I don't know enough about jquery to put it together.  Thanks
0
StealthyDevCommented:
wait, i am working on this.
0
StealthyDevCommented:
Change your jquery.slinkyslider.js file with the following content:

function changeSlide(var12){}

(function($) {
               
                  $.fn.slinkySlider = function(settings) {
                        changeSlide = switchpanel;

Now, you can access your panel using:
changeSlide($('.panelwrappers')[2]);
panel numbers - 0 to (n-1)


Like the code attached:


<p><strong><a href="javascript: changeSlide($('.panelwrappers')[0]);" style="color#:33669" onclick="">Corporate Wellness</a></strong></p>
  <p><strong><a href="javascript: changeSlide($('.panelwrappers')[1]);" style="color#:33669">Onsite Medical Clinics</a></strong></p>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.