Is there any way to make an iframe's vertical scrollbar shorter than the iframe itself? For instance have a 500px high iframe with a 450px high scrollbar (but the scrollbar would still fully pan the iframe's content).
(with Javascript, jQuery, or CSS)
Thanks in advance!
You could create a custom scroll bar with JavaScript.
All the usual caveats apply - usability, etc
Hey c'mere grandson, this scroll bar thingo is smaller than the panel, I don't know how to use it. Maybe I'll try another website...
You can always go for the dumb approach and embed a smaller scrollable frame as part of that iframe (which would not need to be scrollable at all then).
Related
How can I bind the page's scroll bar to a particular div instead of the entire page. See Google Plus for an example of this functionality.!
http://i.stack.imgur.com/Ab82L.png
You can use position fixed panels down the left and across the top. The body will still scroll as normal, but the panels on the sides will make it look like only part of the page is scrolling.
If you don't want to mess with the browser's native scrollbar, you could always
Create a container
Set the height and width of the container to 100%
Set overflow to scroll (or auto)
That way you created your own viewport and have more control.
I'm trying to figure out how this was accomplished:
http://www.paranorman.com/
In this site, the browser window's scrollbar drives the scroll position of a DIV. However, the window has a scrollbar even if it fits entirely into your browser window.
I need to make a site with a container element that will be driven by a scrollbar, even though the site container will be a size that fits in most desktop browser windows without needing to be scrolled.
This is done with trickery, where the body (or some other element) has a large size so as to get a scrollbar, and another element is placed with position fixed and height/width 100% in front of the scrolled element and takes up the entire screen, so the scrolled element is'nt visible. Then it's all about getting the scrollTop/Left values and moving elements inside the front fixed element according to how much the scrollbar is moved, making it look like it's being scrolled, when you're really moving stuff with javascript based on the scrollTop/Left values, and we call it, parallax. It all sounds harder then it really is.
Is there any javascript, ajax, css or any other method to get a webpage content fitted on a fixed widht iframe? Like mobile device browser does. Thank you.
You define a container div with a fixed width (say 400px) and set that div to overflow hidden. That will force the content of that div to stay within the 400px width. You put all the content that you want to have in the iframe in that container div. And then, you put that div inside the iframe.
I think that'd be the easiest way to do it.
I am trying to use jQuery to handle the scroling, so I want to get rid of the browser's scroll bar... how do I do that?
well with css you could do that -> overflow:hidden on the body tag but you will not be able to scroll down anymore if the page is larger then the browser screen (unless you use your keyboard arrows)
Use CSS: overflow:hidden; will disable the scroll-bars of the element.
Not certain whether it will work on the whole page (ie at the body level), but you can always wrap your content in a div and style that.
The way to prevent the browser scroll bar using jQuery is to keep your document height less than your window height. Meaning you would need a wrapping div and make sure your content never exceeds the window height.
$(document).height();
$(window).height();
Not sure what you are trying to accomplish though.
as others have suggested you can use the CSS property
body{
overflow: hidden;
}
The actual use case would need to be presented to find which way would be best.
For finer control over which scrollbar to show and hide you can also use overflow-x and overflow-y. Browser support is a bit tricky. You can check it with this testcase if there is a solution for only get rid of the vertical scrollbar in your case.
my page has a div on the top of 100px height and an iframe beneath it. I want the iframe to fill teh rest of the page viewport i.e that the iframe's height should adjust as the browser window adjusts so we don't see two scroll bars - I just want that the scrollbar should be visible in the iframe and not in the browsers own viewport.
If I understand you correctly, you should wrap the iframe in a div for which you make a class in CSS that has overflow:scroll;, height:100%; and margin-top:100px;
The height makes you fill the whole page, the margin-top clears room for your top div and the overflow ensures you get scrollbars around your iframe. You might need to play a little with the height.
As far as I know it is not possible to actually change the iframe's height, since you import it from another page.
Hope I could help a bit.