I've got this vertical slideshow navigable by up/down arrows. there's 7 items (divs) inside the slideshow's container div but only 3 of them are visible at a time. In truth, this slideshow is a menu - from the 3 items visible, the one in the middle is the one clickable, which will load content in a div somewhere else in the page.
Now, since there are 3 items and only the 2nd item (middle one) is clickable, I need to create a difference between them. So, I thought of changing the items border/border-radius like this:
The problem is that I don't have a clue on how to do that since the divs are constantly changing place in the visible area. I really need help here.
HTML markup:
<div id="rocksType_btns">
<div id="rocksType_btnUp"></div>
<div id="rocksType_btnDown"></div>
</div>
<div id="rocksType_subtypeSlider">
<div id="rocksType_DBitems_container">
<div id="rocksType_DB_1" class="rocksType_DBitem">Item 1</div>
<div id="rocksType_DB_2" class="rocksType_DBitem">Item 2</div>
<div id="rocksType_DB_3" class="rocksType_DBitem">Item 3</div>
<div id="rocksType_DB_4" class="rocksType_DBitem">Item 4</div>
<div id="rocksType_DB_5" class="rocksType_DBitem">Item 5</div>
<div id="rocksType_DB_6" class="rocksType_DBitem">Item 6</div>
<div id="rocksType_DB_7" class="rocksType_DBitem">Item 7</div>
</div>
</div> <!-- End of id="rocksMenu_subtypeSlider" -->
I already have the CSS code defined for the before/current/after states - just need to assign them.
Here's a Fiddle.
Thanx.
Pedro
With JavaScript, we are able to set CSS styles for one or multiple elements in the DOM, modify them, remove them or even change the whole stylesheet for all your page.
CSS Transform Property. Transform property in CSS is invoked when there is a change in the state of the HTML element. You can rotate, skew, move and scale elements. It occurs when the state of an element is modified, like when you hover the mouse over a button or perform a mouse-click.
Try something like this instead...
HTML:
<div id="viewport">
<ul id="list">
<li class="above">Foo</li>
<li class="selected">Bar</li>
<li class="below">Barf</li>
<li>Boo</li>
<li>Huh</li>
<li>Wha</li>
<li>Oh</li>
</ul>
</div>
<a href="#" id="up">UP</a> -- <a href="#" id="down">DOWN</a>
CSS:
#viewport{
height: 175px;
overflow: hidden;
padding: 0;
}
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
border: 1px solid #ccc;
width: 70px;
height: 50px;
line-height: 50px;
padding: 0 0 0 30px;
margin: 5px;
font-size: 1.5em;
color: #999;
background-color: #fed;
}
li.selected{
border-radius: 20px;
background-color: #fe0
}
li.above{
border-radius: 10px;
border-top-left-radius: 35px;
}
li.below{
border-radius: 10px;
border-bottom-left-radius: 35px;
}
JS:
var viewport = $('#viewport'),
list = $('#list'),
itemHeight = $('li', list).first().outerHeight(),
btnUp = $('#up'),
btnDown = $('#down'),
busy = false,
selected, above, below;
var update = function(){
selected = $('li:nth-of-type(2)', list).addClass('selected', 200);
above = selected.prev().addClass('above', 200);
below = selected.next().addClass('below', 200);
setTimeout(function(){ busy = false; }, 200);
};
var goUp = function(){
if(busy) return; else busy = true;
$('li', list).removeClass('selected above below');
list.animate({marginTop: -itemHeight}, 600, 'easeOutBounce', function(){
list.css({marginTop: 0}).append($('li', list).first());
update();
});
}
var goDown = function(){
if(busy) return; else busy = true;
$('li', list).removeClass('selected above below');
list
.css({marginTop: -itemHeight})
.prepend($('li',list).last())
.animate({marginTop: 0}, 600, 'easeOutBounce', update);
}
btnUp.on('click', goUp);
btnDown.on('click', goDown);
Fiddle here. Slightly fancier version.
I think the only way to do this is to keep track of what's what, instead of building it around animation.
Check out my alterations.
UPDATED: link to include managing style for prev and next classes
UPDATED: link to remove garish colours
http://jsfiddle.net/M3QkB/5/
Here is what I have changed, obviously styling remains to be completed:
In the up method:
$('.rocksType_DBitem').removeClass('current');
$('.rocksType_DBitem').removeClass('before');
$('.rocksType_DBitem').removeClass('after');
var middleRock = rocksType_place;
rocksType_place--;
$('#rocksType_DBitems_container :eq(' + middleRock + ')').addClass('current');
$('.current').prevAll().addClass('before');
$('.current').nextAll().addClass('after');
In the down method:
$('.rocksType_DBitem').removeClass('current');
$('.rocksType_DBitem').removeClass('before');
$('.rocksType_DBitem').removeClass('after');
rocksType_place++;
var middleRock = rocksType_place + 1;
$('#rocksType_DBitems_container :eq(' + middleRock + ')').addClass('current');
$('.current').prevAll().addClass('before');
$('.current').nextAll().addClass('after');
The common code can be refactored to functions such as cleaning the classes we add
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With