Disable scroll makes content to move right - javascript

Have a look at this website please ebooks.am
So when I click on a table row, the sidebar opens from right side. Here I give body disable scroll for two purposes: first is definitely to disable scroll in body when sidebar is opened and the second is to hide scroll bar in sidebar, otherwise I would have 2 scrollbars side by side.
My problem is that when a sidebar is opened, the content (centered table, search) is moved to right. So how can I fix this, to make the content stay at the same place where it is.
Thanks in regards

add "disable-scroll" class on html element and add the following code
html.disable-scroll{
height: 100vh;
overflow: hidden;
}
html.disable-scroll body{
overflow: scroll;
}

Related

Sticky Navbar offset to prevent overlap of content

Currently on my single page site when you click on the Bootstrap navbar menu items it takes you to the section of the page with that div #ID. However, naturally because the top of the navbar lines up with the top of the new section my content is overlapped by the width of the navbar (80px or 50px when collapsed).
Screenshot of issue:
"Ready to book" heading is actually centered in the middle of that div but overlapped by 80px of navbar.
Screenshot showing top of page:
The issue is that I do not wish for the navbar to overlap the content in the section I have linked to. Put in other words, I would like the top of bottom of the navbar to line up with the top of the new section div.
Surely this can be handled using some JS to offset the navbar up by the height of the the navbar?
I have had a suggestion to use CSS to add padding into the top of section but this adds an extra 80px of padding that I don't want, when normally scrolling the page.
Okay so I found two solution to this finally using JS and CSS
here.
My preference is for this CSS solution:
#id:before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
}
Obviously, replace ID with the ID of the anchor.
The actual JS snippet solution:
var shiftWindow = function() { scrollBy(0, -50) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }
However, it is still a bit clunky as you can actually see the the browser scroll to the anchor point and then back up by the scrollBy offset amount of 80px.
I am not sure if this problem has been solved yet, but I had the same problem and adding the appropriate heading worked (by appropriate padding I mean the height of your navbar element).
For example:
#id { padding:50px }

div (menu) not pushing div (maincontent)

For a website i'm making I have a little problem. I have a mobile menu which activates when I press the menu button (done with javascript).
I want it to push the div with the 3 blocks (the maincontent div) down, but sadly it's not doing what it's supposed to.
I have tried everything with positions and so on, without success. You can check out the website at dev.hotelkom.nl
It's not working because your main menu is positioned absolutely and its parent has a fixed height. Also your wrapper-content is positioned absolutely hence it's not moving.
Few reasons how you may fix it:
.mainmenu {
position: relative;
height: auto;
}
.wrapper-content {
position:relative;
}
Apply these properties on mobile.

Sticky Menu - Hides on some pages but not others

The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
Your support is greatly appreciated :)
Try removing overflow hidden from this element:
.header-container {
/* overflow: hidden; */
}
Just remove the line, or you can replace it with overflow:initial or overflow:auto;

Sticky Navigation Bar / Right of a Centered Div

I am editing a Squarespace template and would like to create a sticky navigation sidebar.
There's a Squarespace field where I can enter "Custom CSS."
I already have the sidebar, but how do I modify the CSS to make it stick? I want it to remain visible when I scroll below the fold.
My pageBodyWrapper div is centered (auto/auto) and contains both the contentWrapper div and the sidebar1Wrapper div, on the right.
I have tried
#sidebar1Wrapper
{
position:fixed;
}
with either a left or right value in px or %, but whenever I change window size, the sidebar is either going away from the content or overlaps with it.
How do I prevent this from happening?
Can I define my fixed position relative to the contentWrapper div?
Thank you for your help!
Here's the site I am talking about: Last Wave Film.
Unfortunately that functionality is not yet built into css. It is done with javascript. Essentially the javascript detects when the page has scrolled to the top of and then sets the sidebar to position: fixed.
Here's a solution that uses the jQuery library: http://css-tricks.com/persistent-headers/
You can make the sidebar fixed using css and it will be permanently fixed within the browser window.
.sidebar1Wrapper {
position: fixed;
top: 20px;
right: 40px;
}

Side Panel in CSS

I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.
I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?
If it is possible, is there an example? I googled it but nothing like what I want came up.
The side-panel can be hidden and shown by click a button so adding padding will not work.
Here is an idea of what I mean:
The days part is #calendar, and the Unscheduled part is the side panel of 150px.
I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.
Thanks
Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Result of float:
Got a working solution for you here.
The code to get this working basically hinges on the following structure:
<div class="sideBar">
...
</div>
<div class="tableWrapper">
<table>
...
</table>
</div>
Next, make sure the elements have these significant CSS properties:
.sideBar {
float: right;
}
.tableWrapper {
overflow: hidden;
}
table {
width: 100%;
}
What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.
Click the button in the demo to see the table automatically resize.
All major browsers and IE10 support flexbox. Not supported < IE10.

Categories