I'm using the 'success' event from Clipboard.JS to change the button text after some one have click it to provide a feedback that the text is successfully copied.
There are multiple span inside the button element, the feedback/new string (Copied!) will replace the original text (Take Me There) and be applied to the first span when the function is invoked.
If the feedback/new string apply to the first span, then the original text (Take Me There) will not be replaced instead the feedback will be appear on top since it applied to the first span.
How do I make the new string to the span that include the original text(the last span)? Please try to run the code for clearer illustration.
Below is my code:
var clipboard = new ClipboardJS('.copyElement')
clipboard.on('success', function(e) {
let span = e.trigger.querySelector('span')
let oldtext = span.textContent
span.textContent = 'Copied!'
setTimeout(() => span.textContent = oldtext, 2000)
});
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 330px;
background-color: #000;
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
.RedPhotonEffect {
color: rgba(239, 71, 111, 1);
overflow: hidden;
position: relative;
border: none;
background-color: rgba(239, 71, 111, 0.12);
cursor: pointer;
}
.RedPhotonEffect span:nth-child(1){
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #000, #ef476f);
animation: animate1 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.RedPhotonEffect span:nth-child(2){
position:absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom, #000, #ef476f);
animation: animate2 3s linear infinite;
}
#keyframes animate2 {
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
.RedPhotonEffect span:nth-child(3){
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to left, #000, #ef476f);
animation: animate3 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.RedPhotonEffect span:nth-child(4){
position:absolute;
bottom: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to top, #000, #ef476f);
animation: animate4 3s linear infinite;
}
#keyframes animate4 {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}
<button
class="copyElement RedPhotonEffect Big"
data-clipboard-text="123"
>
<span></span>
<span></span>
<span></span>
<span></span>
<span>Take Me There</span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
Then try using a class instead
var clipboard = new ClipboardJS('.copyElement')
clipboard.on('success', function(e) {
let span = e.trigger.querySelector('.label')
let oldtext = span.textContent
span.textContent = 'Copied!'
setTimeout(() => span.textContent = oldtext, 2000)
});
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 330px;
background-color: #000;
}
.Big {
width: 257px;
padding: 33px 0 30px 0;
font-size: 21px;
}
.RedPhotonEffect {
color: rgba(239, 71, 111, 1);
overflow: hidden;
position: relative;
border: none;
background-color: rgba(239, 71, 111, 0.12);
cursor: pointer;
}
.RedPhotonEffect span:nth-child(1){
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to right, #000, #ef476f);
animation: animate1 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.RedPhotonEffect span:nth-child(2){
position:absolute;
top: 0;
right: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom, #000, #ef476f);
animation: animate2 3s linear infinite;
}
#keyframes animate2 {
0%{
transform: translateY(-100%);
}
100%{
transform: translateY(100%);
}
}
.RedPhotonEffect span:nth-child(3){
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(to left, #000, #ef476f);
animation: animate3 3s linear infinite;
animation-delay: 1.5s;
}
#keyframes animate3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.RedPhotonEffect span:nth-child(4){
position:absolute;
bottom: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to top, #000, #ef476f);
animation: animate4 3s linear infinite;
}
#keyframes animate4 {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}
<button
class="copyElement RedPhotonEffect Big"
data-clipboard-text="123"
>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="label">Take Me There</span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
Related
I'm working on the layout of a website and I want my slider to move horizontally while scrolling vertically. In short, I want to flip my scroll. How can I do that?
My code:
$(function () {
var Page = (function () {
var $navArrows = $("#nav-arrows"),
$nav = $("#nav-dots > span"),
$document = $(document),
slitslider = $("#slider").slitslider({
onBeforeChange: function (slide, pos) {
$nav.removeClass("nav-dot-current");
$nav.eq(pos).addClass("nav-dot-current");
}
}),
init = function () {
initEvents();
},
initEvents = function () {
// add navigation events
$navArrows.children(":last").on("click", function () {
slitslider.next();
return false;
});
$navArrows.children(":first").on("click", function () {
slitslider.previous();
return false;
});
$nav.each(function (i) {
$(this).on("click", function (event) {
var $dot = $(this);
if (!slitslider.isActive()) {
$nav.removeClass("nav-dot-current");
$dot.addClass("nav-dot-current");
}
slitslider.jump(i + 1);
return false;
});
});
},
NextSlid = function () {
slitslider.next();
return false;
},
PreviousSlid = function () {
slitslider.previous();
return false;
};
return { init: init, NextSlid: NextSlid, PreviousSlid, PreviousSlid };
})();
Page.init();
$(window).on("wheel", function (e) {
var delta = e.originalEvent.deltaY;
if (delta > 0) {
Page.NextSlid();
} else {
Page.PreviousSlid();
}
});
$(".container").each(function () {
console.log("cont");
let $window = $(document),
$body = $(".main");
let $nested = $(this),
$nestedPlaceholder = $nested.parent();
let verticalScrollRange, upperMargin, lowerMargin;
$window.resize(function (e) {
console.log("resize");
$nested.removeClass("sticky").css({ left: 0 });
let placeholderHeight = $nestedPlaceholder.css({ height: "" }).height();
verticalScrollRange = placeholderHeight - $window.height();
upperMargin = $nestedPlaceholder.offset().top;
lowerMargin = upperMargin + verticalScrollRange;
$nestedPlaceholder.height(placeholderHeight);
});
const main = document.querySelector(".main");
const scrollEvent = () => {
console.log(main.scrollTop);
console.log("scroll");
let scrollTop = main.scrollTop;
// console.log("scrollTop = " + scrollTop);
console.log("upperMargin = " + upperMargin);
console.log("scrollTop =" + scrollTop);
console.log("lowerMargin =" + lowerMargin);
// && scrollTop < lowerMargin
if (scrollTop >= upperMargin) {
$nested.addClass("sticky");
console.log("addClass --------------");
let horizontalScrollRange = $nested.width() - $body.width();
let verticalScrollPosition = scrollTop - upperMargin;
let horizontalScrollPosition =
(verticalScrollPosition / verticalScrollRange) *
horizontalScrollRange;
$nested.css({ left: -horizontalScrollPosition });
} else {
// $nested.removeClass("sticky");
console.log("removeClass +++++++++++++");
}
};
main.addEventListener("scroll", scrollEvent);
$window.resize();
});
});
body {
width: 100vw;
height: 100vh;
margin: 0;
background-color: green;
}
.main {
width: 100%;
height: 100%;
background-color: yellow;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
section {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.nav-arrows {
display: none;
}
.sl-slider-wrapper {
width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.sl-slider {
position: absolute;
top: 0;
left: 0;
}
/* Slide wrapper and slides */
.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.sl-slide {
z-index: 1;
}
/* The duplicate parts/slices */
.sl-content-slice {
overflow: hidden;
position: absolute;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
opacity: 1;
}
/* Horizontal slice */
.sl-slide-horizontal .sl-content-slice {
width: 100%;
height: 50%;
left: -200px;
-webkit-transform: translateY(0%) scale(1);
-moz-transform: translateY(0%) scale(1);
-o-transform: translateY(0%) scale(1);
-ms-transform: translateY(0%) scale(1);
transform: translateY(0%) scale(1);
}
.sl-slide-horizontal .sl-content-slice:first-child {
top: -200px;
padding: 200px 200px 0px 200px;
}
.sl-slide-horizontal .sl-content-slice:nth-of-type(2) {
top: 50%;
padding: 0px 200px 200px 200px;
}
/* Vertical slice */
.sl-slide-vertical .sl-content-slice {
width: 50%;
height: 100%;
top: -200px;
-webkit-transform: translateX(0%) scale(1);
-moz-transform: translateX(0%) scale(1);
-o-transform: translateX(0%) scale(1);
-ms-transform: translateX(0%) scale(1);
transform: translateX(0%) scale(1);
}
.sl-slide-vertical .sl-content-slice:first-child {
left: -200px;
padding: 200px 0px 200px 200px;
}
.sl-slide-vertical .sl-content-slice:nth-of-type(2) {
left: 50%;
padding: 200px 200px 200px 0px;
}
/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
position: absolute;
}
.sl-content {
width: 100%;
height: 100%;
background: #fff;
}
/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner {
background: #ddd;
}
.sl-slide-vertical .sl-slide-inner {
background: #ccc;
}
.demo-1 .sl-slider-wrapper {
position: relative;
width: 100vw;
height: 100vh;
/* top: 0;
left: 0; */
}
.demo-2 .sl-slider-wrapper {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
}
.demo-2 .sl-slider h2,
.demo-2 .sl-slider blockquote {
padding: 100px 30px 10px 30px;
width: 80%;
max-width: 960px;
color: #fff;
margin: 0 auto;
position: relative;
z-index: 100;
}
.demo-2 .sl-slider h2 {
font-size: 100px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.demo-2 .sl-slider blockquote {
font-size: 28px;
padding-top: 10px;
font-weight: 300;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.demo-2 .sl-slider blockquote cite {
font-size: 16px;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
letter-spacing: 5px;
padding-top: 30px;
display: inline-block;
}
.demo-2 .bg-img {
padding: 200px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
top: -200px;
left: -200px;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
}
/* Custom navigation arrows */
.nav-arrows span {
position: absolute;
z-index: 2000;
top: 50%;
width: 40px;
height: 40px;
border: 8px solid #ddd;
border: 8px solid rgba(150, 150, 150, 0.4);
text-indent: -90000px;
margin-top: -40px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-arrows span:hover {
border-color: rgba(150, 150, 150, 0.9);
}
.nav-arrows span.nav-arrow-prev {
left: 5%;
border-right: none;
border-top: none;
}
.nav-arrows span.nav-arrow-next {
right: 5%;
border-left: none;
border-bottom: none;
}
/* Custom navigation dots */
.nav-dots {
text-align: center;
position: absolute;
bottom: 2%;
height: 30px;
width: 100%;
left: 0;
z-index: 1000;
}
.nav-dots span {
display: inline-block;
position: relative;
width: 16px;
height: 16px;
border-radius: 50%;
margin: 3px;
background: #ddd;
background: rgba(150, 150, 150, 0.4);
cursor: pointer;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.demo-2 .nav-dots span {
background: rgba(150, 150, 150, 0.1);
margin: 6px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.demo-2 .nav-dots span.nav-dot-current,
.demo-2 .nav-dots span:hover {
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.5);
}
.nav-dots span.nav-dot-current:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
top: 3px;
left: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
}
/* Content elements */
.demo-1 .deco {
width: 260px;
height: 260px;
border: 2px dashed #ddd;
border: 2px dashed rgba(150, 150, 150, 0.4);
border-radius: 50%;
position: absolute;
bottom: 50%;
left: 50%;
margin: 0 0 0 -130px;
}
.demo-1 [data-icon]:after {
content: attr(data-icon);
font-family: "AnimalsNormal";
color: #999;
text-shadow: 0 0 1px #999;
position: absolute;
width: 220px;
height: 220px;
line-height: 220px;
text-align: center;
font-size: 100px;
top: 50%;
left: 50%;
margin: -110px 0 0 -110px;
box-shadow: inset 0 0 0 10px #f7f7f7;
border-radius: 50%;
}
.demo-1 .sl-slide h2 {
color: #000;
text-shadow: 0 0 1px #000;
padding: 20px;
position: absolute;
font-size: 34px;
font-weight: 700;
letter-spacing: 13px;
text-transform: uppercase;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
bottom: 50%;
margin: 0 0 -120px 0;
}
.demo-1 .sl-slide blockquote {
position: absolute;
width: 100%;
text-align: center;
left: 0;
font-weight: 400;
font-size: 14px;
line-height: 20px;
height: 70px;
color: #8b8b8b;
z-index: 2;
bottom: 50%;
margin: 0 0 -200px 0;
padding: 0;
}
.demo-1 .sl-slide blockquote p {
margin: 0 auto;
width: 60%;
max-width: 400px;
position: relative;
}
.demo-1 .sl-slide blockquote p:before {
color: #f0f0f0;
color: rgba(244, 244, 244, 0.65);
font-family: "Bookman Old Style", Bookman, Garamond, serif;
position: absolute;
line-height: 60px;
width: 75px;
height: 75px;
font-size: 200px;
z-index: -1;
left: -80px;
top: 35px;
content: "\201C";
}
.demo-1 .sl-slide blockquote cite {
font-size: 10px;
padding-top: 10px;
display: inline-block;
font-style: normal;
text-transform: uppercase;
letter-spacing: 4px;
}
/* Custom background colors for slides in first demo */
/* First Slide */
.demo-1 .bg-1 .sl-slide-inner,
.demo-1 .bg-1 .sl-content-slice {
background: #fff;
}
/* Second Slide */
.demo-1 .bg-2 .sl-slide-inner,
.demo-1 .bg-2 .sl-content-slice {
background: #000;
}
.demo-1 .bg-2 [data-icon]:after,
.demo-1 .bg-2 h2 {
color: #fff;
}
.demo-1 .bg-2 blockquote:before {
color: #222;
}
/* Third Slide */
.demo-1 .bg-3 .sl-slide-inner,
.demo-1 .bg-3 .sl-content-slice {
background: #db84ad;
}
.demo-1 .bg-3 .deco {
border-color: #fff;
border-color: rgba(255, 255, 255, 0.5);
}
.demo-1 .bg-3 [data-icon]:after {
color: #fff;
text-shadow: 0 0 1px #fff;
box-shadow: inset 0 0 0 10px #b55381;
}
.demo-1 .bg-3 h2,
.demo-1 .bg-3 blockquote {
color: #fff;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}
.demo-1 .bg-3 blockquote:before {
color: #c46c96;
}
/* Forth Slide */
.demo-1 .bg-4 .sl-slide-inner,
.demo-1 .bg-4 .sl-content-slice {
background: #5bc2ce;
}
.demo-1 .bg-4 .deco {
border-color: #379eaa;
}
.demo-1 .bg-4 [data-icon]:after {
text-shadow: 0 0 1px #277d87;
color: #277d87;
}
.demo-1 .bg-4 h2,
.demo-1 .bg-4 blockquote {
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.demo-1 .bg-4 blockquote:before {
color: #379eaa;
}
/* Fifth Slide */
.demo-1 .bg-5 .sl-slide-inner,
.demo-1 .bg-5 .sl-content-slice {
background: #ffeb41;
}
.demo-1 .bg-5 .deco {
border-color: #ecd82c;
}
.demo-1 .bg-5 .deco:after {
color: #000;
text-shadow: 0 0 1px #000;
}
.demo-1 .bg-5 h2,
.demo-1 .bg-5 blockquote {
color: #000;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.demo-1 .bg-5 blockquote:before {
color: #ecd82c;
}
.demo-2 .bg-img-1 {
background-image: url(../images/1.jpg);
}
.demo-2 .bg-img-2 {
background-image: url(../images/2.jpg);
}
.demo-2 .bg-img-3 {
background-image: url(../images/3.jpg);
}
.demo-2 .bg-img-4 {
background-image: url(../images/4.jpg);
}
.demo-2 .bg-img-5 {
background-image: url(../images/5.jpg);
}
/* Animations for content elements */
.sl-trans-elems .deco {
-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}
.sl-trans-elems h2 {
-webkit-animation: moveUp 1s ease-in-out both;
-moz-animation: moveUp 1s ease-in-out both;
-o-animation: moveUp 1s ease-in-out both;
-ms-animation: moveUp 1s ease-in-out both;
animation: moveUp 1s ease-in-out both;
}
.sl-trans-elems blockquote {
-webkit-animation: fadeIn 0.5s linear 0.5s both;
-moz-animation: fadeIn 0.5s linear 0.5s both;
-o-animation: fadeIn 0.5s linear 0.5s both;
-ms-animation: fadeIn 0.5s linear 0.5s both;
animation: fadeIn 0.5s linear 0.5s both;
}
.sl-trans-back-elems .deco {
-webkit-animation: scaleDown 1s ease-in-out both;
-moz-animation: scaleDown 1s ease-in-out both;
-o-animation: scaleDown 1s ease-in-out both;
-ms-animation: scaleDown 1s ease-in-out both;
animation: scaleDown 1s ease-in-out both;
}
.sl-trans-back-elems h2 {
-webkit-animation: fadeOut 1s ease-in-out both;
-moz-animation: fadeOut 1s ease-in-out both;
-o-animation: fadeOut 1s ease-in-out both;
-ms-animation: fadeOut 1s ease-in-out both;
animation: fadeOut 1s ease-in-out both;
}
.sl-trans-back-elems blockquote {
-webkit-animation: fadeOut 1s linear both;
-moz-animation: fadeOut 1s linear both;
-o-animation: fadeOut 1s linear both;
-ms-animation: fadeOut 1s linear both;
animation: fadeOut 1s linear both;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(500px) rotate(360deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#-moz-keyframes roll {
0% {
-moz-transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
-moz-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#-o-keyframes roll {
0% {
-o-transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
-o-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#-ms-keyframes roll {
0% {
-ms-transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
-ms-transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#keyframes roll {
0% {
transform: translateX(500px) rotate(360deg);
opacity: 0;
}
100% {
transform: translateX(0px) rotate(0deg);
opacity: 1;
}
}
#-webkit-keyframes moveUp {
0% {
-webkit-transform: translateY(40px);
}
100% {
-webkit-transform: translateY(0px);
}
}
#-moz-keyframes moveUp {
0% {
-moz-transform: translateY(40px);
}
100% {
-moz-transform: translateY(0px);
}
}
#-o-keyframes moveUp {
0% {
-o-transform: translateY(40px);
}
100% {
-o-transform: translateY(0px);
}
}
#-ms-keyframes moveUp {
0% {
-ms-transform: translateY(40px);
}
100% {
-ms-transform: translateY(0px);
}
}
#keyframes moveUp {
0% {
transform: translateY(40px);
}
100% {
transform: translateY(0px);
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes scaleDown {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(0.5);
}
}
#-moz-keyframes scaleDown {
0% {
-moz-transform: scale(1);
}
100% {
-moz-transform: scale(0.5);
}
}
#-o-keyframes scaleDown {
0% {
-o-transform: scale(1);
}
100% {
-o-transform: scale(0.5);
}
}
#-ms-keyframes scaleDown {
0% {
-ms-transform: scale(1);
}
100% {
-ms-transform: scale(0.5);
}
}
#keyframes scaleDown {
0% {
transform: scale(1);
}
100% {
transform: scale(0.5);
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Media Queries for custom slider */
#media screen and (max-width: 660px) {
.demo-1 .deco {
width: 130px;
height: 130px;
margin-left: -65px;
margin-bottom: 50px;
}
.demo-1 [data-icon]:after {
width: 110px;
height: 110px;
line-height: 110px;
font-size: 40px;
margin: -55px 0 0 -55px;
}
.demo-1 .sl-slide blockquote {
margin-bottom: -120px;
}
.demo-1 .sl-slide h2 {
line-height: 22px;
font-size: 18px;
margin-bottom: -40px;
letter-spacing: 8px;
}
.demo-1 .sl-slide blockquote p:before {
line-height: 10px;
width: 40px;
height: 40px;
font-size: 120px;
left: -45px;
}
.demo-2 .sl-slider-wrapper {
height: 500px;
}
.demo-2 .sl-slider h2 {
font-size: 36px;
}
.demo-2 .sl-slider blockquote {
font-size: 16px;
}
}
/* ---------*/
<div class="main">
<section id="1" style="background-color:#111111; color:#ffffff;">Scroll down</section>
<section id="2" style="background-color:#222222;"> section 2</section>
<section id="3" style="background-color:#333333;"> section 3</section>
<section>
<div class="container demo-1">
<div id="slider" class="sl-slider-wrapper">
<div class="sl-slider">
<section class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="deco" data-icon="H"></div>
<h2>A bene placito</h2>
<blockquote>
<p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="deco" data-icon="q"></div>
<h2>Regula aurea</h2>
<blockquote>
<p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="deco" data-icon="O"></div>
<h2>Dum spiro, spero</h2>
<blockquote>
<p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="deco" data-icon="I"></div>
<h2>Donna nobis pacem</h2>
<blockquote>
<p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite>
</blockquote>
</div>
</section>
<section class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="deco" data-icon="t"></div>
<h2>Acta Non Verba</h2>
<blockquote>
<p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite>
</blockquote>
</div>
</section>
</div><!-- /sl-slider -->
<nav id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div><!-- /slider-wrapper -->
</div>
</section>
<section id="4" style="background-color:#444444;">section 4</section>
<section id="5" style="background-color:#555555;">section 5</section>
<section id="6" style="background-color:#666666;">section 6</section>
</div>
CodePen:https://codepen.io/mitul-patel-the-lessful/pen/eYMWLWL?editors=1111
I linked above my CodePen, if jQuery doesn't work.
Any little help is appreciated!
Disable scroll when you hover to #slider:
function disableScroll(e){
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
}
$('#slider').on('DOMMouseScroll mousewheel', disableScroll);
Then you should create an event to enable scroll when scroll to last slide.
$('#slider').off('DOMMouseScroll mousewheel', disableScroll);
I have a text which appears when I run contrastShow function like this:
const contrast = document.getElementById("contrast");
function contrastHide() {
//sfxPlay(sfx.caption_hide);
contrast.classList.add("contrastHide");
contrast.classList.remove("contrastShow");
}
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
setTimeout(() => {
contrast.classList.add("zoomIn");
}, 3000);
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 0;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
.contrastHide {
animation: contrastAnimeHide 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
#-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
#-webkit-keyframes contrastAnimeHide {
0% { opacity: 1; top: 1.2vh }
100% { opacity: 0; top: 4vh }
}
.zoomIn {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class ="vertical-center-contrast contrast-container">
<p id="contrast" class="contrast"></p>
</div>
Then I want to animate the text by adding a new class attached to a keyframe animation (using a setTimeout at the very end f the code).
But unexpectedly the text just hides and there is no animation ?!
What I missed and how to fix this?
The heartbeat animation is running, your element is just hidden via opacity. You should set the initial value of .contrast opacity to 1 and use the backwards fill-mode. This way it doesn't fallback to 0 if you overwrite the animation.
const contrast = document.getElementById("contrast");
function contrastHide() {
//sfxPlay(sfx.caption_hide);
contrast.classList.add("contrastHide");
contrast.classList.remove("contrastShow");
}
function contrastShow(text) {
contrast.innerHTML = text;
contrast.classList.add("contrastShow");
contrast.classList.remove("contrastHide");
}
contrastShow("This is the text");
setTimeout(() => {
contrast.classList.add("zoomIn");
}, 3000);
.contrast-container {
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
/*outline: 0.1vw dashed orange;*/
}
.vertical-center-contrast {
position: absolute;
top: 73.5vh; /*top: 82vh;*/
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.contrast {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 2vw;
color: rgb(248, 247, 250);
opacity: 1;
top: 1.2vh;
margin: 0 auto;
}
.contrastShow {
animation: contrastAnimeShow 0.3s ease-in-out;
animation-fill-mode: backwards ;
}
.contrastHide {
animation: contrastAnimeHide 0.3s ease-in-out;
animation-fill-mode: backwards ;
}
#-webkit-keyframes contrastAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
#-webkit-keyframes contrastAnimeHide {
0% { opacity: 1; top: 1.2vh }
100% { opacity: 0; top: 4vh }
}
.zoomIn {
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}
#-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
<div class ="vertical-center-contrast contrast-container">
<p id="contrast" class="contrast"></p>
</div>
I am building a custom menu for a website and am trying to have the menu slide out on desktop and slide down on mobile. However, when I am testing it on my phone it is causing the menu to come down from the top right and should be coming down vertically. I am very stuck and lost and would love any help I can get on this. Here is a link to my code: https://codepen.io/caleb-case/pen/yLLmVZa
window.onclick = function(event){if(event.target == document.getElementById('outerNav')){closeNav();}};
function openNav() {
document.getElementById("jrc-sidenav").style.display = "block";
if (window.matchMedia("only screen and (max-width: 550px)").matches) {
document.getElementById("jrc-sidenav").classList.add("slide-in-blurred-top");
document.getElementById("jrc-sidenav").classList.remove("slide-out-blurred-top");
document.getElementById("jrc-sidenav").classList.remove("jrc-slide-in-blurred-right");
} else {
document.getElementById("jrc-sidenav").classList.add("jrc-slide-in-blurred-right");
document.getElementById("jrc-sidenav").classList.remove("jrc-slide-out-blurred-right");
document.getElementById("jrc-sidenav").classList.remove("slide-out-blurred-top");
}
document.getElementById("outerNav").style.position = "fixed";
document.getElementById("outerNav").style.width = "100%";
document.getElementById("et-main-area").style.backgroundColor = "rgba(0,0,0,0.4)";
document.getElementById("hamburger").style.display = "none";
}
function closeNav() {
if (window.matchMedia("only screen and (max-width: 550px)").matches) {
document.getElementById("jrc-sidenav").classList.add("slide-out-blurred-top");
document.getElementById("jrc-sidenav").classList.remove("slide-in-blurred-top");
document.getElementById("jrc-sidenav").classList.remove("jrc-slide-out-blurred-right");
} else {
document.getElementById("jrc-sidenav").classList.add("jrc-slide-out-blurred-right");
document.getElementById("jrc-sidenav").classList.remove("jrc-slide-in-blurred-right");
document.getElementById("jrc-sidenav").classList.remove("slide-out-blurred-top");
}
document.getElementById("et-main-area").style.backgroundColor = "#fff";
document.getElementById("outerNav").style.width = "0%";
setTimeout(function(){
document.getElementById("hamburger").style.display = "block";
},250);
}
/*Menu Styles */
body {
transition: background-color .5s;
font-family: 'Gotham-Book',Helvetica,Arial,Lucida,sans-serif;
}
#jrc-sidenav {
display: none;
}
#media only screen and (min-width: 576px) {
#jrc-sidenav {
width: 250px;
}
}
.outerNav {
display: block;
position: fixed;
right: 0px;
top: 0px;
width: 0%;
height: 100%;
overflow: hidden;
background-color: transparent;
transition: 0.5s;
}
.sidenav {
height: 100%;
width: 100%;
position: fixed;
z-index: 100;
top: 0px;
right: 0px;
background-color: #fff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 45px;
transform: translate3d(100%,0,0);
}
.sidenav a {
padding: 8px 8px 8px 16px;
text-decoration: none;
font-size: 16px;
color: #474747;
display: block;
transition: 0.3s;
text-align: left;
font-weight: 800;
cursor: pointer;
}
.sidenav a:hover {
color: #949494;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 5px;
font-size: 30px;
margin-left: 50px;
}
#hamburger {
font-size: 25px;
cursor: pointer;
color:#00a3e0;
position: relative;;
top: 0px;
right: 25px;
transition: 0.3s;
z-index: 101;
position: fixed;
}
#hamburger:hover {
color: #00a3e0b0;
}
.divider {
width: 215px;
border-top: 2px solid #474747;
margin-top: 15px;
margin-bottom: 15px;
transition: 0.3s;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.icon {
color: #00a3e0;
margin-right: 5px;
}
.side-links {
padding: 8px 8px 8px 20px;
}
#media only screen and (max-width: 600px) {
#hamburger {
font-size: 30px;
}
}
#media only screen and (max-width: 450px) {
.divider {
width: 90%;
transition: 0.7s !important;
}
.sidenav {
padding-top: 65px;
box-shadow: none !important;
transition: 0.7s !important;
overflow-y: auto !important;
}
.sidenav a {
padding: 20px 20px 20px 21px;
font-size: 20px;
transition: 0.7s !important;
}
}
/*Animation Menu Styles */
#keyframes jrc-slide-in-blurred-right {
0% {
-webkit-transform: translateX(1000px);
-o-transform: translateX(1000px);
transform: translateX(1000px);
-webkit-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
#keyframes jrc-slide-out-blurred-right {
0% {
-webkit-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(1000px);
-o-transform: translateX(1000px);
transform: translateX(1000px);
-webkit-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
}
.jrc-slide-in-blurred-right {
-webkit-animation: jrc-slide-in-blurred-right .5s cubic-bezier(.23,1,.32,1) both;
-o-animation: jrc-slide-in-blurred-right .5s cubic-bezier(.23,1,.32,1) both;
animation: jrc-slide-in-blurred-right .5s cubic-bezier(.23,1,.32,1) both;
}
.jrc-slide-out-blurred-right {
-webkit-animation: jrc-slide-out-blurred-right .45s cubic-bezier(.755,.05,.855,.06) both;
-o-animation: jrc-slide-out-blurred-right .45s cubic-bezier(.755,.05,.855,.06) both;
animation: jrc-slide-out-blurred-right .45s cubic-bezier(.755,.05,.855,.06) both;
}
#keyframes slide-in-blurred-top {
0% {
-webkit-transform: translateY(-1000px);
-o-transform: translateY(-1000px);
transform: translateY(-1000px);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
#keyframes slide-out-blurred-top {
0% {
-webkit-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-1000px);
-o-transform: translateY(-1000px);
transform: translateY(-1000px);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
}
.slide-in-blurred-top {
-webkit-animation: slide-in-blurred-top .5s cubic-bezier(.23,1,.32,1) both;
-o-animation: slide-in-blurred-top .5s cubic-bezier(.23,1,.32,1) both;
animation: slide-in-blurred-top .5s cubic-bezier(.23,1,.32,1) both;
}
.slide-out-blurred-top {
-webkit-animation: slide-out-blurred-top .45s cubic-bezier(.755,.05,.855,.06) both;
-o-animation: slide-out-blurred-top .45s cubic-bezier(.755,.05,.855,.06) both;
animation: slide-out-blurred-top .45s cubic-bezier(.755,.05,.855,.06) both;
}
<body id="et-main-area">
<div id="outerNav" class="outerNav">
<div id="jrc-sidenav" class="sidenav">
×
<i class="fas fa-play icon"></i>Sermons
<i class="fas fa-church icon"></i> About
<i class="fas fa-map-marker-alt icon"></i> Locations
<i class="fas fa-heart icon"></i> Give
<i class="fas fa-heart icon"></i> Events
<hr class="divider">
Get Involved
Grow Track
Life Groups
Kids & Youth
Ministries
Jobs
Blog
Contact Us
</div>
</div>
<span id ="hamburger" onclick="openNav()">☰</span>
</body>
I used floatingMenu
and I want get ID numbers with Data-id but I can not get the ID number of the buttons
Output:
example.com/?id=undefined
Why am I getting this error?
var myDiv = document.querySelector('.designer-actions');
$.floatingMenu({
selector: '.designer-actions a[data-action="show-actions-menu"]',
items: [{
title: 'Open',
action: 'https://example.com/?id=' + myDiv.dataset.idNo
}, ]
});
ul.floating-menu {
position: absolute;
background-color: #000;
border-radius: 4px
}
ul.floating-menu[data-fm-floated="top"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: -9px;
left: 50%;
margin-left: -9px;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 9px solid #000
}
ul.floating-menu[data-fm-floated="left"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 50%;
margin-bottom: -9px;
right: -9px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #000
}
ul.floating-menu[data-fm-floated="right"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 50%;
margin-bottom: -9px;
left: -9px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid #000
}
ul.floating-menu[data-fm-floated="bottom"]:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -9px;
left: 50%;
margin-left: -9px;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #000
}
ul.floating-menu li {
position: relative;
float: left;
height: 100%
}
ul.floating-menu li a {
position: relative;
float: left;
color: #fff;
font-size: 13px;
padding: 4px 12px;
text-decoration: none;
line-height: 32px
}
ul.floating-menu li .fm-icon {
position: relative;
float: left;
margin-right: 8px;
font-size: 24px;
line-height: 32px;
color: #fff
}
ul.floating-menu.animated {
animation-duration: 0.2s;
-webkit-animation-duration: 0.2s;
-ms-animation-duration: 0.2s;
-moz-animation-duration: 0.2s;
-o-animation-duration: 0.2s
}
ul.floating-menu.visible-transit {
-o-transition: .2s;
-ms-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
transition: .2s
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="left"].fadeInPosition {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="right"].fadeInPosition {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight
}
#-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="top"].fadeInPosition {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown
}
#-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
[data-fm-floated="bottom"].fadeInPosition {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://test3.moverals.com/mdm/floating-menu.js"></script>
<div id='designer-actions' class='designer-actions'>
<a class='icon ion-ios-more' data-idNo='1' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='right'>Button1</a>
<a class='icon ion-ios-more' data-idNo='2' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='right'>Button2</a>
</div>
JSFiddle
Updated answer:
You need to loop through the array:
$('.designer-actions a').each(function(){
idNo = $(this).data('idno');
$.floatingMenu({
selector: '.designer-actions a[data-action="show-actions-menu"]',
items: [{
title: 'Open',
action: 'https://example.com/?id=' + idNo
}, ]
});
});
I made a small scale experiment where I was testing an animation that would happen when you repeatedly hit the yellow square, in the jsfiddle below:
http://jsfiddle.net/aritro33/v86tE/5/
However, I am trying to move the animation seen in that jsfiddle to the jsfiddle here when you hit the compose/post circle/button. The animation would be applied to the posts. This is the jsfiddle:
I am having problems however, and after the 3+ times hitting the compose and post button, the animation falls apart.
Any ideas how to put the same animation seen in the first jsfiddle in the second jsfiddle for the posts?
Thanks so much to anyone who can help!
HTML for second experiment:
<div id="compose"><span id="firstspan">Compose</span>
<span id="fourthspan">Post</span>
</div>
<span id="noposts">- No Posts Yet -</span>
<div id="composeheader">
<input type="text" id="secondspan" value="Write Header Here:" />
</div>
<div id="thecolor"></div>
<div class="bubble">
<input type="text" id="thehex" value="#2AC0A3" />
</div>
<div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span>
</div>
<ul id="allposts"></ul>
CSS for second experiment:
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
body {
background-color: #2D3E50;
}
#compose {
height: 215px;
width: 215px;
background-color: #EBF1F1;
border-radius: 150px;
position: relative;
left: 100px;
top: 40px;
color: #2c3e50;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
#compose:hover {
background-color: #219B86;
color: #EBF1F1;
}
#firstspan {
font-size: 39px;
font-family:'Roboto';
position: relative;
left: 22px;
top: 75px;
}
#composeheader {
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 175px;
left: 365px;
color: white;
}
#secondspan {
color: white;
font-family:'Roboto';
font-size: 40px;
position: relative;
background-color: #2AC0A3;
border: 1px solid #2AC0A3;
left: 15px;
top: 10px;
}
#body {
min-height: 80px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 365px;
bottom: 275px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#thirdspan {
color: black;
font-family:'Roboto';
outline: 0px solid transparent;
}
.thirdspan2{
color: black;
font-family:'Roboto';
outline: 0px solid transparent;
}
#thecolor {
height: 50px;
width: 50px;
background-color: #2AC0A3;
border-radius: 100px;
position: relative;
left: 365px;
bottom: 315px;
}
.bubble {
position: relative;
left: 440px;
bottom: 365px;
width: 145px;
height: 50px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after {
content:'';
position: absolute;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 15px;
}
#thehex {
font-family:'Roboto';
font-size: 20px;
height: 30px;
width: 115px;
background-color: white;
position: relative;
border: 0px none;
outline: 0px solid transparent;
top: 10px;
left: 28px;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceInDown {
0% {
-webkit-transform: translateY(-2000px);
}
60% {
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInDown {
0% {
-moz-transform: translateY(-2000px);
}
60% {
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInDown {
0% {
-ms-transform: translateY(-2000px);
}
60% {
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInDown {
0% {
-o-transform: translateY(-2000px);
}
60% {
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInDown {
0% {
transform: translateY(-2000px);
}
60% {
transform: translateY(30px);
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY()
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#noposts {
color: white;
font-size: 39px;
font-family:'Roboto';
position: relative;
left: 440px;
bottom: 100px;
}
#fourthspan {
color: #2c3e50;
font-family:'Roboto';
font-size: 39px;
position: relative;
left: 70px;
top: 75px;
}
ul#allposts li{
min-height: 140px;
width: 500px;
position: relative;
left: 239px;
bottom: 432px;
}
.thecolor2{
height: 50px;
width: 50px;
border-radius: 100px;
background-color: #2AC0A3;
position: relative;
bottom: 591px;
left: 325px;
}
ul{
list-style-type: none;
}
.composeheader2{
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 581px;
left: 325px;
color: white;
}
.secondspan2{
color: white;
font-family:'Roboto';
font-size: 40px;
background-color: #2AC0A3;
border: 1px solid #2AC0A3;
position: relative;
left: 17px;
top: 13px;
}
.body2{
min-height: 80px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 325px;
bottom: 371px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
JS for second experiment:
var clicktwice = false;
var color;
var forrgb;
var finalrgb2;
var myheader;
//198 238 230
//rgb(42, 192, 163) #2AC0A3
//rgb(198, 238, 230) #C6EEE6
//+156, +46, +67
$('#fourthspan').hide();
$('#thecolor').hide();
$('.bubble').hide();
$('#composeheader').hide();
$('#body').hide();
$('#compose').click(function () {
setInterval(function () {
$('#noposts').fadeTo(10, 0);
}, 3000);
});
$("#thehex").keyup(function () {
color = $("#thehex").val();
forrgb = $("#thehex").val();
$("#thecolor").css("background-color", color);
$("#secondspan").css("background-color", color);
$("#secondspan").css("border-color", color);
$("#composeheader").css("background-color", color);
forrgb = $('#thehex').val().replace('#', '');
var reg = forrgb.length === 3 ? forrgb[0] + forrgb[0] + forrgb[1] + forrgb[1] + forrgb[2] + forrgb[2] : forrgb;
var conv = reg.match(/.{2}/g);
var r = parseInt(conv[0], 16);
r = r + 156;
var g = parseInt(conv[1], 16);
g = g + 46;
var b = parseInt(conv[2], 16);
b = b + 67;
var rgb = r + ',' + g + ',' + b;
rgb = rgb.replace(/NaN/g, ' ... ');
var finalrgb = ('rgb(' + rgb + ')');
finalrgb2 = finalrgb;
$("#body").css("background-color", finalrgb);
});
$('#compose').click(function () {
if (clicktwice === false) {
color = "#2AC0A3";
finalrgb2 = "rgb(198, 238, 230)";
$("#secondspan").val("Write Header Here:");
$('#thirdspan').text("Write context text here:");
$('#thehex').val(color);
$("#thecolor").css("background-color", color);
$("#secondspan").css("background-color", color);
$("#secondspan").css("border-color", color);
$("#composeheader").css("background-color", color);
$("#body").css("background-color", finalrgb2);
$('#thecolor').fadeTo(0, 1);
$('#body').fadeTo(0,1);
$('.bubble').fadeTo(0,1);
$('#composeheader').fadeTo(0, 1);
$('#firstspan').hide();
$('#fourthspan').show();
$('#thecolor').show();
$('.bubble').show();
$('#composeheader').show();
$('#body').show();
$(".composeheader2").animate({
bottom: '-=248px'
}, 400);
$(".body2").animate({
bottom:'-=248px'
}, 400);
$(".thecolor2").animate({
bottom:'-=245px'
}, 400);
$('#thecolor').addClass('box animated bounceInDown');
$('.bubble').addClass('box animated bounceInDown');
$('#composeheader').addClass('box animated bounceInDown');
$('#body').addClass('box animated bounceInDown');
clicktwice = true;
} else if (clicktwice === true) {
myheader = $("#secondspan").val();
$('.bubble').fadeTo(300, 0);
$('#firstspan').show();
$('#fourthspan').hide();
clicktwice = false;
var thestream = document.getElementById('allposts');
var oneofpost = document.createElement('li');
var thecolor2 = document.createElement('div');
thecolor2.className = "thecolor2";
var composeheader2 = document.createElement('div');
composeheader2.className = "composeheader2";
var secondspan2 = document.createElement('span');
secondspan2.className = "secondspan2";
var body2 = document.createElement('div');
body2.className = "body2";
var thirdspan2 = document.createElement('span');
thirdspan2.className = "thirdspan2";
var bodytext = $('#thirdspan').html();
thirdspan2.innerHTML = bodytext;
body2.style.backgroundColor = finalrgb2;
secondspan2.innerHTML = myheader;
thecolor2.style.backgroundColor = color;
composeheader2.style.backgroundColor = color;
secondspan2.style.backgroundColor = color;
secondspan2.style.borderColor = color;
$('#thecolor').fadeTo(0, 0);
$('#body').fadeTo(0, 0);
$('#composeheader').fadeTo(0, 0);
thestream.appendChild(body2);
thestream.appendChild(thecolor2);
thestream.appendChild(composeheader2);
composeheader2.appendChild(secondspan2);
body2.appendChild(thirdspan2);
$('#thecolor').removeClass('box animated bounceInDown');
$('.bubble').removeClass('box animated bounceInDown');
$('#composeheader').removeClass('box animated bounceInDown');
$('#body').removeClass('box animated bounceInDown');
}
});
I've cleaned this up A LOT, the code should be much easier to read and follow now:
HTML
<script id="empty-message" type="html/template">
<div class="message new box animated bounceInDown">
<div class="thecolor"></div>
<div class="bubble">
<input type="text" class="hexcolor" value="#2AC0A3" />
</div>
<div class="composeheader">
<input type="text" value="Write Header Here:" />
</div>
<div class="body">
<span contenteditable="true">Write context text here:</span>
</div>
</div>
</script>
<div id="message-actions">
<span class="compose">Compose</span>
<span class="post">Post</span>
</div>
<div id="no-posts">- No Posts Yet -</div>
<div id="all-posts"></div>
JavaScript
var getRGB = function(color) {
var rgb = color.replace('#', '');
rgb = rgb.length === 3 ? rgb[0] + rgb[0] + rgb[1] + rgb[1] + rgb[2] + rgb[2] : rgb;
var conv = rgb.match(/.{2}/g);
var r = parseInt(conv[0], 16) + 156;
var g = parseInt(conv[1], 16); + 46;
var b = parseInt(conv[2], 16); + 67;
rgb = r + ',' + g + ',' + b;
rgb = rgb.replace(/NaN/g, ' ... ');
rgb = ('rgb(' + rgb + ')');
return rgb;
};
$(document).ready(function() {
$('#all-posts').on('keyup', '.message.new .hexcolor', function () {
var color = $(this).val();
$(".message.new .thecolor, .message.new .composeheader").css("background-color", color);
$(".message.new .body").css("background-color", getRGB(color));
});
$('#message-actions').click(function () {
if ($('.compose').is(':visible')) {
$('#all-posts').prepend($('#empty-message').html());
} else {
var $message = $('#all-posts .message:first').removeClass('new box animated bounceInDown');
$message.find('.composeheader > input').attr('readonly', true);
$message.find('.body > span').attr('contenteditable', false);
}
$('#no-posts').hide();
$('.compose, .post').toggle();
});
});
CSS
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
/* css for animation */
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceInDown {
0% {
-webkit-transform: translateY(-2000px);
}
60% {
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInDown {
0% {
-moz-transform: translateY(-2000px);
}
60% {
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInDown {
0% {
-ms-transform: translateY(-2000px);
}
60% {
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInDown {
0% {
-o-transform: translateY(-2000px);
}
60% {
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInDown {
0% {
transform: translateY(-2000px);
}
60% {
transform: translateY(30px);
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY()
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
/* page */
body {
background-color: #2D3E50;
font-family:'Roboto';
min-width: 960px;
}
/* message compose */
.message {
margin-top: 40px;
}
.composeheader {
background-color:#2AC0A3;
color: white;
padding: 10px 15px;
clear: both;
}
.composeheader INPUT {
color: white;
font-size: 40px;
background-color: transparent;
border-width: 0;
font-family: 'Roboto';
}
.body {
min-height: 80px;
overflow: hidden;
padding: 20px;
background-color: #C6EEE6;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.body > span {
color: black;
outline: 0px solid transparent;
}
.thecolor {
height: 50px;
width: 50px;
background-color: #2AC0A3;
border-radius: 100px;
float: left;
margin-bottom: 10px;
}
.bubble { display: none; }
.message.new .bubble {
height: 50px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
float: left;
margin-left: 20px;
display: block;
}
.bubble:after {
content:'';
position: absolute;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: 55px;
top: 15px;
}
.hexcolor {
font-size: 20px;
height: 30px;
width: 100px;
background-color: transparent;
border-width: 0px;
margin: 10px 5px
}
/* compose button */
#message-actions {
height: 215px;
width: 215px;
background-color: #EBF1F1;
border-radius: 150px;
position: relative;
color: #2c3e50;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
float: left;
margin: 40px 100px 10px;
}
#message-actions:hover {
background-color: #219B86;
color: #EBF1F1;
}
#no-posts {
color: white;
font-size: 39px;
float: left;
margin-top: 120px;
}
.compose {
font-size: 39px;
position: relative;
left: 22px;
top: 75px;
}
.post {
color: #2c3e50;
font-size: 39px;
position: relative;
left: 70px;
top: 75px;
display: none;
}
/* messages */
#all-posts {
min-height: 140px;
width: 500px;
float: left;
}
jsFiddle Demo
Use meaningful names for your ids and css classes, it makes the code much easier to follow and understand what is going on. Styles such as "firstspan" mean nothing and means you have to keep looking back at the markup to figure out context.
I've cleaned this up as best I can, I'm not good with CSS3 or the animation stuff, I'll leave it to you to fix that up. I think this should be working exactly as you expect now, messages slide down and are added to the stack top down.
EDIT 2:
I changed a lot of the ID selectors to use and refactored the code to make it much simpler. You were also setting the ID on the newly created elements which were all the same, this is wrong and will cause you issues further down the line (ID's should be unique per page).
I cleaned up the JS, combining multiple statements which did the same thing with different selectors. You were using a lot of standard JavaScript getElementById type calls, I changed these create the DOM elements using jQuery instead.
I used an html/template script declaration to create the new elements, it's much cleaner than using jQuery to built up your new DOM elements. Also, your compose and post elements were essentially the same thing. Don't repeat CSS styles, either combine multiple selectors, or just re-use the same structure as I have done. Hopefully the changes make sense.