I am trying to make a feature where a button slides up to take you back to the top after scrolling. However for some reason it just won't work. It works fine when I use
if (scroll >= 84) {
$("#ID").fadeIn();
} else {
$("#ID").fadeOut();
}
But when it just doesnt work with either animate or css.
The way i keep track of the scroll is with a eventlistener, and declaring a let with the value:
let scroll = this.scrollY;
I hope this is enough information to give you an idea of what im going for. Thanks for the help in advance
Try this (run and scroll down):
var timeout;
for (var i = 0; i < 200; i++) {
document.body.innerHTML += "Example Text<br>"
}
window.addEventListener("scroll", () => {
var scrollDistance = window.scrollY
if (scrollDistance >= 100) {
clearTimeout(timeout);
document.querySelector("button").style.display = "";
setTimeout(function() {
document.querySelector("button").style.opacity = "1"
}, 1);
document.querySelector("button").style.cursor = "pointer";
} else {
clearTimeout(timeout);
document.querySelector("button").style.opacity = "0";
document.querySelector("button").style.cursor = "";
timeout = setTimeout(function() {
document.querySelector("button").style.display = "none"
}, 500);
}
})
document.querySelector("button").addEventListener("click", () => {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
})
button {
position: fixed;
right: 10px;
bottom: 10px;
border-radius: 50%;
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffcccb;
border: 2px solid black;
opacity: 0;
outline: none;
transition: opacity 0.5s;
}
button>div {
width: 20px;
height: 20px;
border-width: 5px 5px 0px 0px;
border-style: solid;
border-color: black;
transform: translate(0, 4px) rotate(-45deg);
}
<button>
<div></div>
</button>
Note that most of the code is just setup. This is the actual code that does the scrolling work:
document.querySelector("button").addEventListener("click", () => {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
})
It simply listens for the click of the button, and scrolls to the top.
Related
I have a custom cursor on my site that is working perfectly apart from one thing. When clicking through to a new page, when the page loads the cursor resets itself to the top left of the page regardless of where you leave the mouse on the page, then once you moved the mouse the cursor moves back to where the mouse is. I have tried removing "top" & "left" from the CSS but the problem remains. I cant see what is causing this to happen, and I just need the cursor to stay where the mouse is positioned on the page and not reset every time you navigate to a new page.
jQuery(document).ready(function($) {
let cursor = document.querySelector('#custom-cursor');
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
$('#custom-cursor').remove();
}
else { cursor.style.display = 'block';}
document.addEventListener('mousemove', evt => {
let { clientX: x, clientY: y } = evt;
let scale = 1;
if (evt.target.matches('a,span,[onclick],img,video,i')) {
cursor.classList.add('active');
scale = 0.5;
} else {
cursor.classList.remove('active');
}
cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
});
});
* {
cursor: none;
}
#custom-cursor {
display: none;
position: fixed;
width: 20px; height: 20px;
top: -10px;
left: -10px;
border: 2px solid black;
border-radius: 50%;
opacity: 1;
background-color: #fb4d98;
pointer-events: none;
z-index: 99999999;
transition:
transform ease-out 0.15s,
border 0.5s,
opacity 0.5s,
background-color 0.5s;
}
#custom-cursor.active {
opacity: 0.5;
background-color: #000;
border: 2px solid #fb4d98;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>
Use ordinary CSS cursor as shown in the other answer and replace it with you fancy cursor in the first mouse event:
jQuery(document).ready(function($) {
let cursor = document.querySelector('#custom-cursor');
document.addEventListener('mousemove', evt => {
document.body.classList.add('custom-cursor-moved')
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
$('#custom-cursor').remove();
} else {
cursor.style.display = 'block';
}
let {
clientX: x,
clientY: y
} = evt;
let scale = 1;
if (evt.target.matches('a,span,[onclick],img,video,i')) {
cursor.classList.add('active');
scale = 0.5;
} else {
cursor.classList.remove('active');
}
cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
});
});
body {
height: 100vh;
}
html,
body {
margin: 0;
padding: 0;
}
* {
cursor: url(https://i.stack.imgur.com/7pmmV.png) 0 0, auto;
}
.custom-cursor-moved,
.custom-cursor-moved * {
cursor: none !important;
}
#custom-cursor {
display: none;
position: fixed;
width: 20px;
height: 20px;
top: -10px;
left: -10px;
border: 2px solid black;
border-radius: 50%;
opacity: 1;
background-color: #fb4d98;
pointer-events: none;
z-index: 99999999;
transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}
#custom-cursor.active {
opacity: 0.5;
background-color: #000;
border: 2px solid #fb4d98;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>
Try me.<br> Try me.
It needs a bit of modifications (better cursor image, fix it hotspot etc.) but it works.
Be very, very careful when doing such thing. Try to not break any accessibility tools and please do not assume that Android/some specific user-agent HAS touchscreen, etc.. Use proper APIs.
Use CSS cursor property instead:
html {
cursor: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) 0 0, auto;
height: 100%;
}
Try me.
css
.head {
width: 100%;
left: 0px;
top: 0px;
height: 76px;
border-bottom: 1px solid #e6e6e6;
position: fixed;
display: flex;
background: #fff;
z-index: 10;
}
Javascript
$(window).scroll(function () {
const height = $(document).scrollTop();
console.log(height);
if (height > 0) {
console.log("no 0");
$("#tt-body-index .head").animate(
{
marginTop: 0,
},
1000,
"swing"
);
} else if (height === 0) {
console.log("0");
$("#tt-body-index .head").animate(
{
marginTop: -76,
},
1000,
"swing"
);
}
});
I'm writing a script using jQuery.
When scrolling starts .head appears and tries to make scrollTop 0 disappear.
.head appearing is good, but when scrollTop is zero, it doesn't become marginTop: -76.
Use CSS transitions and animation whenever possible which is more smooth compared to jquery animations, this can be done using css transition check the below code. Also, one thing you need to trigger scroll on page load in case if the browser scrolls the page to some part from the cache.
CSS
.head {
width: 100%;
left: 0px;
top: -80px;
height: 76px;
border-bottom: 1px solid #e6e6e6;
position: fixed;
display: flex;
background: #fff;
z-index: 10;
background-color: aqua;
transition: top 1s;
}
body.showHeader .head{
top: 0px;
}
Javascript
$(window).scroll(function () {
const height = $(document).scrollTop();
console.log(height);
if (height < 76) {
$('body').removeClass('showHeader')
} else {
$('body').addClass('showHeader')
}
}).scroll();
I have my code in below, I want to delay 3 seconds before the show in and when showing 3 texts is done, the last text will hide after 3 seconds (not repeat). My code not working as I want.
And I want to add some CSS show and hide effect like this:
But I don't know how I can do it.
Can you help me?
Thanks
var x = document.getElementById('x'),
s = ['Hello', 'What can I help you ?', 'Click me to get some help!'];
(function loop() {
s.length && (x.innerHTML = s.shift(), setTimeout(loop, 3000));
return false;
})();
.speech-bubble {
position: relative;
padding:20px;
}
.speech-bubble:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: #00aabb;
border-right: 0;
margin-top: 15px;
margin-right: -10px;
}
span#x {
color: white;
font-family:roboto;
padding: 20px;
background: #00aabb;
position: absolute;
border-radius:5px;
right: 0px;
top: 50%;
}
.hideclass{display:none;}
<div class="speech-bubble"><span id="x" ></span></div>
Try the following code:
var x = document.getElementById('x');
s = ['Hello', 'What can I help you ?', 'Click me to get some help!'];
var times=0;
(function loop() {
var loops=setTimeout(loop, 3000);
if (times==3){
clearTimeout(loops);
$('#animate').addClass('bounceOut faster');
}
else{
s.length && (x.innerHTML = s.shift(), loops);
setTimeout( function(){$('#animate').removeClass('bounceIn faster');}, 2000);
$('#animate').addClass('bounceIn faster');
}
times++;
return false;
})();
.speech-bubble {
position: relative;
padding:20px;
}
.speech-bubble:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: #00aabb;
border-right: 0;
margin-top: 15px;
margin-right: -10px;
}
span#x {
color: white;
font-family:roboto;
padding: 20px;
background: #00aabb;
position: absolute;
border-radius:5px;
right: 0px;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<div class="animated bounceIn faster speech-bubble" id="animate"><span id="x" ></span></div>
times is used to count the loop count.
clearTimeout is to be done with loop.
$('#animate').removeClass('infinite bounceIn'); is to remove bounceIn animation
$('#animate').addClass('bounceOut'); is to add bounceOut animation
For faster animation, setTimeout is used to add delay.
var x = document.getElementById('x');
s = ['Hello', 'What can I help you ?', 'Click me to get some help!'];
var times=0;
(function loop() {
var loops=setTimeout(loop, 3000);
if (times==3){
clearTimeout(loops);
$('#animate').addClass('bounceOut faster');
}
else{
s.length && (x.innerHTML = s.shift(), loops);
setTimeout( function(){$('#animate').removeClass('bounceIn faster');}, 2000);
$('#animate').addClass('bounceIn faster');
}
times++;
return false;
})();
.speech-bubble {
position: relative;
padding:20px;
}
.speech-bubble:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: #00aabb;
border-right: 0;
margin-top: 15px;
margin-right: -10px;
}
span#x {
color: white;
font-family:roboto;
padding: 20px;
background: #00aabb;
position: absolute;
border-radius:5px;
right: 0px;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<div class="delay-1s animated bounceIn faster speech-bubble" id="animate"><span id="x" ></span></div>
Edit: for adding delay go add delay-xs on div class with x as the number of seconds you would like to delay. Don't forget to also update the timeout so that the animation work as intended.
Updated in snippet on <div class="delay-1s animated bounceIn faster speech-bubble" id="animate">
If you want to remove the delay just add the delay-1s on remove class in snippet. And add as needed.
I have intersection observer object it works, but I want it to notify my once some element is 100pixels over or at bottom of intersection point.
With default config it just changes value of .isIntersection once the element is exactly in view. But I want to do some stuff when elements are 100pixels above or below the viewport.
This is my code:
var iObserver = new IntersectionObserver(function(element) {
console.log('elementi', element); // I want to trigger here when elementi is 100px or less of distance to the viewport.
});
var el;
for (var i = 0; i < elements.length; i++) {
el = elements[i];
console.log('eli', el);
iObserver.observe(el);
}
UPDATE
Thanks to user for answer I used this and it worked:
var iObserver = new IntersectionObserver(function(entryEvent) {
//...
}, {'rootMargin': '100px 0px 100px 0px'});
You can define the rootMargin top and bottom in the options you pass to the observer.
In the demo, hover the red rectangle, when it reaches a distance of 10px from the .container the observer is called:
const options = {
root: document.querySelector('.container'),
rootMargin: '10px 0px 10px 0px',
};
let i = 0;
const iObserver = new IntersectionObserver((entries) => console.log(`intersection ${i++}`), options);
iObserver.observe(document.querySelector('.element'));
.container {
position: relative;
height: 20px;
background: lightblue;
}
.element {
position: absolute;
top: calc(100% + 30px);
height: 100px;
width: 100px;
background: red;
margin-bottom: 20px;
transition: top 5s;
}
.element:hover {
top: calc(100% - 30px);
}
.as-console-wrapper {
height: 50px;
}
<div class="container">
<div class="element">1</div>
</div>
I have this fiddle set up: https://jsfiddle.net/xwb9594m/
As you can see when the slide menu gets toggled off, the content wraps as the menu shrinks. I'm trying to just get it to slide away off the side of the screen cleanly.
This is my JS:
$(document).ready(function() {
var menuBtn = $('.video-search-button'),
menu = $('.video-search-menu'),
close = $('.video-search-menu .close');
menuBtn.click(function(){
menu.animate({width: 'toggle'});
});
close.click(function(){
menu.animate({width: 'toggle'});
});
});
and my SCSS:
.video-search-menu {
display: none;
position: fixed;
top: 0;
right: 0;
width: auto;
height: 100%;
overflow: hidden;
background: #24637e;
background: rgba(36, 99, 126, 0.9);
color: #fff;
z-index: 101;
&-wrapper {
position: relative;
padding: 180px 50px 0 50px;
}
.close {
position: absolute;
width: 40px;
height: 40px;
top: 15px;
left: 15px;
z-index: 9999;
cursor: pointer;
&:before, &:after {
content: '';
position: absolute;
width: 100%;
top: 50%;
height: 2px;
background: #ffffff;
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
Add a CSS rule
p{
overflow: hidden;
white-space: nowrap;
}
I updated your jsFiddle
Or copy the code below:
$(document).ready(function() {
var menuBtn = $('.video-search-button'),
menu = $('.video-search-menu'),
close = $('.video-search-menu .close');
var right = (1 - menu.width()) - 1;
menu.css('right', right);
menuBtn.click(function(){
menu.animate({right: 0}).show();
});
close.click(function(){
menu.animate({right: right});
});
});
Update: Close menu on clicking again on the button
jsFiddle
Or copy the code below:
$(document).ready(function() {
var menuBtn = $('.video-search-button'),
menu = $('.video-search-menu'),
close = $('.video-search-menu .close');
var right = (1 - menu.width()) - 1;
menu.css('right', right);
menuBtn.click(function(){
if(menu.is(':visible')) {
close.trigger('click');
}
else {
menu.animate({right: 0}).show();
}
});
close.click(function(){
menu.animate({right: right}, function() {
menu.hide();
});
});
});
Update 2:
You can also save some lines of code for your close-"icon":
jsFiddle