I have created a toggle switch using css.
I want #box1 to turn from a white background with black type to a black with white text and the toggle to turn to on.
I'm stuck trying to figure out the JavaScript. The button doesn't switch and the box doesn't turn back to white.
$('#myonoffswitch').change(function(){
console.log('here');
if ($(this).click())
{
$('#box1').addClass('dark-mode');
}
else
{
$('#box1').removeClass('dark-mode');
}
});
How can toggle the dark-mode class.
Fiddle
You can just use the toggleClass method. Demo
$('#myonoffswitch').change(function(){
$('#box1').toggleClass('dark-mode');
});
$(this).click() returns an instance of jQuery, which is a truthy value in JavaScript, this is why addClass was called in the first place
$('#myonoffswitch').change(function() {
$('#box1').toggleClass('dark-mode');
});
.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: "ON";
padding-left: 10px;
background-color: #FFFFFF;
color: #000000;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #FFFFFF;
color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
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;
background-color: #FFFFFF;
}
#box1 {
color: black;
background-color: white;
border: 1px solid;
width: 100px;
height: 100px;
}
#box1.dark-mode {
color: #fff;
background-color: #000;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<br>
<div id="box1">This is text.</div>
Related
I am very new to css and i am trying to align the text center in the button, but i am not able to get it centered. Please look into my code and help me to fix it.
.new-btn{
clear:both;
white-space:nowrap;
display: inline-block;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: center;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.new-btn > span, .new-icn > i {
float:left;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;
line-height:1em
}
.new-icn > i{
display: inline-block;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
}
.new-btn > span{
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.new-yt > i {
background: #ff0000;
}
.new-yt > span {
color: #ff0000;
}
<a class="new-btn new-icn new-yt" href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a>
text-align: center; is also not working. I have been trying to fix this for hours but still no luck. The result look like this
span is an inline element, so you need to set it to inline-block, then set its width and finaly text-align:center
p/s: research about flex. it will make your life easier
did some changes to your css instead of inline block i used flex and for the span it takes the width of 100% and reduced double the size of red circle width it also has display f;ex in it to justify the text to the center
.new-btn {
clear: both;
white-space: nowrap;
display: flex;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: flex-start;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-out;
}
.new-btn>span,
.new-icn>i {
float: left;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
line-height: 1em
}
.new-icn>i {
display: inline-block;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
}
.new-btn>span {
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
display: flex;
justify-content: center;
width: calc(100% - 120px);
}
.new-yt>i {
background: #ff0000;
}
.new-yt>span {
color: #ff0000;
}
<a class="new-btn new-icn new-yt" href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a>
Altered the code a bit, making the outside container a flex and centring the text as a span.
using the ::before treatment for the red circle element it is absolutely positioned and will ignore the 'Youtube' text
.new-btn{
clear:both;
position:relative;
white-space:nowrap;
display: flex;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: center;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.new-btn > span, .new-icn > i {
float:left;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;
line-height:1em
}
.new-icn::before{
content:"";
display:inline-block;
position:absolute;
left:0;
top:0;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
background-color: #ff0000;
}
.new-btn > span{
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.new-yt > i {
background: #ff0000;
}
.new-yt > span {
color: #ff0000;
}
.text{
display:flex;
}
<a class="new-btn new-icn new-yt" href="#"><span class="text">Youtube</span></a>
Could someone tell me why isn't my text "Add Product" appearing inside of the button when the user hovers on the button?
Adding
display: flex
for the body seems to fix the issue but I don't wanna set the display of my body to flex. Is there some other way I could make it work?
.button {
background: #f6bc00 no-repeat -12px center;
border: 1px solid #f6bc00;
border-radius: 4px;
color: #fff;
display: inline;
font-size: 9px;
font-weight: 700;
overflow: hidden;
padding: 5px 8px 3px 8px;
text-decoration: none;
line-height: 8px;
text-transform: uppercase;
transition: padding .2s ease, background-position .2s ease, transform .5s ease;;
}
.button:span {
margin: 0;
padding: 0;
}
.button:hover {
transform: scale(1, 1);
padding-left: 88px;
padding-right: 5px;
background-position: 5px center;
}
.button span:nth-child(1) {
position: absolute;
left: -70px;
transition: left .2s ease;
}
.button:hover span:nth-child(1) {
bottom: 3px;
left: 20px;
}
/* PRESENTATION */
body {
background-color: black;
}
.button:nth-child(1) {
margin-right: 1em;
}
<a class="button" href="#" download="">
<span>Add Product</span>
<span>Add</span></a>
one way to do it is to hide the add product text.
i changed this..
.button span:nth-child(1) {
position: absolute;
left: -70px;
transition: left .2s ease;
}
to this..
.button span:nth-child(1) {
display:none;
transition: left .2s ease;
}
then on hover display inline
.button:hover span:nth-child(1) {
display:inline;
bottom: 3px;
}
checkout the codepen.
https://codepen.io/cartoonzzy/pen/PoGYowZ
I am using this style to change the appearence of a checkbox:
th .checkbox label::before,th .checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
th .checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -21px;
top: 0;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
this works perfectly for before and after but the interdeterminate style in chrome do not have the correct position. So i tried it with:
th .checkbox label::indeterminate {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -20px;
top: 0;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
but it does not work :(. how could I fix this and give the indeterminate at least a left: -21px; style.
thank you in advance!
indeterminate is a pseudo class so it starts with : while before and after are pseudo elements and start with ::
th .checkbox label:indeterminate {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -20px;
top: 0;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
Please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
and https://developer.mozilla.org/en-US/docs/Web/CSS/::before
90% of my website is Mobile-Friendly (everything resizes and such), but for some reason my footer is being basically completely cut off on mobile.
The way I have it setup currently is exactly how I would like it to be setup. This is what it looks like on mobile:
$(function() {
$('.navigation .nav-toggle').on('click', function() {
$('.wrapper').toggleClass('open');
});
});
$(function() {
$('.navigation ul li .home a:not(.navigation .nav-toggle)').on('click', function() {
$('.navigation ul li').removeClass('active');
$(this).addClass('active');
});
});
$(function() {
$('.navigation ul li.home a').addClass('active');
});
body {
margin: 0;
padding: 0;
font-family: sans-serif;
align-items: center;
background: url("../images/bg.png") no-repeat;
background-size: cover;
}
html {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
.navigation {
width: 100%;
}
.navigation ul {
overflow: hidden;
color: white;
padding: 0;
text-align: right;
margin: 0;
margin-right: 15px;
}
.navigation ul li {
padding: 17px 12px;
display: inline-block;
}
.navigation ul li a {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
.navigation ul li a:hover {
color: #00D5C2;
}
.navigation ul li a {
text-decoration: none;
color: white;
font-size: 115%;
display: block;
}
.side-nav {
position: fixed;
width: 220px;
height: 150vh;
background-color: #2D2D2D;
transform: translateX(-100%);
transition: transform 0.4s ease;
}
.side-nav ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 0;
}
.side-nav ul li {
border-bottom: 1px solid gray;
border-width: 100%;
margin: 5px;
}
.outerwrapper {
height: 100vh;
display: block;
overflow-x: hidden;
position: relative;
}
.wrapper {
height: 100vh;
display: block;
transform: translateX(-100);
transition: transform 0.6s ease;
min-height: 100%;
position: relative;
}
.wrapper.open {
transform: translateX(220px);
background-color: rgba(84, 84, 84, 0.6);
}
.side-nav ul li a {
padding: 10px;
display: block;
color: gray;
text-decoration: none;
}
.side-nav ul li a:hover {
color: white;
text-decoration: none;
}
.side-nav.open {
transform: translateX(0);
}
.navigation .nav-toggle {
display: none;
float: left;
padding: 20px 30px 20px 30px;
cursor: pointer;
}
.footer {
margin-top: -5em;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(237, 237, 237, 0.2);
position: relative;
height: 70px;
z-index: -1;
}
.footerinfo {
margin-top: 20px;
}
.footerinfo p {
vertical-align: middle;
padding: 25px;
color: white;
text-align: center;
;
}
.navigation ul li a.active {
color: #00F0DB;
}
#logo img {
max-width: 100%;
height: auto;
width: auto\9;
display: block;
margin: 0 auto;
}
.footerlogo img {
margin-bottom: -65px;
margin-left: auto;
margin-right: auto;
}
.about-btn {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
-webkit-transition: border-color 0.4s;
-moz-transition: border-color 0.4s;
-ms-transition: border-color 0.4s;
-o-transition: border-color 0.4s;
transition: border-color 0.4s;
font-size: 135%;
text-transform: uppercase;
text-decoration: none;
vertical-align: middle;
width: auto;
display: block;
}
.about-btn a {
-webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
-webkit-transition: border-color 0.4s;
-moz-transition: border-color 0.4s;
-ms-transition: border-color 0.4s;
-o-transition: border-color 0.4s;
transition: border-color 0.4s;
color: #3A9DA4;
border-radius: 9px;
padding: 10px 20px;
border: solid #3A9DA4 3px;
text-decoration: none;
font-size: 20px;
transition: all 0, 4s;
}
.about-btn li {
list-style-type: none;
margin: auto;
align-items: center;
width: 50%;
text-align: center;
}
.about-btn a:hover {
border-color: white;
color: white;
text-decoration: none;
font-size: 20px;
transition: scale(1, 1)
}
#media screen and (max-width: 700px) {
.navigation ul li {
display: none;
}
.navigation .nav-toggle {
display: inline;
}
.about-btn a {
font-size: 15px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outerwrapper">
<div class="wrapper">
<div class="side-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Repo</li>
<li>Code</li>
<li class="pluginrequests">Request Plugin</li>
</ul>
</div>
<div class="navigation">
<ul>
<li class="nav-toggle">☰</li>
<li class="home">Home</li>
<li class="repo">Repo</li>
<li class="pluginrequests">Request Plugin</li>
</ul>
</div>
<div id="logo">
<img src="images/logo.png" alt="Squallz Logo">
</div>
<div class="about-btn">
<li>About Me</li>
</div>
</div>
<div class="footer">
<div class="footerinfo">
<p>Copyright Squallz 2017. Personal website by <b>Squallz</b></p>
</div>
</div>
</div>
Try adding this in your css and view again in your mobileL
.outerwrapper {
height: 100%!important;
}
You need to set the css of the footer class to:
z-index: 999 !important;
position: fixed !important;
bottom:0 !important;
background-color: rgba(237, 237, 237, 0.2);
I used a piece of code for creating a toggle button (on/off switch) to use for a particular functionality.the functionality includes that on switch of the button from one to other the screen has to display data as tabs or All.
How can i get the value that has been clicked when toggled switch.
This is the html:
<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>
And this is the css:
.onoffswitch {
position: relative; width: 35px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
display:inline-block;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 16px;
}
.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: 12px; padding: 0; line-height: 12px;
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: "";
padding-left: 10px;
background-color: #2FCCFF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #2FCCFF; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 13px; margin: -0.5px;
background: #FFFFFF;
border: 2px solid #999999; border-radius: 16px;
position: absolute; top: 0; bottom: 0; right: 19px;
-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;
}
The text has to be outside the switch on the left and right. Tabs on left and all on right.
How can i get what has been selected and display the content accordingly?
I am not sure I have understand your question clearly. I have updated your jsfiddle and mentioned below. Is it something like you want it?
$('#myonoffswitch').click(function(){
$('.tab').hide();
if($('#myonoffswitch').attr('checked') == "checked")
{
$('#yes').show();
}
else
{
$('#no').show();
}
//alert($('#myonoffswitch').attr('checked'));
});
http://jsfiddle.net/5jDdg/1/
<?php if((#$personal_expense_itemize=="Y")||(#$personal_expense_itemize=="on")){
$checked = 'checked';
}?>
<div>
<div class="onoffswitch">
<input id="myonoffswitch" class="onoffswitch-checkbox" name="personal_expense_itemize" type="checkbox" <?php echo #$checked;?>>
<label for="myonoffswitch" class="onoffswitch-label">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
</div>