brooke_theperson Posted March 30, 2015 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? Link to comment Share on other sites More sharing options...
brian1010011010 Posted March 30, 2015 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. Link to comment Share on other sites More sharing options...
johntsgi Posted November 18, 2016 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. Link to comment Share on other sites More sharing options...
ender Posted November 19, 2016 Share Posted November 19, 2016 Perhaps this will help : CSS3 Multiple Columns - W3Schools Link to comment Share on other sites More sharing options...
Ingolme Posted November 19, 2016 Share Posted November 19, 2016 This thread is over a year old. There's no point in replying to it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now