Geek Answers Handbook

Samsung Smart TV page scrolls out of sight in response to keystrokes

I have a simple Smart TV application that displays a list of items in a vertical list using a key handler attached to the binding associated with the list-containing DIV.

The list contains a set of DIVs showing a text string in each enclosed by an external DIV. The height of the full list is 400 pixels, within 540 pixels of the screen height.

The user can move up and down the list using the up and down buttons to highlight individual items.

In the emulator, this works great, but on a real TV, when the user crashes, not only does the backlight move as it should, but the whole screen moves up.

Similarly, when the user starts, the backlight moves correctly, but the screen moves up.

Here is the markup for the list

<div id="itemList">
    <div class="slot" id="slot0">Slot 0</div>
    <div class="slot" id="slot1">Slot 1</div>
    <div class="slot" id="slot2">Slot 2</div>
    <div class="slot" id="slot3">Slot 3</div>
    <div class="slot" id="slot4">Slot 4</div>
</div>
<a href='javascript:void(0);' id='anchorList' onkeydown='KeyHandler.list_KeyPress()'></a>

Here is CSS

#itemList {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 250px;
    height: 400px;
    background-color: #000000;
}

#itemList .slot {
    color: #ff0000;
    width: 100%;
    height: 80px;
}

The list_KeyPress event function increases or decreases the index of the selected item and changes its class to slotSelected

Nothing on the screen is redrawn, moved or changed. The only change is the highlighted DIV class.

To fix this as a factor, I commented on the code inside list_KeyPress () and still getting the same problem - it is not.

This is definitely related to keystrokes.

+5
source share
1 answer

Actually, I decided it myself. In CSS, I added the following to the html body and style:

body, html {
    overflow: hidden;
}
+7
source

More articles:


All Articles