EDIT: Anyone please?
I got this from somewhere but when I tap on it on the phone (on PC it's ok) it stays with hover attributes = no BG and black colour to the next website refresh:
HTML
<a id="back2Top" title="Top" href="#">➤</a>
CSS
#back2Top {
width: 40px;
line-height: 40px;
overflow: hidden;
z-index: 999;
display: none;
cursor: pointer;
transition: background-color 0.2s linear;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
position: fixed;
bottom: 39px;
right: 0;
background-color: #8db500;
color: #fff;
text-align: center;
font-size: 30px;
text-decoration: none;
}
#back2Top:hover {
background-color: transparent;
color: #000;
}
#media only screen and (max-width: 767px) {
#back2Top {
bottom: 0px;
}}
And JS
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 100) {
$('#back2Top').fadeIn();
$('.open').css('background', 'rgba(141, 181, 0, 0.5)'); //these 3 are for something different
$('.closed').css('background', 'rgba(201, 0, 10, 0.5)');
$('.warn').css('background', 'rgba(255, 113, 0, 0.5)');
} else {
$('#back2Top').fadeOut();
$('.open').css('background', 'rgba(141, 181, 0, 1)'); //these 3 are for something different
$('.closed').css('background', 'rgba(201, 0, 10, 1)');
$('.warn').css('background', 'rgba(255, 113, 0, 1)');
}
});
$(document).ready(function() {
$("#back2Top").click(function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});
What is wrong there? Or what I did wrong?
×I don't know what to add more here, it won't let me post it because of mostly code.×
Thank you.
If I'm right then you're trying to make an icon to go to the Top.
Here, I'm sharing a simple code for that, you'll understand easily.
window.onscroll = function () { myFunction() };
var goToTop = document.getElementById("goToTop");
function myFunction() {
if (window.pageYOffset >= 30) {
goToTop.classList.add("sticky")
} else {
goToTop.classList.remove("sticky");
}
}
body{
height:1500px;
width:100vw;
}
.goToTop{
height:69px;
width:69px;
border-radius: 50%;
background:white;
position:fixed;
right:30px;
bottom:20px;
z-index:1000;
display:none;
}
.goToTop img{
width:70px;
}
.goToTop.sticky{
display: inline-block;
}
<body id="body">
<div class="goToTop" id="goToTop">
<a href="#body">
<img src="https://img.icons8.com/ios/50/000000/collapse-arrow--v1.png"/>
</a>
</div>
</body>
OR
If I'm wrong
Or
You want me to fix your code only, then let me know in the comments.
Related
I have three div boxes in a row, and on scroll, they should show slowly from the side, but when I scroll up slowly and a little after they show up, the left and right boxes for some reason stay on the page.
My function showBox3 writes in console "false" and classList where is "show" class, but this class shouldn't be there.
Actually, my code works when I scroll normally but when I stop scrolling slightly above the limit, the left and right boxes stay on page.
And one more problem is when "topBox" is a little below the limit, and I scroll up just a little more, but still below the limit, boxes quickly remove from the page and show up again.
const box21 = document.querySelector(".box21");
const box22 = document.querySelector(".box22");
const box23 = document.querySelector(".box23");
var trigger = window.innerHeight * 0.8;
window.addEventListener("scroll", showBox2);
function showBox2() {
var check;
const topBox = box22.getBoundingClientRect().top;
if (trigger > topBox) {
box22.classList.add("show");
check = true;
} else {
box22.classList.remove("show");
check = false;
}
showBox1(check);
showBox3(check);
}
function showBox1(ch) {
if (ch == true) {
setTimeout(() => {
box21.classList.add("show");
}, 400);
} else {
box21.classList.remove("show");
}
}
function showBox3(ch) {
if (ch == true) {
setTimeout(function () {
box23.classList.add("show");
}, 700);
} else {
box23.classList.remove("show");
console.log(box23.classList);
console.log(ch);
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box1 {
height: 110vh;
background-color: aqua;
display: flex;
align-items: center;
justify-content: center;
}
/* I have a bug in box 2 */
.box2 {
height: 60vh;
width: 100%;
background-color: #ddd;
display: flex;
align-items: center;
justify-content: space-around;
}
.box2>div {
height: 70%;
width: 27%;
background-color: black;
}
.box21 {
transform: translateX(-140%) rotate(-45deg);
transition: transform 1.4s ease;
}
.box21.show {
transform: translateX(0%) rotate(0deg);
}
.box22 {
transform: translateX(340%) rotate(+45deg);
transition: transform 0.8s ease;
}
.box22.show {
transform: translateX(0%) rotate(0deg);
}
.box23 {
transform: translateX(340%) rotate(-45deg);
transition: transform 1.8s ease;
}
.box23.show {
transform: translateX(0%) rotate(0deg);
}
/* this part below is not important */
.box3 {
height: 60vh;
width: 100%;
background-color: cornflowerblue;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div class="box1">
<h1>Scroll down</h1>
</div>
<div class="box2">
<div class="box21"></div>
<div class="box22"></div>
<div class="box23"></div>
</div>
<div class="box3"></div>
</body>
<script src="js.js"></script>
</html>
The + button on this page of my portfolio site provides more context and information on videos. It's composed of a simple "plus"-shaped SVG that I made contained within a circle-shaped div (border-radius: 100%), and animates out an additional div upon click.
On CodePen, where I originally coded this, the entire button (constituting both divs) is clickable. When I copied the code over to Squarespace, I noticed the upper half of the button is no longer clickable.
Since it works as intented on CodePen, I don't think there's an issue with the code (some relevant portions below but all is more easily visible in the CodePen link.
// HTML snippet:
<body>
<div id="feed">
<section class="slide" id="bB1">
<div class="containerBox cBBefore">
<div class="textContainer">
<div class="textSubCont">
<div class="plusButton noSelect">
<div class="plusSpan inactivePlus"></div>
</div>
</div>
</div>
</div>
</section>
// CSS Snippet:
.plusButton {
position: absolute;
pointer-events: auto;
cursor: default;
box-sizing: content-box;
border-radius: 100%;
right: -1.333vmin;
top: -1.333vmin;
height: 5vmin;
width: 5vmin;
z-index: 6;
background: rgba(79, 76, 220, 0.75);
-webkit-filter: drop-shadow(
-0.25vmin 0.5vmin 0.5vmin rgba(0, 0, 0, 0.33)) !important;
filter: drop-shadow(-0.25vmin 0.5vmin 0.5vmin rgba(0, 0, 0, 0.33)) !important;
}
.plusSpan {
content: url(https://www.charliemoody.com/s/plus.svg);
width: 100%;
height: 100%;
transform-origin: center;
-webkit-transform-origin: center;
}
.activePlus {
-webkit-transform: rotate(-765deg);
transform: rotate(-765deg);
-webkit-transition: transform 1s cubic-bezier(0.5, 0, 0.25, 1);
transition: transform 1s cubic-bezier(0.5, 0, 0.25, 1);
}
.inactivePlus {
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transition: transform 1s cubic-bezier(0.5, 0, 0.25, 1);
transition: transform 1s cubic-bezier(0.5, 0, 0.25, 1);
}
// JS snippets
function enableButtons() {
let allButtons = document.querySelectorAll(".plusButton");
let allButtonSpans = document.querySelectorAll(".plusSpan");
let allCBs = document.querySelectorAll(".containerBox");
for (let i = 0; i < allButtons.length; i++) {
allButtons[i].addEventListener("click", function classToggle() {
allButtonSpans[i].classList.toggle("inactivePlus");
allButtonSpans[i].classList.toggle("activePlus");
}
}
function pauseOnPlus() {
let plusButtons = document.querySelectorAll(".plusButton");
let vids = document.querySelectorAll(".vidElement");
for (let i = 0; i < plusButtons.length; i++) {
plusButtons[i].addEventListener("click", function (event) {
if (vids[i].paused) vids[i].play();
else vids[i].pause();
});
}
}
function loadTheRest() {
enableButtons();
pauseOnPlus();
}
window.addEventListener("load", loadTheRest);
Nevermind!! Easy fix. Just needed to add "box-sizing: content-box;" to .plusSpan in the CSS.
I'm currently setting up a news/image slider on my site via JS. I have the slide data rolling in through a PHP loop with unique ID's. Everything is working smoothly, I just can't figure out how to reset the timer/interval when you manually switch slides.
Also, there has to be a better/easier way to write the manual click navigation I currently have setup with all the unique ID's. I have the loop sliced at 5.
(my code is a mess)
$(document).ready(function(){
$("#newsFeatured article:first").addClass("active");
$("#newsFeatured li:first").addClass("active");
});
var toggleSlide = function(){
$("#newsFeatured article.active").removeClass("active")
.next().add("#newsFeatured article:first").last().addClass("active");
$("#newsFeatured li.active").removeClass("active")
.next().add("#newsFeatured li:first").last().addClass("active");
}
setInterval(toggleSlide, 8000);
$(document).ready(function(){
$("#control1").on('click', function() {
$("#slide1").addClass("active");
$("#slide2, #slide3, #slide4, #slide5").removeClass("active");
$("#control1").addClass("active");
$("#control2, #control3, #control4, #control5").removeClass("active");
clearInterval(toggleSlide);
});
$("#control2").on('click', function() {
$("#slide2").addClass("active");
$("#slide1, #slide3, #slide4, #slide5").removeClass("active");
$("#control2").addClass("active");
$("#control1, #control3, #control4, #control5").removeClass("active");
});
$("#control3").on('click', function() {
$("#slide3").addClass("active");
$("#slide1, #slide2, #slide4, #slide5").removeClass("active");
$("#control3").addClass("active");
$("#control1, #control2, #control4, #control5").removeClass("active");
});
$("#control4").on('click', function() {
$("#slide4").addClass("active");
$("#slide1, #slide2, #slide3, #slide5").removeClass("active");
$("#control4").addClass("active");
$("#control1, #control2, #control3, #control5").removeClass("active");
});
$("#control5").on('click', function() {
$("#slide5").addClass("active");
$("#slide1, #slide2, #slide3, #slide4").removeClass("active");
$("#control5").addClass("active");
$("#control1, #control2, #control3, #control4").removeClass("active");
});
});
https://jsfiddle.net/aor1xmb5/
Lastly, i'm interested in getting my slide to interact with touch for mobile devices, if anyone can point me in the direction of a good tutorial on getting that started.
Thanks!
Clearing intervals is fairly simple:
function myFn() {console.log('idle');}
var myTimer = setInterval(myFn, 4000);
// Then, later at some future time,
// to restart a new 4 second interval starting at this exact moment in time
clearInterval(myTimer);
myTimer = setInterval(myFn, 4000);
Please check the snippet:
$(function() {
$("#newsFeatured article:first").addClass("active");
$("#newsFeatured li:first").addClass("active");
var sliderInterval = setInterval(toggleSlide, 8000);
$('.featuredControls').on('click', 'li', function() {
var $this = $(this),
id = $this.attr('id'),
index = id.replace('control', '');
slideTo(index);
// Clear interval.
clearInterval(sliderInterval);
sliderInterval = setInterval(toggleSlide, 8000);
});
function slideTo(index) {
var id = '#control' + index,
$this = $(id);
// Highlight active slide.
$(".featuredSlide").removeClass("active");
$("#slide" + index).addClass("active");
// Highlight active control.
$this.parent().find('li').removeClass("active");
$this.addClass("active");
}
function toggleSlide() {
// Get current slide.
var id,
index,
$next = $(".featuredControls .active").next();
// If last item, start over.
if ($next.length === 0) {
$next = $(".featuredControls li").first();
}
id = $next.attr('id'),
index = id.replace('control', '');
slideTo(index);
};
});
/* NEWS FEATURED SLIDER */
#newsFeatured {
position: relative;
height: 300px;
transition: 0.1s all linear;
}
#newsFeatured:hover {
box-shadow: -6px 0px 0px 0px #ffc60d;
}
.featuredControls {
opacity: 0;
position: absolute;
list-style-type: none;
right: 30px;
margin: 0;
padding: 20px;
z-index: 1;
transition: 0.2s all linear;
}
#newsFeatured:hover .featuredControls {
opacity: 1;
right: 0;
}
.featuredControls li {
background: rgba(0, 0, 0, 0.7);
display: inline-block;
height: 20px;
width: 15px;
border: 0;
border-radius: 3px;
cursor: pointer;
}
.featuredControls li.active {
background: #ffc60d;
}
.featuredSlide {
display: none;
background: rgba(0, 0, 0, 0.3);
position: absolute;
left: 0;
width: 100%;
height: 300px;
overflow: hidden;
}
#newsFeatured:hover .featuredSlide {
box-shadow: -1px 0px 0px 0px #101415;
}
#newsFeatured article.active {
display: block;
}
.featuredImage {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
transition: 0.3s all ease;
animation: featuredImage ease 1;
animation-duration: 1s;
}
#keyframes featuredImage {
from {
opacity: 0;
background-position: 30% 50%;
}
to {
opacity: 1;
background-position: 50% 50%;
}
}
.featuredContent {
width: 100%;
padding: 20px;
background: rgba(0, 0, 0, 0.65);
position: absolute;
bottom: 0;
transition: 0.5s all ease;
}
.featuredContent h2 {
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
margin: 0;
animation: featuredTitle ease 1;
animation-duration: 1s;
}
#keyframes featuredTitle {
from {
padding-left: 75px;
opacity: 0;
}
to {
padding-left: 0;
opacity: 1;
}
}
.featuredContent h2 a {
color: #ffc60d;
margin: 0 0 5px 0;
transition: 0.1s all linear;
}
#newsFeatured:hover .featuredContent h2 a {
color: #eee;
}
.featuredContent section {
color: #a7a397;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='newsFeatured' class='ipsClearfix'>
<ul class='featuredControls'>
<li id='control1'></li>
<li id='control2'></li>
</ul>
<article id='slide1' class='featuredSlide'>
<a href=''>
<div class='featuredImage' style='background-image: url(http://i.imgur.com/udTA5il.jpg);'></div>
</a>
<div class='featuredContent'>
<h2>
First Slide Title
</h2>
<section class='ipsType_normal ipsType_richText ipsType_break'>First slide description.</section>
</div>
</article>
<article id='slide2' class='featuredSlide'>
<a href=''>
<div class='featuredImage' style='background-image: url(http://i.imgur.com/SWy0AHZ.jpg);'></div>
</a>
<div class='featuredContent'>
<h2>
Second Slide Title
</h2>
<section class='ipsType_normal ipsType_richText ipsType_break'>Second slide description.</section>
</div>
</article>
</div>
How to reproduce the effect on this website :
https://shop.stripe.com/
I mean waiting for the DOM to fully load before showing anything, and then having the background image zooming out for 1s. Pretty cool.
It's done using different transition and transforms together. Demo: http://jsfiddle.net/lotusgodkk/eHAuh/2/
Key is to add/remove classes in document.ready
HTML:
<div id="DIV_1" class="scaled"></div>
JS:
$(document).ready(function () {
$('#DIV_1').attr('class', 'animatable');
setTimeout(function () {
$('#DIV_1').removeClass('animatable');
}, 1000)
});
CSS:
#DIV_1 {
background-position: 50% 50%;
bottom: 0px;
height: 472px;
left: 0px;
position: absolute;
right: 0px;
top: 0px;
width: 600px;
z-index: 1;
background: rgba(0, 0, 0, 0) url(https://shop.stripe.com/assets/images/showcase/thairu-kat.jpg) no-repeat scroll 50% 50% / cover padding-box border-box;
font: normal normal normal 16px/normal Helvetica, Arial, sans-serif;
zoom:1.1;
background-size:cover;
}
/*#DIV_1*/
.animatable {
-webkit-transition:all 750ms ease-out;
transition:all 750ms ease-out;
}
.scaled {
-webkit-transform:scale(1.02);
transform:scale(1.02);
}
You can also do it easily with pure javascript:
css:
#blackdiv { background: black; color: white; position: fixed; width: 100%; height: 100%; }
html:
<div id="blackdiv"></div>
<div>page content</div>
js:
window.onload = function(){
var blackdiv = document.getElementById('blackdiv');
blackdiv.style.opacity = 1;
doIt();
};
var doIt = function(){
if( blackdiv.style.opacity > 0 ){
console.log(blackdiv.style.opacity);
blackdiv.style.opacity -= .1;
setTimeout("doIt()", 100);
}
}
Check jsFiddle
I have been playing with CSS trying to create a 3d box that you can select the face with vanilla javascript.
It is simply changing the className of the box divs and using the transition property to smoothly transition between locations.
here is a jsfiddle to show a working example http://jsfiddle.net/synthet1c/VdDmA/1/
It looks cool at the moment but it is not quite behaving the way I want... Does anyone know how I can keep the box solid when it is going through it's transition? currently if the face is going from 360deg to 90deg the face will rotate 270deg in the wrong direction. I understand why it's doing it but can't make a workaround for it.
I added all the browser prefixes but have only used it on firefox.
cheers for any advice,
Andrew
#right, #back, #left, #front
{
height: 150px;
width: 150px;
position: absolute;
border: 1px solid rgba(200,200,200,0.7);
background-color: rgba(0,0,255,0.5);
margin: 0px;
}
.right{
transform: rotateY(90deg) translatez(75px) translatex(-75px);
transition: all 4s;
}
.back{
transform: rotateY(180deg) translatez(0px) translatex(0px);
transition: all 4s;
}
.left{
transform: rotateY(270deg) translatez(75px) translatex(70px);
transition: all 4s;
}
.front{
transform: rotateY(0deg) translatez(150px) translatex(0px);
transition: all 4s;
}
var id = function(elem){
var theId = document.getElementById(elem);
return theId;
}
function button1(){
id('front').className = 'front';
id('right').className = 'right';
id('back').className = 'back';
id('left').className = 'left';
}
function button2(){
id('front').className = 'right';
id('right').className = 'back';
id('back').className = 'left';
id('left').className = 'front';
}
function button3(){
id('front').className = 'back';
id('right').className = 'left';
id('back').className = 'front';
id('left').className = 'right';
}
function button4(){
id('front').className = 'left';
id('right').className = 'front';
id('back').className = 'right';
id('left').className = 'back';
}
It's actually pretty simple. You just need to do a check to see whether the difference, let's call it dif, in absolute value between the angle you're currently at and the angle you want to get to is over 180° and if it is, you rotate by 360° minus dif in absolute value, the direction of the rotation being given by the sign of dif.
I've also made some changes to the CSS, and if you want to understand more about how you can create a realistic looking cube, you can check my (really) detailed answer to a similar question.
demo
HTML:
<div class='buttons'>
<button class='btn'>Front</button>
<button class='btn'>Left</button>
<button class='btn'>Back</button>
<button class='btn'>Right</button>
</div>
<div class='house'>
<div class='face front'>Front</div>
<div class='face back'>Back</div>
<div class='face right'>Right</div>
<div class='face left'>Left</div>
</div>
Relevant CSS:
body /* or parent of .house */ { perspective: 45em; }
.house { position: relative; transform-style: preserve-3d; transition: 1s; }
.house, .face { width: 10em; height: 10em; }
.face {
box-sizing: border-box;
position: absolute;
padding: 1em;
}
.front { transform: translateZ(5em); background: rgba(255, 165, 0, .75); }
.back {
transform: rotateY(180deg) translateZ(5em);
background: rgba(30, 144, 255, .75);
}
.right {
transform: rotateY(90deg) translateZ(5em);
background: rgba(220, 20, 60, .75);
}
.left {
transform: rotateY(-90deg) translateZ(5em);
background: rgba(127, 255, 0, .75);
}
JavaScript:
(function(){
var btnsEl = document.querySelector('.buttons'), currentAngle = 0;
btnsEl.addEventListener('click', function(e){
var b = e.target.innerHTML.toLowerCase(),
house = document.querySelector('.house'),
btns = {'front': 0, 'left': 90, 'back': 180, 'right': -90},
dif = btns[b] - currentAngle%360;
if(!e.target.classList.contains('btn') || dif === 0) return;
currentAngle += (Math.abs(dif) > 180) ?
(Math.abs(dif) - 360)*Math.abs(dif)/dif :
dif;
house.style['-webkit-transform'] = 'rotateY(' + currentAngle + 'deg)';
house.style['transform'] = 'rotateY(' + currentAngle + 'deg)';
}, false);
}());
Also, you can do a rotating 3D box with pure CSS. However, the > 180° rotation problem can only be solved with JavaScript.
pure CSS version of the demo