Jump to content

connalmcilwraith

Members
  • Posts

    2
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

connalmcilwraith's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hi, I'm completely new to CSS, so forgive me if I'm talking nonsense with my request... I have the following code, which generates button images along the bottom of the screen. What I would like to do is to have the buttons 'toggle', so that I have a 'greyed out' version of the image (1.png, 2.png, etc), after the button has been clicked and returned to the original, when clicked again. Then I would like to remove the 'delete' button, as 'unclicking' the image button will remove the object from the screen. So, I would like to understand what I need to do in HTML/CSS to have that function 'visible' the js file. Hopefully that makes sense but happy to add detail, if required. Thanks for your help, Connal CSS code: body { margin: 0; padding: 0; overflow: hidden; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } div#main_canvas_container { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } *:active { -webkit-tap-highlight-color: rgba(0,0,0,0); -moz-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0); } #controls-container { display: none; position: fixed; bottom: 0; width: 100%; z-index: 1; pointer-events: none; } .top-line { height: 100px; background: url("./interface/8.png") repeat-x; background-size: 100% 100%; } .bottom-line { height: 140px; background-color: #fff; } .button-container { display: table; margin: 0 auto; height: 130px; } .button { float: left; height: 100%; cursor: pointer; background-repeat: no-repeat; pointer-events: auto; } .data-button { width: 130px; height: 130px; //background-image: url("./interface/1_1.png"); background-size: cover; } .data-button:not(.delete-container):before { content: ""; position: absolute; width: 130px; height: 90px; margin: -8px 0 0 -8px; background-repeat: no-repeat; background-size: cover; } .data-button#load-1:before { background-image: url("./interface/1.png"); } .data-button#load-2:before { background-image: url("./interface/2.png"); } .data-button#load-3:before { background-image: url("./interface/3.png"); } .data-button#load-4:before { background-image: url("./interface/4.png"); } .data-button#load-5:before { background-image: url("./interface/5.png"); } .data-button#load-6:before { background-image: url("./interface/16.png"); } .data-button#load-7:before { background-image: url("./interface/17.png"); } .data-button#load-8:before { background-image: url("./interface/18.png"); } .data-button#load-9:before { background-image: url("./interface/19.png"); } .data-button#load-10:before { background-image: url("./interface/20.png"); } .data-button:active:not(.delete-container) { //background-image: url("./interface/1_2.png"); } .delete-container { cursor: default; background-image: url("./interface/7_1.png"); } .delete-container.active { background-image: url("./interface/7_2.png"); } #delete { margin: 25% auto 0; cursor: pointer; width: 60%; height: 55%; } .rot-button-container { float: left; width: 300px; height: 130px; background: url("./interface/2_1.png") no-repeat; background-size: cover; pointer-events: auto; } .rotation-button { width: 50%; background-size: cover; } .rotation-button-left.active { background-image: url("./interface/2_2.png"); } .rotation-button-right.active { background-image: url("./interface/2_3.png"); background-position: right; } .rotation-button>div { width: 60%; height: 50%; margin: 20% 0 0 35%; } #rot-cw { margin-left: 5%; } HTLM Code: <!DOCTYPE html> <html> <head> <title>Scalextric Modules</title> <script type="text/javascript" src="..\..\..\dist\b4w.js"></script> <meta name="description" content="Select your modules and rearrange to your requirements." /> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link href="scalextric_interior.css" rel="stylesheet" type="text/css"/> <link href="media.css" rel="stylesheet" type="text/css"/> <script type="module" src="scalextric_interior.js"></script> </head> <body> <div id="controls-container"> <div class="top-line"></div> <div class="bottom-line"> <div class="button-container"> <div class="delete-container button data-button"> <div id="delete"></div> </div> <div input type="checkbox" id="load-1" class="button data-button"> <span class="final__toggle-1__button"></span></div> <div input type="checkbox" id="load-2" class="button data-button"></div> <div input type="checkbox" id="load-3" class="button data-button"></div> <div id="load-4" class="button data-button"></div> <div id="load-5" class="button data-button"></div> <div id="load-6" class="button data-button"></div> <div id="load-7" class="button data-button"></div> <div id="load-8" class="button data-button"></div> <div id="load-9" class="button data-button"></div> <div id="load-10" class="button data-button"></div> <div class="rot-button-container"> <div class="button rotation-button rotation-button-left"> <div id="rot-ccw"></div> </div> <div class="button rotation-button rotation-button-right"> <div id="rot-cw"></div> </div> </div> </div> </div> </div> <div id="main_canvas_container"></div> </body> </html>
  2. Hi, I'm completely new to CSS, so forgive me if I'm talking nonsense with my request... I have the following code, which generates button images along the bottom of the screen. What I would like to do is to have the buttons 'toggle', so that I have a 'greyed out' version of the image (1.png, 2.png, etc), after the button has been clicked and returned to the original, when clicked again. Then I would like to remove the 'delete' button, as 'unclicking' the image button will remove the object from the screen. So, I would like to understand what I need to do in HTML/CSS to have that function 'visible' the js file. Hopefully that makes sense but happy to add detail, if required. Thanks for your help, Connal body { margin: 0; padding: 0; overflow: hidden; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } div#main_canvas_container { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } *:active { -webkit-tap-highlight-color: rgba(0,0,0,0); -moz-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0); } #controls-container { display: none; position: fixed; bottom: 0; width: 100%; z-index: 1; pointer-events: none; } .top-line { height: 100px; background: url("./interface/8.png") repeat-x; background-size: 100% 100%; } .bottom-line { height: 140px; background-color: #fff; } .button-container { display: table; margin: 0 auto; height: 130px; } .button { float: left; height: 100%; cursor: pointer; background-repeat: no-repeat; pointer-events: auto; } .data-button { width: 130px; height: 130px; //background-image: url("./interface/1_1.png"); background-size: cover; } .data-button:not(.delete-container):before { content: ""; position: absolute; width: 130px; height: 90px; margin: -8px 0 0 -8px; background-repeat: no-repeat; background-size: cover; } .data-button#load-1:before { background-image: url("./interface/1.png"); } .data-button#load-2:before { background-image: url("./interface/2.png"); } .data-button#load-3:before { background-image: url("./interface/3.png"); } .data-button#load-4:before { background-image: url("./interface/4.png"); } .data-button#load-5:before { background-image: url("./interface/5.png"); } .data-button#load-6:before { background-image: url("./interface/16.png"); } .data-button#load-7:before { background-image: url("./interface/17.png"); } .data-button#load-8:before { background-image: url("./interface/18.png"); } .data-button#load-9:before { background-image: url("./interface/19.png"); } .data-button#load-10:before { background-image: url("./interface/20.png"); } .data-button:active:not(.delete-container) { //background-image: url("./interface/1_2.png"); } .delete-container { cursor: default; background-image: url("./interface/7_1.png"); } .delete-container.active { background-image: url("./interface/7_2.png"); } #delete { margin: 25% auto 0; cursor: pointer; width: 60%; height: 55%; } .rot-button-container { float: left; width: 300px; height: 130px; background: url("./interface/2_1.png") no-repeat; background-size: cover; pointer-events: auto; } .rotation-button { width: 50%; background-size: cover; } .rotation-button-left.active { background-image: url("./interface/2_2.png"); } .rotation-button-right.active { background-image: url("./interface/2_3.png"); background-position: right; } .rotation-button>div { width: 60%; height: 50%; margin: 20% 0 0 35%; } #rot-cw { margin-left: 5%; }
×
×
  • Create New...