On this dev URL I use skrollr to make desk items slide away. the action takes place between scroll position 0 and 300. Anywhere in between there, the bottom scroll bar appears bc items are moving off the right side of the page. At 300, all items that moved off to the right of the page get "display: none" assigned, so they disappear and the scroll bar goes away.
Is there anyway to prevent the scroll bar from EVER appearing?
Since it is on the x-axis, you can use overflow:hidden:
body{
overflow-x:hidden !important;
}
This will ensure no scrolling on the body's x-axis.
kurt you are correct but this will only hide the overflow at the bottom of your page the you have content here:
<section class="t3-copyright">
<div class="container">
This div spans more than the width of the page set the container div max-width:100%; and the scroll bar will go away.
Related
I am writing a code which when a user clicks on premium plan button translateX(-300px) is set for a DIV which has property "overflow-x: scroll;" and the premium column is showing. but the problem is when user drag over the page to the right and left content should be visible, the remaining 300px view of DIV does not appear and show. I mean on mouse horizontal scroll, translateX(-300px) property limits us from scrolling to the left. should I call a function on mouse scrolling to override this property? excuse me because of bad English and Thank you for your response in advance.
Instead of using translateX, you should look into element.scrollLeft if you want to scroll a div.
MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
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/
I've got a mobile website that has a navigation menu that is displayed on click of a fixed position button in the top right. This menu is also fixed so that the top of the menu starts 10px below the bottom of the button. The problem is that this navigation menu can be longer than the height of the device being used, and when you try and scroll it will scroll the content behind the navigation menu seeing as it is fixed. Can someone help me get around this?
As per my comment:
You need to use JS to find the height of the screen, top of the menu and set the max height of the menu to the difference of these
For the height of the window use $('window').height()
For the menu's distance from the top of the browser: $('.menu').offset()
The function should live in the show menu event listener:
var maxHeight = $(window).height() - $('.menu').offset();
$('.menu').css({ "max-height" :maxHeight})
Make sure that overflow:scroll; is set on your menu
What you need to do is put a div with a class (I chose scrollable) inside the navigation menu that has the scrollable content and then set the css for that div to be something along the lines of :
div.scrollable{
overflow : auto;
position : relative;
}
That way, the div (and the inside content of the navigation menu) will be scrollable while the position overall of the menu remains fixed.
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/
Is there an html code that would remove the scroll bar on the left (Y axis scroll bar) Like when you resize a page that scroll bar doesn't come up also with the bottom scroll bar as well? Thanks.
Btw, an example is google. Resize the page on google and you'll see what im talking about
If you just want to make the scrollbar disappear, one way would be to code you site so that it has a fluid layout and it would adjust to browser window resizing (no fixed width blocks, for example, or floated content that would reorder upon resizing.)
Of course, the simplest way is to set overflow: hidden; in CSS to the block you need to remove the scrollbar from, however, that would just obscure the content that is out of viewport.
More about fluid layouts
These are literally some of the first links I got when googling for it:
http://www.netmagazine.com/tutorials/create-fluid-layouts-html5-and-css3
http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
http://24ways.org/2006/intricate-fluid-layouts/
You can even find ready-made layouts if you need them.
May be this code will help you, add this code in head section
<style type="text/css">
body {
/* use any one, according to the requirment */
overflow:hidden; /* for x & y scroll bar */
overflow-x:hidden; /* for x scroll bar */
overflow-y:hidden;/* for y scroll bar */
}
</style>