A slide right and left effect
Question
I have a the following html code :
<div class="menuTabs">
<div class="mtabArrowLeft">Left</div>
<input class="menutabBTN" name="" type="button" value="a" />
<input class="menutabBTN" name="" type="button" value="b" />
<input class="menutabBTN" name="" type="button" value="c" />
<input class="menutabBTN" name="" type="button" value="d" />
<input class="menutabBTN" name="" type="button" value="e" />
<input class="menutabBTN" name="" type="button" value="f"/>
<div class="mtabArrowRight">Right</div>
</div>
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
2 answers
solution1
1 2010-08-31 08:46:42
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:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.menuTabs {
float: left;
width: 284px;
overflow:hidden;
position:relative;
height:50px;
}
.img-reel { position:absolute; left:0; top:0; height:50px; }
.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;
}
</style>
</head>
<body>
<div class="mtabArrowLeft">Left</div>
<div class="menuTabs">
<div class="img-reel">
<input class="menutabBTN" name="" type="button" value="a" />
<input class="menutabBTN" name="" type="button" value="b" />
<input class="menutabBTN" name="" type="button" value="c" />
<input class="menutabBTN" name="" type="button" value="d" />
<input class="menutabBTN" name="" type="button" value="e" />
<input class="menutabBTN" name="" type="button" value="f"/>
</div>
</div>
<div class="mtabArrowRight">Right</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var imageWidth = 71;
var reelSize = 4;
var imageSum = $('.img-reel input').size();
var imageReelWidth = imageWidth * imageSum;
$('.img-reel').css({'width' : imageReelWidth});
rotate = function(){
var trigger = $btn.attr('class');
var image_reelPosition = (trigger=='mtabArrowLeft') ? -imageWidth : imageWidth;
var reel_currentPosition = $('.img-reel').css('left').replace('px','');
var pos = reel_currentPosition-image_reelPosition;
var maxPos = (imageSum-reelSize)*-imageWidth;
//console.log('pos='+pos+', max='+maxPos);
if(pos>=maxPos && pos<=0){
$('.img-reel').animate({left:pos},300);
$('.mtabArrowLeft,.mtabArrowRight').fadeTo(250,1);
//console.log('move');
if(pos==maxPos){$('.mtabArrowRight').fadeTo(250,0.5);}
else if(pos==0){$('.mtabArrowLeft').fadeTo(250,0.5);}
}
};
if (imageSum > 4) {
$('.mtabArrowLeft,.mtabArrowRight').click(function(){
$btn = $(this);
rotate();
return false;
});
}
else {
$('.mtabArrowLeft,.mtabArrowRight').fadeTo(0,0.5).click(function(){return false});
}
})
</script>
</body>
</html>
solution2
1 2010-08-31 19:45:24
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
<div class="mtabArrowLeft prev left">Left</div>
<div class="menuTabs scrollable">
<div class="items">
<input class="menutabBTN" name="" type="button" value="a" />
<input class="menutabBTN" name="" type="button" value="b" />
<input class="menutabBTN" name="" type="button" value="c" />
<input class="menutabBTN" name="" type="button" value="d" />
<input class="menutabBTN" name="" type="button" value="e" />
<input class="menutabBTN" name="" type="button" value="f"/>
</div>
</div>
<div class="mtabArrowRight next right">Right</div>
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();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.