codepen
I am trying to position footer div at the bottom of the page which is maximum value of the bottom coordinates of menu and content divs (Math.max(menu, content)).
But unfolding all three menus (making menu bigger than content) this value becomes smaller than actual menu bottom value (and bigger than content bottom value).
Thank you in advance!
getBoundingClientRect() gives results relative to the viewport, so it's affected by the current scroll position. Notice that if you unfold the menus without scrolling down (e.g. unfold menu 3 first) then it works correctly.
You can add window.scrollY to the bottom values to get the true position relative to the top of the document.
Related
I have 3 separate divs.
First one 100vw and 100vh.
Second one has 100vw and 100vh and it has a div(".move") inside of 400vw and 100vh - which will be moving later on to the left and to the right.
Third one is 100vw and 100vh.
When I scroll down, I want the second div to get position fixed. (at this point div third jumps into div second position).
Then I want to scroll to the right of div ".move".
At the end of scroll I want to add position absolute to div second and keep scrolling down through div third.
I dont know how much should I keep adding to scrollX (or translateX(-?px) or left = -? , doesnt matter I guess) so it is equal to normal scrollY at the end.
Also when I scroll quickly it jumps to div third and div ".move" barely get scrolled.
I would like to do it either useing scrollbar or mousewheel.
It should look like in this page:
bitsens.com/
And this is my current code:
codepen.io/Baromaro/pen/yLLMWMM
(the code is so sad..)
My goal is to have two sidebars on the left that are fixed and collapsible, and having the main content on the right to "follow" the sidebars when they collapse/expand.
Illustration of the possible positions for sidebars and content:
But let's proceed step by step.
I want a fixed sidebar on the left that is collapsible, and the main content (on the right of the sidebar) to be expanded when the sidebar is collapsed.
The thing here is that the sidebar has a fixed position, so the content on its right has to be pushed right (with a left margin) to avoid overlap.
I know the width of the sidebar so it's not a problem to play with CSS/JavaScript, and I have a working example here: https://jsfiddle.net/Pawamoy/yamm7eLh/2/
Basically, when you click on the sidebar (bottom part), active class is toggled on the sidebar and expand class is toggled on the content. These classes will change the width of the sidebar and the left margin of the content.
$(document).ready(function() {
$('#sidebar').on('click', function(e) {
if ($(e.target).is("#sidebar")) {
$('#sidebar').toggleClass('active');
$('#content').toggleClass('expand');
}
});
});
I want to add a second fixed and collapsible sidebar, at the right of the first one.
But playing with toggled CSS classes will not be enough since I need to calculate which sidebar is active or not, to be able to set the left margin of the content. The left margin would be 160px when both sidebars are collapsed, 320px when only one is collapsed, and 500px when none are collapsed. Not only that but the second sidebar itself needs to be pushed back and forth on the right depending on the first sidebar width.
Solution as I imagine it: the content could just "follow" the element on its left (the second sidebar), without changing its left margin value. Is there a way to do that, knowing that both sidebars are fixed (they stay at the same position on the screen when the user scroll the main contents)? In other words, how can I position the second sidebar relative to the first one, and the content relative to the second sidebar, and at the same time have both sidebars "fixed"?
I solved this by thinking with boxes. Instead of trying to accomplish complex resizing between three side-to-side elements, I used one more layer of div. See the idea on the image below: on the left is what I was trying to do. On the right is how I solved it. I even managed to add a fixed navigation bar. I just took what I already had and used it a second time in a sub-div.
The key here is to NOT specify the left CSS positioning value for your fixed elements. Here is the updated fiddle: https://jsfiddle.net/Pawamoy/yamm7eLh/3/
Description :
I have a div with width: 100% of the body and is sicked to the top of the page.
Now when I start scrolling I want the div to hide itself when it is no longer the part of visible page after scrolling e.g slideUp "But" when I start to take my cursor near the top of my page the div should re-appear when the cursor is at certain distance from the top of the page
Now I could use the following demo code
$(document).on("scrollstart",function(){
alert("Started scrolling!");
});
but then
1) I dont how to detect if the div is out of the visible page after scrolling
2) and how to detect the y-distance of the cursor from the top of the page...
any one??
Just an idea:
1. Try getting offset of scroll top and compare it with the height of div that you want to hide (if div height is less than scroll top, hide it)
2. Maybe you can get cursor position using something like this: http://api.jquery.com/event.pagex/
I am using JQuery Tools Scrollable to build a full-page-width scrollable form, such that each page of the form scrolls all the way across the page, replaced by the next page sliding in from the right.
The problem I'm having is how to center each page such that it stays centered amidst browser resizing and in-browser zooming (Ctrl +/-). My code is based upon: http://flowplayer.org/tools/demos/scrollable/site-navigation.html
I've tried encasing my code in a div like this:
<div style="margin-left:-440px; padding-left:50%; width:50%; min-width:880px;">
But, because this div is itself positioned in the middle of the page, the scrolling pages don't slide all the way to the left edge - they cut out at the div's edge about 30% away from left, which looks bad.
The only conclusion I can think of is to dynamically alter the margin-left I've defined on div class="items" to make sure it's always equal to 50% - 440px but no less than 0.
How can I do this using javascript?
is the container div absolute or relative positioned? If it has a specific width, let's say "800px", then centering it horizontally is easy with auto margins on left and right, e.g. margin: 0 auto. Otherwise it gets tricker.
If you want to respond to resize in Javascript, in jquery I do something like $(window).resize(function() {}) (docs here) and inside of the handler function update some value in CSS. If you just want to increase the width but still have auto-margins, you could select your div and update the width property, e.g. $('.mydiv').css('width', '900px');. This would fire any time the window is resized.
I'm after some information on how to make the page's scroll bar scroll the overflow content of a div instead of the page once its scrolled to a certain point.
The end outcome is to scroll the page to the extent that the header isn't visible anymore, but from that point forward scroll the contents of the div - with the main scrollbar, not two nested scrollbars.
If the user scrolls back up, so that the div contents are all the way at the top again, the page should resume scroll and show the header again.
You can do it using the scrollTop property of your elements. First you'd need to determine where your header ended (the point to scroll your window to):
var header = $('#header');
var headerBottom = header.offset().top + header.height();
Then you could animate your window's scrollbar to this position:
$(window).animate({scrollTop: headerBottom});
Once that was taken care of, you would then get a reference to whichever element you wanted to then scroll by and animate its scrollTop position (same code as snippet above that scrolls the window).
Finally you would need a scroll event handler so you could determine when it was time to change which element you were scrolling the content by:
$(window).scroll(function(){
// logic to determine which element should be scrolling
});