Question

I am using a jquery slot machine plugin and want to expand a bit, but am having trouble figuring out how it is working.

https://github.com/matthewlein/jQuery-jSlots

Currently, the demo uses it in a way that only one <li> is showing at a time. I want to expand that, so that you can see half of the the <li> above and half of the <li> below, kind of like a real slot machine, where you can see what is coming and what is leaving the visible area.

So, I expanded the container vertically, and I can see the <li>‘s before and after BUT, weird things happen at the bottom, where the <li> disappears and then (I assume) gets appended to the top. It still happens if I make it 5+ <li>‘s in the list. It also still happens if I increase the .slot size, but still constrain it with a shorter container height.

You will notice on this fiddle, when you click play, you will see the white background show through on the bottom. It gets worse as they slow down. Sometimes when they stop, it stops with the bottom part missing… I have attached the jslots.js file in the fiddle resources

http://jsfiddle.net/livinzlife/3bVe9/1/

Answer 1

Add the following to the CSS for the li elements:

margin-top: 72px;     /*half of the height */
margin-bottom: -72px; /*half of the height (negative)*/

so .slot li becomes:

.slot li{
    width: 190px;
    height: 144px;
    background-color: blue;
    float: left;
    margin-top: 72px;     /*half of the height */
    margin-bottom: -72px; /*half of the height (negative)*/
}

UPDATE:

To eliminate the background-color problem, add background-color: yellow; to the jSlots-wrapper class:

.jSlots-wrapper {  
    overflow: hidden; /* to hide the magic */  
    height: 296px; /* whatever the height of your list items are */  
    display: inline-block; /* to size width correctly, can use float too, or width*/  
    border: 1px solid #999;  
    position: absolute;
    width:570px;
    /*bottom: 130px;*/
    margin-top: 2em;
    left:50%;
    margin-left: -285px;
    padding: 0;
    background-color: yellow;
}

UPDATE:

The principle of background-color holds true for images as well. Just set the background-image of the .jSlots-wrapper class to the image you’re using for for the last li element and offset it vertically by (negative) half the li height

Updated fiddle: http://jsfiddle.net/3bVe9/6/ for proof-of-concept (using images obtained by GIS for “random image” of size 256×256)

UPDATE:

Okay, change the CSS definition for .slot li from:

margin-top: 72px;     /*half of the height */
margin-bottom: -72px; /*half of the height (negative)*/

to:

margin-top: -72px;     /*half of the height (negative) */
margin-bottom: 72px;   /*half of the height*/

so .slot li becomes:

.slot li{
    width: 190px;
    height: 144px;
    margin-top: -72px;     /*half of the height (negative) */
    margin-bottom: 72px;   /*half of the height*/
    background-color: blue;
    float: left;
    background-size: 190px 144px;
}

and revert the CSS changes to the .jSlots-wrapper class definition and the problem is completely fixed (for both colors and images, here’s another fiddle: http://jsfiddle.net/3bVe9/7/

This adjusts the slots so that the first li is offset upwards and the second li is the middle starting spot. Works perfectly on every click of the play button.