$(document).ready(function(){
if($('.checkbox1').attr('checked') == true) {
$(".worddoc").animate({opacity:1},700);
}
})
.checkbox1 {
width: 50px;
height: 26px;
position: absolute;
display: none;
}
.checkbox1:not(checked) + label {
padding-right: 100%;
position: relative;
}
.checkbox1:not(checked) + label:after {
content: '';
position: absolute;
top: -4px;
left: 71%;
width: 50px;
height: 26px;
border-radius: 13px;
background: #CDD1DA;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
cursor: pointer;
float: right;
}
.checkbox1:not(checked) + label:not(checked):before {
content: '';
position: absolute;
width: 22px;
height: 22px;
border-radius: 10px;
background: #FFF;
left: 73%;
top: -2px;
z-index: 998;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
cursor: pointer;
float: right;
}
.checkbox1:checked + label:after {
background: #9FD468;
}
.checkbox1:checked + label:before {
left: 82%;
}
.label1 {
color: white;
font-family: OpenSansRegular;
font-size: 15px;
position: absolute;
float: left;
top: 30px;
margin-left: 0;
}
.worddoc {
width: 40px;
height: 40px;
background: orange;
z-index: 999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" class="checkbox1" id="checkbox1" autocomplete="off"/>
<label for="checkbox1" class="label1">jQuery</label>
<div class="worddoc"></div>
Hey guys. I want my 1 element appears when checkbox is active, but it gets active right away after loading DOM on website. autocomplete="off" attribute doesn't solve the problem. HELP! I rely on you, guys!
$(document).ready(function(){
$('.checkbox1').click(function () {
if($(this).attr('checked')) {
$(".worddoc").animate({opacity:1,right:0},700);
}
});
});
Related
I tried to find a solution and people always gave either solutions with html or jQuery or what have you.
So I made one and thought it might be helpful for others.
let defaultSetting = "off"
const toggleButton = document.createElement('toggleButton');
toggleButton.onclick = function(){toggleSwitchTransformFunction()};
document.body.appendChild(toggleButton);
const toggleSwitchCircle = document.createElement('toggleSwitchCircle');
toggleButton.appendChild(toggleSwitchCircle);
function toggleSwitchTransformFunction() {
if(defaultSetting == "off"){
defaultSetting = "on"
toggleSwitchCircle.style.transform = "translateX(100%)"
toggleButton.style.background = "black"
// execute code when ON
} else if(defaultSetting == "on"){
defaultSetting = "off"
toggleSwitchCircle.style.transform = "translateX(0%)"
toggleButton.style.background = "white"
// execute code when OFF
}
}
toggleButton{
width: 84px;
min-width: 84px;
display: block;
padding: 4px;
border: 1px black solid;
border-radius: 60px;
transition: 0.5s;
}
toggleSwitchCircle {
display: block;
width: 40px;
height: 40px;
border: 1px black solid;
background-color: white;
border-radius: 50%;
transition: 0.5s;
}
You can also easily do a pure CSS toggle by using an input and label.
https://codepen.io/seanstopnik/pen/f0d8ba0f9b0a317c324ee16f49ba945c
document.body.innerHTML = document.body.innerHTML +
"<div class=\"toggle\"><input id=\"toggle1\" class=\"toggle__checkbox\" type=\"checkbox\"><label for=\"toggle1\" class=\"toggle__label\"></label></div>";
/* For demo only */
body {
font-family: sans-serif;
background: #2d4a65;
padding: 60px;
}
/* Toggle */
.toggle {
position: relative;
width: 80px;
height: 40px;
border-radius: 20px;
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
background-color: #1e3648;
overflow: hidden;
}
.toggle__checkbox {
position: absolute;
left: -9999px;
}
.toggle__label {
position: relative;
display: inline-block;
top: 4px;
left: 4px;
width: 32px;
height: 32px;
border-radius: 16px;
background-color: #fff;
transition: all 0.25s ease-in-out;
cursor: pointer;
}
.toggle__label:before, .toggle__label:after {
position: absolute;
top: 0;
color: #fff;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
line-height: 32px;
transition: all 0.15s ease-in-out;
}
.toggle__label:before {
left: -30px;
content: "on";
opacity: 0;
}
.toggle__label:after {
left: 37px;
content: "off";
opacity: 1;
}
.toggle__checkbox:checked ~ .toggle__label {
left: 44px;
}
.toggle__checkbox:checked ~ .toggle__label:before {
opacity: 1;
}
.toggle__checkbox:checked ~ .toggle__label:after {
opacity: 0;
}
I want to show different contents depending on the selected link, because for now all links take the same class which have only one content. I don't know how to add another div for another link using the same class or should I create a different class of each div/link ?
https://jsfiddle.net/sx6L93k1/16/
// Reveal & Close Panels
var revealPanel = function(buttonReveal, panel, buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click', function() {
$(panel).addClass('expanded');
console.log('hidefor-' + panel);
$(".content").addClass('hidefor-' + panel.substr(1));
$(".ip").addClass('hidefor-' + panel.substr(1));
});
// Close panel
$(buttonClose).on('click', function() {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-up');
$(".ip").removeClass('hidefor-panel-up');
});
// ESC to close Panel
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-up');
$(".ip").removeClass('hidefor-panel-up');
}
});
});
}
revealPanel('.reveal-up', '.panel-up', '.close');
revealPanel('.reveal-left', '.panel-left', '.close');
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown", function(e) {
if (e.keyCode == 76) {
console.log(e.keyCode);
$('.panel-left').addClass('expanded');
}
if (e.keyCode == 82) {
$('.panel-up').addClass('expanded');
$(".content").addClass('hidefor-panel-up');
$(".ip").addClass('hidefor-panel-up');
}
});
});
.content {
padding: 50px;
position: absolute;
width: 90%;
-webkit-transition: all .7s ease;
transition: all .7s ease;
transform: scale(1);
opacity: 1;
bottom: 10%;
}
.content.hidefor-panel-up {
bottom: 20%;
transform: scale(0.95);
opacity: 0;
}
.ip {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
-webkit-transition: all 1s ease;
transition: all 1s ease;
opacity: 1;
top: 0;
opacity: 1;
z-index: -5;
position: absolute;
}
.ip.hidefor-panel-up {
opacity: 1;
top: 10%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console", Monaco, monospace;
background: #06113E;
line-height: 1.5em;
font-size: 15px;
overflow: hidden;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1,
h2,
h3 {
margin-bottom: 0.5em;
}
ul {
margin: 30px 40px;
}
li {
margin: 5px 0;
}
.panel {
padding: 20px;
}
.panel-content {
position: relative;
/*background: #efefef;*/
padding: 30px 50px;
overflow-y: auto;
height: 100%;
}
.panel-content .close {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #ffffff;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-content .close:before {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #ffffff;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-left {
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
left: -100%;
width: 45%;
}
.panel-left.expanded {
left: 0;
}
.panel-up {
z-index: 10;
position: fixed;
display: block;
bottom: 0;
-webkit-transition: all .7s ease;
transition: all 0.7s ease-out;
bottom: -20%;
width: 100%;
}
.panel-up.expanded {
bottom: 0;
}
.reveal-left {
float: left;
}
.reveal-up {
float: right;
}
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
}
.nav button {
padding: 4px 6px;
}
.nav a {
font-weight: bold;
color: #222;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav" style="color:white;z-index:99999999;position:absolute;">
<a style="color:white;" href="#" class="reveal-up">First Panel</a>
<br>
<a style="color:white;" href="#" class="reveal-up">Second panel</a>
</div>
<div class="panel-up">
<div class="panel-content">
<div class="close"></div>
<p style="margin-bottom: 30px; color:white;">up Panel</p>
<div class="bottom">
Some content here.
</div>
</div>
</div>
<img class="ip" style="opacity:1; z-index:-5; position:absolute; transform: scale(1.2)" src="https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixlib=rb-1.2.1&w=1000&q=80">
<div class="content" style="color:white">
<h2 style="margin-top:10px;">Side Panels Test</h2>
<p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts
as seen below:</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>L</code> - Open Right panel</li>
<li><code>R</code> - Open Left panel</li>
</ul>
</div>
I created a simple hamburger menu for my site, I just can not get it to close after clicking on a link and going to the anchor that I put in and that also closes when I click off the menu.
My HTML is:
$(document).ready(function() {
$('.navbar-fostrap').click(function() {
$('.nav-fostrap').toggleClass('visible');
$('body').toggleClass('cover-bg');
});
});
nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
#media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>
I am developing this site for a professional aptitude project of my course so any help was welcome. If anyone could help me I was very grateful, thank you.
You can use this part of code and also add any other logic you want.
$(document).click(function(e) {
var target = e.target;
if (
!$(target).is(".navbar-fostrap") &&
!$(target).parents(".navbar-fostrap").length &&
!$(target).parents(".nav-fostrap").length
) {
$(".nav-fostrap").removeClass("visible");
$("body").removeClass("cover-bg");
}
});
Full code here
$(document).ready(function() {
$(".navbar-fostrap").click(function() {
$(".nav-fostrap").toggleClass("visible");
$("body").toggleClass("cover-bg");
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is(".navbar-fostrap") &&
!$(target).parents(".navbar-fostrap").length &&
!$(target).parents(".nav-fostrap").length
) {
$(".nav-fostrap").removeClass("visible");
$("body").removeClass("cover-bg");
}
});
});
body {
background-color: red;
}
nav {
height: 60px;
text-align: center;
position: relative;
width: width:100%;
margin: auto;
z-index: 100000;
}
.navbar-default {
transition: 500ms ease;
background: transparent;
}
.navbar-default.scrolled {
background: rgba(28, 28, 28, 0.8);
}
a.title {
float: left;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
}
.title {
float: left;
display: inline-block;
padding: 0;
margin-top: 5px;
list-style: none;
height: 55px;
}
.nav-fostrap ul {
list-style-type: none;
margin-top: 5px;
padding: 0;
display: block;
float: right;
width: auto;
}
.nav-fostrap ul li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
list-style: none;
height: 60px;
}
a.menu {
font-family: Montserrat, Arial;
font-weight: 700;
position: relative;
display: inline-block;
cursor: pointer;
padding: 8px 0;
margin-top: 14.5px;
margin-bottom: 10.5px;
color: #fff;
text-decoration: none;
height: 40px;
top: -10px;
}
a:hover.menu {
color: #fff;
text-decoration: none;
}
.menu a:before,
a:after {
content: '';
position: absolute;
width: 0%;
height: 2px;
bottom: -2px;
background: #fff;
}
.menu a:before {
left: 0;
}
.menu a:after {
right: 0;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:before {
background: #fff;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu a:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
.title-on-mobile {
display: none;
}
#media only screen and (max-width:768px) {
a.title {
float: none;
font-size: 25px;
color: white;
font-family: quantum;
height: 55px;
padding-top: 2px;
width: 100%;
text-align: center;
position: fixed;
left: -50px;
}
.nav-fostrap {
background: #1c1c1c;
width: 200px;
height: 100%;
display: block;
position: fixed;
left: -200px;
top: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
margin: 0;
border: 0;
border-radius: 0;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 105;
}
.nav-fostrap.visible {
left: 0px;
-webkit-transition: left 0.25s ease;
-moz-transition: left 0.25s ease;
-ms-transition: left 0.25s ease;
-o-transition: left 0.25s ease;
transition: left 0.25s ease;
z-index: 90;
}
.nav-bg-fostrap {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 60px;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
background: transperant;
padding: 12px 0 0 10px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 100;
}
.navbar-fostrap {
display: inline-block;
vertical-align: middle;
height: 50px;
cursor: pointer;
margin-top: 5px;
position: absolute;
top: 0;
left: 0;
padding: 12px;
z-index: 102;
}
.navbar-fostrap span {
height: 2px;
background: #fff;
margin: 5px;
display: block;
width: 20px;
}
.navbar-fostrap span:nth-child(2) {
width: 20px;
}
.navbar-fostrap span:nth-child(3) {
width: 20px;
}
.nav-fostrap ul {
padding-top: 50px;
}
.nav-fostrap li {
display: block;
}
.nav-fostrap li a {
display: block;
color: #505050;
font-weight: 600;
}
.nav-fostrap li:first-child:hover a {
border-radius: 0;
}
.cover-bg {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu navbar navbar-default navbar-fixed-top">
<div class="headercontainer">
<a class="title" href="#seccao-inicio"><img src="img/logo.png" alt="logo" width="80" href="#" style="position: relative;margin-left: 12px; float:right; top:2.5px;position: relative;" /></a>
<div class='nav-fostrap'>
<ul class="menu">
<li><a class="menu" href="#seccao-historia" style="color: white;">História</a></li>
<li><a class="menu" href="#seccao-network" style="color: white;">Network</a></li>
<li><a class="menu" href="#seccao-fundadores" style="color: white;">Fundadores</a></li>
<li><a class="menu" href="contacto.html" style="color: white;">Contacto</a></li>
</ul>
</div>
<div class='nav-bg-fostrap'>
<div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
</div>
</div>
</nav>
Hope it helps.
To be precise I have:
$('.vidsh_sub_btn').on('click', function() {
$('.vidsub_rld_c').toggleClass('goright');
// toggle godown class while goright class is completed moving left to 75px
$('.vidsub_rld_c').toggleClass('godown');
$('.vidsub_rld_c').toggleClass('goleft');
$('.vidsub_rld_c').toggleClass('gotop');
});
.vidsubbtn_c {
position: absolute;
height: 34px;
width: 84px;
background: black;
overflow: hidden;
}
.vidsub_rld_c {
position: absolute;
height: 10px;
width: 10px;
background: white;
transition: all 700ms;
left: 0px;
z-index: 50;
}
.vidsub_rld_c.goright {
left: 75px;
}
.vidsub_rld_c.godown {
top: 25px;
}
.vidsub_rld_c.goleft {
left: 0px;
}
.vidsub_rld_c.gotop {
top: 0px;
}
.vidsh_sub_btn {
position: absolute;
z-index: 100;
margin-top: 2px;
margin-left: 2px;
height: 30px;
width: 80px;
overflow: hidden;
background: #8495a4;
-moz-border-radius: 2px;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
<div class="vidsub_rld_c"></div>
<input type="button" class="vidsh_sub_btn" value="Add" />
</div>
What I basically want is that vidsub_rld_c should complete a circle of the button which basically would look like a loading object.
But the way I have implemented in my script is that when the click event listener is called it executes all of the toggle classes at the same time which makes the loader looking like its not moving.
JSFiddle
You could toggle one class, and use CSS animations to create the effect.
fiddle
A basic example:
$('.vidsh_sub_btn').on('click', function() {
$('.vidsub_rld_c').toggleClass('animate');
});
.vidsubbtn_c {
position: absolute;
height: 34px;
width: 84px;
background: black;
overflow: hidden;
}
.vidsub_rld_c {
position: absolute;
height: 10px;
width: 10px;
background: white;
transition: all 700ms;
left: 0px;
z-index: 50;
}
.vidsub_rld_c.animate {
animation: moveAround 1s infinite;
}
#keyframes moveAround {
0% {
left: 0;
top: 0;
}
25% {
left: 75px;
top: 0;
}
50% {
left: 75px;
top: 25px;
}
75% {
left: 0;
top: 25px;
}
100% {
left: 0;
top: 0;
}
}
.vidsh_sub_btn {
position: absolute;
z-index: 100;
margin-top: 2px;
margin-left: 2px;
height: 30px;
width: 80px;
overflow: hidden;
background: #8495a4;
-moz-border-radius: 2px;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
<div class="vidsub_rld_c"></div>
<input type="button" class="vidsh_sub_btn" value="Add" />
</div>
You could use jQuery UI so you can chain your class toggles
like:
$('.vidsh_sub_btn').on('click', function() {
$('.vidsub_rld_c').toggleClass('goright', 2000).promise().done(function(){
$('.vidsub_rld_c').toggleClass('godown', 2000);
});
});
https://codepen.io/anon/pen/QajaPm
Updated fiddle.
You could use setInterval to complete the circle by toggling the classes continuously after every 'x' time, like :
$('.vidsh_sub_btn').on('click', function() {
setInterval(function() {
$('.vidsub_rld_c').toggleClass('godown');
$('.vidsub_rld_c').toggleClass('goright');
}, 700);
});
Code:
$('.vidsh_sub_btn').on('click', function() {
setInterval(function() {
$('.vidsub_rld_c').toggleClass('godown');
$('.vidsub_rld_c').toggleClass('goright');
}, 700);
});
.vidsubbtn_c {
position: absolute;
height: 34px;
width: 84px;
background: black;
overflow: hidden;
}
.vidsub_rld_c {
position: absolute;
height: 10px;
width: 10px;
background: white;
transition: all 700ms;
left: 0px;
z-index: 50;
}
.vidsub_rld_c.goright {
left: 75px;
}
.vidsub_rld_c.godown {
top: 25px;
}
.vidsh_sub_btn {
position: absolute;
z-index: 100;
margin-top: 2px;
margin-left: 2px;
height: 30px;
width: 80px;
overflow: hidden;
background: #8495a4;
-moz-border-radius: 2px;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
<div class="vidsub_rld_c"></div>
<input type="button" class="vidsh_sub_btn" value="Add" />
</div>
I am creating a search box query, with the following css animations, which is displayed in the snippet. It works like I need it to, but I just want to add two more things to it, to make it work for me.
How do I make the hit area of the search icon, expand the entire width of the header to make it more intuitive? At the moment, the hit area is fixed to the size ratio of the search icon.
I would also like to know, how do I display the search icon to the left of the placeholder text after it has been clicked?
Hope this makes sense
$('.header').on('click', '.search-toggle', function(e) {
var selector = $(this).data('selector');
$(selector).toggleClass('show').find('.search-input').focus();
$(this).toggleClass('active');
e.preventDefault();
});
#import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
font-family: 'Roboto', sans-serif;
}
.header {
max-width: 250px;
margin: 2em auto 10em;
}
.header-nav {
position: relative;
padding-right: 3em;
}
.header-nav:before,
.header-nav:after {
content: '';
display: table;
}
.header-nav:after {
clear: both;
}
.menu {
display: inline-block;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu span {
display: inline-block;
}
.menu .text {
color: #0097bf;
display: block;
padding: 10px;
position: relative;
transition: color 0.3s;
text-decoration: none;
}
.search-button {
position: absolute;
right: 20px;
top: 50%;
transform: translate(0, -50%);
}
/* search icon */
.search-toggle {
position: relative;
display: block;
height: 10px;
width: 10px;
}
.search-toggle::before,
.search-toggle::after {
content: '';
position: absolute;
display: block;
transition: all 0.1s;
}
.search-toggle::before {
border: 2px solid #0097bf;
border-radius: 50%;
width: 100%;
height: 100%;
left: -2px;
top: -2px;
}
.search-toggle::after {
height: 2px;
width: 7px;
background: #0097bf;
top: 10px;
left: 8px;
transform: rotate(45deg);
}
/* x icon */
.search-toggle.active::before {
width: 0;
border-width: 1px;
border-radius: 0;
transform: rotate(45deg);
top: -1px;
left: 4px;
}
.search-toggle.active::after {
width: 12px;
left: -1px;
top: 4px;
}
.search-input:focus {
outline: none;
}
#header-2 {
overflow: hidden;
}
#header-2 .menu span {
opacity: 1;
transition: transform 0.3s, opacity 0.2s 0.1s;
}
#header-2 .menu span .text:nth-child(1) {
transition-delay: 0.4s;
}
#header-2 .search-box {
position: absolute;
left: 0;
height: 100%;
padding-left: 2em;
transform: translateX(20%);
opacity: 0;
transition: all 0.4s 0.3s;
}
#header-2 .search-box .search-input {
border: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#header-2 .search-box .search-toggle {
width: 14px;
height: 14px;
padding: 0;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
#header-2.show .menu span {
transform: scale(0.8);
opacity: 0;
}
#header-2.show .search-box {
width: calc(100% - 5em);
transform: translateX(0);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header-2" class="header">
<nav class="header-nav">
<div class="search-button">
</div>
<p class="menu">
<span><span class="text">Search</span></span>
</p>
<form action="" class="search-box">
<input type="text" class="text search-input" placeholder="Type here to search..." />
</form>
</nav>
</header>
this is how you can make full header 'clickable' to start search.
I placed the icon to the left where your left padding was, see if demo is what you need
$('.header:not(.show)').on('click', '.header-nav', function(e) {
var selector = $(this).find('.search-toggle').data('selector');
$(selector).toggleClass('show').find('.search-input').focus();
$(this).toggleClass('active');
e.preventDefault();
});
#import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
font-family: 'Roboto', sans-serif;
}
.header {
max-width: 250px;
margin: 2em auto 10em;
}
.header-nav {
position: relative;
padding-right: 3em;
}
.header-nav:before,
.header-nav:after {
content: '';
display: table;
}
.header-nav:after {
clear: both;
}
.menu {
display: inline-block;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu span {
display: inline-block;
}
.menu .text {
color: #0097bf;
display: block;
padding: 10px;
position: relative;
transition: color 0.3s;
text-decoration: none;
}
.search-button {
position: absolute;
right: 20px;
top: 50%;
transform: translate(0, -50%);
}
.header.show .search-button{
left: .3em; transition: all 500ms;
}
/* search icon */
.search-toggle {
position: relative;
display: block;
height: 10px;
width: 10px;
}
.search-toggle::before,
.search-toggle::after {
content: '';
position: absolute;
display: block;
transition: all 0.1s;
}
.search-toggle::before {
border: 2px solid #0097bf;
border-radius: 50%;
width: 100%;
height: 100%;
left: -2px;
top: -2px;
}
.search-toggle::after {
height: 2px;
width: 7px;
background: #0097bf;
top: 10px;
left: 8px;
transform: rotate(45deg);
}
/* x icon */
.search-toggle.active::before {
width: 0;
border-width: 1px;
border-radius: 0;
transform: rotate(45deg);
top: -1px;
left: 4px;
}
.search-toggle.active::after {
width: 12px;
left: -1px;
top: 4px;
}
.search-input:focus {
outline: none;
}
#header-2 {
overflow: hidden;
}
#header-2 .menu span {
opacity: 1;
transition: transform 0.3s, opacity 0.2s 0.1s;
}
#header-2 .menu span .text:nth-child(1) {
transition-delay: 0.4s;
}
#header-2 .search-box {
position: absolute;
left: 0;
height: 100%;
padding-left: 2em;
transform: translateX(20%);
opacity: 0;
transition: all 0.4s 0.3s;
}
#header-2 .search-box .search-input {
border: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#header-2 .search-box .search-toggle {
width: 14px;
height: 14px;
padding: 0;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
#header-2.show .menu span {
transform: scale(0.8);
opacity: 0;
}
#header-2.show .search-box {
width: calc(100% - 5em);
transform: translateX(0);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header-2" class="header">
<nav class="header-nav">
<div class="search-button">
</div>
<p class="menu">
<span><span class="text">Search</span></span>
</p>
<form action="" class="search-box">
<input type="text" class="text search-input" placeholder="Type here to search..." />
</form>
</nav>
</header>