Getting Windows Phone 7 WebBrowser Component VerticalOffset - windows-phone-7

I want to persist the user's location in the document he or she is browsing, then bring them back to that spot when they return from tombstoning or between sessions.
My first approach was to wrap the browser component in a scrollviewer, but it turns out it handles its own scrolling and the scrollviewer never changes its verticaloffset.
My guess is that the browser component must have a scrollviewer or something like it embedded in it. I need to get the verticaloffset and scroll to an offset.
Any guesses how to get there?
My next approach would be a painful mish-mash of javascript and c# to figure out where they are...

Because of the way the WebBrowser control is built you'll need to track scrolling in Javascript then pass the location to managed code to handle storage of that value.
On resuming you'll need to have the managed code pass the scroll position to a Javascript function to reset the scroll position.
That's the theory but I haven't looked at the funcitonality around javascript scrolling events in the WebBrowser yet. That's the only place I can see possible problems.
Would be good to hear how you get on.

I've accepted Matt's answer, but I want to put in some details here. I'm also going to blog about how I did it once I'm completely done.
Since the WebBrowser component is essentially a black-box, you don't have as much control as I would like. Having said that, it is possible to get and set the vertical offset.
Javascript lets you ask for the value, but different browsers use different variations on HOW to ask. For THIS case I only have one browser to worry about.
First I make a couple of simple javascript functions:
function getVerticalOffset() {
return document.body.scrollTop;
}
function setVerticalOffset(offset) {
document.body.scrollTop = offset;
}
Next I call into the WebBrowser using the InvokeScript method on the browser object.
I'll post an update here with a link to my blog when I get the full write-up done.

I have been writing an eBook reader and had a similar question. Code for setting a scroll position has been easy enough to find.
Code for setting vertical scroll position:
string script = string.Format("window.scrollBy(0,{0});", "put your numeric value here");
wb_view.InvokeScript("eval", script);
Google didn't help much in finding solution for getting the value of current scroll position. Lacking any knowledge in javascript it took me almost two hours to get it right.
Code for getting the vertical scroll position:
var vScroll = wb_view.InvokeScript("eval",
"var vscroll = window.pageYOffset; vscroll.toString();");

Related

Show hide symbol in Adobe Edge

Just trying to get my head around Adobe Edge. What I want to achieve sounds simple but having real trouble. I have a button element, that when mouseover, displays an animated symbol I have.
Currently my code,on the button is Mouseout:
sym.$("pgicatext2").hide();
and mouseover:
sym.$("pgicatext2").show();
This doesn't seem to be working. I can achieve the result if, I turn off the movie symbol, and use this code on the button
sym.$("pgicatext2").toggle();
The trouble is of course it doesn't replay the animation every time you mouse over, and all the while it's hidden it's playing the animation.
I see its been a month since you posted this. Hopefully you solved your issue. Your code for hiding and showing looks right. One thing I have had happen in some of my projects is that I inadvertently placed an object or symbol with 0% opacity on top of a button or something I had a mouse over event. Make sure that the button you have does not have anything layered on top of it. Another thing would be to turn off autoplay of your symbol, and add sym.$("pgicatext2").play(); into your mouse over. I know those are pretty obvious answers, but sometimes it is easy to forget the obvious.
Please get through following steps:
Check if the button is over all other visible layers ('Elements'
tab). Maybe setting cursor to 'pointer' will help to check it.
Use 'Mouseenter' and 'Mouseleave' instead of 'Mouseover' and
'Mouseout'. The difference is explained here.
Make sure that your animated symbols 'autoplay' option is off. If
you did not tick it off while creating the symbol, just set Playback
to 'Stop' on Stage at the very beginning of the timeline
Lets do some coding. Lets assume that your animated symbols name is
"film". You need to set following actions to your button element:
Mouseenter:
sym.$("film").show();
sym.getSymbol("film").play();
this basically shows up your 'film' element and plays 'film' symbol
Mouseleave:
sym.$("film").hide();
sym.getSymbol("film").stop(0);
this one hides your 'film' element and stops 'film' symbol at the beginning of animation (0ms)
Enjoy!

Page items sliding in in metro style apps

I'm experimenting with creating a metro style app with Visual Studio 2012, I am not the most experienced designer but one thing with my applications is confusing me.
I have been working with 'basic pages' instead of blank ones for the different pages in my application for design consistency, however it seems that these 'basic pages' have a strange behaviour. Every item I place on the page (buttons, text boxes, etc) will all slide in one by one when the page opens. For example if I run the application and navigate to a page with 10 buttons, it will do a brief animation where each button will slide in from the right side to the left side. When dealing with a large number of items on one page this can take a lot of time as each item slides in seperatley.
Looking at the properties for each item I have been able to change the direction it slides in while loading the page by changing the flow direction. Also with a bit of research I am thinking it could potentially be due to either the metro style 'enterPage' or 'enterContent' animations, though I can not be certain.
I have tried to experiment and figure this out, and search to find out what causes this so I can modify it (Ideally I would like to just group items together to slide in with each other) however it's kind of a difficult thing to search with vague words, so I'm asking here.
What is causing this and how might I go about modifying it?
EnterPage shouldn't be sequencing the animations. They do offset some of the animations of a number of elements, but it shouldn't be each one sequentially.
Are you using WinJS navigation?
Well after a bit of experimentation I figured out that putting all my page content inside a grid made them all come in at once like I wanted. I probably should have tried that earlier but everything was already inside an outer grid for the page, so I thought that woulda handled it.
I don't quite understand it fully, but that works for now.

SlickGrid vertical scroll bar not displaying properly unless the filter is displayed/hidden to re-size the viewport

I'm just starting to use SlickGrid but I've had a lot of success creating a remote model that can interact with the paging plugin. The only problem I have seems to be a browser issue, but I'm curious if anyone knows a trick that may resolve the issue.
I'm retrieving the data page by page in my model via AJAX and updating the grid with the grid.setData() and grid.render() methods.
The problem I would like to solve is that when the length of data changes the vertical scroll bar gets really confused, unless I change the current visibility of the filter panel (grid.hideTopPanel() or grid.showTopPanel()). By confused I mean that the scroll handle in the scroll bar doesn't change size to indicate the different number of rows that are now current, and if the list grows, the scroll handle size jumps all over the place as I scroll up and down.
I'm assuming the "fix" works because it forces the browser to recalculate the view port height, but is there any way to force that to happen? Or is there a better way to do what I'm trying to do?
Ok mleibman straightened me out, what I actually was looking for was grid.updateRowCount(). I believe he will be adding a call to this in grid.setData(), but for now just make sure the 2 method calls are used together.
Have you tried grid.invalidate() ? Im my experience that forces the grid to recalculate pretty much everything. It may be more heavy-handed than you need but at least you can see if a complete invalidate solves the problem.
I figured it out. You need to call grid.resizeCanvas() after calling grid.setData(). It seems like this should be part of the grid.setData() method because a call to it will change the number of rows. But anyway, that's what you need to do.

Firefox extension: How can I set the cursor position?

I have a page with possibly several content-editable iframes (editors).
Now I would like to use my custom Firefox extension to do the following:
Setting the cursor to the end (or last HTML element) of the editor the cursor actually is in.
I found many solutions to get the cursor's position, but I need one to set it.
Any suggestions?
XPCOM likely includes such functionality as part of the testing rig. Mochitest at least is capable of this (again, probably though XPCOM).
On the other hand, when a user is on the system this a generally a gross violation of user interaction practices. Be sure you have a good justification for doing it. It may seem convenient but what if they're doing something else whilst using your addon? I usually have various apps open at once, Fx extensions are only part of that. I don't want it taking control of my mouse, EVER.
Is there something wrong with setting the focus? At least that only forces the user's hand at a window level.
It also suspect it make it quite difficult to get past AMO review. You'd have to justify why it was necessary to invoke such low-level functionality. If you interact with a window, for example, the window might be able to affect the input of your functions which in turn control the mouse... and then a random web site has access to the user's window!
Found the solution to my problem myself. This code myself will set the Cursor position to the last Paragraph of my editor:
var frame = window.content.document.getElementsByTagName('iframe')[2];
var win = frame.contentWindow;
var editingSession = Components.classes["#mozilla.org/editor/editingsession;1"].createInstance(Components.interfaces.nsIEditingSession);
var editor = editingSession.getEditorForWindow(win);
selection = window.getSelection();
var body = frame.contentDocument.body;
text = frame.contentDocument.createTextNode(".");
body.lastChild.appendChild(text); // add textnode to be selected
var range = editor.document.createRange();
range.setStartBefore(text);
range.setEndAfter(text);
editor.selection.removeAllRanges();
editor.selection.addRange(range);
body.lastChild.removeChild(text); // remove Child

Best UI to be shown to User while his request is still in process behind the scenes?

I am currently involved with an Application where I need to design the UI part of the Application and current I am in the process of implementation of UI which would be displayed to end user while his or her request is being processed behind the scenes.
So my question is that:
What is the best UI approach/symbol/suggestions to be displayed to end User while his or her request is still being processed behind the scenes ?
Thanks.
Any sort of throbber is adequate enough. Here's a nice throbber generator you can use.
And there's nothing wrong with progress bars, unless there the kind of progress bars that start over without actually indicating progress.
If you don't take your program too seriously, this one is always a crowd pleaser:
This is going to take a while, so to pass the time, here's a dancing bunny:
http://img251.imageshack.us/img251/4828/thdancingbunny.gif
A Loading screen of some sort may work.
It depends on how long your user must wait. If it will be <10 seconds, then just show the spinning pie of death as an animated GIF (or flash if you prefer to be non-accessible) (a simple jquery hide/show with CSS)
If it is a longer wait, like >10 seconds, you may want to implement a short but entertaining caption system. Something like the old "Reticulating Splines" type system to give the users a bit of humor while they wait.. see https://stackoverflow.com/questions/182112/what-are-some-funny-loading-statements-to-keep-users-amused for a list of such statements.
If you've got a long running background process, I'd simply display a progress bar with a message below it that states in the least technical terms possible what the current task is. And then, if possible, a cancel button in case the user gets impatient or mistakenly started the process.
I can't provide any specific links to back me up, but I believe its been proven that just the presence of a progress bar can make a longer task seem shorter than a task without the progress bar.
The worst thing you can do is nothing. Users have been conditioned to think that no feedback = locked up program.
Note on typical implementation (that I use):
jQuery has the .ajax function. When I call the function (onClick or whatever) I .remove() the contents of the (div or whatever seems appropriate) and add a css class of waiting which looks like:
.waiting {
background-color: #eee;
background-image: url('some-spinner.png');
}
the .ajax function has a success callback where I remove the .waiting class and put in the new data I got back from ajax (or put back the data I took out with .remove().
Additionally you may change default mouse cursor to wait or progress states with CSS.
Details about changing cursor with CSS here.

Resources