I have a several question about WebBrowser control into WP7.
How to disable word selection by a click?
How to disable vertical scrollable by a gesture?
Add some extra styles to your html pages and render it on WebBrowser control
body {-ms-user-select: none;} use this css code to disable word selection by tap
in IE on Windows phone 7/8
body {-ms-touch-action: none;} use this css code to disable vertical scroll
in IE on windows phone 7/8
hope this work fine for you.
first , u can get a border control which is the container of the ie9 mobile core using visual tree helper
then
Q1: u can cancel the "Tap" gesture occurred in border control before it was passed to ie core
Q2: u can cancel the "DragDelta" gesture for some direction or distance ,well ie. vertical scroll.
The answer to Copy and Past = "I don't believe you can stop it from occurring, unless its your webpage and you can set it up for a Read Only Document."-If i am wrong please correct me.-
the answer to Vertical Scrollable By a Gesture = "You could build the Gesture to Return a Null instead of the event value, Pretty much tell it that if this occurs then Cancel it....Return Nothing!"
You can achieve disabling selection using javascript:
function DisableSelect() { var handler = function (e) {e.returnValue = false;} document.body.attachevent('onselectstart',handler,false);}
and than calling from your code:
wb.InvokeScript("DisableSelect");
Don't forget to detach the event.
Related
The new mini-site for iPhone 5s has a special page scroll:
http://www.apple.com/iphone-5s/
Every time you flick the page, it glides and stops at the next full page, not halfway, and not any more than required. How do they do it?
I had to do a similar site and I created a plugin for it:
http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/
Living demo
In mine you can also:
Use it over IE 8 and old browsers with no CSS 3 support.
Slide throw the page using the keyboard arrows.
Add horizontal sliders.
Resize of texts when resizing the window.
Mobile and Tablet detection enabling the scrolling on them. (as there are usually problems to visualize big contents and texts)
It is in its first version, simple but working well :)
I will keep improving it as far as I can. Suggestions will be more than welcome.
OnePageScroll may be what you're looking for: http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/
I've been fiddling with a solution to a similar problem.
All my solution does is monitor when the window scrolls.
if ($(window).scrollTop()+$(window).height()>=$("#page"+(nextpage)).offset().top+100) {
If it scrolls past the end of the "page" by more than 50px jquery animates the scroll to the next "page".
$('html, body').animate({ scrollTop: pageheight }, 500, function() { currentpage = nextpage; animatingdown = false; document.location.hash = currentpage;});
It does the same for scrolling up. This covers scrolling by mouse, keyboard or javascript.
Check out the full code at http://jsfiddle.net/dLCwC/1/
Maybe it'll be of some use to someone (let me know if it is, or isn't).
I have a Slider control inside a ScrollView (there are other elements, but those are the pertinent ones). When you "let go" of the slider (OnMouseLeftButtonUp - also works for taps), a network command is sent and the slider is momentarily greyed out. After the slider becomes available again, when I try to drag it, it will not work, and the "let go" event doesn't fire.
I have already tried setting e.Handled to True/False but it seems to do nothing. What would cause a Slider to stop working after it's used one time? -Or- Is there a better event I should be using to detect when the value changes on the slider after the user has let go of it?
Found the problem. You can't use a Toggle Switch (from the Silverlight SDK) with a slider because one takes exclusive control of a GestureListener.
Here's the fix I used, it worked perfectly (near the bottom):
http://social.msdn.microsoft.com/Forums/en-US/wpdevelop/thread/ba8bfef3-44a2-4e63-bded-97013e38772e/
You just have to wrap your sliders in a <Canvas> element and insert some event handlers.
I am using TextArea tags in my web project, that shall never show scrollbars.
This can easily be accomplished using
TEXTAREA { overflow: hidden }
All browsers that I need (IE, FF, Chrome) hide the scrollbars, as intended.
However Internet Explorer and Chrome will scroll to the current cursor position anyway, while Firefox does not scroll anymore at all. You can move the cursor into the invisible area and type, but you will not see, what you are doing.
Can this be solved?
Regards,
Steffen
EDIT: Because I have not found the source of the problem and I would really like to solve this, I leave this question open. However I found a really bad workaround: We now use overflow: scroll on that TEXTAREA, put it into a DIV, measure the width and height of the horizonal and vertical scrollbars, increase the size of the TEXTAREA by that values and set overflow:hidden to the DIV effectivly clipping away the scrollbars. They get invisible to the user but Firefox still scrolls. Not nice but working.
As far as I can tell, Firefox is behaving as I'd expect given the semantics behind overflow:hidden.
That said, and having read your comments above, you can quite easily mimick the behaviour you want with a small bit of jQuery.
Here's the code I've written:
$('textarea').bind("focus keyup", function(){
var $current = $(this);
$current.scrollTop(
$current[0].scrollHeight - $current.height()
);
});
This will basically scroll the textarea to the bottom when you focus on it and as you type. It may need tweaking to account for edits being done further up in the content.
Here's a Working Demo
If you tap on the left hand side of the screen in Outlook then an event is triggered (in this case a checkbox appears).
I would like to know the xaml on how this is achieved. It cannot be a simple "MouseLeftButtonUp" event because if you drag your finger more than a few pixels then the event does not trigger.
In my own app I am trying to get an icon appear within a listbox that has a SelectionChanged event. The issue is that if you do not touch the small icon precisely then you are triggering the listbox event rather than the event I want to occur when pressing the image.
I think I need to wrap my image in a Canvas but then am still stuck as to what the event should be.
How do you increase the target size of the area where a user can click on your element?
What event should an image have when within a listbox (which is within a pivot) that has a SelectionChanged event? (MouseLeftButtonUp causes issues if you half drag to the next pivot and lift your finger - it triggers the MouseLeftButtonUp event)
I implemented something very similar to that behavior by making an itemtemplate where the checkbox was pushed offscreen to the left by using a negative margin.
I then created 2 visual states, one for Open and Closed. The open state set the margin to 0, bringing the checkbox back onscreen. Closed state had the negative margin.
With the fluidmove behavior, switching between states on button press was EASY. The only thing you'd have to add would be an invisible button/touch area on the left that would also trigger "opening" the checkbox column (changing state to reset the margins).
Hope that helps...
The outlook app is a native app, so it probably isn't using xaml at all.
If you're worried about the mouse events, then you should look at the gesture stuff in the silverlight toolkit, it contains tap, etc events that make a little more sense on the phone.
Increasing the target size and generally making stuff touchable: wrap it in a Button, then alter the ControlTemplate for the Button to remove the border.
If you look at the ControlTemplate for a Button, (Expression Blend, Edit Template, Edit a copy) you'll see the mechanics of the touch area. It's nothing more than padding/margin.
Thus, you can't bleed your touch region out without altering the layout and affecting other items around the control. I'd do two things:
First, I'd think about whether my whole control should be larger in the first place with good spacing around it. Is my design right?
Second, I'd cheat. I'd float a fixed sized button with no border over the area using the Translate transformation to move it around freely.
Good luck,
Luke
I have a Pivot Control in my WP7 app that by nature responds to left and right swipes to move between the pivot items.
I then want to use the Flick Gesture on a UserControl (a small UI segment on my page) for something else.
My user control does handle the event but so does the Pivot control, so it navigates to the next item. I have not figured out how to stop the event when the usercontrol handles it.
Is it possible to use a sub control with the flick gesture within a WP7 Pivot Control?
eg:
private void glBlinds_Flick(object sender, FlickGestureEventArgs e)
{
//do stuff
e.Handled = true;
}
This solution posted recently seems to be working out for people for dealing with gesture conflicts on pano / pivot. You might like to check it out.
Preventing the Pivot or Panorama controls from scrolling
The short answer is don't put a control which supports a gesture on top of another control which also supports the same gesture.
Please see this answer to a very similar question for a slightly longer response: WP7 Toggle switch in a Pivot control?
I found this works well for incorporating a slider on a pivot item:
LayoutRoot
Pivot
PivotItem
Grid
Scrollviewer
[Content goes here, I use another grid]
Slider
If I skip the grid and place the slider inside the scrollviewer it doesn't work. I stumbled upon this solution as I wanted to support landscape and still have the slider visible / usable.
You might be able to place your small UI segment for the gesture similar to where I placed my slider.