Javascript-jquery-Ajax ticker message is truncated

在下面的JavaScript代码中，当我传递的消息太大而跨越多个屏幕宽度时，消息被截断。我已经提出了警报声明，并发现整个消息来自Web方法到JavaScript代码，但在显示它时，它正在截断消息。由于我是JavaScript的新手（这段代码是我从网上获得的代码的混合体），所以不胜感激。预先感谢您的帮助。Javascript-jquery-Ajax ticker message is truncated

$(document).ready(function() { 

    //initialize ul; 
    $("#scroller").html(""); 
    var tkhtml = ''; 
    var successReq = false; 


    $.ajax({ 
     type: "POST", 
     url: "GetDataFromWebMethod.aspx/GetDataForTicker", 
     data: '{}', 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(msg) { 
      var y = msg.d; 
      var x = y.split('~'); 
      alert(x.length); 

      if (x != '') { 
       for (n = 0; n < x.length; n++) { 
        tkhtml = tkhtml + '<li>' + x[n] + '</li>'; 
       } 
       alert(tkhtml); 
       $("#scroller").html(tkhtml); 
       successReq = true; 
      } 
     }, 
     error: function(msg) { 
      alert("Entered Failure"); 
     } 

    }); 


    var successReq = false; 

    var interval = setInterval(function() { 
     if (successReq) { 
      clearInterval(interval); 
      javacode(); 
     } 
    }, 100); 

    function javacode() { 
     var speed = 2; 
     var items, scroller = $('#scroller'); 
     var width = 0; 

     scroller.children().each(function() { 
      width += $(this).outerWidth(true); 
     }); 
     scroller.css('width', width); 
     scroll(); 
     function scroll() { 
      items = scroller.children(); 
      var scrollWidth = items.eq(0).outerWidth(); 
      scroller.animate({ 'left': 0 - scrollWidth }, scrollWidth * 100/speed, 'linear', changeFirst); 
     } 
     function changeFirst() { 
      scroller.append(items.eq(0).remove()).css('left', 0); scroll(); 
     } 
    } 


});

我的CSS是：

<style type="text/css"> 
    #scroller { height: 100%; margin: 0; padding: 0; line-height: 30px; position: relative; } 
    #scroller li { float: left; height: 30px; padding: 0 0 0 10px; list-style-position: inside; } 
    #scrollerWrapper { height: 30px; margin: 30px; overflow: hidden; border: 1px #333 solid; background: #F2F2F2; } 
</style>

来源

2012-02-10 Howdy

你的CSS看起来像什么？ – JKirchartz 2012-02-10 21:53:10

我的CSS是： – Howdy 2012-02-10 22:01:40

听起来像你对我有你的#scroller设置为width:100%，假设你body或html被设置为这样它会截断到窗口宽度。你应该尝试width:auto

编辑::

好了，每个L1是float:left，这需要它的文档的标准流程。尝试使用display:inline或display:inline-block

来源

2012-02-10 21:54:23 JKirchartz

我在CSS中添加了width：auto。但它看起来像我的浏览器窗口是多么大，消息正在被固定到这么大的宽度。我认为问题是在var scrollWidth = items.eq（0）.outerWidth（）;.但我不知道如何解决它。 :-( – Howdy 2012-02-10 22:06:43

）你说得对，JKirchartz！将命令设置为scroller.css（'width'，10000）;而不是scroller.css（'width'，width）;它起作用了，我非常感谢你的帮助。 – Howdy 2012-02-10 22:12:17

您好JKirchartz，我还有一个问题，如果你不介意的话。当我在我的计算机上运行这个程序时，消息保持在框中，但是当我在IIS服务器上发布它时，消息溢出了方框 – Howdy 2012-02-13 18:46:49

Javascript-jquery-Ajax ticker message is truncated

回答

相关问题