I have a the following html code : Left Right I would like the first four inputs with values from A to D to be shown, and when the user hits the div mtabArrowLeft show the rest of hidden inputs with a max of 4 inputs. In case the user hits the div mtabArrowRight reverse it back. I do not know how …
via Css Website development » Search Results » ajax:
A slide right and left effect
I have a the following html code :
I would like the first four inputs with values from A to D to be shown, and when the user hits the div mtabArrowLeft show the rest of hidden inputs with a max of 4 inputs. In case the user hits the div mtabArrowRight reverse it back. I do not know how to do that.
here is my CSS code :
.menuTabs
float: left;
width: 537px;
.mtabArrowLeft
float: left;
height: 25px;
width: 35px;
margin-left: 15px;
margin-right: 4px;
.mtabArrowRight
float: left;
height: 25px;
width: 35px;
margin-left: 3px;
margin-right: 15px;
.menutabBTN
float: left;
height: 25px;
width: 65px;
margin-right: 3px;
margin-left: 3px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #000;
text-align: center;
line-height: 25px;
Your assistance is appreciated in advance
……………………………
You need to use an approach similar to this: http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/
You could also see the code that is being used to slide the image thumbnails left and right here: http://www.skandium.com/product-viewer.asp?id=1400
some code for your scenario based on code from the second site:
……………………………
http://flowplayer.org/tools/demos/scrollable/index.html
Scrollable is a versatile and fool-proof solution to do sliders… check out the tutorial (and download the script) from the above link– this HTML / CSS / jQuery is taken pretty much directly from the site.
You’ll have to change the widths of the elements in the CSS to suit your design. Hope that helps.
HTML
CSS
.scrollable
position:relative;
overflow:hidden;
width: 660px;
height:90px;
.scrollable .items
width:20000em;
position:absolute;
.items input
float:left;
jQuery
$(function()
// initialize scrollable
$(“.scrollable”).scrollable();
);
For more info: A slide right and left effect
Css Website development » Search Results » ajax
