javascript - Fixing the position of apply button in Multi-Select Checkbox -
i have designed multi-select checkbox using code snippets.
however, don't want user scroll down list select apply button.
in following snapshot, there no apply button unless user scroll bottom of list.
what trying achieve show scroll bar between select measure , apply button.
var expanded = false; function showcheckboxes() { var checkboxes = document.getelementbyid("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } } function closebox() { var checkboxes = document.getelementbyid("checkboxes"); $(checkboxes).delay(5000).fadein(); checkboxes.style.display = "none"; } function sleep(miliseconds) { var currenttime = new date().gettime(); while (currenttime + miliseconds >= new date().gettime()) {} } function getvalues() { var str = ''; var checks = document.getelementsbyclassname('checks'); (i = 0; < checks.length; i++) { if (checks[i].checked === true) { str += checks[i].value + " "; } } alert(str); } function getvalue() { var str = ''; var checks = document.getelementsbyclassname('checks'); alert(checks[0].checked); }.multiselect { width: 180px; } .selectbox { /* position: relative; */ position: relative } .selectbox select { width: 100%; font-weight: bold; } .overselect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkboxes { display: none; line-height: 0px; height: 100px; padding: 0px; border: 1px #dadada solid; overflow-y: scroll; overflow-x: hidden; } #checkboxes::-webkit-scrollbar { width: 6px; } #checkboxes::-webkit-scrollbar-thumb { background-color: grey; outline: 1px solid slategrey; border-radius: 4px; } select { background-color: #e6e6e6; border: thin solid #e6e6e6; border-radius: 4px; display: inline-block; font: inherit; line-height: 1em; padding: 0.5em 3.5em 0.5em 1em; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; width: 100%; cursor: pointer; outline: 0; color: #7b7b7b; } .selectbox:after { content: "\f13a"; font-family: "fontawesome"; padding: 10px 0px 10px 2px; position: absolute; right: 10px; top: 0; color: #7b7b7b; font-size: 15px; z-index: 1; text-align: center; width: 10%; height: 100%; pointer-events: none; box-sizing: border-box; } label { cursor: pointer; color: #666; display: block; margin: 0px 4px 2px -29px; padding: 3px; } input[type="checkbox"] { display: none; } input[type="checkbox"]+.label-text:before { content: "\f096"; font-family: "fontawesome"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; width: 1em; display: inline-block; margin-right: 5px; } input[type="checkbox"]:checked+.label-text:before { content: "\f14a"; color: #06a3e9; } input[type="checkbox"]:disabled+.label-text { color: #aaa; } input[type="checkbox"]:disabled+.label-text:before { content: "\f0c8"; color: #ccc; } .submit { background: #ff8080; color: #008080; padding: 10px 5px 5px; border: 0; width: 100%; font-size: 14px; cursor: pointer; text-align: center; } ul { padding: 0px 0px 2px 34px; } li { list-style: none; padding: 0px; }<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class="multiselect"> <div class="selectbox" onclick="showcheckboxes()"> <select class="round"> <option>select measure</option> </select> <div class="overselect"></div> </div> <div id="checkboxes"> <ul> <li> <label> <input type="checkbox" name="" class="checks" value="1" onchange="closebox()"><span class="label-text">item one</span></label></li> <li><label> <input type="checkbox" name="" class="checks" value="2"><span class="label-text">item two</span></label></li> <li><label> <input type="checkbox" name="" class="checks" value="3" ><span class="label-text">item three</span></label></li> <li><label> <input type="checkbox" name="" class="checks" value="4" ><span class="label-text">item four</span></label></li> <li> <label> <input type="checkbox" name="" class="checks" value="5" ><span class="label-text">item five</span></label></li> <li><label> <input type="checkbox" name="" class="checks" value="6" ><span class="label-text">item six</span></label></li> </ul> <label> <input type="submit" class="submit round" value="apply"></label> </div> </div> </form> <button onclick="getvalues()"> values </button>/
you can move label out of checkboxes, when scroll - scroll checkboxes:
var expanded = false; function showcheckboxes() { var checkboxes = document.getelementbyid("checkboxes-container"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } } function closebox() { var checkboxes = document.getelementbyid("checkboxes-container"); $(checkboxes).delay(5000).fadein(); checkboxes.style.display = "none"; } function sleep(miliseconds) { var currenttime = new date().gettime(); while (currenttime + miliseconds >= new date().gettime()) {} } function getvalues() { var str = ''; var checks = document.getelementsbyclassname('checks'); (i = 0; < checks.length; i++) { if (checks[i].checked === true) { str += checks[i].value + " "; } } alert(str); } function getvalue() { var str = ''; var checks = document.getelementsbyclassname('checks'); alert(checks[0].checked); }.multiselect { width: 180px; } .selectbox { /* position: relative; */ position: relative } .selectbox select { width: 100%; font-weight: bold; } .overselect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkboxes-container { display: none; height: 120px; } #checkboxes { line-height: 0px; height: 80px; padding: 0px; border: 1px #dadada solid; overflow-y: scroll; overflow-x: hidden; } #checkboxes::-webkit-scrollbar { width: 6px; } #checkboxes::-webkit-scrollbar-thumb { background-color: grey; outline: 1px solid slategrey; border-radius: 4px; } select { background-color: #e6e6e6; border: thin solid #e6e6e6; border-radius: 4px; display: inline-block; font: inherit; line-height: 1em; padding: 0.5em 3.5em 0.5em 1em; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; width: 100%; cursor: pointer; outline: 0; color: #7b7b7b; } .selectbox:after { content: "\f13a"; font-family: "fontawesome"; padding: 10px 0px 10px 2px; position: absolute; right: 10px; top: 0; color: #7b7b7b; font-size: 15px; z-index: 1; text-align: center; width: 10%; height: 100%; pointer-events: none; box-sizing: border-box; } label { cursor: pointer; color: #666; display: block; margin: 0px 4px 2px -29px; padding: 3px; } input[type="checkbox"] { display: none; } input[type="checkbox"]+.label-text:before { content: "\f096"; font-family: "fontawesome"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; width: 1em; display: inline-block; margin-right: 5px; } input[type="checkbox"]:checked+.label-text:before { content: "\f14a"; color: #06a3e9; } input[type="checkbox"]:disabled+.label-text { color: #aaa; } input[type="checkbox"]:disabled+.label-text:before { content: "\f0c8"; color: #ccc; } .submit { background: #ff8080; color: #008080; padding: 10px 5px 5px; border: 0; width: 100%; font-size: 14px; cursor: pointer; text-align: center; } ul { padding: 0px 0px 2px 34px; } li { list-style: none; padding: 0px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <form> <div class="multiselect"> <div class="selectbox" onclick="showcheckboxes()"> <select class="round"> <option>select measure</option> </select> <div class="overselect"></div> </div> <div id="checkboxes-container"> <div id="checkboxes"> <ul> <li> <label> <input type="checkbox" name="" class="checks" value="1" onchange="closebox()"><span class="label-text">item one</span></label></li> <li><label> <input type="checkbox" name="" class="checks" value="2"><span class="label-text">item two</span></label></li> <li><label> <input type="checkbox" name="" class="checks" value="3" ><span class="label-text">item three</span></label></li> <li><label> <input type="checkbox" name="" class="checks" value="4" ><span class="label-text">item four</span></label></li> <li> <label> <input type="checkbox" name="" class="checks" value="5" ><span class="label-text">item five</span></label></li> <li><label> <input type="checkbox" name="" class="checks" value="6" ><span class="label-text">item six</span></label></li> </ul> </div> <label> <input type="submit" class="submit round" value="apply"></label> </div> </div> </form> <button onclick="getvalues()"> values </button>
Comments
Post a Comment