Jquery Marquee의 동적 내용 - 동적 너비 또한?

Question

데이터베이스에서 온라인으로 찾은 선택 윤곽에 동적 콘텐츠를 추가하고 있습니다. 문제는 콘텐츠 길이가 다양하고 스크립트가 제대로 작동하려면 정적 너비가 필요하다는 것입니다. 나는 콘텐츠를 가져 오는 동안 너비를 생성하거나 스크립트가 항목의 너비를 자동으로 생성하도록하는 방법을 찾아야합니다. 사실 여기에서 실제로 발견 한 스크립트에 매우 흡사합니다. 작동 원리를 보려면 JSFiddle입니다. JSFiddle을 좋아하지 않는 사람들을 위해

는 여기에 몇 가지 간단한 HTML/CSS를

<h1>This runs differently than the ticker for some reason. It's highly annoying in my personal opinion.</h1> 
<div id="ticker">  
    <div class="event">test1</div> 
    <div class="event">This is Test 2</div> 
    <div class="event">test3</div> 
    <div class="event">This is test number 4</div> 
</div>​ 

CSS

.event{float: left;} 
/* Add width and it will run, sorta fine 
.event{width:100px;} 
*/ 

jQuery를

(function($) { 
     $.fn.textWidth = function(){ 
      return $(this).width(); 
     }; 

     $.fn.marquee = function(args) { 
      var that = $(this); 
      var $textWidth = that.textWidth(), 
       offset = that.width(), 
       width = offset, 
       css = { 
        'text-indent' : that.css('text-indent'), 
        'overflow' : that.css('overflow'), 
        'white-space' : that.css('white-space') 
       }, 
       marqueeCss = { 
        'text-indent' : width, 
        'overflow' : 'hidden', 
        'white-space' : 'nowrap' 
       }, 
       args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args), 
       i = 0, 
       stop = $textWidth*-1, 
       dfd = $.Deferred(); 
      function go() { 
       if (that.data('isStopped') != 1) 
       { 
       if(!that.length) return dfd.reject(); 
       if(width == stop) { 
        i++; 
        if(i == args.count) { 
         that.css(css); 
         return dfd.resolve(); 
        } 
        if(args.leftToRight) { 
         width = $textWidth*-1; 
        } else { 
         width = offset; 
        } 
       } 
       that.css('text-indent', width + 'px'); 
       if(args.leftToRight) { 
        width++; 
       } else { 
        width--; 
       } 
      } 

       setTimeout(go, 10); 
      }; 
      if(args.leftToRight) { 
       width = $textWidth*-1; 
       width++; 
       stop = offset; 
      } else { 
       width--;    
      } 
      that.css(marqueeCss); 
      that.data('isStopped', 0); 
      that.bind('mouseover', function() { $(this).data('isStopped', 1); }).bind('mouseout', function() { $(this).data('isStopped', 0); }); 
      go(); 
      return dfd.promise(); 
     };   
    })(jQuery); 
     $('h1').marquee(); 
     $('#ticker').marquee();​ 

가장 먼저하는 일이야 I 생각해 봤어. 선택 윤곽을 생성하기 전에 각 목록 항목의 너비를 가져 와서 너비를 인라인으로 배치하는 것이 었습니다. 나는 그것을 어떻게하는지 알아낼 수 없었고 잠시 후에 그걸 가지고 노는 것을 포기했다. 콘텐츠가 ajax를 통해 추가되는 곳인 website에 대한 링크가 있습니다. 선택 윤곽이 맨 위에 있습니다. 조금 후에 링크를 제거하겠습니다. 내가해야 할 일에 대한 제안?

Answer 1

동적 인 부분을 추가하는 코드는 보이지 않지만 태그는 <div> 태그 안에 있어야합니까? 대신 .append()을 사용할 수 있습니까? 같은

뭔가 :

$('#ticker').append(response.data); //or whatever the variable would be 

그래서 기본적으로 그냥에 텍스트 대신 별도의 사업부 년대 인의 div에 추가합니다. marquee 플러그인이 새로 추가 된 텍스트를 보완하기 위해 모든 데이터가 추가 될 때까지 스크롤을 시작하지 않아도됩니다. 여기에서 알 수있는 바와 같이

$.fn.textWidthTrue = function(){ 
    var html_org = $(this).html(); 
    var html_calc = '<span>' + html_org + '</span>'; 
    $(this).html(html_calc); 
    var width = $(this).find('span:first').width(); 
    $(this).html(html_org); 
    return width; 
}; 

:

코드에이 기능을 추가

또는 여기

는 초기 문제를 해결할 것이라고를 사용할 수있는 몇 가지 코드 Calculating text width

다음을 추가하십시오 :

$('#ticker').find('.event').each(function(i){ // set the width correctly 
    $(this).width($(this).textWidthTrue()); 
}); 

JSFiddle : http://jsfiddle.net/NYQEL/12/ 나는 항상 시세 "뷰포트"차원과 항목 치수를 계산 한 다음 텍스트 별 위치와 종료 위치를 계산하는 방식으로 애니메이션 한 과거 시세를 만든