Scroll in samsung Smart TV

Question

I have articles to display in an application of smart TV (coding JavaScript) but unfortunately, it shows only the first few onces while all the rest of them stay down hidden. Is there any way how to scroll in Samsung Smart TV ?

Can you include a small example of your code that shows the problem? And maybe a screenshot or photo of the result? — John Wiseman, Apr 28 '15 at 03:57
Is there a way to simulate your environment? Can you post some code and research you've done into the problem? Do you see any javascript errors? — Alberto de Paola, Apr 28 '15 at 03:58
i cannot add a picture coz i need 10 reputation !!!!! :( Any way i will try to explain.. let's say that i have a list of 50 articles to display but since we cannot scroll the view on smart TV i can display only 4 or 5 articles .. and the rest are still hidden. I need an API may be for scrolling on smart TV — Mahmoud Ben Salah, Apr 28 '15 at 08:38
You can use a free image uploading website and post the direct link here. — George Netu, Apr 28 '15 at 08:39
http://imgur.com/EAcID7J This is a link with a picture that shows the result when i run the project .. :( — Mahmoud Ben Salah, May 06 '15 at 01:57

score 2 · Accepted Answer · answered May 09 '15 at 07:27

2

if you are using divs or list to display data than you can easily hide a list or Div using jquery on key press.

answered May 09 '15 at 07:27

Vikas

419
3
13

score 0 · Answer 2 · answered Apr 29 '15 at 19:26

scrollBy and scrollTo work fine on samsung smart tv (not on lg). You did not describe your problem well enough, but I guess all you need to bind up/down keys to one of the scroll APIs.

I recommend using isscrolljs instead of using scrollBy and scrollTo, as it works well on both samsung and lg. smarttvjs also uses it.

score 0 · Answer 3 · answered May 06 '15 at 01:31

var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var InitH = 440 -10;
var InitTop = 50;
var MaxTop;
var interT = null, interD = null;
var d;
var t;
var prevT = null;
var Main =
{

};

Main.onLoad = function()
{
    // Enable key event processing
    this.enableKeys();
    widgetAPI.sendReadyEvent();
    MaxTop = $("#Content").position().top - (parseInt($("#Content").css("height"))- InitH);
    alert($("#Content").position().top);
    alert(MaxTop);

};

Main.onUnload = function()
{

};

Main.enableKeys = function()
{
    document.getElementById("anchor").focus();
};

Main.keyDown = function()
{
    var keyCode = event.keyCode;
    alert("Key pressed: " + keyCode);

    switch(keyCode)
    {
        case tvKey.KEY_RETURN:
        case tvKey.KEY_PANEL_RETURN:
            alert("RETURN");
            widgetAPI.sendReturnEvent();
            break;
        case tvKey.KEY_LEFT:
            alert("LEFT");
            break;
        case tvKey.KEY_RIGHT:
            alert("RIGHT");
            break;
        case tvKey.KEY_UP:
            alert("UP");
            interTop();
            d = new Date();
            t =parseInt((d.getTime()%10000)/1000);
            alert(t+" ---------" );
            //alert(scroll);
            //Math.abs(t-prevT)>=3 && Math.abs(t-prevT)<=7
            if(($("#Content").position().top<InitTop && t!=prevT) || prevT == null){
            $("#Content").css("top",$("#Content").position().top+50+"px");
            prevT = t;
            }else if($("#Content").position().top>InitTop){
                $("#Content").css("top",InitTop+"px");
            }
            break;
        case tvKey.KEY_DOWN:
            alert("DOWN");
            interDown();
            d = new Date();
            t =parseInt((d.getTime()%10000)/1000);
            alert(t+" ---------" );
            //alert(scroll);
            //Math.abs(t-prevT)>=3 && Math.abs(t-prevT)<=7
            if(($("#Content").position().top>MaxTop && t!=prevT) || prevT == null){
            $("#Content").css("top",$("#Content").position().top-50+"px");
            prevT = t;
            }else if($("#Content").position().top<MaxTop){
                $("#Content").css("top",MaxTop+"px");
            }
            break;
        case tvKey.KEY_ENTER:
        case tvKey.KEY_PANEL_ENTER:
            alert("ENTER");
            alert($("#Content").css("height"));
            alert($("#Content").position().top);
            break;
        default:
            alert("Unhandled key");
            break;
    }
};

function interTop(){
            clearInterval(interD);
            interD = null;
            if(interT == null){
            interT = setInterval(function(){if($("#Content").position().top>InitTop){
                $("#Content").css("top",InitTop+"px");
            }
            },500);
            }
}

function interDown(){
clearInterval(interT);
interT = null;
if(interD == null){
    interD = setInterval(function(){if($("#Content").position().top<MaxTop){
                $("#Content").css("top",MaxTop+"px");
            }
            },500);
            }
}

score 0 · Answer 4 · answered May 06 '15 at 01:42

  var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var total_item = 3, current_item = 0;

//var variable = Document.getElementById("Content");
var Main =
{

};

Main.onLoad = function()
{
    // Enable key event processing
    this.enableKeys();
    widgetAPI.sendReadyEvent();
    navigation("DOWN");

    fetchNews();
    ///////////////////////////////////
        /* L'appel du Parser à compléter */
        /* L'appel du Parser à compléter */
        /* L'appel du Parser à compléter */
        ///////////////////////////////////

};

Main.onUnload = function()
{

};

Main.enableKeys = function()
{
    document.getElementById("anchor").focus();
};

Main.keyDown = function()
{
    var keyCode = event.keyCode;
    alert("Key pressed: " + keyCode);

    switch(keyCode)
    {
        case tvKey.KEY_RETURN:
        case tvKey.KEY_PANEL_RETURN:
            alert("RETURN");
            widgetAPI.blockNavigation(event);
            parent.location = "index.html";
            break;
        case tvKey.KEY_LEFT:
            alert("LEFT");
            break;
        case tvKey.KEY_RIGHT:
            alert("RIGHT");
            break;
        case tvKey.KEY_UP:
            alert("UP");
            //navigation("UP");
            break;
        case tvKey.KEY_DOWN:
            alert("DOWN");
            //navigation("DOWN");
            break;
        case tvKey.KEY_ENTER:
        case tvKey.KEY_PANEL_ENTER:
            alert("ENTER");
            //gotoPage();
            break;
        default:
            alert("Unhandled key");
            break;
    }
};
function navigation(direction){
    $("#btn_"+current_item).removeClass("selected_btn");
    if(direction == "UP"){
        if(current_item == 1)
            current_item = total_item;
        else
            current_item--;

    }else if(direction == "DOWN"){
        if(current_item == total_item)
            current_item = 1;
        else
            current_item++;
    }
    $("#btn_"+current_item).addClass("selected_btn");
}
function gotoPage(){
    switch(current_item){
        //case 1: parent.location = "gallery.html"; break;
        case 2: parent.location = "news.html"; break;
        case 3: parent.location = "about.html"; break;
    }
}
function fetchNews(){

if ( ParserNews.init()) {

       ParserNews.dataReceivedCallback = function() {
        prepareNewsList();
        };

        ParserNews.fetchDatas();

        }

};

function prepareNewsList(){

    var i;
    for(i=0; i<DataNews.getCount(); i++){       

        $("<div/>").addClass("newsItem").html('<div class="title">'+DataNews.getTitle(i)+'</div></br><div><img src ="'+DataNews.getDate(i)+'"></div>').appendTo($("body")); 


    }
    alert(DataNews.getTitle(3)) ;
    alert(DataNews.getMiservices(3))    ;
    alert(DataNews.getCount());

}



// This is the CSS file 

* {
    padding: 0;
    margin: 0;
    border: 0;
}

    /* Layout */
    body {
        width: 1280px;
        height: 720px;
        background-image: url("../img/backk.jpg");
        position: fixed;
    }

    .newsItem {
        padding: 10px;
        color: #fff;
        width: 1250px;
        height: 100px;
        margin-bottom: 10px;
        margin-left: 80px;
        background-color: #388e8e;
    }

    .title {
        color: #87d2ef;
        font-size: 20px;
    }

    .description {
        color: #fff;
        font-size: 15px;
    }

    .img {
        width: 50px;
        height: 60px;
        position: absolute;
        left: 50px;
        top: 50px;
    }

    .text {
        position: absolute;
        width: 500px;
        height: 400px;
        left: 400px;
        top: 50px;
        font-size: 25px;
        color: #fff;
    }

    #Content {
        -webkit-transition: top 1s ease-in-out;
    }

    .transitions .top {
        top: 0;
    }

    .transitions .bottom {
        top: -70px;
    }




// Finally HTML file 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Tunisie</title>

        <!-- TODO : Common API -->
        <script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
        <script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
        <script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/jquery.js"></script>

        <!-- TODO : Javascript code -->
        <script type="text/javascript" src="app/javascript/Parser_News.js"></script>
        <script type="text/javascript" src="app/javascript/Data_News.js"></script>
        <script language="javascript" type="text/javascript" src="app/javascript/News.js"></script>
                <script language="javascript" type="text/javascript" src="app/javascript/testScroll.js"></script>


        <!-- TODO : Style sheets code -->
        <link rel="stylesheet" href="app/stylesheets/testScroll.css" type="text/css">

        <!-- TODO: Plugins -->

    </head>

    <body onload="Main.onLoad();" onunload="Main.onUnload();">
<!-- Dummy anchor as focus for key events -->
        <a href="javascript:void(0);" id="anchor" onkeydown="Main.keyDown();"></a>
    <div class="newsItem" id="Content" style="width:100%; top:50px; left:100px; border:solid 1px #000000; position:fixed;">
        </div>
    </body>
</html>

Scroll in samsung Smart TV

4 Answers4