Panel Slider - On Click - reverse layout

webgirl29
webgirl29 used Ask the Experts™
on
Please see the attached ZIP file.  Click on each black button at left. Just looking to reverse the layout here.  Instead of the buttons being listed down the left side, I'd like for them to run across the top of the panel - horizontally.  (Above the panel section)  In addition, I'd like for the panels to move across left to right instead of top to bottom.  Anyone know how to do this?
     
sliding-panels.zip
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
nishant joshiTechnology Development Consultant

Commented:
check i have updated that

Author

Commented:
Sorry?  Was this a solution?  Not sure I understand.
Commented:
I cannot attach the file here so I'll copy it in here:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0044)http://www.boxedart.com/LivePreview/PetClub/ -->
<HTML xmlns="http://www.w3.org/1999/xhtml">

<HEAD>
<LINK rel=stylesheet type=text/css href="style.css">


<SCRIPT type=text/javascript src="jquery-1.4.min.js"></SCRIPT>

<SCRIPT type=text/javascript src="jquery.scrollto.js"></SCRIPT>

<SCRIPT type=text/javascript>
$(document).ready(function () {

	$('#hero-slider a').click(function () {
	
		//reset all the items
		$('.customBlock ul a').removeClass('active');
		$('.panel').hide();
		//set current item as active
		$(this).addClass('active');	
		var rel = $(this).attr('rel');
		//scroll it to the right position
		$('#'+rel).css({
			'top': '0',
			'right': '-800px',
			'display': 'block'
			}).animate({right: '0'}, 400);
		
		//disable click event
	    return false;		
		
	});
	
	$('.panel:eq(0)').css({'display': 'block'});
	
});
</SCRIPT>

</HEAD>
<BODY>

<DIV id=t-container>

  <DIV id=hero-slider>
  
<A class=home href="#" rel=panel-1></A>
<A class=home href="#" rel=panel-2></A>
<A class=home href="#" rel=panel-3></A>
<A class=home href="#" rel=panel-4></A>
<A class=home href="#" rel=panel-5></A>
<A class=home href="#" rel=panel-6></A>

  
<DIV class=mask>
<DIV class=slider-body>

<DIV id=panel-1 class=panel>PANEL ONE</DIV>
<DIV id=panel-2 class=panel>PANEL TWO</DIV>
<DIV id=panel-3 class=panel>PANEL THREE</DIV>
<DIV id=panel-4 class=panel>PANEL FOUR</DIV>
<DIV id=panel-5 class=panel>PANEL FIVE</DIV>
<DIV id=panel-6 class=panel>PANEL SIX</DIV>

</DIV>
</DIV>



</DIV>
</DIV>


</BODY></HTML>

Open in new window


STYLE:
#t-container {
	LINE-HEIGHT: 20px; MARGIN: 0px auto; WIDTH: 940px; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 22px; text-decoration:none; font-weight:normal; font-style:normal
}



#hero-slider {
	TEXT-ALIGN: left; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; WIDTH: 940px; PADDING-RIGHT: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif; PADDING-TOP: 0px; text-transform:none; text-decoration:none
}
#hero-slider .mask {
	TEXT-ALIGN: left; WIDTH: 800px; BACKGROUND-REPEAT: no-repeat; MARGIN-BOTTOM: 0px; FLOAT: left; HEIGHT: 298px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; background: #ccc
}
#hero-slider .panel {
	TEXT-ALIGN: left; WIDTH: 800px;  MARGIN-BOTTOM: 0px; FLOAT: left; HEIGHT: 300px; OVERFLOW: hidden; MARGIN-RIGHT: 0px; display: none; position: relative; background: #900
}
#hero-slider UL {
	PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 10px; FLOAT: left; HEIGHT: 318px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px
}
#hero-slider UL LI {
	MARGIN-BOTTOM: 4px
}
#hero-slider A {
	OUTLINE-STYLE: none; outline-color: invert; OUTLINE-WIDTH: medium; WIDTH: 100px; DISPLAY: block; HEIGHT: 58px; TEXT-DECORATION:none; float:left
}


/* BUTTONS */
#hero-slider A.home {
	BACKGROUND:url(images/button.png) no-repeat 0px 0px
}

#hero-slider A:hover {
	BACKGROUND-POSITION: 0px 10%
}

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial