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>
Related
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 just started working with html and download what I thought it was a simple template. Now I have been trying to add drop down menu and add 2 items to the right corresponding to register/login. I tried creating new divs, ul's... But it never seems to line up or items go missing.
#import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu>ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu {
width: auto;
border-bottom: 3px solid #47c9af;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu ul {
background: #ffffff;
}
#cssmenu>ul>li {
float: left;
}
#cssmenu.align-center>ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center>ul>li {
display: inline-block;
float: none;
}
#cssmenu.align-right>ul>li {
float: right;
}
#cssmenu.align-right>ul>li>a {
margin-right: 0;
margin-left: -4px;
}
#cssmenu>ul>li>a {
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
}
#cssmenu>ul>li.active>a,
#cssmenu>ul>li:hover>a,
#cssmenu>ul>li>a:hover {
color: #ffffff;
}
#cssmenu>ul>li>a:after {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: perspective(5px) rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
#cssmenu>ul>li.active>a:after,
#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li>a:hover:after {
background: #47c9af;
}
#import url(http://fonts.googleapis.com/css?family=Raleway);
#logincssmenu,
#logincssmenu ul,
#logincssmenu ul li,
#logincssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#logincssmenu:after,
#logincssmenu>ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#logincssmenu {
width: auto;
border-bottom: 3px solid #47c9af;
font-family: Raleway, sans-serif;
line-height: 1;
}
#logincssmenu ul {
background: #ffffff;
}
#logincssmenu>ul>li {
float: right;
}
#logincssmenu.align-center>ul {
font-size: 0;
text-align: center;
}
#logincssmenu.align-center>ul>li {
display: inline-block;
float: none;
}
#logincssmenu.align-right>ul>li {
float: right;
}
#logincssmenu.align-right>ul>li>a {
margin-right: 0;
margin-left: -4px;
}
#logincssmenu>ul>li>a {
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
}
#logincssmenu>ul>li.active>a,
#logincssmenu>ul>li:hover>a,
#logincssmenu>ul>li>a:hover {
color: #ffffff;
}
#logincssmenu>ul>li>a:after {
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: perspective(5px) rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom;
}
#logincssmenu>ul>li.active>a:after,
#logincssmenu>ul>li:hover>a:after,
#logincssmenu>ul>li>a:hover:after {
background: #47c9af;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 15px;
font-size: 15px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #47c9af;
display: block;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
width: 100%;
height: 120%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
content: "";
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: rotateX(2deg);
-webkit-transform-origin: bottom;
-moz-transform: perspective(5px) rotateX(2deg);
-moz-transform-origin: bottom;
transform: rotateX(2deg);
transform-origin: bottom;
color: #ffffff;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
z-index: 2;
padding: 18px 25px 12px 25px;
font-size: 15px;
font-weight: 400;
text-decoration: none;
color: #444444;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
margin-right: -4px;
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/loginstyle.css">
<link rel="stylesheet" href="css/dropdownstyle.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>CSS MenuMaker</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Company</a></li>
<li><a href='#'>Contact</a></li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div id='logincssmenu'>
<ul>
<li><a href='#'>Login</a></li>
</ul>
</div>
</ul>
</div>
</body>
<html>
I also tried to mimic the style of the dropdown button by copy pasting some of the code from the original styles.css but with no good results. I started only a few days ago but I don't get why sometimes it disappears and disalligns.
Here is the original template. http://cssmenumaker.com/menu/flat-tabbed-menu
Put this in the first .I think this should do it.
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Company</a></li>
<li><a href='#'>Contact</a></li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div id='logincssmenu'>
<li><a href='#'>Login</a></li>
</div>
Advice:If you are new to html&css,try to make some easy tutorials.Don't download a template beacuse you will not understand what's going on.
I am trying to build a slide down search box. I want the search box to slide down once your press the search icon. (I want it exactly like this - http://www.marieclaire.co.uk/). When it slides down I want it to be full width. I have started to build the actual search box, but I can't figure out how to get it to slide down from a search icon. Does anyone have any solutions?
jsfiddle - https://jsfiddle.net/zx06d7vz/ (search box at bottom of screen)
/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
.search-site {
float: right;
font-size: 1.2em;
height: 50px;
line-height: 50px;
padding: 0 15px
}
.search-form {
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out 250ms ease;
-moz-transition: all .3s ease-in-out 250ms ease;
-ms-transition: all .3s ease-in-out 250ms ease;
-o-transition: all .3s ease-in-out 250ms ease;
transition: all .3s ease-in-out 250ms ease;
background: #fff;
height: 0;
left: 50%;
opacity: 0;
overflow: hidden;
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
position: absolute;
top: calc(100% + 1px);
transform: translateX(-50%);
width: 100vw;
z-index: 999999
}
.search-form.search-visible {
opacity: 1;
height: 200px
}
.search-form.search-form-permanent {
border-bottom: none;
height: 100px !important;
left: 0;
opacity: 1 !important;
padding: 0;
position: relative;
transform: none;
width: 100%;
z-index: 5
}
.search-form.search-form-permanent .input-group {
padding: 0;
top: 0
}
.search-form.search-form-permanent .button-search {
color: #33f;
outline: none
}
.search-form.search-form-permanent .button-search:hover {
color: #b4c5cd
}
.search-form .input-group {
padding: 0 10px;
position: relative;
top: 72px;
width: 100%
}
.search-form .form-control {
background: #fff;
border: none;
border-bottom: 1px #b4c5cd solid;
border-radius: 0;
box-shadow: none;
float: left;
height: auto;
padding: 0;
outline: none;
width: calc(100% - 36px) !important
}
.search-form .form-control:focus {
background: #fff !important
}
.search-form .button-search {
background: transparent;
border: none;
float: right;
font-size: 1.4em;
padding: 6px 0 0 0;
width: 36px
background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
}
<form role="search" method="get" class="search-form form-inline search-visible" action="">
<div class="input-group">
<input type="search" value="" name="s" class="input-sm search-field form-control" placeholder="Search">
<button type="submit" class="button-search icon-search"></button>
</div>
</form>
Test that one.
HTML:
<h1 class="search">S</h1>
<form role="search" method="get" class="search-form form-inline" action="">
<div class="input-group">
<input type="search" value="" name="s" class="input-sm search-field form-control" placeholder="Search">
<button type="submit" class="button-search icon-search"></button>
</div>
</form>
CSS
/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
.search-site {
float: right;
font-size: 1.2em;
height: 50px;
line-height: 50px;
padding: 0 15px
}
.search-form {
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out 250ms ease;
-moz-transition: all .3s ease-in-out 250ms ease;
-ms-transition: all .3s ease-in-out 250ms ease;
-o-transition: all .3s ease-in-out 250ms ease;
transition: all .3s ease-in-out 250ms ease;
background: #fff;
left: 50%;
opacity: 0;
overflow: hidden;
padding-left: calc((100vw - 1200px) / 2);
padding-right: calc((100vw - 1200px) / 2);
position: absolute;
top: -100px;
transform: translateX(-50%);
width: 100vw;
z-index: 999999
}
.search-form.search-visible {
opacity: 1;
height: 200px;
top: 0;
}
.search-form.search-form-permanent {
border-bottom: none;
height: 100px !important;
left: 0;
opacity: 1 !important;
padding: 0;
position: relative;
transform: none;
width: 100%;
z-index: 5
}
.search-form.search-form-permanent .input-group {
padding: 0;
top: 0
}
.search-form.search-form-permanent .button-search {
color: #33f;
outline: none
}
.search-form.search-form-permanent .button-search:hover {
color: #b4c5cd
}
.search-form .input-group {
padding: 0 10px;
position: relative;
top: 72px;
width: 100%
}
.search-form .form-control {
background: #fff;
border: none;
border-bottom: 1px #b4c5cd solid;
border-radius: 0;
box-shadow: none;
float: left;
height: auto;
padding: 0;
outline: none;
width: calc(100% - 36px) !important
}
.search-form .form-control:focus {
background: #fff !important
}
.search-form .button-search {
background: transparent;
border: none;
float: right;
font-size: 1.4em;
padding: 6px 0 0 0;
width: 36px
background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
}
jQuery:
$('.search').on('click', function () {
$('.search-form').addClass('search-visible');
});
I am making a list with some text and fontawesome icons. I am able to centre the text vertically, but not the icon. Here you can see what I mean:
Here is my code:
.fa-info {
color: #90A4AE;
position: fixed;
/*position is fixed so I can align it to the edge of the page*/
width: 55px;
left:0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
z-index: 11;
height: 60px;
}
#sidebar ul {
width: 200px;
float: right;
left: 70px;
top: 23vh;
position: absolute;
text-align: left;
padding:0;
margin:0;
}
#sidebar li {
white-space: nowrap;
color: #90A4AE;
list-style-type: none;
font-size: 30px;
font-family: 'NeutraFaceMedium';
text-align: left;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
height: 60px;
line-height: 60px;
}
<ul>
<li><i class="fa fa-info fa-small"></i>About Us</li>
</ul>
I would like to be able to centre the fontawesome icon vertically so it is on the same level as the text.
Thanks
Please try this:
ul
{
list-style-type: none;
}
#sidebar ul {
width: 200px;
float: right;
left: 70px;
top: 23vh;
position: absolute;
text-align: left;
padding:0;
margin:0;
}
#sidebar li {
white-space: nowrap;
color: #90A4AE;
list-style-type: none;
font-size: 30px;
font-family: 'NeutraFaceMedium';
text-align: left;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
height: 60px;
line-height: 60px;
}
.fa-info {
color: #90A4AE;
padding: 9px;
font-size: 20px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
z-index: 11;
}
JSFiddle: http://jsfiddle.net/JfGVE/1224/
In your class .fa-info position and width is what causing the issue. Remove or comment them out and it works great.
.fa-info {
color: #90A4AE;
left:0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
z-index: 11;
height: 60px;
}
Change the vertical align:
<i class="fa fa-info fa-small" style="vertical-align: middle">
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>