how to leave the outer div invisible (hidden), but its visible interior?

Navigation
1

link

Javascript

I'm doing a random numbering game: I would like to do something like a slot machine game. That is, only one number should appear inside a div and the numbers on the outside should be invisible. 

var array = [1,2,3,4,5,6,7,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,107,8,9,10,11,12,13,9,10,11,12,13,14,15,14,15];
var contador = 1;
var novoTopo = array.length * 200 * -1;
$('#valores').css({top: + novoTopo});
for(var i =0;i<array.length;i++){
    $("#valores").append("<div id='result"+contador+"' classs='name'>"+array[i]+"</div>");
    contador++;
}

<div id="valores">

</div>
    
asked by anonymous 07.11.2015 / 19:50

1 answer

2

In order for you to get this result, your div id="valores" , which has animation and contains the other numbers of the "game" must be inside another div, so you can control the layout in it, since it will be a fixed div.

In order for it to have the expected behavior, you must define the width, height, and overflow parameters, for example: 

.valores_wrap {
    position:relative;
    width:100px;
    height:60px;
    overflow:hidden;
}

The 'overflow' property, which defines the scroll of the div, when set to hidden will disable the scroll of the div and prevent anything outside it from appearing in the layout. With this you can get the expected result.

See this example I made with your fiddle: link

Note: I modified a value in its JS because it was moving the game number down 10px.

    
07.11.2015 / 20:03
SELECT sort by quantity of another SELECT Undefined variable even though it is set [closed]