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.
Related
I am designing a long Windows Phone 8 page. It is very frustrating that I can't see most of it in the design visuals.
I was wondering if anyone knows a way of being able to see the content visually, at design time, of either the bottom of the page (i.e. scrolling up in the designer), or preferable to be able to see the whole page.
I know you can turn the chrome off, is there any way to turn the view windows masking frame off?
This also applies to trying to see a whole panorama view too!
Thanks
Try temporarily collapsing the controls which are above the controls which is getting off screen. Later you can set that control to required dimensions again.
Instead of removing d:DesignWidth & d:DesignHeight from xaml root tag, just set these values high enough such that all of your content gets displayed.
I'm developing for Windows 8 (WInRT) and have problem with settings charm. Settings popup is based on Microsoft SDK settings charm. Settings panel is Popup. Content is wrapped by ScrollViewer -> Grid -> StackPanel. In StackPanel I have input fields. when I trying to fill last of them on screen keyboard overlaying it and I cant see field and cant scroll to it. Is there any way to see it and to scroll to it automatically?
Seems like the popups on Windows 8 suffer from the same problem as they did on Windows Phone in that when you put a TextBox on one of them - it does not get pushed up together with all the other content as it does when it is not in a popup.
My solution to that would be to not use popup for input fields and instead go for a layout that you can manage yourself.
By default the app has a Frame control at its visual root. You can modify it for example by putting your own UserControl in there (I usually call it AppShell) which has the Frame used by all pages, you can have a layer for popups, log in screens, the extended splash screen etc.
To solve your problem you would need to put your charm's UI inside of such layer instead of in a popup. Then the build-in mechanism that pushes all the UI up when the on-screen keyboard would otherwise obstruct the view of your TextBox should just start working again.
*EDIT
A simpler solution might be to make sure your settings panel popup is parented in your visual tree - e.g. by adding it as a child element to a root grid of your app or page. It turns out that in that case its content does get pushed up when the OSK shows up.
Take a look at this post
It's a popup wrapper (turns user controls into popups) that takes care of the keyboard appearing and adjusts the size of the popup (and thus the user control) accordingly.
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!
I'm developing a firefox addon and would like to have a fixed position (relative to the browser) semitransparent panel with 3 icons shown at the corner of every browser content area. These buttons will have to be able to communicate with a site that is not the site shown.
I know it would be possible to inject a fixed position div to html but I want the buttons to communicate with external site when pressed and also query information when they are loaded so I think that would violate same origin policy. This wouldn't work with image or other direct media urls either.
What would be the easiest way to create the floating icon panel?
After about of week of work I found it. Here is the answer, I hope this helps someone else:
http://marcada.ms/2010/02/getting-content-on-top-of-the-browser-space-using-xul/
The above adds the panel, transparency is not working (at least not in linux what I work with) because of the following bug. Sigh... opened in 2007 and not closed in 2012.
https://bugzilla.mozilla.org/show_bug.cgi?id=408284
edit2: I ended inserting html data to the body of the document using files from extension folder. Works very well including transparency.
edit3: If anyone is interested how this works in my plugin, check my live site at http://www.upmarker.com
On Windows Mobile 7, when a user clicks on a text box before entering some data - the screen usually zooms in to the box and pulls up the keyboard.
Is there a way to prevent the zoom? Or is this a setting on the phone itself?
Thanks gents - but the answer I needed was to include a viewport meta tag that defined the 'user-scalable' parameter as 'no'. Anyone grappling with mobile device cross browser compatibility issues should check this page out - a huge help to me today.
http://davidbcalhoun.com/2010/viewport-metatag
This usually happens in the web browser as the textbox could be tiny when it is clicked. I agree it can be annoying. It does not happen in native apps however.
if you click on a textbox in the app, and it is under the area where the keyboard would be.
It is normal behavior when text box is focused. Your content is moving up when on screen keyboard is appearing.
if you want your content to stay on it's place you can try to use Coding4fun controls(download with sample here: http://coding4fun.codeplex.com/SourceControl/list/changesets). Run Test Application, go to Promts -> Basic input or Advanced input.