Jump to content

Recommended Posts

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 post
Share on other sites

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 post
Share on other sites
  • 1 year later...

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...