If you view this HTML css site in either 1024x768 resolution or on a mobile device, the content that extends vertically beyond the browser is hidden and there is no vert scrollbar to do so. Is there any way to force it?
www.marketbridge.net
thx
On Apple OS, scroll bars are never shown anymore. I often find this a nuisance also, but I guess MacOS/iOS users are used to this. You could make some flyover indication with JavaScript using scroll height and scrollposition, but I guess you're better consistently using a pagefooter. This way the user 'feels' there is still content.
Another way to achieve this is only the upper half of the last displayed line of text is displayed (through JavaScript). The same effect is reached by displaying a rectangle with increasing opacity (0 to 100%) over the bottom of the viewport that makes the bottom of the viewport seem to fade out. If you make sure the page's bottom padding is equal or greater than the gradient, you have a nice indication of continuation, and the good thing is you can do with pure HTML and css.
Related
I've made rock paper scrissor game using html,css and js.When window is resized to small, some left portion of the page disappears .Using horizontal scrollbar i can scroll to right but not left.
I've checked for absolute positionings and negative margin but none worked.
What should i try ?
I expect to get entire page without any portion getting clipped off.
Hard to answer this without the code, but I would use devtools first to see what margins are being applied. You can look at the box model for each element in your dom and see what is being applied. Also, how small are you resizing? Do you have any explicit widths? If you are sizing down to 200px, but you have a div that is 250px, it clearly is going to have overflow. Devtools can also help with analyzing different devices too. Use the tool to set a size and see how your page responds, you can change the width of elements in the devtools to see if it removes the overflow.
This is an example of the effect I'm trying to acheive only without using images.
I want to create these screens that take up the entire screen like in the example. But instead of using background images to keep the content position, I'd like to use any HTML content within these screens. I'd also like to eventually ad a parallax effect similar to this.
So let's break it down. I got these background images on these screen elements. The background is fixed so it stays in the same position when you scroll. When you scroll down, the element moves out of view and another comes into view. It gives this effect as though the scrolling is causing a cover to slide up and reveal another screen. I want to keep this effect only without using background images. So I'll need some way to have some content remain fixed and have a contain hide it when it overflows an element that isn't fixed. But, as far as I know, there's no way to do this with CSS alone, am I wrong?
Like I said above, it would be interesting to have the content not remain exactly fixed, but instead slightly move it as you scroll giving it a slightly parallax effect. In order to do that tho, I'll need to use JavaScript. But, that's a bit out of the scope of my question, but I'd like to keep this in mind when coming up with the solution.
Thanks for all help in advance!
Situation:
Mobile phone equipped with jquery, jquery mobile, jquery-ui.touch and jquery.ui.touch-punch, the latter to make quite some things like drag/drop etc available for touch screens.
Two div blocks from which to drag bullets from one sortable div block into other sortable div block.
On the screen those two blocks are visually adjacent to one another to make things work although suboptimal, because bullet disappears when dragged into the other div block. Nevertheless it can be dropped somehow because afterwards bullets appear indeed in target div block and disappear in original div block.
With help of css option overflow: auto, one can make scrolling appear in both blocks to scroll through the list of bullets.
Problem:
These scrolling sometimes work and sometimes not because in the latter case either the whole page starts scrolling or (after clicking on local div scrollbar) it starts zooming-in to such a level/depth that the whole page becomes useless.
In Firefox Mobile div scrollbars not visible but scrolling sometimes possible; in Opera Mobile div scrollbars visible but at random "deeply" zooms in after clicking a div scrollbar.
Tried out different solutions given on the Internet to block page scrolling or zooming-in, but to no avail. Some "solutions" make page scroll is locked, but then either all scrolling is locked and/or dragging is also locked.
Question:
Anybody any experience with above situation or could give some hint? I know this is bleeding edge because even JQ/JQM (or any other framework?) has not reach this point at the moment, though they are working on it.
jquery.ui.touch-punch is a plugin, although experimental, itś the only way I know so far who make drag/drop etc available for mobiles/touchscreens.
Thank you very much in advance!
I'm sorry if the title is not very good, any suggestions are welcome.
The entire page is an iframe onto another website (in this case, jquery.com just for demo purposes). I have an overlay "Hello World", and if you click on the X it minimizes it (click again it will open it).
My issue in this case is that it covers the scrollbar on the right.
I assume the reason is I have a CSS positioning the sidebar at right:0, however since it's an iFrame it doesn't count the scrollbar.
What are my options for working around that?
I thought of giving it some extra space, but how do I know if the page really has a scrollbar, or how big the scrollbar is?
Is there a way to place the overlay at a position WITHIN the iframe instead?
There is no way to detect the remote page's height or even if a scrollbar is present or not. Your only option, besides moving the sidebar to the left, is detecting the browser's scrollbar width and permanently shifting the overlay off the right edge this amount.
yes. just set the right to 40 for example right: 40px;
There is an example here that shows you how to detect if an iframe has a scrollbar:
How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
And there is also an example here that measures the scrollbar width
http://4umi.com/web/javascript/scrollbar.php
Once you know these you can place your overlay however many pixels from the right
I have a layout of fixed-pixel width (960px) with a navigation bar that has five items in it. The width of the nav div is set to 100%, but its content ends up taking exactly 960px. The navigation is a bit complicated with a set of drop-downs and links. The problem is that zooming the page out at all causes the navigation bar to get clipped and move on to the next line.
Anyone have tips for how to avoid this?
Thanks a lot.
The only sure way I've found to do it is by defining all padding and widths using 'em'. This means everything will be relative to the font size and expand/contract smoothly as you change font sizes in the browser.
Here's a simple template I put together years ago that does the trick.
Since most browsers now zoom instead of only change font size, it's not as much of a concern, but older ones like IE6 still need a little help.