У меня есть статьи для отображения в приложении смарт-ТВ (кодирование JavaScript), но, к сожалению, в нем отображаются только первые несколько символов, в то время как все остальные остаются скрытыми. Есть ли способ прокрутки в Samsung Smart TV?Прокрутите страницу на samsung Smart TV
, если вы используете диву или список для отображения данных, чем вы можете легко скрыть список или Div с помощью JQuery при нажатии клавиши.
scrollBy и scrollTo хорошо работает на смартфоне samsung smart (не на lg). Вы недостаточно хорошо описали свою проблему, но я думаю, что вам нужно связать клавиши вверх/вниз с одним из API прокрутки.
Я рекомендую использовать isscrolljs вместо использования scrollBy и scrollTo, так как он хорошо работает как на samsung, так и на lg. smarttvjs также использует.
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);
}
}
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>
Можете ли вы включить небольшой пример кода, который показывает проблему? А может быть, скриншот или фотография результата? –
Есть ли способ имитировать вашу среду? Можете ли вы опубликовать какой-то код и исследование, которое вы сделали в этой проблеме? Вы видите ошибки javascript? –
Я не могу добавить картинку coz Мне нужно 10 репутации !!!!! :( В любом случае я попытаюсь объяснить .. допустим, что у меня есть список из 50 статей для отображения, но поскольку мы не можем прокручивать представление на смарт-телевизоре, я могу отображать только 4 или 5 статей .. а остальные по-прежнему скрыты Мне нужен API-интерфейс для прокрутки на смарт-телевизоре –