Scroll Div - Make Internal Contents appear in One Line

by nijinvinodan

HTML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<div class="scroll-container">
	<div class="inner-container">
		<button>Apple</button>
		<button>Onion</button>
		<button>Mango</button>
		<button>Grapes</button>
		<button>Banana</button>
	</div>
</div>
		
<button class="centerButton" onclick="javascript:getComponent()"/>Check Dynamism</button>

CSS

.scroll-container
{
	padding: 10px 0;
	width: 400px;
	margin: 0 auto;
	border: 1px black solid;
	overflow-y: hidden;
	overflow-x: scroll;
}

.inner-container
{
	float: left;
	height: auto;
	width: 600px;
}
.centerButton{
	display:block;
	margin: 20px auto;
}

JavaScript

$("document").ready(function(){
	$("button").button();
});
function getComponent(){
	var value = prompt("Enter Button Name");
	if(value.length > 0){
		addComponents(value);
	}
}
function addComponents(value){
	//get parent container width
	$(".inner-container").width($(".inner-container").width() + 100);
	
	$(".inner-container").append("<button>"+value+"</button>");
	$("button").button().refresh();
}