I'm trying to create a fixed navbar that fades while the user is scrolling and and becomes opaque when the user isn't, but I'm not sure how to trigger the fadeTo command when they have stopped scrolling. I've played around and searched for .promise() but i can't figure out the exact usage. I'm new to JS/JQuery and I am in the midst of a school project.
JQuery:
$(window).scroll(function() {
$("#top").fadeTo(300, 0.5);
$("#top").fadeTo(300, 1);
});
#top is the navbar.
Any help is appreciated, and try to explain your answers as it helps me learn.
Thanks, Lachlan.
When mouse scrolled, create timer and if after spending time page didn't scroll, show target element.
var timer;
$(window).scroll(function(){
clearTimeout(timer);
timer = setTimeout(function(){
$("#nav").fadeIn("fast");
}, 500);
$("#nav").fadeOut("fast");
});
body {
height: 1000px;
position: relative;
}
#nav {
width: 100%;
height: 50px;
position: fixed;
top: 0px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav"></div>
Related
I need some help. So there is this page that is using an iframe, for that reason the Cumulative Layout shift is pretty noticeable. So we wanted to use a preloader so that you cant see that. But the preloader code only shows the preloader for like 100ms. I wanted to change this is so I added this code in between the script tag. But now the preloader isn't going away at all. Just spinning on forever
This is the code:
jQuery(document).ready(function($) {
$(window).load(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {});
}, 200); // set the time here
});
});
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://example.com/example.svg') 50% 50% no-repeat #aa9767;
/* Change the #fff here to your background color of choice for the preloader fullscreen section */
}
.elementor-editor-active .loader {
display: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div class="loader"></div>
Two things seems wrong:
Your selector seems wrong, I am assuming its meant to be .loader
The function parameter in document.ready doesn't take parameters
jQuery(document).ready(function() {
$(window).load(function() {
setTimeout(function() {
$('.loader').fadeOut('slow');
}, 200); // set the time here
});
});
I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})
Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}
I need to make a scrollable div, scroll even if the mouse is upon the content (inside the scrollable div), and not just beside it (Where it is blank). This is what I have so far:
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}
In Chrome is ok
In IE8+ is ok (i know a hack)
In Safari the content shakes a lot when i scroll, can i fix that? (I want fix this)
Working fiddle -> https://jsfiddle.net/8oj0sge4/6/
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}
#wrapper {
width: 100%;
height: 1500px;
border: 1px solid red;
padding-top: 380px;
}
#wrapper .container {
border: 1px solid green;
width: 100%;
height: 500px;
overflow: scroll;
}
#wrapper .container-scroll {
height: 1500px;
width: 100%;
border: 1px solid yellow;
position: relative;
}
#wrapper .main {
width: 200px;
height: 500px;
background: black;
overflow: scroll;
position: absolute;
color: white;
left: 50%;
margin-left: -100px;
margin-top: 10px;
}
<div id="wrapper">
<div class="container">
<div class="container-scroll">
<div id="main-site" class="main">
My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot!
</div>
</div>
</div>
</div>
Thank you guys.
I hope this demo helps you out to make the div content scroll when mouse hover and when mouse out of the div.
<html>
</head>
<style>
.mydiv
{height: 50px;width: 100px; overflow-y: scroll; }
</style>
<script>
function loadpage()
{ document.getElementById('marquee1').stop(); }
function marqueenow()
{ document.getElementById('marquee1').start(); }
</script>
</head>
<body onload="loadpage()">
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()" onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10">
This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test
content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content
</marquee>
</body>
</html>
you just add this js file to get a smooth scrolling effect.
https://github.com/nathco/jQuery.scrollSpeed
live deomo
http://code.nath.co/scrollSpeed
Not 100% sure what you are up to but you can get the fixed position with css "fixed". It will stay where you put it. The following css fixes to the bottom of the page.
.fixed {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: auto;
}
There is already an answer on scroll position:
How to get scrollbar position with Javascript?
I don't know important is that content, and by this I mean if it needs to stay selectable.
If not a pretty good solution would be to use #wrapper .main{ pointer-events: none; }, meaning that the content will not get any events from mouse and it would go through it to the next element behind it - in your case the scroll would go dirrectly to #wrapper.
Safari does this because every browser has its own scrolling. If you have a fixed header on a phone it acts bouncy and if you do this on a PC it acts normal. Explorer scrolls smooth and Chrome scrolls right to the place without a smooth transition.
The reason why your #main-site is "jiggling" is because the browser keep "repaint" the position of this element.
One Trick to solve this is called Debounce Function, (you may also google it to see other variations.) The basic idea is to delay the scroll event handler to clear out those untriggered callbacks.
In your case, you may do something like this:
main.parentNode.parentNode.onscroll = function(event) {
debounce(offsetting, 10);
}
function offsetting() {
main.style.top = Math.min(main.parentNode.parentNode.scrollTop,maxTop) + "px";
}
function debounce(method, delay) {
clearTimeout(method._tId);
method._tId= setTimeout(function(){
method();
}, delay);
}
If you keep seeing the jiggling issue, you can simply edit the delay parameter (i.e, change 10 to 50). The downside for that is your #main-site element will be 'cut off the top` for a while, depending on your delay settings.
Since your code works perfectly on Chrome and IE, there might be a bug on scrollHeight or offsetHeight attribute on Safari. I recommend you to use getBoundingClientRect for calculating element position since this method is more reliable and accurate.
var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;
Don't really know what they're called. For some reason I can't remember. But you know on many homepages they have that menu-like thing with panels that slide by showing their products? I pretty much need to learn how to do that, although what I'm actually doing is making a panel slide by when you click some text. The ideas are pretty much the same, from what I can tell, except those menus do it automatically every couple seconds.
Now I know pretty much exactly what to do in terms of the Javascript. The problem I'm having right now is (worryingly) basic HTML. This is what I've got:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Dat Sliding Menu Doe</title>
<link rel="stylesheet" href="slidingmenu.css"/>
</head>
<body>
<div id="menu1">
<h1>This is some text.</h1>
<p>This is some more text.</p>
</div>
<div id="menu2">
<h3>This text is different.</h3>
<h1>Very different.</h1>
<p>So different, in fact, that</p>
<p>the div is a different height.</p>
</div>
<script type="text/javascript">
</script>
</body>
</html>
CSS:
#menu1 {
position: absolute;
display: inline-block;
background: #d8d808;
color: white;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
margin-left: 0%;
}
#menu2 {
position: absolute;
display: inline-block;
background: #7feaa8;
color: white;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
margin-left: 100%;
}
Pay no attention to the colors or anything, this is just practice!
It's doing everything it's supposed to do EXCEPT for the fact that I get a scrollbar at the bottom of the page that allows me to scroll to the right and see the second div... which is a problem. Am I doing something fundamentally wrong, or do I just need to add something to get rid of that scrollbar?
Also, a little bit of uncertainty on the Javascript. How would I get it so that the margin-left for both divs changes at EXACTLY the same time? Even a slight delay will show up, right?
It may be easier to just link to a tutorial. I tried researching this, but I didn't know what to look up (forgot what they're called!).
EDIT
Ok, so I took Joshua Chavanne's suggestion and hid the overflow for the body, which worked. Then I did all this with the Javascript:
var menu1 = document.getElementById("menu1");
var menu2 = document.getElementById("menu2");
var switch1 = document.getElementById("switch1");
var switch2 = document.getElementById("switch2");
switch1.onclick = move;
switch2.onclick = move;
function move() {
if (menu1.style.marginLeft == 0) {
show2();
}
else {
show1();
}
}
function show2() {
if (menu1.style.marginLeft > -100) {
menu1.style.marginLeft = (menu1.style.marginLeft - 10) + "px";
requestAnimationFrame(show2);
}
}
When I click on switch1, menu1 moves over 10px, then stops moving. No idea why.
Check out free jssor carousel
It will do everything you are asking for and you don't have to write it yourself.
I have a musicplayer fixed on the bottom of the screen and when I scroll 300px he should start to scroll with the rest of the content. All that works fine at the computer but not on mobile. Its dificult to explain this with my skill in english.
I made a jsfiddle but i cant get it to work there. In my project it works. The musicplayer should start to scroll after i scrolled 300px. If it would work it wouldnt work on mobiles correctly. On mobile it is jerky and dont refresh the position when i am scrolling. only when i stop the scrolling it jumps to the correct position. But it is not smooth like on the computer.
<body>
<div id="content">
//long text see jsfiddle
</div>
<div id="musicplayer">
<div id="control">Musicplayer: play/pause</div>
</div>
</body>
my css:
#content {
width: 2000px;
background-color: black;
color: white;
margin-bottom: 300px;
}
#musicplayer {
position: fixed;
bottom: 0px;
width: 100%;
height: 100px;
background-color: #485670;
z-index: 5;
color: white;
}
my javascript:
$(window).scroll(function () {
if ($(window).scrollTop() >300) {
$('#musicplayer').css('bottom', $(window).scrollTop()-300);
}
else if($(window).scrollTop() < 300) {
$('#msuciplayer').css('bottom', 0)
}
});
Edit:
I got an idea. but at the moment i dont have time to try it out anymore. I try it tomorrow.