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.
Related
I'm experiencing a strange cutoff of my background image at the very bottom of my page. It's only evident if you have a short browser window and scroll to the very bottom. And it only happens on longer pages.
Firebug inspection reveals a viewport-width element, stretching entirely across the browser window at the very bottom, about 50px high that seems to be "blocking" it, but this doesn't correspond to any div in my layout - that I can find, anyway!
Also, when rolling over this strange element, it's the first <HTML lang="en-us"> line that gets highlighted in Firebug.
Longer page: http://bit.ly/151TFnW
============FOLLOWUP==================
Following the helpful suggestions here, I fixed the above by removing the 100% height from the BODY style. But that breaks something else! Now, on this shorter page:
Short page: http://bit.ly/1fvbnHY
The background image is still cut off at the bottom, when the browser window is tall enough to show this.
Remove the 100% on BODY and that second, shorter page is fine - full bg image and bottom margin - BUT the earlier link's problems return.
Help....!!!
From what I can tell, it looks to be caused by the height value assigned to body. When I remove that rule, most of the gap goes away. I assume the last bit is from some of the margin from the footer spilling over.
Well, it may or may not be considered a proper fix, as it doesn't address the reason why the pages in question reacted differently to the "body at 100% height" setting than the rest of the site... but I solved it by targeting it with CSS so that the problem pages simply don't receive that CSS rule.
So, sigh of relief, but tinged with the knowledge that I didn't really figure out why it was doing what it was doing.
This will sound very "noob", but I'm new to HTML/javascript/php, and so far I've been having a blast discovering new stuff. Right now though, I'm having a minor problem.
I'm trying to make a UI with lots of buttons (it's a matrix of buttons, 5x24). When the browser is maximized, it's all good, the buttons are where they're supposed to be. But when the browser is adjusted so that it becomes narrower (width becomes smaller), the buttons try to remain visible by moving on top of each other.
I want to know how to make it so that a horizontal scroll bar automatically appears.
I've tried putting everything in a <body> tag and putting style="width:100%;overflow:scroll;" but the buttons still do what they do, and that is, ending up on top of each other when they're supposed to be side by side...
Thank you very much!!!
The problem is, width: 100% means the full width of the parent element. Give your container the necessary width (in px, not %) to accomodate all your buttons. Than put that in a div with overflow: auto, and it should work.
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.
See that Fiddle.
If you zoom in the page you'll see the first div is always visible and centered(width in %). The other one is not(width in px).
Can I somehow make the second div behave in a similar way?
Update:
The goal is to have it in the center. Its expanding beyond viewport borders is not a problem.
Btw: IE8 zooms in any website just as I need(Ok ok, I know that top left corner is more important).
Your question lacks logic. If you zoom in on an element whose size is fixed, it's going to get bigger, obviously. On the other hand, if you zoom in on an element with dynamic size, its size will adjust to the new viewport.
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