Search code examples
jqueryjquery-uionmouseovermousehoverjquery-widgets

How to prevent a jQuery widget appended to a selectable from growing bigger onmouseover?

TLDR UPDATE: here a JSFiddle demonstrating my problem.

In an HTML game I have created a custom jQuery widget called table representing a rectangle green table with up to 4 players sitting at it:

screenshot 1

In the above screenshot 4 such tables are appended to a #tablesList selectable by the following code:

var tablesList = $('#selectable').selectable();

var table1 = $('<li/>').appendTo(tablesList).table({ gid: 3 });
var table2 = $('<li/>').appendTo(tablesList).table({
    gid: 104,
    player0: {
        rep: Math.random(),
        photo: 'http://afarber.de/images/farber.jpg'
    }
});
var table3 = $('<li/>').appendTo(tablesList).table({
    gid: 115,
    player0: {
        rep: Math.random()
    },
    player1: {
    },
    player2: {
        rep: Math.random(),
        photo: 'https://raspasy.de/raspasy/images/male_sad.png'
    },
    player3: {
        rep: Math.random(),
        photo: 'https://raspasy.de/raspasy/images/female_happy.png'
    }
});
var table4 = $('<li/>').appendTo(tablesList).table({
    gid: 115,
    player0: {
        photo: 'https://raspasy.de/raspasy/images/female_happy.png'
    },
    player1: {
        rep: Math.random(),
        photo: 'https://raspasy.de/raspasy/images/female_sad.png'
    },
    player2: {
        rep: Math.random(),
        photo: 'https://raspasy.de/raspasy/images/male_sad.png'
    },
    player3: {
        rep: Math.random(),
        photo: 'https://raspasy.de/raspasy/images/female_happy.png'
    }
});

The #tablesList has the CSS property overflow-y: set to scroll:

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected  { background: #F39814; color: white; }
#selectable { 
    list-style-type:    none; 
    margin:             0;
    padding:            0;
    height:             500px;
    overflow-y:         scroll;
}

My problem is: when I hover the mouse pointer over one of the table widgets, then it seems to change into some CSS state with slightly bigger dimensions and thus pushes the right tables to the next row in the #tablesList:

Screenshot 1 (the mouse is over the second table):

screenshot 2

Screenshot 2 (the mouse is over the third table):

screenshot 3

As you can see, the fourth table is always pushed down. And if I move the mouse pointer away, this creates an annoying flickering effect, where the 4th table changes between the 1st and 2nd rows.

My question is how to prevent this please? I have tried inspecting CSS in the browser dev. tools but failed to spot any related CSS property.

My CSS file style.css is listed below and you can see the effect by visiting the game web page (behind Google OAuth though, sorry for that):

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected  { background: #F39814; color: white; }
#selectable { 
    list-style-type:    none; 
    margin:             0;
    padding:            0;
    height:             500px;
    overflow-y:         scroll;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

fieldset {
    border: 0px;
}

.ui-draggable, 
.ui-droppable {
    background-position: top;
}

#gameDiv {
    position: relative;
}

#gameCanvas {
    background: radial-gradient(#FFFFFF, #99CC99);
}

:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen,
:fullscreen {
    background: #FFF;
}

#lobbyTable {
    background: #FFF;
}

#kukuSlider {
    width:          300px;
    margin:         15px;
}

#red, #green, #blue {
    width:          300px;
    margin:         15px;
}

#swatch {
    padding:        10px;
    margin:         5px;
    color:          #FFF;
}

#red   .ui-slider-range  { background:   #ef2929; }
#red   .ui-slider-handle { border-color: #ef2929; }
#green .ui-slider-range  { background:   #8ae234; }
#green .ui-slider-handle { border-color: #8ae234; }
#blue  .ui-slider-range  { background:   #729fcf; }
#blue  .ui-slider-handle { border-color: #729fcf; }

.raspasy-player {
    position:           relative;
    background:         #FFF no-repeat center;
    background-size:    contain;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
    width:              160px;
    height:             120px;
}

.raspasy-player-name {
    position:           absolute;
    font-size:          18px;
    background:         #FFF;
    color:              #000;
    text-align:         left;
    left:               0;
    bottom:             0;
    padding:            2px;
    width:              156px;
    height:             20px;
}

.raspasy-player-bid {
    position:           absolute;
    font-size:          18px;
    background:         #FFF;
    color:              #000;
    text-align:         right;
    right:              0;
    top:                0;
    padding:            2px;
    width:              36px;
    height:             20px;
}

.raspasy-player-trix {
    position:           absolute;
    font-size:          18px;
    background:         #FFF;
    color:              #000;
    text-align:         right;
    right:              0;
    bottom:             0;
    padding:            2px;
    width:              36px;
    height:             20px;
}

.raspasy-player-rep {
    position:           absolute;
    right:              0;
    bottom:             0;
}

.raspasy-player-bad-big {
    position:           relative;
    background:         #C00;
    width:              50px;
    height:             1px;
    display:            none;
}

.raspasy-player-bad-small {
    position:           relative;
    background:         #C00;
    width:              25px;
    height:             1px;
    display:            none;
}

.raspasy-player-good-big {
    position:           relative;
    background:         #6C6;
    width:              50px;
    height:             1px;
    display:            none;
}

.raspasy-player-good-small {
    position:           relative;
    background:         #6C6;
    width:              25px;
    height:             1px;
    display:            none;
}

.raspasy-table {
    position:           relative;
    background:         #A3DD8E;
    color:              white;
    margin:             50px; 
    float:              left; 
    border:             4px solid #91BCE5;
    border-radius:      16px;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
    width:              160px; 
    height:             160px; 
}

.raspasy-table-gid {
    position:           absolute;
    font-size:          1.5em; 
    top:                65px;
    width:              100%;
    color:              white;
    text-align:         center; 
}

.raspasy-table-player0 {
    position:           absolute;
    left:               -40px;
    top:                50px;
    background:         #FFF no-repeat center;
    background-size:    contain;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    width:              80px;
    height:             60px;
    display:            none;
}

.raspasy-table-player1 {
    position:           absolute;
    left:               40px;
    top:                -30px;
    background:         #FFF no-repeat center;
    background-size:    contain;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    width:              80px;
    height:             60px;
    display:            none;
}

.raspasy-table-player2 {
    position:           absolute;
    left:               120px;
    top:                50px;
    background:         #FFF no-repeat center;
    background-size:    contain;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    width:              80px;
    height:             60px;
    display:            none;
}

.raspasy-table-player3 {
    position:           absolute;
    left:               40px;
    top:                130px;
    background:         #FFF no-repeat center;
    background-size:    contain;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    width:              80px;
    height:             60px;
    display:            none;
}

I have also asked my question at the jQuery UI forum.

Solution

  • The last table jumps when you hover on the 3rd one because you give it the class ui-state-hover which changes the border from 4px to 1px, thus subtracting from the height and width of the table. This problem is easily solved by adding box-sizing: border-box to the raspasy-table elements. That way the border will appear inwards, instead of outwards.