How to add .xml, .js and .css files to a xml viewer?

Question

Hi,
I have a xml viewer in a web part to display a moving txt message. 
I created a doc. library called XmlWebParts and in it 3 files with the same name. I am referring the xml file in the doc library with no issues. 
 WarningMessage.xml
<script type="text/javascript" src="http://icare/sites/IT/tst/XmlWebParts/WarningMessage/WarningMessage.js"></script>
<div class="marquee">jQuery marquee is the best marquee plugin in the world</div>
<br/>
<a class='p' href='#'>Pause</a> | <a class='r' href='#'>Resume</a>
<link rel="stylesheet" type="text/css" href="http://icare/sites/IT/tst/XmlWebParts/WarningMessage/WarningMessage.css"/>
WarningMessage.js
var $mq = $('.marquee').marquee();
//Pause
$('.p').click(function(){
  $mq.marquee('pause');
//Resume
$('.r').click(function(){
  $mq.marquee('resume');
and 
WarningMessage.css
.marquee {
  width: 300px;
  border: 1px solid #ccc;
  background: #ccc;
The issue I am having is that the txt display with the formatting but is not moving, is just display the txt.
I followed this: http://social.technet.microsoft.com/wiki/contents/articles/20764.sharepoint-2013-build-a-webpart-using-html-javascript-and-the-xml-viewer-web-part.aspx
What I am doing wrong?

Answer 1

Is not working for me.
I have the
WarningMessage.xml
<script type="text/javascript" src="http://icare/sites/IT/tst/XmlWebParts/WarningMessage/WarningMessage.js"></script>
WarningMessage.js
<script type="text/javascript">
<
//set the marquee parameters
function init() { rtl_marquee.start(); }
var rtl_marquee_Text = 'JavaScript scrolling text';
var rtl_marquee_Direction = 'left';
var rtl_marquee_Contents='<span style="font-family:Comic Sans MS;font-size:12pt;white-space:nowrap;">' + rtl_marquee_Text + '</span>';
rtl_marquee = new xbMarquee('rtl_marquee', '19px', '90%', 6, 100, rtl_marquee_Direction, 'scroll', rtl_marquee_Contents);
window.setTimeout( init, 200);
</script>
xbMarquee.js
document.writeln('<style type="text/css">');
document.writeln(' div.marqueecenter1 { text-align: center; }');
document.writeln(' div.marqueecenter2 { margin- margin-right: auto; }');
document.writeln(' div.marqueeleft1 { text-align: left; }');
document.writeln(' div.marqueeleft2 { margin- margin-right: auto; }');
document.writeln(' div.marqueeright1 { text-align: right; }');
document.writeln(' div.marqueeright2 { margin- margin-right: 0; }');
document.writeln('</style>');
function xbMarquee(id, height, width, scrollAmount, scrollDelay, direction, behavior, html)
  this.id            = id;
  this.scrollAmount  = scrollAmount ? scrollAmount : 6;
  this.scrollDelay   = scrollDelay ? scrollDelay : 85;
  this.direction     = direction ? direction.toLowerCase() : 'left';  
  this.behavior      = behavior ? behavior.toLowerCase() : 'scroll';  
//  this.name          = 'xbMarquee_' + (++xbMarquee._name);
  this.name          = id;
  this.runId         = null;
  this.html          = html;
  this.isHorizontal = ('up,down'.indexOf(this.direction) == -1);
  if (typeof(height) == 'number')
    this.height = height;
    this.heightUnit = 'px';
  else if (typeof(height) == 'string')
    this.height = parseInt('0' + height, 10);
    this.heightUnit = height.toLowerCase().replace(/^[0-9]+/, '');
  else
    this.height = 100;
    this.heightUnit = 'px';
  if (typeof(width) == 'number')
    this.width = width;
    this.widthUnit = 'px';
  else if (typeof(width) == 'string')
    this.width = parseInt('0' + width, 10);
    this.widthUnit = width.toLowerCase().replace(/^[0-9]+/, '');
  else
    this.width = 100;
    this.widthUnit = 'px';
  // xbMarquee UI events
  this.onmouseover   = null;
  this.onmouseout    = null;
  this.onclick       = null;
  // xbMarquee state events
  this.onstart       = null;
  this.onbounce      = null;
  var markup = '';
  if (document.layers)
    markup = '<ilayer id="' + this.id + 'container" name="' + this.id + 'container" ' +
             'height="' + height + '" ' +
             'width="' + width + '"  ' +
             'clip="' + width + ', ' + height + '" ' +
             '>' + 
             '<\/ilayer>';            
  else if (document.body && typeof(document.body.innerHTML) != 'string')
    markup = '<div id="' + this.id + 'container" name="' + this.id + 'container" ' +
             'style=" ' + 
             'height: ' + this.height + this.heightUnit + '; ' +
             'width: ' + this.width + this.widthUnit + '; ' +
             'clip: rect(0px, ' + this.width + this.widthUnit + ', ' + this.height + this.heightUnit + ', 0px); ' +
             '">' + 
             '<div id="' + this.id + '" style="' + 
             (this.isHorizontal ? 'width:0px;' : '') + // if we scroll horizontally, make the text container as small as possible
             '">' +
             (this.isHorizontal ? '<nobr>' : '') +
             this.html +
             (this.isHorizontal ? '<\/nobr>' : '') +
             '<\/div>' +
             '<\/div>';             
  else 
    markup = '<div id="' + this.id + 'container" name="' + 
             this.id + 'container" ' +
             'style=" overflowY: visible; ' + 
             'height: ' + this.height + this.heightUnit + '; ' +
             'width: ' + this.width + this.widthUnit + '; ' +
             'clip: rect(0px, ' + this.width + this.widthUnit + ', ' + this.height + this.heightUnit + ', 0px); ' +
            '">' + 
             '<\/div>';             
  document.write(markup);  
  window[this.name] = this;
// Class Properties/Methods
xbMarquee._name = -1;
xbMarquee._getInnerSize = function(elm, propName)
  var val = 0;
  if (document.layers)
    // navigator 4
    val = elm.document[propName];    
  else if (elm.style && typeof(elm.style[propName]) == 'number')
    // opera
    // bug in Opera 6 width/offsetWidth. Use clientWidth
    if (propName == 'width' && typeof(elm.clientWidth) == 'number')
      val = elm.clientWidth;
    else
      val =  elm.style[propName];
  else
    //mozilla and IE
    switch (propName)
    case 'height':
       if (typeof(elm.offsetHeight) == 'number')
         val =  elm.offsetHeight;
       break;
    case 'width':
       if (typeof(elm.offsetWidth) == 'number')
         val = elm.offsetWidth;                  
       break;
  return val;
xbMarquee.getElm = function(id)
  var elm = null;
  if (document.getElementById)
    elm = document.getElementById(id);
  else
    elm = document.all[id];
  return elm;
xbMarquee.dispatchUIEvent = function (event, marqueeName, eventName)
  var marquee = window[marqueeName];
  var eventAttr = 'on' + eventName;
  if (!marquee)
    return false;
  if (!event && window.event)
    event = window.event;
  switch (eventName)
  case 'mouseover':
  case 'mouseout':
  case 'click':
    if (marquee[eventAttr])
      return marquee['on' + eventName](event);
  return false;
xbMarquee.createDispatchEventAttr = function (marqueeName, eventName)
  return 'on' + eventName + '="xbMarquee.dispatchUIEvent(event, \'' + marqueeName + '\', \'' + eventName + '\')" ';
// Instance properties/methods
xbMarquee.prototype.start = function ()
  var markup = '';
  this.stop();
  if (!this.dirsign)
    if (!document.layers)
      this.containerDiv = xbMarquee.getElm(this.id + 'container')
      if (typeof(this.containerDiv.innerHTML) != 'string')
        return;
      // adjust the container size before inner div is filled in
      // so IE will not hork the size of percentage units 
      var parentNode    = null;
      if (this.containerDiv.parentNode)
        parentNode = this.containerDiv.parentNode;
      else if (this.containerDiv.parentElement)
        parentNode = this.containerDiv.parentElement;
      if (parentNode && 
          typeof(parentNode.offsetHeight) == 'number' && 
          typeof(parentNode.offsetWidth) == 'number')
        if (this.heightUnit == '%')
          this.containerDiv.style.height = 
          parentNode.offsetHeight * (this.height/100) + 'px';
        if (this.widthUnit == '%')
          this.containerDiv.style.width = 
          parentNode.offsetWidth * (this.width/100) + 'px';
      markup += '<div id="' + this.id + '" name="' + this.id + '" ' +
        'style=" ' +
        //(this.isHorizontal ? 'width:0px;' : '') + // if we scroll horizontally, make the text container as small as possible
        '" ' +
        xbMarquee.createDispatchEventAttr(this.name, 'mouseover') +
        xbMarquee.createDispatchEventAttr(this.name, 'mouseout') +
        xbMarquee.createDispatchEventAttr(this.name, 'click') +
        '>' +
        (this.isHorizontal ? '<nobr>' : '') +
        this.html +
        (this.isHorizontal ? '<\/nobr>' : '') +
        '<\/div>';
      this.containerDiv.innerHTML = markup;
      this.div                    = xbMarquee.getElm(this.id);
      this.styleObj     = this.div.style;      
    else /* if (document.layers) */
      this.containerDiv = document.layers[this.id + 'container'];
      markup = 
        '<layer id="' + this.id + '" name="' + this.id + '" top="0" left="0" ' +
        xbMarquee.createDispatchEventAttr(this.name, 'mouseover') +
        xbMarquee.createDispatchEventAttr(this.name, 'mouseout') +
        xbMarquee.createDispatchEventAttr(this.name, 'click') +
        '>' +
        (this.isHorizontal ? '<nobr>' : '') + 
        this.html +
        (this.isHorizontal ? '<\/nobr>' : '') +
        '<\/layer>';
      this.containerDiv.document.write(markup);
      this.containerDiv.document.close();
      this.div          = this.containerDiv.document.layers[this.id];
      this.styleObj     = this.div;
    if (this.isHorizontal && this.height < xbMarquee._getInnerSize(this.div, 'height') )
      this.height = xbMarquee._getInnerSize(this.div, 'height')
      this.containerDiv.style.height = this.height + this.heightUnit;
      this.containerDiv.style.clip = 'rect(0px, ' + this.width + this.widthUnit + ', ' + this.height + this.heightUnit + ', 0px)';
    // Start must not run until the page load event has fired
    // due to Internet Explorer not setting the height and width of 
    // the dynamically written content until then
    switch (this.direction)
    case 'down':
      this.dirsign = 1;
      this.startAt = -xbMarquee._getInnerSize(this.div, 'height');
      this._setTop(this.startAt);
      if (this.heightUnit == '%')
        this.stopAt = this.height * xbMarquee._getInnerSize(this.containerDiv, 'height') / 100;
      else
        this.stopAt  = this.height;
      break;
    case 'up':
      this.dirsign = -1;
      if (this.heightUnit == '%')
        this.startAt = this.height * xbMarquee._getInnerSize(this.containerDiv, 'height') / 100;
      else     
        this.startAt = this.height;
      this._setTop(this.startAt);
      this.stopAt  = -xbMarquee._getInnerSize(this.div, 'height');      
      break;
    case 'right':
      this.dirsign = 1;
      this.startAt = -xbMarquee._getInnerSize(this.div, 'width');
      this._setLeft(this.startAt);
      if (this.widthUnit == '%')
        this.stopAt = this.width * xbMarquee._getInnerSize(this.containerDiv, 'width') / 100;
      else    
        this.stopAt  = this.width;
      break;
    case 'left':
    default:
      this.dirsign = -1;
if (this.widthUnit == '%')
this.startAt = this.width * xbMarquee._getInnerSize(this.containerDiv, 'width') / 100;
else  
this.startAt = this.width        
this._setLeft(this.startAt);
// this.stopAt  = -xbMarquee._getInnerSize(this.div,'width')*2;
// this method does not work very well with FireFox.  offsetWidth property used in this function returns the absolute width of the div container
// instead of the new offsetWidth when innerHTML is added or when the div becomes wider. To overcome this a new span element is added to 
// the document body to measure the new offsetwidth and then it is removed.
var temp_span = document.createElement('span');     
temp_span.id = 'span_' + this.div.id;
temp_span.innerHTML = this.html;
document.body.appendChild(temp_span);                
this.stopAt = - temp_span.firstChild.firstChild.offsetWidth;
document.body.removeChild(temp_span);            
      break;
    this.newPosition          = this.startAt;
    this.styleObj.visibility = 'visible'; 
  this.newPosition += this.dirsign * this.scrollAmount;
  if ( (this.dirsign == 1  && this.newPosition > this.stopAt) ||
       (this.dirsign == -1 && this.newPosition < this.stopAt) )
    if (this.behavior == 'alternate')
      if (this.onbounce)
        // fire bounce when alternate changes directions
        this.onbounce();
      this.dirsign = -this.dirsign;
      var temp     = this.stopAt;
      this.stopAt  = this.startAt;
      this.startAt = temp;
    else
      // fire start when position is a start
      if (this.onstart)
        this.onstart();
      this.newPosition = this.startAt;
  switch(this.direction)
    case 'up': 
    case 'down':
      this._setTop(this.newPosition);
      break;
    case 'left': 
    case 'right':
    default:
      this._setLeft(this.newPosition);
      break;
  this.runId = setTimeout(this.name + '.start()', this.scrollDelay);
xbMarquee.prototype.stop = function ()
  if (this.runId)
    clearTimeout(this.runId);
  this.runId = null;
xbMarquee.prototype.setInnerHTML = function (html)
  if (typeof(this.div.innerHTML) != 'string')
    return;
  var running = false;
  if (this.runId)
    running = true;
    this.stop();
  this.html = html;
  this.dirsign = null;
  if (running)
    this.start();
// fixes standards mode in gecko
// since units are required
if (document.layers)
  xbMarquee.prototype._setLeft = function (left)
    this.styleObj.left = left;    
  xbMarquee.prototype._setTop = function (top)
    this.styleObj.top = top;    
else
  xbMarquee.prototype._setLeft = function (left)
    this.styleObj.left = left + 'px';    
  xbMarquee.prototype._setTop = function (top)
    this.styleObj.top = top + 'px';    
Still not working. Nothing will display on my web part xml viewer.