Please I need your assistance to link the toggle to 2 separate links.. example..1 is www.google.com and second is www.ask.com
I need the 2 links linked to any of the ends of the switch so when it is selected , the switch moves to the selected end and also opens a new windows relating to the link above
.flipswitch {
position: relative;
width: 195px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.flipswitch input[type=checkbox] {
display: none;
}
.flipswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 50px;
}
.flipswitch-inner {
width: 200%;
margin-left: -100%;
-webkit-transition: margin 0.3s ease-in 0s;
-moz-transition: margin 0.3s ease-in 0s;
-ms-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before, .flipswitch-inner:after {
float: left;
width: 50%;
height: 34px;
padding: 0;
line-height: 34px;
font-size: 18px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flipswitch-inner:before {
content: "ask view";
padding-left: 13px;
background-color: #256799;
color: #FFFFFF;
}
.flipswitch-inner:after {
content: "google View";
padding-right: 13px;
background-color: #EBEBEB;
color: #888888;
text-align: right;
}
.flipswitch-switch {
width: 31px;
margin: 1.5px;
background: #FFFFFF;
border: 2px solid #999999;
border-radius: 50px;
position: absolute;
top: 0;
bottom: 0;
right: 160px;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
-ms-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
margin-left: 0;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
right: 0;
}
<div class="flipswitch">
<input type="checkbox" checked="" id="fs" class="flipswitch-cb" name="flipswitch">
<label for="fs" class="flipswitch-label">
<div class="flipswitch-inner"> </div>
<div class="flipswitch-switch"></div>
</label>
</div>
Like this
document.getElementById("fs").addEventListener("change",function() {
const loc = this.checked ? "https://www.google.com" : "https://ask.com/";
console.log(loc)
// window.open(loc,"_blank"); // only works if browser allows it
location = loc; // will work in all cases where the target allows it
})
.flipswitch {
position: relative;
width: 195px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.flipswitch input[type=checkbox] {
display: none;
}
.flipswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 50px;
}
.flipswitch-inner {
width: 200%;
margin-left: -100%;
-webkit-transition: margin 0.3s ease-in 0s;
-moz-transition: margin 0.3s ease-in 0s;
-ms-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before, .flipswitch-inner:after {
float: left;
width: 50%;
height: 34px;
padding: 0;
line-height: 34px;
font-size: 18px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flipswitch-inner:before {
content: "ask view";
padding-left: 13px;
background-color: #256799;
color: #FFFFFF;
}
.flipswitch-inner:after {
content: "google View";
padding-right: 13px;
background-color: #EBEBEB;
color: #888888;
text-align: right;
}
.flipswitch-switch {
width: 31px;
margin: 1.5px;
background: #FFFFFF;
border: 2px solid #999999;
border-radius: 50px;
position: absolute;
top: 0;
bottom: 0;
right: 160px;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
-ms-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
margin-left: 0;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
right: 0;
}
<div class="flipswitch">
<input type="checkbox" checked="" id="fs" class="flipswitch-cb" name="flipswitch">
<label for="fs" class="flipswitch-label">
<div class="flipswitch-inner"> </div>
<div class="flipswitch-switch"></div>
</label>
</div>
Related
In Chrome, firefox, opera, brave ia ok, in Safari - transition no good.
In Edge, Internet Esplorer - apprearance not work, looks like the checkbox
How to repear safari's transition and apprearance in Edge/IE browsers?
.mytoggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:checked {
background-color: #2A3542;
}
input.mytoggle:focus {
outline: 0;
}
.mytoggle:checked:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" checked="checked" class="mytoggle" style="" />
Styling a checkbox directly is a pain, you could use the checkbox + label hack, in which you link a label to a checkbox, and apply the styles to the label instead of the checkbox itself:
.mytoggle {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
.mytoggle + label {
font-family: arial;
vertical-align: middle;
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle + label:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:checked + label {
background-color: #2A3542;
}
input.mytoggle:focus + label {
outline: 0;
}
.mytoggle:checked + label:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" checked="checked" class="mytoggle" id="mycheckbox" />
<label for="mycheckbox" />
input { opacity:0}
input+label {
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
input+label:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
input:checked+label{
background-color: #2A3542;
}
input.mytoggle:focus {
outline: 0;
}
input:checked+label:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" name="abc" id="abc" checked="checked" style="" />
<label for="abc" class="mytoggle"></label>
I just added a label for input checkbox, tested in internet explorer 11. I don't have have safari browser to test it, So you can test and let know, if this answer meets your requirement.
Please try this.
$(document).ready(function(e) {
$(".ra-box").click(function(){
$(this).toggleClass('checked');
});
});
input[type=checkbox] { opacity: 0; }
.ra-box {
display: inline-block;
margin: 0;
padding: 6px;
cursor: pointer;
border-radius: 15px;
overflow: hidden;
background: #2a3542;
width: 70px;
height: 18px;
position: relative;
}
.ra-box:before {
height: 20px;
width: 20px;
background: #41cac0;
color: #41cac0;
content: 'ON';
text-indent: -40px;
position: absolute;
top: 5px;
right: 5px;
border-radius: 50%;
}
.ra-box:after {
height: 20px;
width: 20px;
background: #7f8c9a;
color: #fff;
content: 'OFF';
position: absolute;
top: 5px;
border-radius: 50%;
text-indent: 30px;
left: 85px;
}
/* Check Box Check Change background color */
.ra-box.checked:before { right: 85px; }
.ra-box.checked:after { left: 5px;}
.ra-box.checked { background: #bdc3c7; }
.ra-box,.checked,.ra-box.checked,.ra-box:before,.ra-box:after,.ra-box.checked:before,.ra-box.checked:after {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ra-box">
<input type="checkbox" id="toggle-1">
</div>
<br>
<br>
<div class="ra-box">
<input type="checkbox" id="toggle-1">
</div>
I want a Button, with 2 elements in it, to slide the Background.
But I want both elements to center vertical and get height 100% even when the other element is bigger.
Here is the HTML
<button class="btn-cstm-slide">
<div class="btn-cstm-slide-logo"><span>Test Test 14343</span></div>
<div class="btn-cstm-slide-text">
<span>Just a Testtest</span>
<br/>
<span>Let's see</span>
</div>
</button>
And here the CSS
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
height:100%;
min-height:100%;
margin: 0;
padding: 10px;
position: relative;
text-decoration: none;
background: #474f54;
color: #fff;
}
.btn-cstm-slide-text {
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text * {
position:relative;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
Demo
FIDDLE
Can you help me? :(
Is this what you had in mind?
https://jsfiddle.net/e07uc4kj/9/
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
padding: 10px;
min-width: 80px;
position: absolute;
top: 0px;
bottom: 0px;
text-decoration: none;
background: #474f54;
color: #fff;
vertical-align: middle;
}
.btn-cstm-slide-text {
margin-left: 100px;
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
I want to use toggle button from Proto.io:
https://proto.io/freebies/onoff.
It works but when I place the button after an image, the switch is not round anymore. Have a look how it is on JSFiddle: https://jsfiddle.net/rvmcn7ju.
Pro forma, here's the CSS:
.onoffswitch {
position: relative; width: 90px;
-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%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "UP";
padding-left: 10px;
background-color: #009900; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "DOWN";
padding-right: 10px;
background-color: #000099; color: #FFFFFF;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
border: 2px solid #999999; border-radius: 20px;
position: absolute; top: 0; bottom: 0; right: 56px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; 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;
}
It works when I change top attribute to 292px in .onoffswitch-switch (with this particular image). I probably have to change the position to relative and do sth else. Any help appreciated.
Updated your fiddle you need position relative to contain the switch.
.onoffswitch-label {
position: relative;
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
https://jsfiddle.net/rvmcn7ju/1/
Updated again because the switch looked ovaly
.onoffswitch-switch {
...
margin: 4px; // changed margin
height: 18px; // added height
...
}
https://jsfiddle.net/rvmcn7ju/3/
I'm building an image overlay from right to left transition. The transition is working fine but the caption is 45% width of the image and I want the transition to stop at the end of caption width not continue till the end of image width.
This is my code
.screenshot {
float: left;
margin: 50px;
position: relative;
overflow: hidden;
}
.screenshot > * {
display: block;
}
.screenshot h3 {
margin: 8px;
padding: 0;
text-indent: 0;
text-align: right;
font: 21px/25px "TwCenMT";
text-transform: none;
text-decoration: none;
color: #fff;
letter-spacing: normal;
}
.screenshot-caption {
position: absolute;
width: 45%;
height: 100%;
background: rgb(93, 84, 77);
background: rgba(93, 84, 77, .7);
color: #ed4e6e;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.screenshot-caption h1 {
color: #fff;
}
.screenshot-caption a {
display: table;
margin: 0 auto;
bottom:0;
text-align: center;
background: #2c3e50;
padding: 6px 12px;
color: #000;
text-decoration: none;
}
.screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 0;
}
.screenshot-caption_right {
top: 0;
left: 100%;
}
.screenshot:hover .screenshot-caption {
top: 0;
left: 0;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.screenshot:hover .screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1;
}
<div class="screenshot">
<img src="http://fillmurray.com/300/200">
<div class="screenshot-caption screenshot-caption_right">
<h1>Right to Left</h1>
Read More
</div>
</div>
http://jsfiddle.net/vhp2nL7k/
The transition should be 45% of the image according to caption width
As you want the transition to stop the end of caption, the absolute position of the caption at that time would be left = 100-(width of caption div)% = 55% in this case.
.screenshot {
float: left;
margin: 50px;
position: relative;
overflow: hidden;
}
.screenshot > * {
display: block;
}
.screenshot h3 {
margin: 8px;
padding: 0;
text-indent: 0;
text-align: right;
font: 21px/25px "TwCenMT";
text-transform: none;
text-decoration: none;
color: #fff;
letter-spacing: normal;
}
.screenshot-caption {
position: absolute;
width: 45%;
height: 100%;
background: rgb(93, 84, 77);
background: rgba(93, 84, 77, .7);
color: #ed4e6e;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.screenshot-caption h1 {
color: #fff;
}
.screenshot-caption a {
display: table;
margin: 0 auto;
bottom:0;
text-align: center;
background: #2c3e50;
padding: 6px 12px;
color: #000;
text-decoration: none;
}
.screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 0;
}
.screenshot-caption_right {
top: 0;
left: 100%;
}
.screenshot:hover .screenshot-caption {
top: 0;
left: 55%;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.screenshot:hover .screenshot-caption > * {
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1;
}
<div class="screenshot">
<img src="http://fillmurray.com/300/200">
<div class="screenshot-caption screenshot-caption_right">
<h1>Right to Left</h1>
Read More
</div>
</div>
I have the following checkbox:
<div class="onoffswitch">
<input type="checkbox" name="showOnNavigation" class="onoffswitch-checkbox" id="showOnNavigation" checked>
<label class="onoffswitch-label" for="showOnNavigation">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
The CSS for it:
.onoffswitch {
position: relative; width: 90px;
-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 {
width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #A3D900; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #CCCCCC; color: #333333;
text-align: right;
}
.onoffswitch-switch {
width: 25px; margin: 2.5px;
background: #000000;
border: 2px solid #999999; border-radius: 20px;
position: absolute; top: 0; bottom: 0; right: 56px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; 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;
}
When I'm submitting a form and checkbox is on the ON position, the checkbox value is ON. When it is on OFF position, the value is not set to OFF, so my script will issue an error that the index is not set. It used to work before, but for some reason it doesn't work anymore. Really frustrating, kindly HELP!! A CSS only approach would be most preffered, otherwsie I could easily do this with JavaScript.
I got the code generated from http://proto.io/freebies/onoff/
Put a hidden field with the same name before your checkbox with a value of "OFF"