Menu
I want to create a scoreboard where recent winners are listed. When a new winner is announced, I want the three current winners to slide right, the new winner to slide from the left into place and the oldest winner (rightmost) to slide off screen.
With the code below, I have everything working except for the right side. Right now, it just disappears (I want it to slide off the right side gracefully).
HTML
<div id="results-wrapper">
<div class="contest-results" id="recent-winners">Recent winners:</div>
<div class="contest-results" id="winner-wrapper">
<div class="winner">John</div>
<div class="winner">Katie</div>
<div class="winner">Peter</div>
</div>
</div>
CSS
#results-wrapper {
display:inline-block;
padding: 6px 3px 4px 3px;
font-size: 16px;
}
.contest-results {
float:left;
}
#recent-winners {
width: 120px;
text-align: left;
}
#winner-wrapper {
width: 444px;
height: 20px;
white-space: nowrap;
overflow: hidden;
}
.winner {
text-align: center;
width: 148px;
float:left;
position: relative;
display: inline;
}
JS
$("#winner-wrapper").on("click", ".winner", function() {
$('.winner:first').before('<div style="display: none;" class="winner">justin</div>');
$('.winner').css({"display" : "inline", "left" : "-148px"});
$('.winner').animate({"left" : "0px"}, {duration : 600, easing : "swing"});
$('.winner:last').remove();
});
813
The main issue here is that using float: left essentially negates the effects of white-space: nowrap.
As stated in the entry for float from MDN:
As
floatimplicitly implies the use of the block layout, it modifies the computed value of thedisplayvalues in some cases
To perform the function you desire, first change the CSS property for winner to remove float and have display: inline-block.
.winner {
text-align: center;
width: 148px;
position: relative;
display: inline-block;
}
Then modify the JavaScript to also deal with inline-block and remove the last winner only after the sliding animation is complete.
$("#winner-wrapper").on("click", ".winner", function () {
var first = $(".winner").first();
var last = $(".winner").last();
first.before('<div style="display: none;" class="winner">justin</div>');
$('.winner').css({
"display": "inline-block",
"left": "-148px"
});
$('.winner').animate({
"left": "0px"
}, {
duration: 600,
easing: "swing",
complete: function () {
last.remove();
}
});
});
DEMO
ALTERNATE DEMO (with additional behaviors)
81
<!DOCTYPE html>
<html>
<head>
<style>
div {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
</script>
</body>
</html>
copied directly from http://api.jquery.com/animate/
50px is the distance that will be moved slow is the speed (slow, medium, fast or you can enter a number of milliseconds)
45
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
