brooke_theperson 0 Posted March 30, 2015 Report Share Posted March 30, 2015 Here is my code: <!DOCTYPE html><html lang="en"><head> <link rel='stylesheet' href='style.css'/><meta charset="utf-8"/><title>title</title><style></style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+' Column: '+d);return true;}</script><script>'use strict';window.onload = init;function init() {var str = "<h3>Available Products:</h3>";for (var key in products){str += products[key].name +" $"+ products[key].price +"<br/>";}document.getElementById("products").innerHTML = str;}function add(item){cart.push(products[item]);var str = "<h3>Items in your cart:</h3>";for (var key in cart){ str += cart[key].name +" $"+ cart[key].price +"<br/>";}document.getElementById("cart").innerHTML = str;console.log(products[item]);};function item(name,price){ this.name = name; this.price = price;};function add(item){var sum = 0;cart.push(products[item]);var str = "<h3>Items in your cart:</h3>";for (var key in cart){ str += cart[key].name +" $"+ cart[key].price +"<br/>"; sum += Number(cart[key].price);} str += '<br/><b>Total = $' + sum.toFixed(2) +'</b>';document.getElementById("cart").innerHTML = str;console.log(products[item]);}var products = [];products["milk"] = new item("Milk",2.89)products["eggs"] = new item("Eggs",1.72)products["candybar"] = new item("Candy bar",0.87)products["soda"] = new item("Soda",1.99)products["water"] = new item("Water",1.29)products["cereal"] = new item("Cereal",1.87)products["donut"] = new item("Donut",1.09)products["chips"] = new item("Chips",1.99)products["magazine"] = new item("Magazine",2.79)products["nwspaper"] = new item("Newspaper",0.99)products["bagel"] = new item("Bagel",0.99)products["fruit"] = new item("Fruit",1.99)products["cgrtts"] = new item("Cigarettes",5.99)products["batteries"] = new item("Batteries",3.99)var cart = [];function buyItem() { var buy = prompt("What item do you want to buy?").toLowerCase(); switch(buy){ case 'milk':add("milk");break; case 'eggs':add("eggs");break; case 'candy bar':add("candybar");break; case 'soda':add("soda");break; case 'water':add("water");break; case 'cereal':add("cereal");break; case 'donut':add("donut");break; case 'chips':add("chips");break; case 'magazine':add("magazine");break; case 'newspaper':add("nwspaper");break; case 'bagel':add("bagel");break; case 'fruit':add("fruit");break; case 'cigarettes':add("cgrtts");break; case 'batteries':add("batteries");break; default: alert("We do not sell that item!"); console.log("We do not sell that item!"); }}</script></head><body><div class="header"> <h3 style="font-family: corsiva; font-size: 25; color: indigo;">Cash Register<h3></div><div class="left"> <button style="font-family: corsiva; font-size:22; border:2px solid black; border-radius: 100%;" onclick="buyItem()"><strong>What item do you want to buy?</strong></button><div class="right"> <div id="products"> </div> <div id="cart"> </div></div><div class="footer"> <h5>Brooke Simmerman</h5></div></body></html> What I would like is for the list of products to appear in two columns so that I have space for more items. With what I have now, some of the items continue vertically into the footer div. I would rather they continue in another column next to the first. How do I do this? Quote Link to post Share on other sites
brian1010011010 0 Posted March 30, 2015 Report Share Posted March 30, 2015 I hope someone else gets you an answer that more directly answers your question, but I feel I'd be remiss if I didn't mention this bit of wisdom from User Interfaces 101..."If your drop-down needs a scrollbar, you should probably use a listbox instead."Imagine trying to navigate a two-column drop-down on a touch screen and you might decide to change your strategy. Quote Link to post Share on other sites
johntsgi 0 Posted November 18, 2016 Report Share Posted November 18, 2016 I had a similar problem and the two biggest keys to fixing the column issue from me was putting the height and width along with the -columns # in the right locations... I have it working on the page I am using but when I load the page in the iframe of the main page... columns disappear. Just learning html and css myself. Quote Link to post Share on other sites
ender 5 Posted November 19, 2016 Report Share Posted November 19, 2016 Perhaps this will help : CSS3 Multiple Columns - W3Schools Quote Link to post Share on other sites
Ingolme 1,021 Posted November 19, 2016 Report Share Posted November 19, 2016 This thread is over a year old. There's no point in replying to it. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.