Jump to content

Search the Community

Showing results for tags 'toggle button'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 2 results

  1. Hi Everyone, I'm trying in a bootstrap view to replace two dropdown lists (yes/no) by two toggle checkboxes. Here is the part of code used on the Edit View : <div class="row"> <div class="col-md-3" style=""> <div class="col-sm-12"> <label for="d_c" class="col-sm-12 control-label">DC</label> </div> </div> <div class="col-md-3" style="" > <div class="col-sm-12"> <label for="i_m_c" class="col-sm-12 control-label">IMC</label> </div> </div> <div class="col-md-6" style="" > <div class="col-sm-12"> </div> </div> <div class="col-md-3" style=""> <div class="col-sm-12"> <input type="checkbox" name="test_1" id="test_1" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger"> </div> </div> <div class="col-md-3" style=""> <div class="col-sm-12"> <input type="checkbox" name="test_2" id="test_2" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger"> </div> </div> <div class="col-md-6" style="" > <div class="col-sm-12"> </div> </div> </div> When i check the test_1, 'on' is stored in my (sql) database, when i check test_2, 'on' is also stored. my problem is that i would like to be able to have test_2 toggle button visible only when test_1 toggle button is checked, and when test_1 is not checked to store 'NULL' as test_2 value. And when test_2 is checked to force test_1 value to be 'on', and force test_2 value to 'NULL' if test_1 is not checked. ALL that I tried in javascript ended in a failure, so if there is anybody who can tell me how to get out of it, any help will be really appreciated. (i have try following javascript (div names have been removed from code above as nothing worked as i want to)) <script type="text/javascript"> function Change() { if ((document.getElementById('test_1').checked)) { document.getElementById('madiv').style.display="block"; document.getElementById('madiv2').style.display="block"; } else { document.getElementById('madiv').style.display="none"; document.getElementById('madiv2').style.display="none"; } } </script> And if anybody can tell me how to get the checkbox value on another bootstrap form (Modify View)... i'tried with value="<?php echo...; ?>" but it doesn't worked.. a big big thanks in advance. (sorry for my poor english) Have a nice day. Jeff
  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 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>
  • Create New...