Scrolling text bottom to top. (Marquee)

by Ankit Patidar

HTML

<marquee behavior="scroll" direction="up" id="list" style="max-height:100%;overflow:hidden">&nbsp;</marquee>

<button onclick="addFx()">Add</button>
<button onclick="removeFx({id:0, label:'Hello-0'})">Remove</button>

CSS

body{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-size:14px;overflow:hidden}
#list .item:nth-child(odd){background-color:#f3f3f3}
.item{padding:10px;}
.title{margin-bottom:5px;font-size:16px}
.name{}

JavaScript

var arr = [];
var fArr = [];

var dId = 0;
var isDup = false;

function addFx(){
	console.log("addFx");
  arr.push({id:dId, label:"Hello-"+dId});
  dId++;
  
  for(var i=0; i<arr.length; i++){
  	isDup = false;
    for(var j=0; j<fArr.length; j++){
    	if(arr[i].id == fArr[j].id){
      	isDup = true;
      }
    }
    if(!isDup){
    	fArr.push(arr[i]);
    }
  }
  
	$("#code").empty();
  $("#code").append(arr);
  
  console.log(fArr);
  $("#list").empty();
  for(var i=0; i<fArr.length; i++){
  	$("#list").append('<div class="item" id="'+ fArr[i].id +'">'+fArr[i].label+'</div>');
  }
}

function removeFx(obj){
	console.log("removeFx ", obj);
  
  fArr = fArr.filter(function(obj1){
  	console.log(obj1.id);
  
    return obj1.id !== obj.id;
  });
  
	arr = arr.filter(function(obj1){
  	console.log(obj1.id);
    
    return obj1.id !== obj.id;
  });
  
  console.error(fArr)
  
  $(".item").each(function(){
  
  	console.log($(this).attr("id"));
    
    if($(this).attr("id") == obj.id){
    	$(this).remove();
    }
  });
}