I have Jquery script to play navbar animation on one page and disable it on another page. it works on chrome but not on firefox. Heres my code:
var URL = window.location.pathname;
URL = URL.split("/");
if(URL[1] != 'holiday') {
$('.navbar').addClass('hide-menu');
$(window).scroll(function() {
slider();
});
} else {
$(".navbar").addClass('show-menu');
}
The slider function :
function slider() {
if (document.body.scrollTop > 500)
$('.navbar').stop().animate({
"margin-top" : '0'
});
else
$('.navbar').stop().animate({
"margin-top" : '-150px'
});
}
The CSS:
.show-menu {
margin-top: 0px;
}
.hide-menu {
margin-top: -150px;
}
Firefox hide the menu but it fail to play the animation and show the menu back. Any suggestion guys? thanks
You have to get the scroll amount from the element that actually has the scrollbar. Firefox considers that to be the <html> element.
You can wrap all your content in a container that's got overflow: auto set, and then use that as the thing to check for scroll amount as well as the place to put the scroll event handler. Here's a jsbin.
<body>
<div id=everything>
<div class=navbar>
HELLO WORLD
</div>
<!-- content ... -->
</div>
</body>
and CSS:
html, body { height: 100%; padding: 0; margin: 0; }
#everything { height: 100%; overflow: auto; }
Related
When using a combination of jQuery and CSS to trigger my navbar to shrink on scroll, it get's buggy when you scroll back up to a certain position, I have linked a video as an example.
I have tried two different methods. The first is using $(window).scrollTop) with an if statement and a series of .addClass and .removeClass. The second thing I have tried is using $(window).scrollTop) with a series of .css dynamic style modifications. Both of these attempts render the same end result that is shown in this video https://youtu.be/YXKsrL1cghs .
My first jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").removeClass("py-5");
$(".navbar").addClass("compressed");
} else {
$(".navbar").addClass("py-5");
$(".navbar").removeClass("compressed");
}
});
});
My second jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").css({ "padding-top": "10px" });
$(".navbar").css({ "padding-bottom": "10px" });
} else {
$(".navbar").css({ "padding-top": "3rem" });
$(".navbar").css({ "padding-bottom": "3rem" });
}
});
});
My CSS:
.navbar.compressed {
padding-top: 10px;
padding-bottom: 10px;
}
My expected results would be a smooth scrolling fixed navbar that shrinks to a smaller size after scrolling beyond a certain point.
What actually occurs is that when you scroll down past a certain point, for 20px worth of height, it gets super buggy and starts bouncing up and down. Once you clear those 20 or so px it's perfectly fine, but when you scroll back up it acts the same within those 20px.
When watching the video, I noticed that your .navbar has transition: all .3s. It could be the reason that when you remove the class py-5 and add class compressed, it triggers the transition twice.
It would be helpful if you can provide the HTML markup and CSS as well.
The script is manipulating the DOM quite a lot. I am not sure if this is going to fix your problem but it might be a good idea to only change the classes if the have not yet been applied.
$(document).ready(function() {
$(window).on("scroll", function() {
let navbar = $(".navbar");
if ($(window).scrollTop() >= 40) {
if (navbar.hasClass("py-5")) {
navbar.removeClass("py-5");
navbar.addClass("compressed");
}
} else {
if (navbar.hasClass("compressed")) {
navbar.addClass("py-5");
navbar.removeClass("compressed");
}
}
});
});
body {
height: 10000px;
position: relative;
}
.navbar {
width: 100%;
position: fixed;
height: 50px;
top: 0;
transition: all .3s
}
.py-5 {
background-color: blue;
padding-top: 10px;
padding-bottom: 10px;
}
.compressed {
background-color: red;
padding-top: 0px;
padding-bottom: 0px;
}
<html>
<head></head>
<body>
<nav class="navbar py-5">Navigation</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I'm working onepage website, what i'm trying to do is to disable scorlling on webpage and only and make transitions between sections using the navbar links to id. for that i have use this jquery code
$(document).ready(function() {
$('.js-scrollTo').on('click', function() {
var page = $(this).attr('href');
var speed = 1000;
$('html, body').animate( { scrollTop: $(page).offset().top }, speed );
return false;
});
});
and this on CSS
html, body {margin: 0; height: 100%; overflow: hidden}
everything work fine except one issue is that when im in a specific section that have a big content i can't scroll within in, what im trying to figure out is: how to enable scrolling within section itself without scrolling all the webpage
If I've understood your question correctly, what you can do in this case is add an overflow-y:scroll to the wrapping div of the content you wish to be scrollable.
For example, say we have a div#test with some content:
<div id="test">
... Some content
</div>
We can then simply apply the styles:
#test {
height: 300px;
width: 300px;
overflow-y: scroll;
background: #ff1000;
}
Here is it in action: http://codepen.io/anon/pen/RRYERR
You can add css to your div :-
yourDiv:hover { overflow: auto; height:desired height }
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;
I am looking to have a transparent div on an HTML page with a graphic on which it has instructions for the user on how to use the page. When anywhere on the page is clicked or pressed then the div will hide/disappear.
I have JavaScript code which I have taken from another post on Stack Overflow, but I cannot seem to get it working.
It is linked to my HTML page and CSS, and the div is appearing, but it isn't disappearing when clicked.
How can I do this?
HTML code is as below:
<div id="overlay">
<div id="home_text">
<!-- Your image -->
</div>
</div>
CSS:
#overlay {
background: rgba(0, 0, 0, .4);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
#home_text {
background: red;
height: 300px;
margin: 20px auto 0;
width: 300px;
}
JavaScript:
(function () {
var overlay = ('#overlay');
overlay.on('click', function (e) {
overlay
.hide()
.off();
});
});
You have missed the "$" character before ("#overlay"):
$(document).ready(function() {
var overlay = $('#overlay');
overlay.on('click', function (e) {
overlay
.hide()
.off();
});
});
Demo:
http://jsfiddle.net/ks38e/6/
You are missing a $ sign:
var overlay = $('#overlay');
Working demo
If you check your JavaScript console, you will see an error pointing to this line of code.
The HTML has a minor error, the of the "overlay" should be closed:
<div id="overlay"></div>
<div id="home_text">
<!-- Your image -->
</div>
That works on the fiddle above
I am using Flot to graph some of my data and I was thinking it would be great to make this graph appear fullscreen (occupy full space on the monitor) upon clicking on a button. Currently, my div is as follows:
<div id="placeholder" style="width:800px;height:600px"></div>
Of course, the style attribute is only for testing. I will move this to CSS after during the actual design. Is there anyway I could make this div fullscreen and still preserve all event handling?
You can use HTML5 Fullscreen API for this (which is the most suitable way i think).
The fullscreen has to be triggered via a user event (click, keypress) otherwise it won't work.
Here is a button which makes the div fullscreen on click. And in fullscreen mode, the button click will exit fullscreen mode.
$('#toggle_fullscreen').on('click', function(){
// if already full screen; exit
// else go fullscreen
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
$('#container').get(0).requestFullscreen();
}
});
#container{
border:1px solid red;
border-radius: .5em;
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>
Toggle Fullscreen
</p>
I will be fullscreen, yay!
</div>
Please also note that Fullscreen API for Chrome does not work in non-secure pages. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
Another thing to note is the :fullscreen CSS selector. You can append this to any css selector so the that the rules will be applied when that element is fullscreen:
#container:fullscreen {
width: 100vw;
height: 100vh;
}
When you say "full-screen", do you mean like full-screen for the computer, or for taking up the entire space in the browser?
You can't force the user into full-screen F11; however, you can make your div full screen by using the following CSS
div {width: 100%; height: 100%;}
This will of course assume your div is child of the <body> tag. Otherwise, you'd need to add the following in addition to the above code.
div {position: absolute; top: 0; left: 0;}
CSS way:
#foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
JS way:
$(function() {
function abso() {
$('#foo').css({
position: 'absolute',
width: $(window).width(),
height: $(window).height()
});
}
$(window).resize(function() {
abso();
});
abso();
});
For fullscreen of browser rendering area there is a simple solution supported by all modern browsers.
div#placeholder {
height: 100vh;
}
The only notable exception is the Android below 4.3 - but ofc only in the system browser/webview element (Chrome works ok).
Browser support chart: http://caniuse.com/viewport-units
For fullscreen of monitor please use HTML5 Fullscreen API
.widget-HomePageSlider .slider-loader-hide {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10000;
background: white;
}
Can use FullScreen API like this
function toggleFullscreen() {
let elem = document.querySelector('#demo-video');
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
Demo
const elem = document.querySelector('#park-pic');
elem.addEventListener("click", function(e) {
toggleFullScreen();
}, false);
function toggleFullScreen() {
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
#container{
border:1px solid #aaa;
padding:10px;
}
#park-pic {
width: 100%;
max-height: 70vh;
}
<div id="container">
<p>
Toggle Fullscreen
</p>
<img id="park-pic"
src="https://storage.coverr.co/posters/Skate-park"></video>
</div>
P.S: Using screenfull.js nowadays. A simple wrapper for cross-browser usage of the JavaScript Fullscreen API.
This is the simplest one.
#divid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
u can try this..
<div id="placeholder" style="width:auto;height:auto"></div>
width and height depends on your flot or graph..
hope u want this...
or
By clicking, u can use this by jquery
$("#placeholder").css("width", $(window).width());
$("#placeholder").css("height", $(window).height());
Use document height if you want to show it beyond the visible area of browser(scrollable area).
CSS Portion
#foo {
position:absolute;
top:0;
left:0;
}
JQuery Portion
$(document).ready(function() {
$('#foo').css({
width: $(document).width(),
height: $(document).height()
});
});
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
With Bootstrap 5.0 this is incredibly easy now. Just toggle these classes on and off the full screen element.
w-100 h-100 position-absolute top-0 start-0 bg-white