I create this template successfully with javascript:
I create the template in an async function:
this.createBoxes = async function() {
var row_counter = 0;
for (var i = 1; i < this.fake_data.length + 1; i++) {
var item_box = document.createElement("div");
item_box.style.flex = "0.5";
item_box.style.backgroundColor = "white";
item_box.style.display = "flex";
item_box.style.flexDirection = "column";
item_box.style.justifyContent = "flex-end";
item_box.id = "item_box_"+i;
var item_name = document.createElement("h3");
item_name.style.flex = "0.2";
item_name.style.backgroundColor = "orange";
item_name.style.alignSelf = "center";
item_name.innerText = this.fake_data[i - 1].name;
item_name.id = "item_name_"+i;
item_box.appendChild(item_name);
this_row = document.getElementsByClassName("row")[row_counter];
this_row.appendChild(item_box);
if(i % 2 == 0) {
var pool = document.getElementById("pool");
var inner_row = document.createElement("div");
inner_row.style.display = "flex";
inner_row.style.flexDirection = "row";
inner_row.style.flex = "0.5";
inner_row.style.justifyContent = "space-around";
inner_row.style.alignItems = "center";
inner_row.style.backgroundColor = "green";
inner_row.className = "row";
pool.appendChild(inner_row);
row_counter++;
}
else if(i == this.fake_data.length) {
return;
}
}
}
Then I do this:
this.createBoxes().then(function() {
var template = document.querySelector('#pool');
var clone = template.content.cloneNode(true);
document.querySelector(".app").appendChild(clone);
})
But as you can see from my screenshot, .app is empty. What am I doing wrong? I am using Cordova and I am assuming that it is able to use the template tag, I haven't been able to find anything saying I can't.
UPDATE
This happens:
When I do this:
this.createBoxes().then(function() {
var template = document.querySelector('#pool');
var clone = template.cloneNode(true);
document.querySelector(".app").appendChild(clone);
});
Using template.cloneNode successfully moves the <template> but this is obviously not what I want, I want to get the contents of the <template> and move them to .app container, not the whole <template>.
You should be cloning the template's .content instead, as demonstrated in the documentation.
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
Well, if cloning the node itself works, then the answer is pretty simple - just clone/append children of the template:
this.createBoxes().then(function() {
let template = document.querySelector('#pool');
let app = document.querySelector(".app");
for(let child of template.childNodes) {
let clone = child.cloneNode(true);
app.appendChild(clone);
}
});
Note that I have not tested this code - you may need to debug it as necessary.
I added a container to the template programmatically:
var pool = document.getElementById("pool");
var container = document.createElement("div");
container.style.flex = "1";
container.style.backgroundColor = "white";
container.style.display = "flex";
container.style.flexDirection = "column";
container.id = "container";
var row = document.createElement("div");
row.style.display = "flex";
row.style.flexDirection = "row";
row.style.flex = "0.5";
row.style.justifyContent = "space-around";
row.style.alignItems = "center";
row.style.backgroundColor = "green";
row.className = "row";
container.appendChild(row);
pool.appendChild(container);
Then instead of adding my content to the #pool <template>, I added it to #container, and then stored the #container node in a variable, and then imported that into .app:
var container_in_temp = document.querySelector('#pool>#container');
var targetContainer = document.querySelector('.app');
targetContainer.appendChild(document.importNode(container_in_temp, true));
So it ends up looking like this, with a container in .app which is actually kind of preferable structure wise :).
Related
Is there a way to name a var using a sort of "Array?" My code is this:
for(var i = 0; i < (getHorizontalSquares * getVerticalSquares); i++){
var Square[i] = document.createElement("div");
Square[i].style.position = "relative";
Square[i].style.float = "left";
Square[i].style.width = "50px";
Square[i].style.height = "50px";
Square[i].id = "square" + (i + 1);
for(var ii = 0; ii < 6; ii++){
var TestColor = TestColorArray[Math.round(Math.random()*(TestColorArray.length - 1))];
getTestColor += TestColor;
}
Square[i].style.backgroundColor = "#" + getTestColor;
SquareCont.appendChild(Square[i]);
}
I know my code doesn't work, but I want to implement the same idea so I can get a result of this:
var Square1...
var Square2...
var Square3...
var Square4...
var Square5...
etc
I also tried doing a "Concentration" var, but it didn't work. How do I do this so the document doesn't append the same square multiple times?
var Square = {};
var SquareCont = document.createElement('div');
var getHorizontalSquares = 10;
var getVerticalSquares = 10;
var TestColorArray = ['a','b','c','f','e','0','1','2','3','3','4','5'];
var getTestColor = '';
for(var i = 0; i < (getHorizontalSquares * getVerticalSquares); i++){
Square['Square'+i] = document.createElement("div");
Square['Square'+i].style.position = "relative";
Square['Square'+i].style.float = "left";
Square['Square'+i].style.width = "50px";
Square['Square'+i].style.height = "50px";
Square['Square'+i].id = "square" + (i + 1);
for(var ii = 0; ii < 6; ii++){
var TestColor = TestColorArray[Math.round(Math.random()*(TestColorArray.length - 1))];
getTestColor += TestColor;
}
Square['Square'+i].style.backgroundColor = "#" + getTestColor;
SquareCont.appendChild(Square['Square'+i]);
getTestColor = '';
}
console.log(Square);
This example does what you want using an object instead of an array, but meets your desire to dynamically create accessible Square1, Square2, etc... They are all contained in Square. In the console with this snippet, you will see that 100 squares are created and added to the Square object. They will be accessible by Square.SquareX (where X is some number), or Square['SquareX'], or Square['Square'+X] where X is some number again.
Your declaration syntax is not valid. But, I think the larger point you are trying to get to is to be able to populate an array with dynamically created elements and that you can do:
var squares = []; // Array must exist before you can populate it
var testColorArray = ["green", "yellow", "blue", "orange", "silver"];
var getTestColor = null;
function makeSquares(count){
for(var i = 0; i < count; i++){
// Just create the element and configure it. No need to worry about the array yet
var element = document.createElement("div");
element.style.float = "left";
element.style.width = "75px";
element.style.height = "75px";
element.id = "square" + (i + 1);
element.style.backgroundColor = testColorArray[Math.floor(Math.random()* testColorArray.length)];
element.textContent = element.id;
squareCont.appendChild(element);
// Now, add the element to the arrray
squares.push(element);
}
// Test:
console.log(squares);
}
makeSquares(10);
<div id="squareCont"></div>
I have a list of cats. Each cat object has a property cat.clicks that record the number of times the cat image has been clicked. The cat image's onclick calls the method cat.clickCat.
But of course 'this' in the clickCat method refers to the image element and not the cat object which contains the property 'clicks'.
How do I display and update the number of clicks on the image?
function Cat(src, name) {
this.src = src;
this.name = name;
this.clicks = 0; //property recording no. of clicks
}
Cat.prototype.createCatItem = function() {
let catDisplay = document.createElement("div");
catDisplay.id = "catDisplay"
let catName = document.createElement("h2");
let catImg = document.createElement("img");
let catCounter = document.createElement("div");
catCounter.id = "clicker";
catName.innerHTML = this.name;
catImg.src = this.src;
catImg.onclick = this.clickCat; //call the clickCat method
catDisplay.appendChild(catName);
catDisplay.appendChild(catImg);
catDisplay.appendChild(catCounter);
return catDisplay;
}
Cat.prototype.clickCat = function() {
this.clicks += 1; //how to access the object property clicks from this method?
let clickerDiv = document.getElementById("clicker")
clickerDiv.innerHTML = ''
clickerDiv.innerHTML = 'clicks = ' + this.clicks;
}
function App() {
this.cats = [];
}
App.prototype.add = function(cat) {
this.cats.push(cat)
}
App.prototype.listCats = function() {
let container = document.getElementById("container");
let ul = document.createElement("ul");
for (let i=0; i<this.cats.length; i++){
let li = document.createElement("li");
li.innerHTML = this.cats[i].name;
li.onclick = this.displayCat;
ul.appendChild(li);
}
container.appendChild(ul);
}
App.prototype.displayCat = function() {
let container = document.getElementById("container");
let catDisplay = document.getElementById("catDisplay")
let cats = app.cats;
let chosenCat = cats.filter(cat => cat.name === this.innerHTML);
let chosenCatItem = chosenCat[0].createCatItem();
container.removeChild(catDisplay);
container.appendChild(chosenCatItem);
console.log(chosenCat);
}
App.prototype.showFirstCat = function() {
let container = document.getElementById("container");
let catDisplay = document.getElementById("catDisplay")
let firstCat = app.cats[0].createCatItem();
container.appendChild(firstCat);
}
let app = new App;
let tea = new Cat("http://placehold.it/350x150", "tea");
let snowball = new Cat("http://placehold.it/350x200", "snowball");
let triksy = new Cat("http://placehold.it/350x300", "triksy");
let vera = new Cat("http://placehold.it/350x350", "vera");
let jon = new Cat("http://placehold.it/350x400", "jon");
app.add(tea)
app.add(snowball)
app.add(triksy)
app.add(vera)
app.add(jon)
app.listCats();
app.showFirstCat();
<div id="container">
<h1>My Cat Clicker</h1>
</div>
First of all .. beware of using this ... this always refer the object currently responsible to execute the scripts in browser ... so in your case the image is responsible for executing the click event and it has no property called clicks .. and that's why clicks is NaN
A good practice is preserve this into a variable to avoid the system replacement when executing (that=this)
Cat.prototype.createCatItem = function() {
let that=this; //preserving this value
let catDisplay = document.createElement("div");
catDisplay.id = "catDisplay"
let catName = document.createElement("h2");
let catImg = document.createElement("img");
let catCounter = document.createElement("div");
catCounter.id = "clicker";
catName.innerHTML = this.name;
catImg.src = this.src;
catImg.onclick = function() {
//alert(this);
that.clicks += 1; //how to access the object property clicks from this method?
let clickerDiv = document.getElementById("clicker")
clickerDiv.innerHTML = ''
clickerDiv.innerHTML = 'clicks = ' + that.clicks;
}
catDisplay.appendChild(catName);
catDisplay.appendChild(catImg);
catDisplay.appendChild(catCounter);
return catDisplay;
}
//Cat.prototype.clickCat = function() {
// this.clicks += 1; //how to access the object property clicks from this method?
// let clickerDiv = document.getElementById("clicker")
// clickerDiv.innerHTML = ''
// clickerDiv.innerHTML = 'clicks = ' + this.clicks;
//}
I am having trouble understanding why the text is not changing when I click the button. It is being executed right away when the page starts instead. I am not sure why this is happening because I told it to only execute when you click on the button.
<!DOCTYPE html>
<html id="all">
<head>
<head>
</head>
<title>Lab8</title>
<style></style>
</head>
<body>
<script>
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);
iDiv.style.backgroundColor = "#d79365";
iDiv.style.padding = "40px";
var innerDiv2 = document.createElement('div');
innerDiv2.className = 'block-3';
iDiv.appendChild(innerDiv2);
innerDiv2.style.padding = "40px";
innerDiv2.style.textAlign = "center";
innerDiv2.innerHTML = "Here is changing the text: ";
//innerDiv2.innerHTML = "Text Change when button clicked";
//innerDiv2.style.textAlign = "center";
// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';
// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);
innerDiv.innerHTML = "I'm the inner div";
innerDiv.style.padding = "40px";
innerDiv.style.backgroundColor = "#eac67a";
var ClickButton = document.createElement('button');
ClickButton.className = 'block-4';
iDiv.appendChild(ClickButton);
ClickButton.innerHTML = "Style";
ClickButton.style.margin = "auto";
ClickButton.style.display = "block";
ClickButton.style.width = "80px";
ClickButton.style.height = "50px";
ClickButton.style.top = "50px";
ClickButton.style.backgroundColor = "#233237";
ClickButton.style.color = "white";
function js_style(){
alert("hi");
document.querySelector("innerDiv2");
innerDiv2.style.fontSize = 'large';
innerDiv2.style.font = 'italic bold 20px arial,serif';
innerDiv2.style.color = "#eac67a";
};
document.getElementsByTagName('button').onclick = js_style();
</script>
</body>
The problem with your code is that getElementsByTagName returns a HTMLCollection - which behaves a little like an array, in that you can access the individual elements using array syntax like x[0]
However, as you're creating the button dynamically, you can dispense with that, and, in the process, dispense with last millennium code element.onclick=rubbish
var ClickButton = document.createElement('button');
ClickButton.addEventListener('click', js_style);
done
document.getElementsByTagName('button') returns a HTMLCollection.
Setting the 'onclick' value of the HTMLCollection does not set the 'onclick' handle of the button.
i could get the example to work by giving the button an id and retrieving the button via that id (rather than it's tag name):
https://jsfiddle.net/0L1kj3ja/
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);
iDiv.style.backgroundColor = "#d79365";
iDiv.style.padding = "40px";
var innerDiv2 = document.createElement('div');
innerDiv2.className = 'block-3';
iDiv.appendChild(innerDiv2);
innerDiv2.style.padding = "40px";
innerDiv2.style.textAlign = "center";
innerDiv2.innerHTML = "Here is changing the text: ";
//innerDiv2.innerHTML = "Text Change when button clicked";
//innerDiv2.style.textAlign = "center";
// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';
// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);
innerDiv.innerHTML = "I'm the inner div";
innerDiv.style.padding = "40px";
innerDiv.style.backgroundColor = "#eac67a";
var ClickButton = document.createElement('button');
ClickButton.id = 'btn';
ClickButton.className = 'block-4';
iDiv.appendChild(ClickButton);
ClickButton.innerHTML = "Style";
ClickButton.style.margin = "auto";
ClickButton.style.display = "block";
ClickButton.style.width = "80px";
ClickButton.style.height = "50px";
ClickButton.style.top = "50px";
ClickButton.style.backgroundColor = "#233237";
ClickButton.style.color = "white";
function js_style(){
alert("hi");
document.querySelector("innerDiv2");
innerDiv2.style.fontSize = 'large';
innerDiv2.style.font = 'italic bold 20px arial,serif';
innerDiv2.style.color = "#eac67a";
};
document.getElementById('btn').onclick = js_style;
instead of
document.getElementsByTagName('button').onclick = js_style();
try this :
var buttons = document.getElementsByTagName('button');
for (var i=0;i<buttons.length;i++)
{
buttons[i].onclick = js_style;
}
when you use js_style(); javascript will call that function so you should just introduce your function name to .onclick
You were attaching onclick event to collection of JS nodes. I've refactored your code and added one more class to button element to attachclick event on that.
It is always advisable to add class with js prefix to attach event handler to DOM elements. In this way,no one will mess with js-* classes.
//create outer div and apply styles
var outerDiv = document.createElement('div');
var outerDivStyle = 'background-color:#d79365;padding: 40px;';
outerDiv.id = 'block';
outerDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(outerDiv);
outerDiv.style.cssText = outerDivStyle;
//create inner div and apply styles
var innerDiv = document.createElement('div');
innerDiv.className = 'block-3';
outerDiv.appendChild(innerDiv);
var innerDivStyle = 'padding: 40px;text-align:center;';
innerDiv.innerHTML = "Here is changing the text: ";
innerDiv.style.cssText = innerDivStyle;
//create last div and apply styles
var lastDiv = document.createElement('div');
lastDiv.className = 'block-2';
// The variable iDiv is still good... Just append to it.
outerDiv.appendChild(lastDiv);
lastDiv.innerHTML = "I'm the inner div";
var lastDivStyle = 'background-color:#eac67a;padding: 40px;';
lastDiv.style.cssText = lastDivStyle;
//create button
var clickButton = document.createElement('button');
clickButton.id = 'js-btn';
clickButton.className = 'block-4';
outerDiv.appendChild(clickButton);
var btnStyles = 'background-color:#233237;color: white;margin:auto;display:block;width: 80px; height:50px;';
lastDiv.style.cssText = lastDivStyle;
clickButton.innerHTML = "Style";
clickButton.style.cssText = btnStyles;
function jsStyle() {
alert("hi");
document.querySelector("innerDiv");
innerDiv.style.fontSize = 'large';
innerDiv.style.font = 'italic bold 20px arial,serif';
innerDiv.style.color = "#eac67a";
};
document.querySelector('#js-btn').onclick = jsStyle;
So what I am trying to do here is copy an html table out of clubMemebers. Paste that table into two new places, and on the second "new" table called tblBody; set its first rows visibility to hidden, change the text in the cells to '' (nothing) and make its height = 0px... basically.
The problem is probably quite an obvious one to most people... they both are linked to a single table so a change to one will make a change to them all...
How can I separate these tables to do what I need to do? I've tried to search but all I came up with is copying tables to clipboard or excel.
Here bellow is the html and the javascript I am using.
<div id="DivHeaderRow"></div>
<div class="gridDiv" id="gridDiv" onscroll="OnScrollDiv(this)"></div>
<div id="DivFooterRow"></div>
<table style="width: 100%;" class="MemberTbl" runat="server" id="clubMembers" >
<tr class="Header" style="position:fixed;"></tr>
</table>
and the javascript:
function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
var tblHead = document.getElementById(gridId);
var tblBody = document.getElementById(gridId);
if (tblHead) {
var DivHR = document.getElementById('DivHeaderRow');
var DivMC = document.getElementById('gridDiv');
var DivFR = document.getElementById('DivFooterRow');
//*** Set divheaderRow Properties ****
DivHR.style.height = headerHeight + 'px';
DivHR.style.position = 'relative';
DivHR.style.top = '10px';
DivHR.style.zIndex = '10';
DivHR.style.verticalAlign = 'top';
DivHR.style.overflow = 'hidden';
//*** Set divMainContent Properties ****
DivMC.style.position = 'relative';
DivMC.style.zIndex = '1';
//*** Set divFooterRow Properties ****
DivFR.style.width = (parseInt(width) - 16) + 'px';
DivFR.style.position = 'relative';
DivFR.style.top = -headerHeight + 'px';
DivFR.style.verticalAlign = 'top';
DivFR.style.paddingtop = '2px';
DivFR.style.overflow = 'hidden';
if (isFooter) {
var tblfr = tbl.cloneNode(true);
tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
var tblBody = document.createElement('tbody');
tblfr.style.width = '100%';
tblfr.cellSpacing = "0";
//*****In the case of Footer Row *******
tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
tblfr.appendChild(tblBody);
DivFR.appendChild(tblfr);
}
//****Copy Header in divHeaderRow****
var tblBodyRow = tblBody.rows[0];
tblBodyRow.style.visibilty = 'hidden';
tblBodyRow.style.height = '0px';
for(var i = 0, tblBodyRow; tblBodyCell = tblBodyRow.cells[i]; i++)
{
tblBodyCell.innerHTML = '';
}
DivHR.appendChild(tblHead.cloneNode(true));
DivMC.appendChild(tblBody.cloneNode(true));
}
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
document.getElementById('DivFooterRow').scrollLeft = Scrollablediv.scrollLeft;
}
window.onload = function () {
MakeStaticHeader('clubMembers', 100, 400, 25, false)
}
Maybe your problem would be fixed changing your lines:
var tblHead = document.getElementById(gridId);
var tblBody = document.getElementById(gridId);
for:
var tblHead = document.getElementById(gridId).cloneNode(true);
var tblBody = document.getElementById(gridId).cloneNode(true);
However, maybe you could try with jquery to manipulate DOM elements... Then, with something like this could be enough (see Fiddle):
tableHtml = $('#clubMembers').html();
$('#DivHeaderRow').html(tableHtml);
$('#DivHeaderRow').find("tr").first().hide();
$('#gridDiv').html(tableHtml);
I'm trying to make a basic GUI for a JavaScript web app, that lets users use the web app on any device, without putting too much time and effort into making it too responsive. I figured I could easily use basic overflow properties for container divs, so the user can scroll to the desired button, rather than changing the layout completely for different screen resolutions.
I'm trying to make the top toolbar (File, Edit, Insert etc..) with an overflow-x set to scroll, which holds divs floated to the left. For some reason, the overflow-x does nothing, so some of the buttons are hidden. Why is this?
jsFiddle
// STYLE WINDOW
document.body.style.margin = "0px";
document.body.style.padding = "0px";
document.body.style.backgroundColor = "#66666A";
document.body.style.color = "#0099AA";
document.body.style.fontFamily = "calibri, sans-serif";
function getScrollbarWidth()
{var o = document.createElement('div');o.style.overflowY = "scroll";o.style.visibility = "none";var i = document.createElement('div');o.appendChild(i);document.body.appendChild(o);var r = o.offsetWidth-i.offsetWidth;o.parentNode.removeChild(o);return(r);}
function getScrollbarHeight()
{var o = document.createElement('div');o.style.overflowX = "scroll";o.style.visibility = "none";document.body.appendChild(o);var r = o.offsetHeight;o.parentNode.removeChild(o);return(r);}
// CREATE EDITOR TOOLBAR
toolbar = document.createElement('div');
toolbar.style.position = "fixed";
toolbar.style.top = "0px";
toolbar.style.left = "0px";
toolbar.style.width = "100%";
toolbar.style.height = 32+getScrollbarHeight()+"px";
toolbar.style.overflowX = "scroll";
toolbar.style.overflowY = "hidden";
toolbar.style.backgroundColor = "#33333A";
toolbar.buttons = {};
toolbar.addButton = function(buttonName){
var newButton = document.createElement('div');
newButton.style.width = "128px";
newButton.style.height = "16px";
newButton.style.float = "left";
newButton.style.paddingTop = "8px";
newButton.style.paddingBottom = "8px";
newButton.style.textAlign = "center";
newButton.style.fontSize = "15px";
newButton.style.color = ";DD8800";
newButton.innerHTML = buttonName;
this.buttons[buttonName] = newButton;
this.appendChild(newButton);
}
toolbar.addButton("File");
toolbar.addButton("Edit");
toolbar.addButton("Insert");
toolbar.addButton("Settings");
toolbar.addButton("Share");
toolbar.addButton("Help");
// CREATE EDITOR WINDOW SELECTOR
windowSelector = document.createElement('div');
windowSelector.style.position = "fixed";
windowSelector.style.top = 32+getScrollbarHeight()+"px";
windowSelector.style.left = "0px";
windowSelector.style.bottom = "0px";
windowSelector.style.width = 128+getScrollbarWidth()+"px";
windowSelector.style.overflowY = "scroll";
windowSelector.style.backgroundColor = "#33333A";
windowSelector.buttons = {};
windowSelector.addButton = function(buttonName,imageURL){
this.buttons[buttonName] = document.createElement('div');
this.buttons[buttonName].style.width = "128px";
this.buttons[buttonName].style.height = "64px";
this.buttons[buttonName].style.backgroundColor = "#22222A";
this.buttons[buttonName].style.borderTop = "1px solid #115588";
var buttonImage = document.createElement('div');
buttonImage.style.width = "32px";
buttonImage.style.height = "32px";
buttonImage.style.margin = "8px";
buttonImage.style.marginTop = "16px";
buttonImage.style.marginBottom = "16px";
buttonImage.style.float = "left";
buttonImage.style.backgroundImage = "url('"+imageURL+"')";
buttonImage.style.backgroundSize = "contain";
buttonImage.style.backgroundPosition = "center center";
this.buttons[buttonName].appendChild(buttonImage);
var buttonTitle = document.createElement('div');
buttonTitle.style.width = "72px";
buttonTitle.style.height = "16px";
buttonTitle.style.paddingTop = "24px";
buttonTitle.style.paddingBottom = "24px";
buttonTitle.style.paddingLeft = "8px";
buttonTitle.style.float = "left";
buttonTitle.style.color = "#77BBDD";
buttonTitle.style.fontSize = "14px";
buttonTitle.innerHTML = buttonName;
this.buttons[buttonName].appendChild(buttonTitle);
this.appendChild(this.buttons[buttonName]);
}
windowSelector.addButton("Sprites","");
windowSelector.addButton("Objects","");
windowSelector.addButton("Scripts","");
windowSelector.addButton("Rooms","");
windowSelector.addButton("Backgrounds","");
windowSelector.addButton("Sounds","");
windowSelector.addButton("Paths","");
windowSelector.addButton("Timelines","");
windowSelector.addButton("Constants","");
// CREATE APPLICATION SCRIPT
application = document.createElement('script');
document.body.appendChild(application);
document.body.appendChild(toolbar);
document.body.appendChild(windowSelector);
Elements will only overflow horizontally if they have no other choice. Usually this is a good thing, but in some cases... yeah.
floats will wrap. Instead, try using display:inline-block on the items, and white-space:nowrap on the container.
This will force the elements to overflow horizontally.