Changing CSS properties 'on-the-fly'

Question

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:

enter image description here

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

I don't see a fiddle? You should also post your javascript code for the "scrolling" of the menu, as this is where the css declarations will be applied. — Andrew Senner, Apr 12 '13 at 13:02
What do you mean by "changing place"? You're rearranging their order in the DOM? — Greg, Apr 12 '13 at 13:05
Fiddle link fixed. As to inserting the js code... it's a bit extensive , reason why I didn't include it. — Pedro, Apr 12 '13 at 13:08
In your fiddle the sliding of your items is not endless. So according to your description the first and the last link will never be clickable, as they will never be "*in the middle*". — insertusernamehere, Apr 12 '13 at 13:13
Tell me, since it's a NAVIGATION element, would it be better to code it in a
structure ? — Milche Patern, Apr 12 '13 at 14:52
@insertusernamehere The question was for Original Poster, not for me, in regards of the
no anchor design. — Milche Patern, Apr 12 '13 at 20:22
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/28128/discussion-between-milche-patern-and-insertusernamehere) — Milche Patern, Apr 12 '13 at 21:11
@Milche Patern, thanx for the +1 on the technical specification design. :) — Pedro, Apr 13 '13 at 12:35

Greg · Answer 1 · 2013-04-12T17:51:22.410

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.

I can see I've put a lot of work on this. Thanx for the effort. — Pedro, Apr 13 '13 at 12:47

NinjaNye · Answer 2 · 2013-04-12T13:34:30.427

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

Laurence · Answer 3 · 2013-04-12T13:33:34.407

1

I would assign 3 CSS classes like .before, .current and .after and shift those when you move the items. You can assign the border settings to these classes.

Here is an example Fiddle: http://jsfiddle.net/DBBVU/3/

edited Apr 12 '13 at 13:33

answered Apr 12 '13 at 13:12

Laurence

1,673
11
16

I already have the CSS defined - need to assign them according to their visibility status. – Pedro Apr 12 '13 at 13:17
I like your solution - one question though: how can I animate these changes... via jQuery so it's compatible with IE8? – Pedro Apr 12 '13 at 15:48
Looks like you can animate them but you might have to write the properties into the javascript: http://stackoverflow.com/questions/1010058/jquery-animate-css-border-radius-property-webkit-mozilla – Laurence Apr 12 '13 at 19:23
I know how to play with animate(). What I don't know is how to implement it in your code, because you're using classes. Help! – Pedro Apr 13 '13 at 12:34

score 0 · Answer 4 · answered Apr 12 '13 at 13:09

If you could manage that the three visible divs get an extra class you could then apply the CSS to them to change the border radius. I guess that the slideshow is created with some javascript? If it is you could have a look in the code and try to find out to assign the different CSS classes to the 3 divs.

score 0 · Answer 5 · answered Apr 12 '13 at 13:20

0

Best way is to assign a css-class with the different borders on the middle div. Because it's clickable then you ust know where it is. And then you remove it the same way.

answered Apr 12 '13 at 13:20

marko

10,684
17
71
92

Changing CSS properties 'on-the-fly'

5 Answers5