How to capture current visual state of page? - javascript

I need to capture the current visual state of a webpage. I have seen a few different solutions such as HTML2canvas or node-webshot. The problem is that I need to be able to capture the current state of the page rather than just the html from a given url.
E.g if a user goes to a URL and clicks on a few options which change the UI through ajax I need to be able to capture the page as it is to the user at any given time.
Basically I need to take a screenshot ( most likely using javascript ) of the current state of a web page. Im wondering if anyone has an suggestions as to what the best way to go about doing this would be?

Related

Change value in URL without affecting history

I am pretty sure I am failing to find an answer to this just because I am not using the correct terminology when googling.
In my website I want to display some details about the user's state like selections or filters in the URL so it can be copied and sent to a colleague to replicate the state somewhere else. However, I don't want to enter a state in the history for each change to this so that the back buttons and refresh are affected. I want to make it so that if you navigate to a new place within the website or if you press back/forward/refresh in your browser, the extra parameters (to the extent I chose) will be discarded.
Whenever I try to google for this the topics are always "Change url without reloading page" where I want "Change url text superficially without affecting ANY behavior of the history or browser".
I am developing with GWT so I anticipate that a javascript approach will be most appropriate.

How to create a page location in browser using javascript/jQuery?

I have a setup where I display a list of buttons and clicking on the buttons triggers a function that contacts a firebase database and gets the contents of a 'slide' that is to be shown to the user. The function then clears the content of the page and then creates elements from the data acquired from the database.
Now obviously, when I press back browser button once I've replaced the content, it won't take me back to the previous content. But I believe that my user's experience will be much better if it actually took them back to the list of buttons. I have two faint ideas on how to go about solving this problem but I'm lacking in specific details of how I can go about it.
Possible Solution 1:
Some way to dynamically create a new page using javascript and then serve it to the user.
Possible Solution 2:
Some way to simulate that the page has changed location. Maybe using anchoring links.
Let me know if you have any other solutions in mind or if you know how I should go about implementing these. Your help will be much appreciated. :D

How to detect url change using jquery (or javascript) for urls without a hash

I've been searching for an answer to this and the most I can find is to use window hashchange. However my urls do not contain hashes.
Please note that I do not have any control over the urls or the code for the sites.
So here is what I am doing. I create a drop down button with a few options.
Button A -> Option 1, Option 2, Option 3, etc....
How the site is designed is this. The base url is
http://example.com/12345zzzyyyxxx
To modify anything on that page, you need to click on the edit button. This will take you to the url (which is the edit page)
http://example.com/12345uuuyyyttt/e
As you can see above, 12345 is a constant and anything after that (up to the /e on the second url) is dynamic. But no hashes.
So I am trying to automate the following:
1. Click on Edit
2. Fill in the required fields based on option selected.
3. Save the changes. Once save is triggered, the site will take automatically take you back to /12345zzzyyyxxx base url.
So I have it working from the edit page, but that means you have to manually click on edit. I want to automate that.
I have tried using setTimeout and setInterval to detect when this happens, but what I have found out during debugging is that both of these go out of scope when the frame changes.
Also note that the entire page does not change, the frame changes keeping the logo and a few other items untouched and you can physically see that they stay while the frame changes.
History JS is basically the standard js-lib to handle all History state changes, check their github account for more information.
https://github.com/browserstate/history.js/

Detect end of PDF document

Is there a way in Adobe Acrobat to detect if a user is on the last page? What I would like to do is set some document javascript to trigger once they are on the last page. I know how to setup the document javascript in Acrobat, just haven't found any way to detect what page its on. Ideally it would be nice to be able to get the current page and page count and compare, but even if there is a current page variable, I could just hard code the last page. My fallback will be to add a button or checkbox on the last page, but would like to avoid that. Any help would be appreciated. Thanks.
Pages have actions just like fields do, so in your case, you could use the last page's Open event to trigger your Javascript.
To set a page action, open the "Page Thumbnails" navigation pane on the left, right click the page, then add an action as you would to a field. Alternatively, a page action can be set via Javascript. In your case this would look something like this.setPageAction(this.numPages-1, "Open", action);

JS page formatting is not retained when navigating away from a page and back

I have a bit of an issue with page formatting when I navigate away, and then hit browser back to a page.
Here is an example:
I have security questions on a form in a drop down list like so:
http://i.stack.imgur.com/ib32z.jpg
When the user selects [Type in your own question] from the drop down list, I have some jquery that animates a CSS change that pushes the form down, and makes visible a hidden field for 'custom security question'. When selected, the form looks like this:
http://i.stack.imgur.com/uVPKo.jpg
Now my dilemma is when I navigate away from this page, and then navigate back using the browsers back button, my formatting gets screwed up and looks like this:
http://i.stack.imgur.com/5Xhpi.jpg
The javascript that I have written does not trigger again on the back button so the browser doesn't know to move the form back down to accomodate the change in spacing. Is there anyway I can force the document.ready to reload or clear some kind of cache?
Thanks!
EDIT: Sorry guys, I need to reupload the images to a host and repost. Sorry for the delay.
There are basically four mechanisms for persisting state on the web:
Browser-based - the browser, if you're lucky, will save answers to form fields and re-display them when it sees an INPUT with the same name; also, some browsers will preserve some state between forward<=>back navigation
Cookie-based - pretty self-explanatory; you save a cookie with the state info, and check it later to recover the state
URL-based - navigate to a different hash of your URL, with the info you want in it (eg. "?roll_down=true")
HTML5/Local Storage - Look it up if you're interested :-)
We can basically throw 1 and 4 out, because they both rely too much on browser behavior/support, and we can't reliably rely on all browsers to handle them the way we want. That leaves #2 or #3.
Cookies allow you to save more info (as much as a cookie holds, ie. about 4k). URLs allow less info, but they have the added benefit of bookmark-ability; if the user saves the URL as a bookmark (or as a link they send a friend, or whatever), the state still gets preserved.
So, take your pick of the above, decide on how to persist your "my form is rolled down" state ... and then comes the part that (I think) you're really interested in: how do you check this state and fix things when the user clicks "back"?
That part I humbly defer to another SO post, which has already answered it:
Is there a way to catch the back button event in javascript?

Categories