Untitled

dabblet.css

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
* {
   box-sizing: border-box;
   font-family: Roboto;
}  
 
 body{
   margin:0;
 }

.tools{
	width: 100%;
	height: 60px;
	position: relative;	
	background: lightgray;	
	overflow: hidden;

}

.first-area, .second-area{
	position: absolute;
	left: 0;
	width: calc(100% - 40px);
	height: 100%;
	transition: top 0.7s;
}

.first-area{
	top: 0;
}

.second-area{
	top: 100%;
}

#search-field{
	width: 80%;
	height: 35px;
	margin: 10px auto 0 10%;
	border-radius: 5px;
	padding-left: 30px;
}

#filter-button{
	width: 40px; 
	height: 35px;
	border-radius: 5px;
}

#up-page, #down-page{
	position: absolute;
	right: 0;
	height: 50%;
	width: 40px;
	border-radius: 5px;
	/*border: none;*/
	background: linear-gradient(to bottom, lightgray, white, lightgray);
}

#up-page{
	top: 0;
}

#down-page{
	top: 50%;
}
.container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 20px;
}



td button{
  background: none;
  border: none;
  outline: none;
}

table{ 
  font-family: arial, sans-serif;
  font-size: 0.9em;
  border-collapse: collapse;
  width: 90%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(odd) {
  background-color: #dddddd;
}

table tr:nth-child(1){    
  background: linear-gradient(to bottom, lightgray, 
  	rgb(165,165,165),
  	rgb(170,170,170) , 
  	rgb(165,165,165),
  	lightgray);
  border-radius: 4px;
  text-align: center !important;
}

dabblet.html

<div class='tools'>
	<button id="up-page"> ▲ </button>
	<button id="down-page"> ▼ </button>
	<div class="first-area">
		<input type="text" id="search-field" />
		<button id="filter-button">X</button>
	</div>
	<div class="second-area"></div>

</div>

<div class="container">
	
	<table></table>
</div>

dabblet.js

function getFile(file){
 	fakeAjax(file, function(text){
		handleResponse(file, text); 	
 	}
 }
 
 //server' den alınan dosyaları tutması için bir global obje oluşturuldu
var responses = {};

function handleResponse(filename, contents){
  /* ilk olarak serverdan gelen dosya ve içerik responses dizisine atılıyor burada sıra önemli değil. */
	if(!(filename in responses)){
		responses[filename] = contents;
	}
	filenames = ['file1', 'file2', 'file3'];
	/* her metot çağırıldığında çağırılan dosya sayısı kadar döngü dönecek ve serverden gelen dosyalar 
		filenames dizisinde belirtilen düzendekine göre ön sırada ise  yazdıracak ilk sıradan başlayarak eksik var ise
		fonksiyon return ile sonlandırılacak. Ortada döngü olduğu için ilk dosya en son gelse bile birinciden başlayarak
		hepsini sırayla yazdırır. */ 
	for(var i = 0; i < filenames.length; i++){
		if(filenames[i] in responses){
			if(typeof responses[filenames[i]] == 'String')
				output(responses[filenames[i]]);
				responses[filenames[i]] == false;
		}else{
			return;
		}
	}
	output('All complete');
}



//3 adet dosya isteği burada yapılıyor. Bu istekler paralel olarak (eşzamanlı) çalışacak
getFile('file1');
getFile('file2');
getFile('file3');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"","page":"javascript"}