If I limit WebBrowser's height, and content is longer, scrollbar is created inside the WebBrowser (effectively, HTML page is long), similar to IE in WP7. This scrollbar behaves the way I want to - after swift swipe it continues to scroll, slowing down.
But if I place a div with a scrollbar in the WebBrowser content, this scrollbar behaves like regular HTML scrollbar, it does not keep scrolling after user stops touching the display.
Is there a way to make this work too ?
Thanks
No, not easily. The WP7 IE9 browser control supports the overflow:scroll CSS property that allows the user to scroll content within the current page. It is worth noting that most Android and iPhone browsers do not support this, although it has been added in iOS5. None of these browser support inertia scrolling for overflow:scroll, WP7 included.
The only way to get inertia scrolling for overflow content is to do it yourself using JavaScript. For WebKit browsers there is a popular library, iScroll, that provides this functionality. However, it does not work for WP7 (due to lack of CSS3 3D transforms that are used to push the scrolling content onto a different layer for hardware acceleration) - so you will need to write your own implementation. Good luck!
Related
I have a Kendo UI panelbar on a website I'm developing, with a large number of panels (dynamic, but it can be up to 12). On mobile devices, I've found that clicking a panel bar to expand or collapse it will also cause the page to jump to the top. Since the panels are a bit further down the page, we're finding this to be really annoying. It does not happen on a desktop screen though, even if I shrink the window down to about a mobile size (it does happen when I use Chrome's mobile emulation setting, however). Is there a way that I can prevent this from happening?
EDIT: This behavior only occurs with panels that have a Kendo Grid within them, which is most of them; it does NOT occur with panels that just have text.
I am fond of the type of side navigation menu that is common in mobile apps. An example is: http://www.jqueryscript.net/menu/jQuery-Animated-Side-Navigation-Menu-Plugin-Sidebar.html
Which works also for web pages. However, the vast majority of my page is in KendoUI, and I don't want to load another framework just for that.
Is there a combination of tricks with Kendo (draw control for example) that I could use to get the same effect?
Alternatively, I am all wet. I just want a quick way to have a "pop-up" of settings that are only occasionally used, and most of the time save the screen real-estate. So maybe just a button and a pop-up window is the correct approach?
Any advice?
I currently have a series of 8 separate html files, with the idea that each one is a separate page in an iPad app. I have used jQuery Mobile to implement the page swipe between pages by using the 'data-next' and 'data-prev' attribute. However, the results are not great as i sometimes get a page flicker when i swipe, and css animations are very choppy when I test it on an actual iPad. I am also getting a 1 second delay before the actual swipe happens. I know JQM has a default delay of 300ms, but this is waaay longer! I have tried using the css 'translate3d' technique on animated elements, but it doesn't seem to fix it. I'm putting it down to JQM just being buggy as hell.
So my question is this..Is it possible to bring these files into Xcode, as separate independent html files, and implement the page swipe within Xcode itself?
No Not possible.
XCode allows you to create/edit UI and Transitions of cocoa touch controls only. However you can just edit these html/javascript files in XCode.
I am developing a website: http://www.techniquetolife.com
It's basically a div 5x as big as the window inside window sized div, with other divs within the large div, using the overscroll and scrollTo plugins to navigate.
The website works perfectly fine in Safari and Firefox for OS/X. But I am having serious trouble making it work in Chrome. I'm not sure if it's an Chrome OS/X only problem, but whenever I scroll over one of the inner divs within the large div, the whole browser slows down, this only happens in Chrome...
If I disable overscroll and use the scrollbars it works 100% fine, but I really want to use the overscroll drag to scroll plugin.
I am no good at coding so any help would be greatly appreciated.
All of the plugins / browsers are on the latest version.
Okay, well I posted an answer to a similar question that I think this might be related too. I could be wrong though, but you could test it.
See the full question and my full answer here: Chrome slow scrolling with fixed position elements
Problem and How to Monitor It
The reason for this is because Chrome for some reasons decides it needs to redecode and resize any images when a fixed panel goes over it. You can see this particularly well with
► Right Click Page -> Inspect Element -> Timeline -> Frames
► Hit Record on bottom
► Go back to the page and drag scrollbar up and down
This seems to just be a problem with the method Chrome is using to determine if a lower element needs to be repainted.
To make matters worse, you can't even get around the issue by creating a div above a scrollable div to avoid using the position:fixed attribute. This will actually cause the same effect. Pretty much Chrome says if anything on the page has to be drawn over an image (even in an iframe, div or whatever it might be), repaint that image. So despite what div/frame you are scrolling it, the problem persists.
The Easy Hack Solution
But I did find one hack to get around this issue that seems to have no downside as of now. By adding
-webkit-transform: translateZ(0);
To your fixed panel, putting that div in its own compositing layer.
I am developing an advertisement in my application. I showed the advertisement in the webbrowser correctly. Now when double click on the webbrowser the content is zooming, But I want to programatically zoom the content of the webbrowser. (Want to zoom the content in webbrowser when the application launches, not double clicked by the user). How can I zoom the webbrowser content programatically ?..Is it possible ?
This is not directly supported by the WebBrowser control. However, you might be able to make this work by digging around in the internals of the control. I recently published a blog post which looked at suppressing pinch and double-tap zoom interactions. This was achieved by inspecting the visual tree of the WebBrowser:
\-WebBrowser
\-Border
\-Border
\-PanZoomContainer
\-Grid
\-Border (*)
\-ContentPresenter
\-TileHost
Then handling interactions on the indicated Border (*). You might be able to find a way to emulate interactions in order to cause the browser to zoom.
If you have control over the content being loaded in WebBrowserControl, you may consider adding this meta to the source.
<meta name="viewport" content="width=480,user-scalable=no"/>
What Colin said is right, you cannot otherwise capture any manipulation events. But here on changing the margin of the webBrowser control you can see the zoom. So you need not take so much of work. So you can programmatically control the zoom to some extent. And if you need the zoom to be more specific to certain area of the web page, I suggest you to go for working on javascript. I am not sure if you can do with the sdk we have.
If you want to disable the zoom on user click what Apurv said works, but it gives a weird effect on double clicking. If you are not happy with that you will need some work arounds.