I've created a form in which one of the questions consists of a checkbox and a textarea. I removed the standard view of checkboxes and made my own on their place. I now want to integrate the trigger of the checkbox click makes the textbox active.
I'm using jQuery and I don't know pure JS well. Unfortunately I don't have opportunity to change the HTML in my case.
var $other = $('input[type=text][placeholder="your text"]');
var otherOption = $other.attr('name');
$('.form-check-other > .form-check-input').after('<label class="form-check-label" for="' + otherOption + '">');
$other.off('change');
$other.on('input');
$other.on('blur');
label {
font-size: 2rem;
color: #303030;
letter-spacing: 0.04rem;
line-height: 2.5rem;
}
label {
margin: 0;
padding-top: 0;
padding-bottom: 0.6rem;
line-height: 180%;
}
input[type="checkbox"].form-check-input {
position: absolute;
left: -9999px
}
input[type="checkbox"].form-check-input+label {
position: relative;
cursor: pointer;
}
input[type="checkbox"].form-check-input+label:before {
content: '';
background: #fff;
border: 1px solid #808080;
border-radius: 0.3rem;
height: 1.4rem;
width: 1.4rem;
position: absolute;
top: 0.5rem;
left: 0;
}
input[type="checkbox"].form-check-input+label:after {
content: '';
border-style: solid;
border-width: 0 0 2px 2px;
border-color: transparent transparent #673F9A #673F9A;
width: 1rem;
height: 0.5rem;
position: absolute;
top: 0.8rem;
left: 0.2rem;
opacity: 0;
transform: scale(2) rotate(-45deg);
}
input[type="checkbox"].form-check-input:checked+label:after {
opacity: 1;
transform: scale(1) rotate(-45deg);
color: #673F9A
}
.form-control {
display: block;
width: 100%;
line-height: 1.5rem;
height: 2.5rem;
font-size: 1.4rem;
color: #606060;
text-transform: none;
border: 2px solid #ededed;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 0.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
input[type="text"].form-control:focus {
border: 2px solid #673F9A;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 1.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.form-check-other {
position: relative;
}
.form-check-other .form-check-label {
position: absolute!important;
left: 0;
}
.form-check-label,
.form-check-other {
display: inline-block;
padding-left: 2.5rem;
font-size: 1.4rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="construction and real estate" value="construction and real estate">
<label class="form-check-label" for="construction and real estate">construction and real estate</label>
</div>
<div class="form-check form-check-other">
<input class="form-check-input" type="checkbox" id="other_option_response" value="__other_option__">
<input class="form-control" type="text" name="other_option_response" value="" placeholder="your text">
</div>
To do what you require you can hook a change event handler to the checkbox which sets the state of the disabled property of its sibling textbox.
Also note that it's invalid HTML to have spaces within id attributes, so I replaced them with underscores in the following example.
// this should *REALLY* be in the HTML, not hacked in using JS.
var $other = $('input[type="text"][placeholder="your text"]');
var otherOption = $other.attr('name');
$('.form-check-other > .form-check-input').after(`<label class="form-check-label" for="${otherOption}">`);
// toggle disabled state
$('.form-check-input').on('change', e => {
$(e.target).siblings(':text').prop('disabled', !e.target.checked).focus();
});
label {
font-size: 2rem;
color: #303030;
letter-spacing: 0.04rem;
line-height: 2.5rem;
}
label {
margin: 0;
padding-top: 0;
padding-bottom: 0.6rem;
line-height: 180%;
}
input[type="checkbox"].form-check-input {
position: absolute;
left: -9999px
}
input[type="checkbox"].form-check-input+label {
position: relative;
cursor: pointer;
}
input[type="checkbox"].form-check-input+label:before {
content: '';
background: #fff;
border: 1px solid #808080;
border-radius: 0.3rem;
height: 1.4rem;
width: 1.4rem;
position: absolute;
top: 0.5rem;
left: 0;
}
input[type="checkbox"].form-check-input+label:after {
content: '';
border-style: solid;
border-width: 0 0 2px 2px;
border-color: transparent transparent #673F9A #673F9A;
width: 1rem;
height: 0.5rem;
position: absolute;
top: 0.8rem;
left: 0.2rem;
opacity: 0;
transform: scale(2) rotate(-45deg);
}
input[type="checkbox"].form-check-input:checked+label:after {
opacity: 1;
transform: scale(1) rotate(-45deg);
color: #673F9A
}
.form-control {
display: block;
width: 100%;
line-height: 1.5rem;
height: 2.5rem;
font-size: 1.4rem;
color: #606060;
text-transform: none;
border: 2px solid #ededed;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 0.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
input[type="text"].form-control:focus {
border: 2px solid #673F9A;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 1.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.form-check-other {
position: relative;
}
.form-check-other .form-check-label {
position: absolute!important;
left: 0;
}
.form-check-label,
.form-check-other {
display: inline-block;
padding-left: 2.5rem;
font-size: 1.4rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="construction_and_real_estate" value="construction and real estate" />
<label class="form-check-label" for="construction_and_real_estate">construction and real estate</label>
</div>
<div class="form-check form-check-other">
<input class="form-check-input" type="checkbox" id="other_option_response" value="__other_option__" />
<input class="form-control" type="text" name="other_option_response" value="" placeholder="your text" disabled />
</div>
You need to get the click on element and then use nextAll to find next input.
And then, you use focus and blur to fire on your input.
I also used class to check if click element was already clicked or not
var $other = $('input[type=text][placeholder="your text"]');
var otherOption = $other.attr('name');
$('.form-check-other > .form-check-input').after('<label class="form-check-label" for="' + otherOption + '">');
$('.form-check-input').change(function() {
if (!$(this).hasClass('checked')) {
$(this).addClass('checked').nextAll('input[name=other_option_response]:first').focus();
} else {
$(this).removeClass('checked').nextAll('input[name=other_option_response]:first').blur();
}
});
label {
font-size: 2rem;
color: #303030;
letter-spacing: 0.04rem;
line-height: 2.5rem;
}
label {
margin: 0;
padding-top: 0;
padding-bottom: 0.6rem;
line-height: 180%;
}
input[type="checkbox"].form-check-input {
position: absolute;
left: -9999px
}
input[type="checkbox"].form-check-input+label {
position: relative;
cursor: pointer;
}
input[type="checkbox"].form-check-input+label:before {
content: '';
background: #fff;
border: 1px solid #808080;
border-radius: 0.3rem;
height: 1.4rem;
width: 1.4rem;
position: absolute;
top: 0.5rem;
left: 0;
}
input[type="checkbox"].form-check-input+label:after {
content: '';
border-style: solid;
border-width: 0 0 2px 2px;
border-color: transparent transparent #673F9A #673F9A;
width: 1rem;
height: 0.5rem;
position: absolute;
top: 0.8rem;
left: 0.2rem;
opacity: 0;
transform: scale(2) rotate(-45deg);
}
input[type="checkbox"].form-check-input:checked+label:after {
opacity: 1;
transform: scale(1) rotate(-45deg);
color: #673F9A
}
.form-control {
display: block;
width: 100%;
line-height: 1.5rem;
height: 2.5rem;
font-size: 1.4rem;
color: #606060;
text-transform: none;
border: 2px solid #ededed;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 0.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
input[type="text"].form-control:focus {
border: 2px solid #673F9A;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 1.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.form-check-other {
position: relative;
}
.form-check-other .form-check-label{
position: absolute!important;
left: 0;
}
.form-check-label, .form-check-other {
display: inline-block;
padding-left: 2.5rem;
font-size: 1.4rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="construction and real estate" value="construction and real estate">
<label class="form-check-label" for="construction and real estate">construction and real estate</label>
</div>
<div class="form-check form-check-other">
<input class="form-check-input" type="checkbox" id="other_option_response" value="__other_option__">
<input class="form-control" type="text" name="other_option_response" value="" placeholder="your text">
</div>
Related
I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>
Can you set 400px in .search-box class should be work
Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:
I am trying to integrate the code for price range slider in one of my new project but I don't know why the javascript code written for the slider not running.
I tried to integrate the code and I noticed some others related answers in which the solution were just the changing of version from html 4 to 5 but I am using html 5. I googled a lot but didn't get any solution.
The code which I am trying to integrate is here which is working fantastically on this link https://codepen.io/glitchworker/pen/XVdKqj but not on the local file.
The sliders doesn't move. They just remain still at 30 and 60 position.
body { font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; color: #888; line-height: 30px; text-align: center; }
/***** Top menu *****/
.navbar {
background: #444;
-o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s;
backface-visibility: hidden;
align-content: left;
}
[slider] {
position: relative;
height: 14px;
border-radius: 10px;
text-align: left;
margin: 45px 0 10px 0;
}
[slider] > div {
position: absolute;
left: 13px;
right: 15px;
height: 14px;
}
[slider] > div > [inverse-left] {
position: absolute;
left: 0;
height: 14px;
border-radius: 10px;
background-color: #CCC;
margin: 0 7px;
}
[slider] > div > [inverse-right] {
position: absolute;
right: 0;
height: 14px;
border-radius: 10px;
background-color: #CCC;
margin: 0 7px;
}
[slider] > div > [range] {
position: absolute;
left: 0;
height: 14px;
border-radius: 14px;
background-color: #1ABC9C;
}
[slider] > div > [thumb] {
position: absolute;
top: -7px;
z-index: 2;
height: 28px;
width: 28px;
text-align: left;
margin-left: -11px;
cursor: pointer;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background-color: #FFF;
border-radius: 50%;
outline: none;
}
[slider] > input[type=range] {
position: absolute;
pointer-events: none;
-webkit-appearance: none;
z-index: 3;
height: 14px;
top: -2px;
width: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
div[slider] > input[type=range]::-ms-track {
-webkit-appearance: none;
background: transparent;
color: transparent;
}
div[slider] > input[type=range]::-moz-range-track {
-moz-appearance: none;
background: transparent;
color: transparent;
}
div[slider] > input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
border: transparent;
}
div[slider] > input[type=range]:focus {
outline: none;
}
div[slider] > input[type=range]::-ms-thumb {
pointer-events: all;
width: 28px;
height: 28px;
border-radius: 0px;
border: 0 none;
background: red;
}
div[slider] > input[type=range]::-moz-range-thumb {
pointer-events: all;
width: 28px;
height: 28px;
border-radius: 0px;
border: 0 none;
background: red;
}
div[slider] > input[type=range]::-webkit-slider-thumb {
pointer-events: all;
width: 28px;
height: 28px;
border-radius: 0px;
border: 0 none;
background: red;
-webkit-appearance: none;
}
div[slider] > input[type=range]::-ms-fill-lower {
background: transparent;
border: 0 none;
}
div[slider] > input[type=range]::-ms-fill-upper {
background: transparent;
border: 0 none;
}
div[slider] > input[type=range]::-ms-tooltip {
display: none;
}
[slider] > div > [sign] {
opacity: 0;
position: absolute;
margin-left: -11px;
top: -39px;
z-index:3;
background-color: #1ABC9C;
color: #fff;
width: 28px;
height: 28px;
border-radius: 28px;
-webkit-border-radius: 28px;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
[slider] > div > [sign]:after {
position: absolute;
content: '';
left: 0;
border-radius: 16px;
top: 19px;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top-width: 16px;
border-top-style: solid;
border-top-color: #1ABC9C;
}
[slider] > div > [sign] > span {
font-size: 12px;
font-weight: 700;
line-height: 28px;
}
[slider]:hover > div > [sign] {
opacity: 1;
}
<div slider id="slider-distance">
<div>
<div inverse-left style="width:70%;"></div>
<div inverse-right style="width:70%;"></div>
<div range style="left:30%;right:40%;"></div>
<span thumb style="left:30%;"></span>
<span thumb style="left:60%;"></span>
<div sign style="left:30%;">
<span id="value">30</span>
</div>
<div sign style="left:60%;">
<span id="value">60</span>
</div>
</div>
<input type="range" tabindex="0" value="30" max="100" min="0" step="1" oninput="
this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);
var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);
var children = this.parentNode.childNodes[1].childNodes;
children[1].style.width=value+'%';
children[5].style.left=value+'%';
children[7].style.left=value+'%';children[11].style.left=value+'%';
children[11].childNodes[1].innerHTML=this.value;" />
<input type="range" tabindex="0" value="60" max="100" min="0" step="1" oninput="
this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));
var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);
var children = this.parentNode.childNodes[1].childNodes;
children[3].style.width=(100-value)+'%';
children[5].style.right=(100-value)+'%';
children[9].style.left=value+'%';children[13].style.left=value+'%';
children[13].childNodes[1].innerHTML=this.value;" />
</div>
I have a toggle button that works with CSS but I need to add some logic when it's on and when it's off. The problem is jQuery cannot read the :after and :before on CSS because they're not actually part of the DOM.
--TOGGLE--
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span id="switch-inner" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
--CSS--
.onoffswitch {
position: relative; width: 78px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #C2C2C2; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #5C7FE3; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 46px;
border: 2px solid #C2C2C2; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
I tried the onClick event but everytime I click it (logically) it fires the code (multiple times if clicked multiple times), what would be perfect is that one would be true and fire the code and in the second click it would do something else.
I don't know if this could be super simple and my brain is tired and not thinking correctly, but any help would be helpful!!
Adding a click event handler is the right approach. Simply look at the checked property of the checkbox to know the state of the button (on/off).
document.getElementById("myonoffswitch").addEventListener("click", function(){
// Test the state of the checkbox and act accordingly
if(this.checked){
console.log("ON");
} else {
console.log("OFF");
}
});
.onoffswitch {
position: relative; width: 78px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #C2C2C2; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #5C7FE3; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 46px;
border: 2px solid #C2C2C2; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span id="switch-inner" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
I have an HTML, CSS switcher which is working well.
However - I'd like the effect to be opposite so that there is NO text at all, but when the switcher is swiped then text (via a DIV) is trigger - so basically the opposite way around to how it currently is.
Any ideas how to do this? I have tried playing around with the 'hide' class but I can't get it to work...
Here's the code:
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.remove('hidden');
} else {
document.querySelector('.triggeredDiv').classList.add('hidden');
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv.hidden {
display: none;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
You need to reverse the logic and call the function initially.
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.add('hidden');
} else {
document.querySelector('.triggeredDiv').classList.remove('hidden');
}
}
toggleDiv() // initial call. You may need to wait DOMContentLoaded
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.add('hidden');
} else {
document.querySelector('.triggeredDiv').classList.remove('hidden');
}
}
toggleDiv()
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv.hidden {
display: none;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
I changed the class name from hidden to shown and adjusted the JavaScript accordingly.
.triggeredDiv {
display: none;
}
.triggeredDiv.shown {
display: block;
}
Demo
function toggleDiv() {
var triggeredDiv = document.querySelector('.triggeredDiv');
if (document.getElementById('myonoffswitch').checked) {
triggeredDiv.classList.remove('shown');
} else {
triggeredDiv.classList.add('shown');
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #999999;
}
.triggeredDiv {
display: none;
}
.triggeredDiv.shown {
display: block;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
Using JQuery, hide text to begin with then show when on country.
$('.triggeredDiv').hide();
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
console.log("hidden")
$('.triggeredDiv').hide();
} else {
console.log("shown")
$('.triggeredDiv').show();
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv .hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
I have create a template containing 4 radio buttons and 1 "continue" button with effects as shown below
I am trying to add a javascript code while clicking on "continue" :
if any radio button is selected it will pop up an alert that you need to select one buton
if radio 1 is selected, it will open the page choice1.php, if radio 2 is selected then it will open the page choice2.php and so on...
I was following some tutorials and test it on basic examples, it works for me but usually I see
<form onsubmit="return validateSubmit();" action="#">
and
<input type="submit" value="Submit">
When i change my button to submit type i lose the effect i added with css.
Here is my code snippet
#import url('https://fonts.googleapis.com/css?family=Lato');
.container{
font-family: 'Lato', sans-serif;
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h1 {
color: #000000;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #696969;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #1E90FF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #696969;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #1E90FF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #1E90FF;
}
input[type=radio]:checked ~ .check::before{
background: #1E90FF;
}
input[type=radio]:checked ~ label{
color: #1E90FF;
}
#import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700";
.flex {
font-family: "Source Sans Pro", sans-serif;
-webkit-font-smoothing: antialiased;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
a.bttn {
color: #1E90FF;
text-decoration: none;
-webkit-transition: 0.3s all ease;
transition: 0.3s ease all;
}
a.bttn:hover {
color: #FFF;
}
a.bttn:focus {
color: #FFF;
}
.bttn {
font-size: 18px;
letter-spacing: 2px;
text-transform: uppercase;
display: inline-block;
text-align: center;
width: 270px;
font-weight: bold;
padding: 14px 0px;
border: 3px solid #1E90FF;
border-radius: 2px;
position: relative;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}
.bttn:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: '';
background-color: #1E90FF;
z-index: -2;
}
.bttn:hover:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.bttn:focus:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
a.bttn{
top: -110px;
}
<div class="container">
<h1 lign="center">Select the Type :</h1>
<br/>
<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Shipment</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">Canceled</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" name="selector">
<label for="t-option">Ordered</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="u-option" name="selector">
<label for="u-option">Other</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="flex">
<a class="bttn" >Continue</a>
</div>
can anyone help me please how to keep the same design of "continue" button and add to it the javascript part.
Thank you very much.
If you just want to switch to a different page instead of submitting a form you can simply perform a check for the value of the radio button and then redirect to the specific page directly like this:
When you uncomment the window.location.href line you would be redirected to the file that you see in the console output.
$(function(){
$('.bttn').on('click', function(){
if($('input[name="selector"]').groupVal() === undefined){
alert('Please select an option!');
} else {
console.log('choice' + $('input[name="selector"]').groupVal() + '.php');
//window.location.href = 'order' + $('input[name="selector"]').groupVal() + '.php';
}
});
});
jQuery.fn.extend({
groupVal: function() {
return $(this).filter(':checked').val();
}
});
#import url('https://fonts.googleapis.com/css?family=Lato');
.container{
font-family: 'Lato', sans-serif;
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h1 {
color: #000000;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #696969;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #1E90FF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #696969;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #1E90FF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #1E90FF;
}
input[type=radio]:checked ~ .check::before{
background: #1E90FF;
}
input[type=radio]:checked ~ label{
color: #1E90FF;
}
#import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700";
.flex {
font-family: "Source Sans Pro", sans-serif;
-webkit-font-smoothing: antialiased;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
a.bttn {
color: #1E90FF;
text-decoration: none;
-webkit-transition: 0.3s all ease;
transition: 0.3s ease all;
}
a.bttn:hover {
color: #FFF;
}
a.bttn:focus {
color: #FFF;
}
.bttn {
font-size: 18px;
letter-spacing: 2px;
text-transform: uppercase;
display: inline-block;
text-align: center;
width: 270px;
font-weight: bold;
padding: 14px 0px;
border: 3px solid #1E90FF;
border-radius: 2px;
position: relative;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}
.bttn:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: '';
background-color: #1E90FF;
z-index: -2;
}
.bttn:hover:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.bttn:focus:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
a.bttn{
top: -110px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 lign="center">Select the Type :</h1>
<br>
<ul>
<li>
<input type="radio" id="f-option" value="1" name="selector">
<label for="f-option">Shipment</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" value="2" name="selector">
<label for="s-option">Canceled</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" value="3" name="selector">
<label for="t-option">Ordered</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="u-option" value="4" name="selector">
<label for="u-option">Other</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="flex">
<a class="bttn" >Continue</a>
</div>