I have got a canvas tag in a page wrapped within a div.
In order to show the canvas in IE, I'm using the excanvas script from Google.
I'd like to be able to scroll the contents of the canvas, since it's supposed to be wider and taller than the viewport (the div).
I have defined the following styles:
The div overflow is scroll or auto
The canvas position is relative
In Firefox, I then get a scrolling viewport of the cancas, but in Internet Explorer (7), the canvas does not move.
Does anybody know whether it's possible to get a scrolling canvas in IE, and if yes how can it be done?
Thanks in advance.
You may want to set the scroll property on scroll only.
But not sure, could you put a bit of code for us to see it?
Related
I have recently noticed that when you have a div containing overflowed content that is scrollable, in chrome, you can smoothly transition scrolling from that div to the rest of the body, but in Safari, you can not. Instead of smoothly transitioning, the scrolling stops when you reach the top or bottom of the contained element, and you must scroll again to begin scrolling on the body. It is vital to the project I am working on that I allow Safari to scroll smoothly the same way Chrome does. For the life of me I can not figure out how to do this. Any input is appreciated, thank you for your time!
You can try my go to settings for a CSS element that is scrollable. Although I can't help you too much without seeing your code, try implementing these:
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
I usually apply these for iOs devices and it does the trick. Not 100% sure if it will help your problem.
Safari separates scroll gestures for different elements on purpose so that the user can clearly tell what element is being scrolled.
Of course, you can use JavaScript to solve this in a hacky way. For example, you can set the ScrollTop of body to the amount that the user scrolled when the div has reached to the bottom.
Situation: I've got an HTML page with multiple canvas elements on it. The canvas elements stretch the entire page (both vertically and horizontally), and there's no spacing between them.
Now I've got a problem on mobile devices, because if I touch-scroll over these canvas elements, the browser does not recognise this as a regular scroll event, leaving me unable to scroll the viewport at all.
Because the HTML page is taller than my viewport, I still want to be able to scroll to the bottom of the page, which I've now disabled. Any ideas to mitigate this effect are more than welcome.
You can see a demo of what I'm talking about # http://www.manuals.epaper-system.com/Tutorials/BXSLT4IndV6_220440/BXen/2014/20141115/BXEPen_v6_20141115_V220440.htm
Click on an article, then zoom in (to make the page taller than your viewport), close the article and try to scroll the page on your mobile browser while pinching on the PDF contents.
I've got a problem with IFRAMEs inside an DIV with hidden overflow and I'm curious to know if this is a bug or intended behaviour. It only occurs in Chrome and Safari, FF and IE work fine, so it may be some Webkit specific problem.
My situation is as follows:
site with DIV where overflow is set to hidden
this DIV contains an absolutely positioned IFRAME as well as some other elements overflowing the DIVs dimensions
jQuery function writes some html text to the IFRAME if users clicks a button
Look at this example where everything works as expected:
http://jsbin.com/aqexij/1
Now reload the page with an additional hash character (#) in the url and click the button:
http://jsbin.com/aqexij/1#
In Chrome and Safari this causes the DIV containing the IFRAME to reset the scroll position so that the iframe is on top (in the example above $('#workspace').scrollTop() returns 100 which is exactly the iframes distance from the top).
Can someone explain to me why this is happening?
I found a strange bug in Firefox. I've tested it in Chrome too, but didn't happened..
I'm using a background object. It's a div with fixed position and 1920*1050 sized. I need this, because I want my site compatible with every resolutions. Smaller resolution hide the big part of the background, but full HD users can see the whole background.
If I use absolute position for this div, my browser give me horizontal scrolling ability. I can hide it with hidden overflow, but I can't disable the scrolling ability. With fixed position the browsers doesn't "see" the whole object, and it's equal to disabled horizontal scrolling.
If anybody have any other solutions I would be very grateful for it.
The problem with this solution, is this:
You can see the difference between the two. It's the same text styling, but no anti-aliasing on fixed one. With smaller font-size it's really annoying.
Anybody met this bug in the past? How could I fix it, or any other solution for background image?
Update
Okay, I deleted the div, and added background for my body tag, with fixed attribute, and happens the same...
background-attachment: fixed; < Causes the same problem
Not quite sure what your background is supposed to be doing. But if you need a proportionally scaling background that fits all browser window sizes, you can use thisplugin and a reasonably high resolution JPG with preload on.
Remove any box-shadow property from the parent element. This worked for me.
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