I've got a parent DIV. Set with. I then have a inner DIV which is overflow-x: scroll.
It all works perfectly. But I want to display a message ONLY when scrolling is needed.
Is there a CSS or JAVASCRIPT method which can pick up on this without using libraries such as jQuery or Bootstrap?
Look for when I div is wider than the other...
function myFunction() {
var x = 0;
var parentWidth = document.getElementById("myDIV").clientWidth;
var x = document.getElementById("thisDIV").querySelectorAll(".awiderDIV");
if (x[0].clientWidth > parentWidth){
document.getElementById("scroll").style.display = "flex";
} else {
document.getElementById("scroll").style.display = "none";
}
}
Related
I have this code that makes my navbar hide when scrolling down and appear when scrolling up. Currently it hides instantly when scrolling down. I would like to change this behavior to hide after scrolling 200px.
Thank you for your help!
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("custom-navbar").style.top = "0";
} else {
document.getElementById("custom-navbar").style.top = "-73px";
}
prevScrollpos = currentScrollPos;
}
Currently every time you scroll the variable prevScrollpos is updated. If you change that behavior to only update when scrolling up you'll be able to use that variable to measure the 200px scroll you want.
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("custom-navbar").style.top = "0";
prevScrollpos = currentScrollPos;
} else if (currentScrollPos > prevScrollpos + 200){
document.getElementById("custom-navbar").style.top = "-73px";
prevScrollpos = currentScrollPos;
}
}
You really want to clean up this code though. For example prevScrollpos has a lower case p while currentScrollPos has upper case P which is inconsistent and will lead to errors when you mistype later. Also the way this is structured you'll constantly make style changes to your navbar while scrolling. Every time you scroll up you overwrite "0" with "0", and the same is true for every time you scroll 200px down.
A better way to structure this would be to introduce a new Boolean variable that keeps track if the navbar is hidden or not. This way you can make sure you only change style when you actually want a change.
I'm looking to do a slide-card style website with html/css/js.
I have seen some nice examples like:
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
http://alvarotrigo.com/fullPage/
However, what these DON'T seem to do is slide a page out WHILE the page underneath is visible, as if they were a stack of index cards. Parallax scrolling does this, but it typically will wipe the existing area, rather then scroll/move it off screen. Any ideas?
Here is a fiddle using JQuery that does something like what you are looking for, you could implement it with that one scroll effect of the card sliders and have it animate in probably.
http://jsfiddle.net/d6rKn/
(function(window){ $.fn.stopAtTop= function () {
var $this = this,
$window = $(window),
thisPos = $this.offset().top,
setPosition,
under,
over;
under = function(){
if ($window.scrollTop() < thisPos) {
$this.css({
position: 'absolute',
top: ""
});
setPosition = over;
}
};
over = function(){
if (!($window.scrollTop() < thisPos)){
$this.css({
position: 'fixed',
top: 0
});
setPosition = under;
}
};
setPosition = over;
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(function(){setPosition();});
setPosition();
};
})(window);
$('#one').stopAtTop();
$('#two').stopAtTop();
$('#three').stopAtTop();
$('#four').stopAtTop();
See the fiddle for HTML and CSS.
Not my fiddle just grabbed it with a quick google search.
I have a div with applied property position: fixed;. I need to stop this property on some height of screen scroll. Any ideas?
I just need the css code only.
You can do it with jQuery pretty easily:
$(window).scroll(function(){
if ($(window).scrollTop() >= target) { // change target to number
$("#el").css('position', 'relative');
}
});
or pure JavaScript:
window.onscroll = function(){
if(window.scrollY >= target) { // change target to number
document.getElementById('el').style.position = 'relative';
}
};
I encountered a strange problem, maybe someone can help.
There are multiple img on the page, each one is defined as:
<td><img src="img1" onmouseout="Hide(\'div1\');"></td>
When user clicks on the image, the hidden div should appear in the middle of the page and disappear on the mouseout.
This is hidden div:
<div id="div1" style="width:400px;height:220px;padding:8px;position:absolute;display:none;border:6px solid #CC6600;background-color:#FFDAB4">
Everything works fine till I start scrolling up and down. At some specific positions and at the end of scroll the hidden div is not appearing. Does anyone understand why?
Here is javascript:
function Show (div)
{
var winW=630,winH=460,t,l;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
t=winH/2-240/2+scrollTop;
l=winW/2-400/2+scrollLeft;
document.getElementById(div).style.top=t+"px";
document.getElementById(div).style.left=l+"px";
document.getElementById(div).style.display="block";
}
function Hide(div)
{
document.getElementById(div).style.display="none";
}
I just realized that it is not scrollTop problem.
Anchor inside div does not occupy whole div, only lower portion. Strange that cursor changes on the whole img, onclick is called on the whole img, but hidden div shows only when clicking on the lower portion.
I tried style="display:block" without any success. Out of desperation, I put style="opacity:0.9" and it does work! The only problem is that hidden div shows behind img (like having z-index lower than img). I am not using z-index since hidden div is position:absolute.
* Still looking for some smart person!!!
Try jQuery solution
$(function() {
$('body').scrollTop(0);
});
Meanwhile if you want a JavaScript solution try
document.body.scrollTop = document.documentElement.scrollTop = 0;
Long question: I have seen on Facebook that a single popup window (like those when you opens a question from someones feed) can affect the scroll behavior so it don't scroll the main content but only the content in the popup window according to the height of it, of course. How can I do something like this?
Short question: How can I make the scroll "focus" on the contents height in the welcome DIV?
I've made it this far: http://jsfiddle.net/y3qV5/506/. I hope you understand what I mean :)
Thanks in advance.
You can add overflow: hidden to the body.
http://jsfiddle.net/y3qV5/520/
body.freeze { overflow: hidden; }
$('#pop').click( function() {
$('.welcome').fadeIn();
$('body').addClass('freeze');
});
$('#close').click( function() {
$('.welcome').fadeOut();
$('body').removeClass('freeze');
});
Old answer:
http://jsfiddle.net/y3qV5/519/
//bind on show
$('.welcome').fadeIn().bind('mousewheel DOMMouseScroll', function(e) {
console.log('scroll');
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
console.log('prevent');
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
//unbind on close
$('.welcome').fadeOut().unbind('mousewheel DOMMouseScroll');