I wrote this piece of code in order to display an horizontal scroll bar along a container of elements. The issue is that the bar is evident only when I put the cursor above the element. If the cursor is not put on the container with the elements, the bar is not evident, therefore the user may not be aware he has to scroll. Any idea about how to modify it in order to make the bar permanently visible?
$(window).scroll(function () {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(document).ready(function () {
if (sessionStorage.scrollTop != "undefined") {
$(window).scrollTop(sessionStorage.scrollTop);
}
});
You can use overflow-x: scroll; for that element in a CSS rule to permanently display a horizontal scrollbar.
Related
I want to add div at bottom of the page. For that, I want to find the vertical scroll bar position. I want to add div element at scroll bar end..How can I add div in scroll bar end?
The div element is:
<div class = "mydiv">
<div class = "normal">
<h3>Thank You</h3>
</div>
</div>
I want to display the div at bottom of page if not having scroll bar also. The div want to displays all time in the page. If having scroll bar means, the div element position is the scroll bar end. If not having scroll bar means, the div element want to display at bottom of page.
Try this:
$(window).scroll(function(){
if($(window).scrollTop() === ($(document).height() - $(window).height())) {
$(".mydiv").append("<div>This is a new div.</div>");
}
})
Below code is working fine with one of the requirement for the project, Hope this will solve your problem.
i assume mydiv scroll bar is reach bottom of the page.
jQuery(document).ready(function($) {
$('.mydiv').scroll(function() {
if ($(this).scrollTop() + $(this).innerHeight() >=$(this)[0].scrollHeight) {
// do add your code
$(".mydiv").append("<div>Your New div</div>");
}
});
});
You can look at one of my working code in sales-force using this functionality
PaginationOnScroll
How to find the vertical scroll bar end position?
isReachToBottom(){
if($(window).scrollTop() === ($(document).height() - $(window).height())) {
return true;
}
return false;
}
How can I add div in scroll bar end?
$("yourtag").append("your footer");
here is the code to find scrollbar position
window.addEventListener("scroll", (event) => {
let scroll = this.scrollY;
console.log(scroll)
});
I have a fixed sidebar and a fixed header with scrollable content in the main section of the page. The header is to be triggered on the scroll to hide the top portion of itself on scroll down and then show itself on scroll up. The sidebar can be triggered to hide and show itself with a button. When this happens the header gains back the full width of the page until the button is pressed to bring back the sidebar. The page loads with the sidebar opened.
So far I've been able to get the sidebar to transition off and back on the page properly. I also have the header working as intended on page load. However the issue I'm having is with the transition, more so recognizing the changed classes when the sidebar closes. I believe my issue is with the scroll javascript not recognizing the sidebar is closed because when scrolling it applies the classes to the header for when the sidebar is open. To test this I added a class called SEEME123 which never shows.
Below is the javascript for scrolling changes.
var exploreOpen = $('#explore').hasClass('open');
var exploreClosed = $('#explore').hasClass('closed');
$(function () {
var position = $(window).scrollTop();
if (exploreOpen) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#wrapper-site-header').removeClass('explore-open--header-full');
$('#wrapper-site-header').addClass('explore-open--header-reduced');
} else {
$('#wrapper-site-header').addClass('explore-open--header-full');
$('#wrapper-site-header').removeClass('explore-open--header-reduced');
}
position = scroll;
});
} if (exploreClosed) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#wrapper-site-header').removeClass('explore-closed--header-full');
$('#wrapper-site-header').addClass('explore-closed--header-reduced');
$('#wrapper-site-header').addClass('SEEME123');
} else {
$('#wrapper-site-header').addClass('explore-closed--header-full');
$('#wrapper-site-header').removeClass('explore-closed--header-reduced');
}
position = scroll;
});
} else {}
});
The javascript for the sidebar function toggles the open and closed classes on the sidebar, along with removing or adding the appropriate header class.
I don't understand why this isn't working as intended and would like to know how to resolve the issue. I've searched around attempting to understand where I screwed up, or to find an example where the scroll function does X because of Y. I've also attempted the above without variables (ie..
$(function () {
var position = $(window).scrollTop();
if (('#explore').hasClass('open')) {
), and as separate functions.
Anyway, here is a jsfiddle in case I missed something. https://jsfiddle.net/at0yxo0m/
Thank you all for your help and advice.
EDIT: Additional information.
I do have an earlier version of this layout where the scroll function only changes the header area that works with closing the sidebar. However the animations were clunky in general, and worse on mobile. Also to get everything to work right I had to wrap elements more than I thought was needed. So it was my goal to streamline as much as I could while getting the desired result.
I can't find a solution to this, there was a question over here, but the answers are not very usable (at least for me).
I have a JavaScript modal pop-up that disables everything on the background by placing transparent div over the page. It also disables the scrolling by setting the overflow to hidden, and must do so, because the page is scrollable with the mouse wheel otherwise and distracts the user.
The problem is, when hiding and showing the scrollbar the page resizes and the effect is ugly. Also, my page is designed in such a way that if I stop it from resizing that would be ugly either.
What I want is to disable the scrollbar, but keep it visible (the page content is longer than the screen fits). Is this somehow possible in CSS?
Instead of changing the css, which will remove the scrollbar, and as you said change the layout of the page, try calling a jquery function instead.
// call your pop up and inside that function add below
$('body').on('scroll mousewheel touchmove', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
then when you close the modal, call the same function but replace on with off
Since scrollbars are not all 17px wide, I solved this with JavaScript. That is, I calculated the exact width of the scrollbar and added an equal amount of margin to the right of the body element. This also works when the scrollbar isn't present due to a high resolution or a lack of content.
function toggleMenu() {
// get width before hiding scrollbar
let oldWidth = document.documentElement.clientWidth;
// toggle CSS class that sets overflow to hidden
document.body.classList.toggle('MenuOpen');
// get new width after hiding scrollbar
let newWidth = document.documentElement.clientWidth;
// set margin-right value equal to width of the scrollbar
let scrollbarWidth = Math.max(0, newWidth - oldWidth);
document.body.style.marginRight = `${scrollbarWidth}px`;
}
...and my CSS looks like:
html {
background-color: #e6e6e6; /* color of fake scrollbar */
}
body.MenuOpen {
overflow: hidden;
}
Once you start showing your popup, give the body a class (like popupOpen). This should be an easy workaround.
.popupOpen {
overflow: hidden;
margin-right: 17px //size of the scrollbar in each browser
}
When you close your popup, simply remove the class from the body.
I have a big navigation bar that I want to hide everytime the scroll bar is not at the top position.
So basically, I have the idea of having two navigation bar, overlapping each other.
One with the larger height is on top (having a larger z-index) and the smaller one with the same navigation but with a small width is below it.
I want something that when the user scrolls his mouse wheel down/ drags the scroll bar, use a keyboard to scroll down even a little, the big navigation bar will disappear (more like hide), leaving the smaller one on top.
I did a trick that the one with higher height is scrollable (not fixed) and the one below is fixed.
But I find it awkward. So instead, I want to hide it when the user scrolls down and show it again when the scroll bar is at the top.
Basically, it's like a windows taskbar in autohide mode. But it will hide when the user scrolls down and show when the scroll bar is on top :))
You can use some simple JS to do this:
window.onscroll = function() {
var top = document.body.scrollTop + document.documentElement.scrollTop == 0;
document.getElementById('topbar').style.display = top ? 'block' : 'none';
document.getElementById('scollbar').style.display = top ? 'none' : 'block';
};
Substitute IDs as relevant to your code.
Here is a simple jQuery function that will show or hide a element <ElementID> in this case dependant on the scrollTop position.
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() == 0) {
$('#<ElementID>').show();
} else {
$('#<ElementID>').hide();
}
});
})
I have some menu items on the right hand side of my website that are: -
Basket Summary
Best Sellers
Quick Links
etc
I want the basket summary to follow down the page as the page is scrolled, I know how to this using position: fixed, but I need it to also move the other elements out of the way otherwise it will just overlap them.
I was looking at this: jsfiddle which would do the job and works but obviously thats only on button click, I would need to adapt this to scroll via jQuery.
I have read many tutorials for floated fixed divs but they are all for one div and don't have any other divs to interact with.
Any ideas if possible and/or how to do it?
Code from js fiddle as follows: -
$(function() {
$('.upButton').click(function(e){
var $parent = $('.highlight').closest('.box');
$parent.insertBefore($parent.prev());
});
$('.downButton').click(function(e){
var $parent = $('.highlight').closest('.box');
$parent.insertAfter($parent.next());
});
});
Is this what you're looking for?: http://jsfiddle.net/cmontgomery/YVh4q/
essentially, whenever the window scrolls check to see if your section is in the visible area and if not, adjust accordingly:
$(window).scroll(function () {
var mover = $("#sidebar .quick-links");
if($(window).scrollTop() === 0) {
//console.log("to top");
mover.prependTo("#sidebar");
} else if(!isFullyInViewableArea(mover)) {
var parent = mover.closest('.section');
if(isBelowViewableArea(mover)) {
//console.log("moving up");
parent.insertBefore(parent.prev());
} else {
//console.log("moving down");
parent.insertAfter(parent.next());
}
}
});
I must admit, this solution is not the best user experience, i.e. it jumps instead of scrolling smoothly. If it were me I would put the movable section as the last item in the right column and move that down the page with absolute positioning so it follows the top of the view-able area exactly.
Use this
Drag & Drop is best.
Greetings.