To modify a searchbox with extra css/jQuery options

To modify a searchbox with extra css/jQuery options - javascript

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>

Related

How to set a background image on a custom javascript component?

In the example, I have a native component with traditional HTML/CSS. I also have a Custom Component. In the native component, you can see that the .anim-link has a background image which works just fine. The exact same CSS is in the custom component as well. The animation is working as expected, but the background image isn't displaying at all.
Why is the background image not displaying in the custom component?
If you'd prefer to fork this Codepen, please do so.
const template = document.createElement('template');
template.innerHTML = `
<style>
a {
text-decoration: none;
position: relative;
color: #005fec;
}
a:before {
content: "";
position: absolute;
border: solid 0px #005fec;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
opacity: 0;
transition: all 0.3s;
transition-timing-function: ease-in-out;
border-radius: 4px;
filter: blur(4px);
}
*:focus {
outline: none;
}
a:focus-visible:before {
content: "";
position: absolute;
border: solid 2px #005fec;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
opacity: 1;
filter: blur(0px);
}
a:focus-visible:before {
left: -4px;
right: -4px;
}
.anim-link {
display: inline-flex;
position: relative;
color: #005fec;
font-size: 1.25rem;
align-items: center;
}
.anim-link span {
background: url("https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg") no-repeat center;
content: "";
height: 15px;
width: 15px;
position: absolute;
right: -20px;
}
.anim-link::after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: -5px;
left: 0;
background-color: #005fec;
transform-origin: bottom right;
transition: transform 0.3s ease-in-out;
}
.anim-link:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
</style>
<slot></slot><span></span>
`;
class CustomAnimLink extends HTMLElement {
static get observedAttributes() {
return ['name', 'destination'];
}
constructor() {
super();
this.showInfo = true;
this.attachShadow({
mode: 'open'
});
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
get anchor() {
return this.shadowRoot.querySelector('a');
}
get name() {
return this.getAttribute('name');
}
set name(value) {
if ('string' === typeof value) {
this.setAttribute('name', value);
}
}
get destination() {
return this.getAttribute('destination');
}
set destination(value) {
if ('string' === typeof value) {
this.setAttribute('destination', value);
}
}
attributeChangedCallback(attrName, oldValue, newValue) {
switch (attrName) {
case 'destination':
this.anchor.href = newValue;
break;
case 'name':
this.anchor.textContent = newValue;
break;
}
}
}
window.customElements.define('custom-anim-link', CustomAnimLink);
/* Roboto Font */
#import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap");
/*resets*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
font-family: "Roboto", sans-serif;
font-size: 16px;
}
.container {
padding: 10px;
}
hr {
margin: 2rem 0;
}
a {
text-decoration: none;
position: relative;
color: #005fec;
}
a:before {
content: "";
position: absolute;
border: solid 0px #005fec;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
opacity: 0;
transition: all 0.3s;
transition-timing-function: ease-in-out;
border-radius: 4px;
filter: blur(4px);
}
*:focus {
outline: none;
}
a:focus-visible:before {
content: "";
position: absolute;
border: solid 2px #005fec;
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
opacity: 1;
filter: blur(0px);
}
a:focus-visible:before {
left: -4px;
right: -4px;
}
.anim-link {
display: inline-flex;
position: relative;
color: #005fec;
font-size: 1.25rem;
align-items: center;
}
.anim-link span {
background: url("https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation.svg") no-repeat center;
content: "";
height: 15px;
width: 15px;
position: absolute;
right: -20px;
}
.anim-link::after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: -5px;
left: 0;
background-color: #005fec;
transform-origin: bottom right;
transition: transform 0.3s ease-in-out;
}
.anim-link:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
<div class="container">
<h1>Native Component</h1>
See all-in-one <span></span>
<hr>
<h1>Custom Component</h1>
<custom-anim-link name="See all-in-one" destination="#"></custom-anim-link>
</div>

Html Transistion lag only for the first time after reload

This is a gif of issue : https://gifyu.com/image/DeGX
And my code: https://jsfiddle.net/Mrsheesh/dj1L3vhq/7
i am using xampp to host this page in locale
and even jsfiddle seems laggy.
I tried to remove the image, and it worked fine.
Is there a way to fix this, without remove the image?
My code:
console.log("msg.js Loaded");
function show_msg() {
document.querySelector(".box-msg").classList.add("active");
document.querySelector(".bg-msg").classList.add("active");
}
function hide_msg() {
document.querySelector(".box-msg").classList.remove("active");
document.querySelector(".bg-msg").classList.remove("active");
}
body {
margin: 0;
}
.bg-msg {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgb(0, 0, 0, 0.5);
opacity: 0;
transition: all 0.5s ease;
}
.bg-msg.active {
visibility: visible;
opacity: 1;
}
.box-msg {
visibility: hidden;
position: fixed;
left: 50%;
top: 10%;
transform: translateX(-50%);
height: 0;
width: 0;
max-width: 550px;
border-radius: 20px;
background-color: white;
border: 1px solid rgb(0, 0, 0, 0.5);
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.box-msg.active {
visibility: visible;
opacity: 1;
height: 400px;
width: 50%;
}
.box-msg .box-head {
height: 20%;
width: 100%;
/* background-color: blue; */
}
/* ==================================Close Button================================= */
.box-msg .box-head .close {
position: absolute;
top: 5px;
left: 5px;
height: 20px;
width: 20px;
border-radius: 5px;
cursor: pointer;
}
.box-msg .box-head .close::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "\D7";
/* use the hex value here... */
font-size: 30px;
color: #FFF;
line-height: 20px;
text-align: center;
}
/* ==================================Head IMG================================= */
.box-msg .box-head .background {
position: absolute;
width: 100%;
height: 20%;
overflow: hidden;
}
.background img {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
width: 300%;
/* animation: 10s left_right forwards; */
}
#keyframes left_right {
from {
left: 0;
}
to {
left: 100%;
}
}
/* ==================================Head Title================================= */
.box-msg .box-head .title {
position: relative;
height: 100%;
margin-left: 25px;
margin-right: 25px;
color: white;
font-size: clamp(10px, 4vw, 35px);
/* line-height: 80px;
text-align: center; */
display: flex;
justify-content: center;
align-items: center;
font-family: BebasNeue-Regular;
letter-spacing: 0.1em;
}
/* ====================================MSG Body================================= */
.box-msg .box-body {
height: 80%;
width: 100%;
/* background-color: brown; */
}
/* ======================================BTN===================================== */
.btn {
cursor: pointer;
width: 100px;
height: 50px;
background: coral;
text-align: center;
line-height: 50px;
}
<div class="btn" onclick="show_msg()">Test</div>
<div class="bg-msg"></div>
<div class="box-msg">
<div class="box-head">
<div class="background">
<img src="./img/background/bg2.jpg" alt="">
</div>
<div class="close" onclick="hide_msg()">Close</div>
<div class="title">Title</div>
</div>
<div class="box-body">
<div class="body-text">Body Text</div>
</div>
</div>

how do I center the anchor tag inside a div whose parent is working as an overlay [duplicate]

This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
what I want is to center the anchor tag texts vertically also I want the "contents" div to fit the screen so that if the screen gets smaller or bigger the anchor tag doesn't run off the margin creating overflow which I don't want, I tried a bunch of different ways to fix this but none seem to work, any help is appreciated! here's the code...
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
display:block;
z-index: 1001;
background-color: black;
overflow: hidden;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You can just add display: flex; and align-items: center; to the .menu-overlay.open identifier:
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You can easily achieve this using flexbox:
Here's the CSS to achieve what you want:
.menu-overlay.open {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 1;
display: block;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.contents {
margin-left: 5%;
margin-right: 5%;
display: flex;
flex: 1;
max-width: 100%;
justify-content: space-around;
}
.contents a {
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
color: white;
}

Different content for different panel

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>

Convert JQuery to JS for toggle class

I am creating a mobile menu and found an example on Codepen, the only problem is that I don't want to load JQuery just for the menu. I'm fairly new to coding and was wondering if there was a way to convert the toggle class function to pure javascript. If you could make a working example that would be ideal. Also if you know of a tool to convert to javascript or something that lists what each function looks like in both so I could covert it myself, that would be good to know.
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: #000;
font-family: Helvetica Neue, Arial, sans-serif;
color: #fff;
overflow: hidden;
}
/* ------------- */
.menu {
position: absolute;
top: 20px;
right: 20px;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 14px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: #333;
height: 2px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #fff;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
background-color: #fff;
color: #333;
height: 100%;
width: 100%;
position: fixed;
text-align: center;
transition: opacity 0.2s ease-in-out;
z-index: 1001;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu-overlay.open {
opacity: 1;
visibility: visible;
}
/* ------------- */
.info {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay-info {
text-align: center;
color: #111825;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="info">Content</h1>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<h1 class="overlay-info">
Links
</h1>
</div>

Got it working using onclick="myFunction" and
function myFunction() {
var menu = document.getElementById("something");
var overlay = document.getElementById("somethingelse");
something.classList.toggle("open");
somethingelse.classList.toggle("open");
}

We Keep Coding

JavaScript is the programming language of the Web.

To modify a searchbox with extra css/jQuery options - javascript

Related

How to set a background image on a custom javascript component?

Html Transistion lag only for the first time after reload

how do I center the anchor tag inside a div whose parent is working as an overlay [duplicate]

Different content for different panel

Convert JQuery to JS for toggle class

Categories

Resources