Develop Reference

How to change a div border color on a checkbox click

I have a custom checkbox that works like a slider. You click the button, it slides across and changes color to green..
Unchecked checkbox
clicked
Checked checkbox
Now, i am trying to figure out, how i could use the same kind of css to change the border color of the surrounding button..
I want to change this border, on checkbox checked
Here is my custom css for the checkbox/slider
.checkbox{
position:relative;
cursor:pointer;
appearance:none;
width:37px;
height:24px;
border-radius:20px;
border:2px solid #ccc;
outline:none;
transition:0.3s;
border-color:red;
}
.checkbox::before{
content:"";
position:absolute;
height:15px;
width:15px;
border-radius:50%;
background:red;
top:2px;
left:0px;
transition:0.3s ease-in-out;
}
.checkbox:checked::before{
transform:translateX(18px);
background:green;
}
.checkbox:checked{
border-color:green;
}
And implementation of the checkbox/slider
<div class="float-container">
<div class="float-child">
<input type="checkbox" class="checkbox" #onchange="eventArgs => { CheckboxClicked(role.Description, eventArgs.Value); }"/>
</div>
<div class="float-child">
<p>Application Role - </p>
<br />
<p><b>#role.Description</b></p>
<br/>
</div>
</div>
So, i want to implement the same kind of logic to my float logic - css below
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
width: 100%;
padding: 20px;
border: 2px solid seagreen;
text-align-last: center;
}
I am sure this will be easy for somone who is a whizz at CSS. Im still learning..
EDIT****
So it looks like this can only be done in JS, judging by the comments.. I haven't used js yet, but id be greatful for the help.. So i guess the JS needs to know, when i have selected the checkbox, to change the color of my border in float-child.
UPDATE***
So i figured it out using Javascript - using this script to replace css items when the checkbox was checked - But having other issues, i guess my foreach loop needs unique id's.. not sure how to achieve it, in a dynamic list.. But this code below may help some one, whos not working with dynamic.
First add id's to the elements you want changing
<div class="float-child" Id="floatdiv">
<input type="checkbox" Id="checkbox" class="checkbox">
And then my javascript to change the css elements..
function BorderColorChangeOnCheckboxClick(){
$('[id*=checkbox]').click(function () {
if ($(this).is(":checked")) {
$("#floatdiv").css("width", "100%");
$("#floatdiv").css("padding", "20px");
$("#floatdiv").css("border", "2px solid red");
$("#floatdiv").css("text-align-last", "center");
}
else {
$("#floatdiv").css("width", "100%");
$("#floatdiv").css("padding", "20px");
$("#floatdiv").css("border", "2px solid seagreen");
$("#floatdiv").css("text-align-last", "center");
}
});
};
Don't forget, if you are working with Blazor.. To add the javascript file to your host files, and also make the JS interop call within your code.. ie
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await Js.InvokeVoidAsync("search");
await Js.InvokeVoidAsync("BorderColorChangeOnCheckboxClick");
}
Hope this will help someone in the future..
So back to my code -
FULL CODE
<div hidden="#IsShow" class="text-center-middle">
<div class="text-left mb-3">
<div class="col-lg-12 control-section">
<div class="control_wrapper">
#if (AppRolesDetails != null)
{
foreach (var role in AppRolesDetails)
{
<div class="float-container">
<div class="float-child">
<input type="checkbox" Id="checkbox" class="checkbox" #onchange="eventArgs => { CheckboxClicked(role.Description, eventArgs.Value); }"/>
</div>
<div class="float-child">
<p>Application Role - </p>
<br/>
<p>
<b>#role.Description</b>
</p>
<br/>
</div>
</div>
AppOwnerCommonName = role.CommonName;
}
}
</div>
</div>
</div>
</div>
CSS
<style>
.text-center-middle { margin-left: 58px;
}
.checkbox {
appearance: none;
border: 2px solid #ccc;
border-color: red;
border-radius: 20px;
cursor: pointer;
height: 24px;
outline: none;
position: relative;
transition: 0.3s;
width: 37px;
}
.checkbox::before {
background: red;
border-radius: 50%;
content: "";
height: 15px;
left: 0px;
position: absolute;
top: 2px;
transition: 0.3s ease-in-out;
width: 15px;
}
.checkbox:checked::before {
background: green;
transform: translateX(18px);
}
.checkbox:checked { border-color: green; }
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
border: 2px solid red;
padding: 20px;
text-align-last: center;
width: 100%;
}
.float-child-unknown {
border: 2px solid red;
padding: 20px;
text-align-last: center;
width: 100%;
}
.box-color-change {
border: 2px solid seagreen;
padding: 20px;
text-align-last: center;
width: 100%;
}
</style>

You don't need any JS or jumping through hoops backwards CSS.
You're creating a custom control, so build a component to represent it. I've not included your Css etc to keep the answer short, just used standard Bootstrap.
MyCheckBox.razor
<span class="p-2 border #borderColor">
<input type="checkbox" checked="#_currentValue" #onchange="Changed" />
</span>
#code {
[Parameter] public bool Value { get; set; }
[Parameter] public EventCallback<bool> ValueChanged { get; set; }
private string borderColor => _currentValue ? "border-success" : "border-danger";
private bool _currentValue;
protected override void OnInitialized()
=> _currentValue = this.Value;
private async Task Changed(ChangeEventArgs e)
{
_currentValue = (bool)e.Value;
if (ValueChanged.HasDelegate)
await ValueChanged.InvokeAsync(_currentValue);
}
}
MyCheckBox.razor.css
/*Add your custom css here */
Test page
#page "/"
<div class="m-2 p-2">
<MyCheckBox Value="value" ValueChanged="this.ValueChanged"></MyCheckBox>
</div>
<div class="m-2 p-2">
#this.value
</div>
#code {
bool value;
private void ValueChanged(bool value)
{
this.value = value;
}
}

You absolutely don't need JavaScript for that!
There's a trick to style form elements however you dream of. You just need to put your element right after the native input and wrap both with <label> to make it clickable:
<label>
<input type="checkbox" class="checkbox-native">
<i class="checkbox-custom"></i>
</label>
Then, you can change the appearance of your custom element when the native checkbox is checked:
.checkbox-native {
display: none;
}
.checkbox-custom {
display: inline-block;
/* some general style */
}
:checked + .checkbox-custom {
/* style only applicable when checked */
}

How to make ENTER work in mathlive and activate auto scroll in ydirection in the input area?

I have implemented Mathlive like this:
componentDidMount() {
document.body.append(this.container);
this.editor = window.MathLive.makeMathField(this.editorRef.current, {
onKeystroke: (e, keyCode) => {
if (keyCode == "[Space]") {
this.insertLatex("\\,");
}
}
})
}
.input {
padding: 5px;
overflow: auto;
height: 18rem;
width: 100%;
margin-right: 2rem;
border: 1px solid #CCCCCC;
/* border: 1px solid #000; */
}
<div className={styles.input} ref={this.editorRef}>
{this.state.initialLatex || "#?"}
</div>
The issue is that even after implementing ENTER using the MULTILINE and MATRIX approach (which is also not stable), I am unable to maintain auto-scroll as long as I enter the input in any direction either x-axis or y-axis.
Any idea ideas for this implementation would be helpful

How to convert a child.jsp as modal or overlay using JavaScript?

So here I want to call a child.jsp as a model using JavaScript. Previously I accessed the child jsp as showmodaldialog and window.open() using JavaScript. It works, but it is opening in another window. I want the child jsp in modal or overlay view. Please help me to solve this. Thanks in advance.
When function showModDilog() is called, the child jsp should be in modal view or in overlay view with the updated values.
In other hand, I can also use this (<%#include file="child.jsp" %>) inside the body to include. But the values which I have passed, is not getting updated in child.jsp.
*If you need more info about this, please feel free to comment. I really appreciate your help.
//function to call child.jsp from Parent.jsp
function showModDilog(retVal,curVal,curRow,varPreVal)
{
var varRetVal = retVal;
var varCurrentValue = curVal;
var varCurrentRow = curRow;
var varPreValue = varPreVal;
qsUrl ="../FOLDER/ContentShowModalDialog.do?title="+"ORDER NO - "+varRetVal+" ALREADY EXISTS &varCurrentValue="+varCurrentValue+"&varCurrentRow="+varCurrentRow+"&varPreValue="+varPreValue;
if(navigator.appName =='Microsoft Internet Explorer')
{
event.keyCode=0;
}
else
{
event.which=0;
}
event.returnValue=0;
if(getBrowser()=='IE')
{
var qsheight ='200';
var args = new Object;
args.window = window;
returnval = showModalDialog(qsUrl, args);
}
else
{
var args = new Object;
args.window = window.opener;
returnval = window.open(qsUrl, args);
}
}
.css used inside child jsp
.windowModal {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.windowModal:target {
opacity:1;
pointer-events: auto;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: 5px;
text-align: center;
top: 4px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
HTML used inside child jsp
<body class="windowModal" bgcolor="#FFCC99">
<div class=" close" style="width: 100%;overflow: auto;height: 100%;background-color: #F0E68C;">
<div style="margin-top: 1%;">
<input type="button" class="close" name="Close" value="X" style="width:8%" onclick="winClose();" >
<label class="labelbold" style="font-weight: bold; float:left;">NAME - </label>
</div>
</div>
</body>

Assuming you have your css and html working for the styling of the overlay, you can make an ajax request to get the page data and then put it in your parent page.
With pure JavaScript, you can load the child page and then put the contents of the response inside a container in your parent jsp:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("idOfContainerInsideParent").innerHTML = this.responseText;
}
};
xhttp.open("GET", qsUrl, true);
xhttp.send();

Why can I not remove the appended elements that has a class name call building-x?

For some reason I can not remove any of the building-x elements that JavaScript generates. So I'm wondering why?
So I change my code a bit and I ended up adding building-x to the HTML to see if that will do the trick and as soon as I did that, it removed the generated HTML version of building-x but I still can not remove the generated JavaScript version of building-x.
What would I have to do to also be able to remove the JavaScript generated version of building-x?
Here is my code
document.addEventListener('DOMContentLoaded',function(){
/*<Add another building>*/
document.querySelector('#add-another-building').addEventListener('click',addAnotherBuilding);
function addAnotherBuilding(){
if(document.querySelector(".building-x")){
document.querySelector(".building-x").insertAdjacentHTML("afterend","<div class='building-x'></div>");
}
else{
document.querySelector("#first-building").insertAdjacentHTML("afterend","<div class='building-x'></div>");
}
}
/*</Add another building>*/
/*<Remove the targeted buildingX>*/
if(document.querySelector('.building-x')){
var buildingXs= document.querySelectorAll('.building-x');
for(var i=0; i < buildingXs.length; i++){
buildingXs[i].addEventListener('click',removeTheTargetedBuildingX);
}
function removeTheTargetedBuildingX(event){
var removeTheTargetedBuildingX = event.currentTarget;
removeTheTargetedBuildingX.parentNode.removeChild(removeTheTargetedBuildingX);
}
}
/*</Remove the targeted buildingX>*/
});
#buildings{
background-color: gray;
}
#first-building{
background-color: red;
height: 150px;
width: 50px;
display: inline-block;
}
#add-another-building{
margin-bottom: 25px;
display: block;
}
.building-x{
background-color: blue;
display: inline-block;
height: 100px;
width: 50px;
margin-left: 5px;
margin-right: 4px;
margin-bottom: 5px;
}
<button id='add-another-building'>Add another building</button>
<div id='buildings'>
<div id='first-building'></div><!--</first-building>-->
<div class='building-x'></div><!--</building-x>-->
</div><!--</buildings>-->

The original problem was that the part of the code that adds listeners was only run once at the beginning, when there were no building-x. Thus no js-generated building-x ever got a listener.
When you added a starting html building-x, that one got a listener but not subsequent js-generated building-x.
The solution is to call the add-listener code after adding a js-building x. In the below example, I have removed the html-starting building-x.
document.addEventListener('DOMContentLoaded',function(){
/*<Add another building>*/
document.querySelector('#add-another-building').addEventListener('click',addAnotherBuilding);
function addAnotherBuilding(){
if(document.querySelector(".building-x")){
document.querySelector(".building-x").insertAdjacentHTML("afterend","<div class='building-x'></div>");
}
else{
document.querySelector("#first-building").insertAdjacentHTML("afterend","<div class='building-x'></div>");
}
addListener();
}
/*</Add another building>*/
/*<Remove the targeted buildingX>*/
function addListener() {
var buildingXs = document.querySelectorAll('.building-x');
for(var i=0; i < buildingXs.length; i++){
if (buildingXs[i].classList.contains("listening") === false) {
buildingXs[i].addEventListener('click',removeTheTargetedBuildingX);
buildingXs[i].classList.add("listening");
}
}
}
function removeTheTargetedBuildingX(event){
var removeTheTargetedBuildingX = event.currentTarget;
removeTheTargetedBuildingX.parentNode.removeChild(removeTheTargetedBuildingX);
}
});
#buildings{
background-color: gray;
}
#first-building{
background-color: red;
height: 150px;
width: 50px;
display: inline-block;
}
#add-another-building{
margin-bottom: 25px;
display: block;
}
.building-x{
background-color: blue;
display: inline-block;
height: 100px;
width: 50px;
margin-left: 5px;
margin-right: 4px;
margin-bottom: 5px;
}
<button id='add-another-building'>Add another building</button>
<div id='buildings'>
<div id='first-building'></div><!--</first-building>-->
</div><!--</buildings>-->

Remove/Hide Blocks Javascript

I am creating a majhong game.When I click two blocks with the same text I'm trying to 'hide' them, with the use of different className, but the code doesn't work. The variable f is used to keep a score of user's incorrect moves.
f=0;
function clicked(newDiv){
var cl=0;
if (newDiv.className=="clickedbox"){
newDiv.className="boxed";
cl=0;
}
else {
if (cl==0){
newDiv.className="clickedbox";
cl=1;
}
else {
newDiv.className="clickedbox";
var box=document.getElementsByClassName("clickedbox");
if (box[0].innerHTML==box[1].innerHTML){
box[0].className="removedbox";
box[1].className="removedbox";
cl=0;
}
else {
f=f+1;
}
}
}
};
<style type="text/css">
.col-format {
float: left;
}
.boxed {
width: 10px;
padding: 10px;
margin:1px;
border:10px solid pink;
background-color: pink;
border-style:outset;
}
.clickedbox {
width: 10px;
padding: 10px;
margin:1px;
border:10px yellow;
background-color: yellow;
border-style:outset;
}
.removedbox {
width: 10px;
padding: 10px;
margin:1px;
border:10px green;
background-color: green;
border-style:outset;
}
</style>

I think your variable cl doesn't ever gets an value != 0 before you check it. You are setting it to 0 everytime before your first if statement checks for its value.
Try to initialize your variable outside the "clicked" function.