I am having trouble getting bootpag (or any pagination, including easyPaginate, simplePagination, and pagerJS) to correctly work with my json list that creates divs for me. I've read some other topics that say you have to tell it to hide your divs and call an update then generate the list, but I am stuck.
I am new to js, and I have tried so many things but none work. Any ideas? My code is below.
var data = [
{ title:'title1', alias:'coll1', description:'description1', },
{ title:'title2', alias:'coll2', description:'description2', },
{ title:'title3', alias:'coll3', description:'description3', },
{ title:'title4', alias:'coll4', description:'description4', },
]
data.sort(function(a, b){
var titleA=a.title.toLowerCase(), titleB=b.title.toLowerCase();
if (titleA < titleB) //sort string ascending
return -1;
if (titleA > titleB)
return 1;
return 0; //default return value (no sorting)
});
var collectionData= '';
for ( var key in data ) {
collectionData += '<div class="hvrbox">';
collectionData += '<div class="hvrbox-title"><h5>' + data[key].title + '</h5></div>';
collectionData += '<img src="http://placekitten.com/g/200/200" class="hvrbox-layer_bottom">';
collectionData += '<div class="hvrbox-layer_top hvrbox-layer_slideup"><div class="hvrbox-text"><a href="#">';
collectionData += data[key].description + '</div><i class="fa fa-angle-double-right"></i>';
collectionData += '</a>';
collectionData += '</div></div>';
}
$('#collectionWrapper').append(collectionData);
$(document).ready(function() {
$('#pagination').bootpag({
total: 4,
page: 1,
maxVisible:1,
}).on('page', function(event, num){
$('#collectionWrapper').html("Page" + num); // some ajax content loading...
});
});
/*container for collections list*/
#collectionWrapper {
grid-area: collectionWrapper;
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
}
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline;
overflow: hidden;
height: auto;
width: 100%;
}
.hvrbox-title {
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
top: 0;
min-width: 100%;
height: auto;
min-height: 12%;
padding-top: 1.5%;
padding-left: 1.5%;
padding-right: 1.5%;
text-align: center;
color: white;
}
.hvrbox i {
position: absolute;
bottom:2%;
right:3%;
font-size: 3em;
color:#E6AA3C;
}
.hvrbox img {
width: 100%;
}
.hvrbox-text a {
text-decoration: none;
color: #ffffff;
font-weight: 400;
padding: 5px;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
width: 75%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="collectionWrapper">
</div>
<div id="pagination"></div>
Related
I tried my best to make sense of the title but for more references, I am giving screenshots below the menu when it slides over the page covering the content the content should be hidden but its not
Before:
https://imgur.com/PTNwfdA
After:
https://imgur.com/B2Iz4IE
Here's the CSS for my navigation:
/* navbar Start*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: fixed;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}
#active:checked~.wrapper {
/*left: 0;*/
right: 0;
}
.menu-btn {
position: absolute;
z-index: 2;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 30%;
width: 40%;
border-bottom: 3px solid #000000;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-btn:before {
transform: translateY(-8px);
}
.menu-btn:after {
transform: translateY(8px);
}
.close {
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
transition: background .6s;
}
/* closing animation */
#active:checked+.menu-btn span {
transform: scaleX(0);
}
#active:checked+.menu-btn:before {
transform: rotate(45deg);
border-color: #fff;
}
#active:checked+.menu-btn:after {
transform: rotate(-45deg);
border-color: #fff;
}
.wrapper ul {
position: absolute;
top: 60%;
left: 50%;
height: 90%;
transform: translate(-50%, -50%);
list-style: none;
text-align: right;
}
.wrapper ul li {
height: 10%;
margin: 15px 0;
}
.wrapper ul li a {
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
position: absolute;
line-height: 50px;
margin: 5px 30px;
opacity: 0;
transition: all 0.3s ease;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrapper ul li a:after {
position: absolute;
content: "";
background: #fff;
/*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after {
transform: scaleY(1);
}
.wrapper ul li a:hover {
color: #4114a1;
}
input[type="checkbox"] {
display: none;
}
.product a img {
display: none;
position: absolute;
left: -400px;
top: -200px;
}
.product a img {
display: none;
}
.product a:hover img {
display: inherit;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
text-align: center;
width: 100%;
color: #202020;
overflow-y: hidden;
}
.content .title {
font-size: 40px;
font-weight: 700;
}
.content p {
font-size: 35px;
font-weight: 600;
}
#active:checked~.wrapper ul li a {
opacity: 1;
align-items: center;
}
.wrapper ul li a {
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translateX(100px);
font-family: 'LemonMilk';
align-items: center;
}
#active:checked~.wrapper ul li a {
transform: none;
transition-timing-function: ease, cubic-bezier(.1, 1.3, .3, 1);
/* easeOutBackを緩めた感じ */
transition-delay: .6s;
transform: translateX(-100px);
}
.pages-nav--open {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.pages-nav__item {
display: flex;
flex-direction: row;
min-height: 300vh;
}
.pages-nav .pages-nav__item--social {
width: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
transition: transform 1.2s, opacity 1.2s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.pages-nav--open .pages-nav__item--social {
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.link {
font-size: 0.85em;
font-weight: bold;
position: relative;
letter-spacing: 1px;
text-transform: uppercase;
}
.link:hover,
.link:focus {
color: #fff;
}
.link--page {
display: block;
color: #cecece;
text-align: center;
}
.link--page:not(.link--faded)::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 50%;
height: 2px;
margin: 5px 0 0 -15px;
background: #fff;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
.link--page:hover:before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.link--faded {
color: #4f4f64;
}
.link--faded:hover,
.link--faded:focus {
color: #5c5edc;
}
.link--page.link--faded {
font-size: 0.65em;
}
.link--social {
font-size: 1.5em;
margin: 0 0.75em;
}
.text-hidden {
position: absolute;
display: block;
overflow: hidden;
width: 0;
height: 0;
color: transparent;
}
#media screen and (max-width: 40em) {
.js .pages-nav {
display: block;
padding: 10px 20px 0 20px;
text-align: left;
}
.pages-nav__item {
width: 100%;
}
.pages-nav__item--small {
display: inline-block;
width: auto;
margin-right: 5px;
}
.pages-nav__item--social {
font-size: 0.9em;
}
.menu-button {
top: 15px;
right: 10px;
left: auto;
}
.info {
font-size: 0.85em;
}
.poster {
margin: 1em;
}
}
/* ///////////////////// navbar end ///////////////////////// */
and here's my css for the page this is on:
.typewritter {
height: 80vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 28%;
animation: typing 4s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
body {
margin: 0px;
}
#container {
/* Center the text in the viewport. */
position: absolute;
display: flex;
margin: auto;
width: 100vw;
height: 80pt;
top: 0;
bottom: 0;
/* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
filter: url(#threshold) blur(0.6px);
}
/* Your average text styling */
#text1, #text2 {
position: absolute;
width: 100%;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 80pt;
text-align: center;
user-select: none;
}
If any more info is needed I'll be happy to provide it!
all you need to do is just set a greater z-index to .wrapper also u need to give a z-index to .menu-btn else it would be below the wrapper
this should be your code
.menu-btn{
position: absolute;
z-index: 12;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.wrapper{
position: fixed;
z-index: 10;
top: 0;
right: -100%;
height: 100%;
width: 100%;
background-color: #F68B50;
/*background: linear-gradient(375deg, #F68B50, #4114a1, #f92c78);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}
I am trying to convert html div into image. I have a semi circle chart but when I am trying to download or preview image the image is not proper . Please help.
I took the reference of these two sites :
for semi circle : https://codepen.io/vineethtr/pen/xGjQOX
for html to image : https://codepedia.info/editor-example/jquery-convert-html-to-image-example/
Please help me to get the same exact image.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
<script>
$(document).ready(function(){
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - Semi Circle Donut Charts</title>
<style>
body {
background: #1F2428;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
margin: auto;
flex-wrap: wrap;
box-sizing: border-box;
height: 100vh;
padding: 30px;
}
.margin {
margin: 25px;
}
.semi-donut {
--percentage: 0;
--fill: #ff0;
width: 300px;
height: 150px;
position: relative;
color: #fff;
font-size: 22px;
font-weight: 600;
overflow: hidden;
color: var(--fill);
display: -webkit-box;
display: flex;
-webkit-box-align: end;
align-items: flex-end;
-webkit-box-pack: center;
justify-content: center;
box-sizing: border-box;
}
.semi-donut:after {
content: '';
width: 300px;
height: 300px;
border: 50px solid;
border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) var(--fill) var(--fill);
position: absolute;
border-radius: 50%;
left: 0;
top: 0;
box-sizing: border-box;
-webkit-transform: rotate(calc( 1deg * ( -45 + var(--percentage) * 1.8 ) ));
transform: rotate(calc( 1deg * ( -45 + var(--percentage) * 1.8 ) ));
-webkit-animation: fillAnimation 1s ease-in;
animation: fillAnimation 1s ease-in;
}
.semi-donut-model-2 {
width: 300px;
height: 150px;
position: relative;
text-align: center;
color: #fff;
font-size: 22px;
font-weight: 600;
border-radius: 150px 150px 0 0;
overflow: hidden;
color: var(--fill);
display: -webkit-box;
display: flex;
-webkit-box-align: end;
align-items: flex-end;
-webkit-box-pack: center;
justify-content: center;
box-sizing: border-box;
}
.semi-donut-model-2:before, .semi-donut-model-2:after {
content: '';
width: 300px;
height: 150px;
border: 50px solid var(--fill);
border-top: none;
position: absolute;
-webkit-transform-origin: 50% 0% 0;
transform-origin: 50% 0% 0;
border-radius: 0 0 300px 300px;
box-sizing: border-box;
left: 0;
top: 100%;
}
.semi-donut-model-2:before {
border-color: rgba(0, 0, 0, 0.15);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.semi-donut-model-2:after {
z-index: 3;
-webkit-animation: 1s fillGraphAnimation ease-in;
animation: 1s fillGraphAnimation ease-in;
-webkit-transform: rotate(calc( 1deg * ( var(--percentage) * 1.8 ) ));
transform: rotate(calc( 1deg * ( var(--percentage) * 1.8 ) ));
}
.semi-donut-model-2:hover:after {
opacity: .8;
cursor: pointer;
}
.multi-graph {
width: 300px;
height: 150px;
position: relative;
color: #fff;
font-size: 22px;
font-weight: 600;
display: -webkit-box;
display: flex;
-webkit-box-align: end;
align-items: flex-end;
-webkit-box-pack: center;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
}
.multi-graph:before {
content: '';
width: 300px;
height: 150px;
border: 50px solid rgba(0, 0, 0, 0.15);
border-bottom: none;
position: absolute;
box-sizing: border-box;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
border-radius: 300px 300px 0 0;
left: 0;
top: 0;
}
.multi-graph .graph {
width: 300px;
height: 150px;
border: 50px solid var(--fill);
border-top: none;
position: absolute;
-webkit-transform-origin: 50% 0% 0;
transform-origin: 50% 0% 0;
border-radius: 0 0 300px 300px;
left: 0;
top: 100%;
z-index: 5;
-webkit-animation: 1s fillGraphAnimation ease-in;
animation: 1s fillGraphAnimation ease-in;
-webkit-transform: rotate(calc( 1deg * ( var(--percentage) * 1.8 ) ));
transform: rotate(calc( 1deg * ( var(--percentage) * 1.8 ) ));
box-sizing: border-box;
cursor: pointer;
}
.multi-graph .graph:after {
content: attr(data-name) " " counter(varible) "%";
counter-reset: varible var(--percentage);
background: var(--fill);
box-sizing: border-box;
border-radius: 2px;
color: #fff;
font-weight: 200;
font-size: 12px;
height: 20px;
padding: 3px 5px;
top: 0px;
position: absolute;
left: 0;
-webkit-transform: rotate(calc( -1deg * var(--percentage) * 1.8 )) translate(-30px, 0px);
transform: rotate(calc( -1deg * var(--percentage) * 1.8 )) translate(-30px, 0px);
-webkit-transition: 0.2s ease-in;
transition: 0.2s ease-in;
-webkit-transform-origin: 0 50% 0;
transform-origin: 0 50% 0;
opacity: 0;
}
.multi-graph .graph:hover {
opacity: 0.8;
}
.multi-graph .graph:hover:after {
opacity: 1;
left: 30px;
}
#-webkit-keyframes fillAnimation {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
50% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
#keyframes fillAnimation {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
50% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
#-webkit-keyframes fillGraphAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes fillGraphAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<div class="semi-donut margin" style="--percentage : 80; --fill: #039BE5 ;" id="html-content-holder" >
HTML5
</div>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<br/>
<h3>Preview :</h3>
<div id="previewImage">
</div>
I have stumbled upon a problem which I cannot seem to resolve. I tried to search here for the solution but was unable to help myself. I am a newbie in javascript and react so be considerate.
Problem:
I am using React (16.5.0) with nextjs (6.1.2) with styled-jsx like so:
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
class ProductCard extends Component {
constructor(props) {
super(props);
this.state = {imgLoaded: false};
this.imgHasLoaded = this.imgHasLoaded.bind(this);
}
imgHasLoaded() {
this.setState({imgLoaded:true})
}
render() {
return (
<div className="thumbnail-container">
<div className="loader-box">
<img src={require("../static/loading.png")} className="loading-img" />
</div>
<img src={this.props.imgSrc} className="main-img" onLoad={this.imgHasLoaded} />
<div className="thumbnail-text">
{this.props.text}
</div>
<ul className="item-list">
{this.props.links.map(link =>
<li className="item">
<span className="item-span"> {link.text} </span>
{link.subLinks &&
<ul className="sub-item-list">
{link.subLinks.map(subLink => <li>{subLink.text}</li>)}
</ul>
}
</li>
)}
</ul>
<style jsx> {`
.thumbnail-container {
user-select: none;
position: relative;
text-align: center;
width: 98%;
height: 98%;
margin: 1%;
display: block;
border: 0.3px solid black;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5);
overflow: hidden;
align-items: center;
}
.thumbnail-text {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 1.8em;
background-color: #333;
padding: 5px;
border-radius: 5px;
text-shadow: 1px 1px #000000;
text-transform: uppercase;
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 1);
transition: all 0.2s ease;
}
.thumbnail-container:hover .thumbnail-text, .thumbnail-container:focus .thumbnail-text, .thumbnail-container:active .thumbnail-text {
top: 0;
transform: translate(-50%, 0);
background-color: rgba(255, 124, 4, 0.9);
color: #000000;
text-shadow: none;
}
.main-img {
width: 100%;
height: 100%;
border-radius: 8px;
margin: auto;
-webkit-filter: grayscale(40%) contrast(120%) brightness(110%) saturate(120%);
-moz-filter: grayscale(40%) contrast(120%) brightness(110%) saturate(120%);
filter: grayscale(40%) contrast(120%) brightness(110%) saturate(120%);
opacity: ${this.state.imgLoaded ? 1 : 0};
}
.thumbnail-container:hover .main-img, .thumbnail-container:focus .main-img, .thumbnail-container:active .main-img{
-webkit-filter: grayscale(40%) contrast(120%) saturate(120%) brightness(30%);
-moz-filter: grayscale(40%) contrast(120%) saturate(120%) brightness(30%);
filter: grayscale(40%) contrast(120%) saturate(120%) brightness(30%);
}
.item-list {
display: none;
position: absolute;
bottom: 0;
left: 0;
height: calc(100% - 2em);
flex-flow: column wrap;
justify-content: space-around;
list-style-type: none;
}
.thumbnail-container:hover .item-list, .thumbnail-container:focus .item-list, .thumbnail-container:active .item-list{
display: flex;
}
.item {
font-size: 1.3em;
display: flex;
flex-flow: column wrap;
}
.item-span {
padding-left: 8px;
border-bottom: solid #ff7c04;
border-left: solid #ff7c04;
transition: border-bottom 0.2s ease;
}
.item:hover .item-span, .item:focus .item-span, .item:active .item-span{
border-bottom: none;
}
.sub-item-list {
margin-left: 8px;
margin-top: 8px;
border-bottom: solid #ff7c04;
border-left: solid #ff7c04;
height: auto;
flex: 0;
overflow: hidden;
transition: flex 0.2s ease;
}
.item:hover .sub-item-list, .item:focus .sub-item-list, .item:active .sub-item-list{
flex: 1;
}
.loader-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
}
.loading-img {
-webkit-animation: rotate-scale-up 1s linear infinite both;
animation: rotate-scale-up 1s linear infinite both;
}
#-webkit-keyframes rotate-scale-up {
0% {
-webkit-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
}
50% {
-webkit-transform: scale(1.5) rotateZ(180deg);
transform: scale(1.5) rotateZ(180deg);
}
100% {
-webkit-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
}
#keyframes rotate-scale-up {
0% {
-webkit-transform: scale(1) rotateZ(0);
transform: scale(1) rotateZ(0);
}
50% {
-webkit-transform: scale(1.5) rotateZ(180deg);
transform: scale(1.5) rotateZ(180deg);
}
100% {
-webkit-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
}
a {
text-decoration: none;
}
#media only screen and (max-width: 700px) {
.thumbnail-container {
width: 96%;
height: 96%;
margin: 2%;
}
.thumbnail-text {
height: 1.5em;
font-size: 1em !important;
}
.item-list {
height: calc(100% - 3em) !important;
}
}
`}
</style>
</div>
);
}
}
However when using code above I get
Cannot read property 'state' of undefined
error in render function at line 26 (where item-list begins). The problem has something to do with using
opacity: ${this.state.imgLoaded ? 1 : 0};
in styled-jsx, because without this line, code works well.
Interestingly if I remove the item-list and its contents everything is working even with
opacity: ${this.state.imgLoaded ? 1 : 0};
I am sorry if this is something trivial or/and i forgot something fundamental. Just push me in the correct direction please
ok i found out that my problem was related to styled jsx issue described here:
https://github.com/zeit/styled-jsx/issues/486
temporary workaround is to pull the imgLoaded into var and then use it in styled jsx.
Similar example here : https://github.com/zeit/next.js/issues/5735
Need make CSS (Javascript) underline like this (Some Example from codepen)
#import url(http://fonts.googleapis.com/css?family=Quando);
*, *:after, *:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
* {margin:0;padding:0;border:0 none;position: relative; outline: none;
}
html, body {
background: #004050;
font-family: Quando;
font-weight: 300;
width: 100%;
}
h2, h3 {
background: #0D757D;
width: 100%;
min-height: 200px;
line-height: 200px;
font-size: 3rem;
font-weight: normal;
text-align: center;
color: rgba(0,0,0,.4);
margin: 3rem auto 0;
}
.uno {background: #ff5e33;}
.dos.bis {background: #85144B;}
.dos {background: #FADD40;}
h3 {background: #2B5B89;}
h2 > a, h3 > a {
text-decoration: none;
color: rgba(0,0,0,.4);
z-index: 1;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: #9CF5A6;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
}
h2 > a:hover:before,
h2 > a:focus:before {
visibility: visible;
transform: scaleX(1);
}
.uno a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #ffdb00;
}
.dos > a:after {
content: "";
position: absolute;
width: 100%;
height: 7px;
border: 1px solid #000;
bottom: -2px;
left: 0;
background: #fff;
border-radius: 5px;
opacity: 0;
transform: scalex(0);
transition: .5s;
}
.dos.bis > a:after {
opacity: .05;
transform: scalex(1);
}
.dos:hover > a:after {
opacity: .15;
transform: scalex(1);
}
.dos.bis > a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #FADD40;
}
.dos > a:before {
background: rgba(0,0,0,0);
box-shadow: 0 0 10px 2px #FF5E33;
}
h3 > a:before {
content: "";
background: #7FDBFF;
position: absolute;
width: 100%;
height: 5px;
bottom: 0;
left: 0;
border-radius: 5px;
transform: scaleX(0);
animation: 1.4s forwards no-hover-v linear;
animation-fill-mode: forwards;
z-index: -1;
}
h3 > a:hover:before,
h3 > a:focus:before {
animation: .5s forwards hover-v linear;
animation-fill-mode: forwards;
}
#keyframes hover-v {
0% {
transform: scaleX(0);
height: 5px;
}
45% {
transform: scaleX(1.05);
height: 5px;
}
55% {height: 5px;}
100% {
transform: scaleX(1.05);
height: 3.8rem;
}
}
#keyframes no-hover-v {
0% {
transform: scaleX(1.05);
height: 3.8rem;
}
45% {height: 5px;}
55% {
transform: scaleX(1.05);
height: 5px;
opacity: 1;
}
100% {
transform: scaleX(0);
height: 5px;
opacity: .02;
}
}
p {padding: .5rem;}
p a {color: rgba(255,255,255,.5)}
<h2>
<a href=''>:hover, please</a>
</h2>
But the underline must start growing from left to right and and then reduce to from right to left with some speed. And the underline must be animated automatically without mouse hovering links.
An when link have mouse hover the underline must be simultaneously grow to right.
Please code how to do this.
Use transform-origin to control the direction of the scale(), and you can trigger with a class to add/remove the border.
var a = document.getElementById("a");
setTimeout(function() {
a.classList.add("under");
setTimeout(function() {
a.classList.remove("under");
}, 2000);
}, 500);
h2 {
background: #0D757D;
width: 100%;
min-height: 200px;
line-height: 200px;
font-size: 3rem;
font-weight: normal;
text-align: center;
color: rgba(0,0,0,.4);
margin: 3rem auto 0;
}
h2 > a {
text-decoration: none;
color: rgba(0,0,0,.4);
z-index: 1;
position: relative;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background: #9CF5A6;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: .25s linear;
transform-origin: 0 0;
}
h2 > a.under:before {
visibility: visible;
transform: scaleX(1);
}
<h2>
<a id="a" href=''>:hover, please</a>
</h2>
Why in THIS CODE if you press the "I" button on the bottom right the first time works, but the second it shows just the pink background?
(function(){
'use strict';
var $mainButton = $(".main-button"),
$closeButton = $(".close-button"),
$buttonWrapper = $(".button-wrapper"),
$ripple = $(".ripple"),
$layer = $(".layered-content");
$mainButton.on("click", function(){
$ripple.addClass("rippling");
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
});
});
$closeButton.on("click", function(){
$buttonWrapper.removeClass("clicked");
$ripple.removeClass("rippling");
$layer.removeClass("active");
});
})();
#import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
html {
height: 100%;
}
body {
background: url("http://species-in-pieces.com/img/bg/grad-bg.png") no-repeat center center/cover #F9D8AD;
height: 100%;
}
button:focus {
outline: none;
}
button:hover {
opacity: .8;
}
.fa {
font-size: 20px;
}
.fa-info {
color: white;
}
#container {
width: 330px;
height: 508px;
max-width: 330px;
background: white;
position: relative;
top: 50%;
left: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.25);
transform: translate3d(-50%, -50%, 0);
}
h2 {
padding: 20px;
color: white;
background: #3E4FB2;
font-weight: 300;
text-align: center;
font-size: 18px;
font-family: 'Roboto', sans-serif;
}
.detail {
color: #777;
padding: 20px;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}
.img-wrapper {
padding: 0;
position: relative;
}
.img-wrapper:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(62, 79, 178, .25);
width: 100%;
}
.img-wrapper img {
width: 100%;
height: 200px;
-o-object-fit: cover;
object-fit: cover;
margin: 0;
display: block;
position: relative;
}
.button-wrapper {
width: 50px;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
right: 20px;
bottom: 20px;
}
button {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
z-index: 9;
position: relative;
}
.main-button {
background: #ff2670;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.ripple {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 50%;
z-index: -9;
background: transparent;
border: 1px solid #ff2670;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
-webkit-transition: .3s all ease;
transition: .3s all ease;
opacity: 1;
}
.rippling {
-webkit-animation: .3s rippling 1;
animation: .3s rippling 1;
-moz-animation: .3s rippling 1;
}
#-webkit-keyframes rippling {
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
#-moz-keyframes rippling {
25% {
-moz-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-moz-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
#keyframes rippling {
25% {
transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.layer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
background: #ff2670;
border-radius: 50%;
z-index: -99;
pointer-events: none;
}
.button-wrapper.clicked {
-webkit-transform: rotate(90deg) translateY(-96px);
-ms-transform: rotate(90deg) translateY(-96px);
transform: rotate(90deg) translateY(-96px);
right: 0;
bottom: 0;
-webkit-transition: .3s all ease .6s;
transition: .3s all ease .6s;
}
.button-wrapper.clicked .main-button {
opacity: 0;
-webkit-transition: .3s all ease .3s;
transition: .3s all ease .3s;
}
.button-wrapper.clicked .layer {
-webkit-transform: scale(100);
-ms-transform: scale(100);
transform: scale(100);
-webkit-transition: 2.25s all ease .9s;
transition: 2.25s all ease .9s;
}
.layered-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 0;
}
.layered-content.active {
opacity: 1;
}
.close-button {
background: white;
position: absolute;
right: 20px;
top: 20px;
color: #ff2670;
}
.layered-content.active .close-button {
-webkit-animation: .5s bounceIn;
animation: .5s bounceIn;
}
.layered-content .content img {
width: 80px;
-webkit-shape-outside: 80px;
shape-outside: 80px;
border-radius: 50%;
display: block;
margin: 0 auto 15px;
padding: 10px;
box-sizing: border-box;
background: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
-webkit-transition: .3s all ease;
transition: .3s all ease;
}
.content p {
color: white;
font-weight: 300;
text-align: center;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}
.content p a {
font-size: 12px;
background: white;
padding: 2.5px 5px;
color: #ff2670;;
text-decoration: none;
border-radius: 50px;
display: inline-block;
margin-left: 1.5px;
}
.content img,
.content p {
opacity: 0;
position: relative;
top: -7.5px;
}
.layered-content.active .content img {
opacity: 1;
top: 0;
-webkit-transition: .5s all ease .5s;
transition: .5s all ease .5s;
}
.layered-content.active .content p {
opacity: 1;
top: 0;
-webkit-transition: .5s all ease 1s;
transition: .5s all ease 1s;
}
.copyright {
position: fixed;
right: 15px;
bottom: 15px;
font-family: "Roboto";
}
.copyright span {
line-height: 36px;
color: rgba(255, 255, 255, 0.75);
margin-right: 10px;
font-weight: 300;
}
.copyright span a {
font-weight: 400;
text-decoration: none;
color: #ea4c89;
}
.copyright .balapa {
width: 30px;
height: 30px;
display: block;
background: url("//s3-us-west-2.amazonaws.com/s.cdpn.io/111167/profile/profile-80_3.jpg");
background-size: cover;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.75);
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="container">
<h2>Material Overlay Animation</h2>
<div class="img-wrapper">
<img src="https://d13yacurqjgara.cloudfront.net/users/2733/screenshots/741958/dribbble-foxes.jpg" alt="Just Background">
</div>
<p class="detail">Click the Button to see the "Material Animation". Works great on modern browser.</p>
<div class="button-wrapper">
<div class="layer"></div>
<button class="main-button fa fa-info">
<div class="ripple"></div>
</button>
</div>
<div class="layered-content">
<button class="close-button fa fa-times"></button>
<div class="content">
<img src="https://d13yacurqjgara.cloudfront.net/users/332135/avatars/normal/52d614ee44e3e21d2b73894c465773d7.png" alt="Balapa">
<p>Crafted by balapa.</p>
<p>See also my other pen</p>
</div>
</div>
</main>
<div class="copyright"><span>Material Overlay Animation by</span></div>
You have to clear the queue using clearQueue() function.
Change your code to this
...
$buttonWrapper.addClass("clicked").clearQueue().delay(1500).queue(function(){
$layer.addClass("active");
});
});
...
Or you can even do it like this which is a way suggested in jQuery documentation.
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
jQuery.dequeue( this );
});
});
Important part directly from jQuery documentation,
Note that when adding a function with jQuery.queue(), we should ensure
that jQuery.dequeue() is eventually called so that the next function
in line executes.
Instead of this:
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
});
Use this:
$buttonWrapper.addClass("clicked");
setTimeout(function(){$layer.addClass("active")},1500);
And it will work.