I have written a file using html and javascript.
In that Vertical scrolling should be there, but i want to stop horizontal scrolling.
How can I do that?
Sarfraz has already mentioned overflow-x, which is one answer although it means (as it says!) that anything that would have been off to the right is now unavailable to the user. There are use cases for that, but in the main it's undesireable to bother to have content the user can't access.
The question is: Why are you getting horizontal scrolling at all? In the normal course of things, the browser will wrap content such that there isn't any horizontal scrolling required. Provided the user has a normal-ish window size, you cause horizontal scrolling in your design by having elements that you've specified as being a certain width, either via style information or by having non-wrappable content (like a big image). For instance, this won't require horizontal scrolling:
<p>...lots of text here...</p>
...but this will:
<p style='width: 1200px'>...lots of text here...</p>
...if the user's browser window is less than 1200 pixels wide.
So if having the content off to the right unavailable isn't what you intend, my answer would be to find the elements causing the scrolling and correct them.
Apply following style to that element:
overflow-x:hidden;
or it should be:
overflow:auto;
overflow-x:hidden;
this will make sure that vertical scrolling is there when needed.
if you want to use this in every browser, you shouldn't add no width to the element, and then it gets no horizontal overflow, in every browser.
If I understand your question correctly, you want to prevent your content from going beyond the boundaries of the browser window. Very often, designers set their layout widths to 960px in order to set a fixed width centered on the page, which fits nicely within a 1024px x 768px computer screen. As per below comments, a smaller resolution computer would gain scrollbars because of this. You would do that with something like:
<html>
<head>
</head>
<body>
<div style="width:960px; margin:0 auto;">
... The rest of your content goes here ...
</div>
</body>
</html>
You can read more about browser width here:
http://www.fivefingercoding.com/web-design/is-there-a-perfect-web-design-width
If you find that the content stretches beyond this width, then a specific item inside the page is too wide. Look at the page yourself to identify what it might be, or provide a link to stack overflow for our help. To give you an example, having this inbetween the above div would be problematic:
<table style="width:99999px;"> ... table stuff ... </table>
if you want your html.body or div liquid;
div.sample{ width:100%;}
sample div will resize whether your screen big or small/
without scroller/
If you view the file using a browser, you can set the width of the content by setting it to a percentage.
Related
I would like to add a footer to a page, but I don't want the footer to overlap the text if the user makes the page too small. How do I prevent this from happening without making a large table or a bunch of returns? The footer code is located in an included page. Perhaps there might be a way to chose when scrolling turns on or a minimum from the top CSS attribute.
I thought I explained it well enough, here's some more explanation:
On the page with the footer, there's a tag include('footer.php').
In footer.php, there's a section of text aligned at the bottom, with something like,
<div style="position: fixed; bottom: 10px">Footer Text</div>
If the user makes the window too small, the text will overlap everything else. I'd rather it stay at the bottom and a scroll bar appear.
The problem is not clear, but you might be looking for a responsive layout. This allows you to use a different set of CSS rules when the viewport's dimensions fall below a certain "breakpoint".
The specific technique is known as media queries. You might use it to hide the footer when the viewport gets too short, as follows:
#media screen and (max-height:700px) {
footer { display: none; }
}
Probably you're looking for something like a sticky footer, then?
I am working on an Android app that makes use of HTML in a WebView.
I have a series of <div>s in my HTML. Something like this:
<body>
<div id='topdiv'></div>
<div id='contentdiv'>
<p>A bunch of content in here!<p>
<p>There is more content here than can fit on 1 screen.<p>
</div>
<div id='bottomdiv'></div>
</body>
Is there a way to make it so that bottomdiv or topdiv is rendered, but not scrollable? In other words, is there a way to prevent the user from scrolling down past contentdiv even though bottomdiv exists below it and is not invisible, but contentdiv is always fully scrollable?
I am open to any plain JavaScript, CSS, or HTML implementation. It would be nice if that was a feature you could turn on and off, but not necessary.
Since I am working exclusively on a mobile device, it does not help me to disable the scrollbar or capture mousescroll events and the like.
If I understand well what you want, the following can solve your problem. Use the overflow property on the body tag, like this:
body
{
overflow:hidden;
}
Another way to solve it would be to set your bottomdiv to hidden, either by using
visibility:hidden;
if you want it to take no space or using
display:hidden;
if you want it not to take any space.
Than, just change it with javascript according to what you want to do.
I'm trying to set the max scroll length for my site.
I'm preloading each main page into invisible div's, but on every page the scrollbar vertical height is as long as the longest page I preloaded form external html.
Is there any way to set the maximum scrollable distance with javascript?
I have these empty spaces now on each page...
Change your hiddenPageClass to use display:none; instead of visibility: hidden;
Also, for future reference. Post relevant code here and/or an example at jsFiddle.net. Don't make us go to your personal site.
EDIT
You can see the difference in the two properties in this About.com question.
i want to create a grey out as that of gmail when we try to upload an exe.
the grey out screen should cover the whole screen even the scrollbars, the scrollbars should be visible through it but disabled
how this can be achieved using javascript and css
please dont tell me to set the overflow of body to hidden.
It only works if you wrap your whole page inside a div and set this div to allow scrolling but disallow the body from scrolling (or use iframes).
In gmail, the body has overflow:hidden. The scrollbars you see belong to an iframe with id canvas_frame.
Did you try looking at the gmail page, with a tool like Firebug, when it's greyed out this way ?
It'll allow you to see exactly how they do it ;-)
Apparently, after a quick look, it seems they're using a <div> such as this one :
<div class="Kj-JD-Jh" style="opacity: 0.5; width: 1560px; height: 366px;"></div>
The interesting thing here is that this 1560px is bigger than the visible area of my screen : it includes the right scroll bar.
Top level Scrollbars are browser components and not part of the canvas. Thus it is not possible to grey them out. You can only grey out scrollbars that are part of the HTML view.
Otherwise see this
CSS/JavaScript Use Div to grey out section of page
I have a web page that has content which extends past the right edge of the browser window. I set overflow-x: hidden on <body> to turn off the bottom scrollbar, but I can still scroll horizontally with the trackpad, which is not what I want.
Is there any way to prevent the browser from scrolling horizontally?
As a side note: Safari 4.0.4 only scrolls horizontally sometimes, and the scrolling feels "sticky" and "jumpy," whereas Firefox always smoothly scrolls horizontally.
you could try to set in CSS:
html{
overflow-x: hidden;
}
instead of use body selector.
I tried that and works in firefox.
I think the real question is, why do you have your content overflowing out of the intended size of the page? Is this content that you don't want users to actually see? In that case, put it in a div somewhere and set it's display to none. That would avoid the overflow issue entirely.
If there is a legit reason you want it to overflow the container, then set the size of the container explicitly, then the overflow-x to hidden. I haven't tested it, but that should prevent the current behavior. If not, try using a div, rather than the body tag. The browsers may be acting strangely because it's working on the body tag itself.
I would go into Chrome and open the developer tools on a desktop. Remove the overflow-x property. Then proceed to delete each parent element on your page. When you see that the horizontal scroll bar disappears, you know you have found your problem. Then dive into that element. My bet is you have a width of 100% and than a margin put onto it. Remove the margin if that is the case.
If all else fails, you could use Javascript to constantly force the browser to scroll to the left using window.scrollTo(xpos, ypos). For xpos you'll want to use 0 and ypos you'll want to get the user's current scroll position assuming you want to allow vertical scrolling.
You could put your function call either in the window.onscroll event handler, or in a javascript interval that runs every 100 ms or so. Up to you. If you need code examples just ask.
This would be better to understand if you had an example.
is this a long url or something with no whitespaces? Do you have white-space:nowrap; set on the element?
If you have a container with a defined size (one that fits in the viewport), the text should adhere correctly, (unless it's a long line with no spaces)
Old discussion, but it could be of use to people looking for the right answer !
Set "overflow:hidden" on the parent div of the element that is wider than the browser window (not html or body as you would normaly do), that will stop the scroll with de pad or the arrows pad...