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>
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 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>
Hi I've problem with my tooltip the arrow doesn't show, also I don't how to place the arrow on front of the tooltip, I included a image of the tooltip I would like to design.I started to learn html5 and css3, can anyone help please.
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 73px;
line-height: 73px;
text-align: center;
visibility: hidden;
border-radius: 3px;
}
a.tooltips span::before {
content:"\2190";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
/* width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent; */
}
.span-content:after {
font-family: FontAwesome;
content: "";
position: absolute;
top: 3px;
left: 7px;
}
.wrap-content{
position:relative
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.4;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
.wrap-arrow{
widows:50px ;
height:50px ;
}
span.arrowup{
background-image: url('arrowup.png') ;
}
<div style="margin-top:200px;margin-left:200px" >
<a class="tooltips" href="#">bankcheck
<span>Tooltipbankcheck</span></a>
<span class="wrap-content span-content"></span></a>
<span class="wrap-arrow arrowup"></span>
</div>
I hope the issue is about positioning. Check below snippet for reference.
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width: 140px;
color: #FFFFFF;
background: #000000;
height: 73px;
line-height: 73px;
text-align: center;
visibility: hidden;
border-radius: 3px;
}
a.tooltips span::before {
content: "\21D3";
position: absolute;
bottom: -50%;
left: 50%;
color: red;
}
.span-content:after {
font-family: FontAwesome;
content: "";
position: absolute;
top: 3px;
left: 7px;
}
.wrap-content {
position: relative
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.7;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
.wrap-arrow {
widows: 50px;
height: 50px;
}
span.arrowup {
background-image: url('arrowup.png');
}
<div style="margin-top:200px;margin-left:200px">
<a class="tooltips" href="#">bankcheck
<span>Tooltipbankcheck</span></a>
<span class="wrap-content span-content"></span></a>
<span class="wrap-arrow arrowup"></span>
</div>
$(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);
}
});
});