0

I'd like to improve the "help" page of my website by adding screenshots of various sections of the site. I'm hesitant to make these static images since the site is still in development and is cosmetically changing constantly. In fact, I'm even thinking that creating images at all may be overkill.

Is it possible to load (via PHP or JQuery) a small section (with static size and x y) of another page and display it in a div?

adamdport
  • 11,687
  • 14
  • 69
  • 91
  • 1
    Why not include any necessary help information in the appropriate pages themselves, either inline or in popups etc? I.e. why not make the site self-documenting and dispense with your help pages all together? – Tim Rogers Feb 20 '12 at 16:47
  • You *may* be interested in this question; http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe (search Google for "zoom iframe" for many other variations). – Matt Feb 20 '12 at 16:47
  • I plan to set up fancy tooltips using [this](http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/), but wanted a separate help and/or intro page in addition. – adamdport Feb 20 '12 at 17:19

3 Answers3

2

We're doing a thing like that in our Help section, but I think that dynamically loading live screenshots is a waiste of resources.

Actually, we're doing this in our build process, just after our tests. A headless browser (selenium under xvfb) is used to take a full screen screenshot of our different pages, on our pre-deployed application.

Then, we a modification occured, the build process take care of including the modifications...

Grooveek
  • 10,046
  • 1
  • 27
  • 37
  • I was hoping it'd be more dynamic than that--if they need help with their profile page, they could see THEIR content (pictures, colors, etc) in the help page. – adamdport Feb 20 '12 at 17:06
  • I understand better your needs, that was not in your first description. My solution is indeed not suited ;-) – Grooveek Feb 20 '12 at 17:31
0

It is also very helpful to make a GIF of the screen to show the user how to do something fast, instead of written explanations, so if there are cosmetics changes, the user can continue seeing how to do something, you can create the Screen recording GIFs with http://www.getcloudapp.com

oswazteca
  • 47
  • 3
0

Load the Page you want the "screenshot" of into an <iframe> with the desired size and use an anchor or http://api.jquery.com/scroll/ to move the contents to the position, you want to show.

if you don't want the user to scroll away or interact with the iframe, just put a transparent layer over it.

Basti
  • 3,998
  • 1
  • 18
  • 21
  • For some reason I thought iframes were deprecated. Can anchors or JQuery scroll horizontally? – adamdport Feb 20 '12 at 17:16
  • jquery scroll: yes. anchors: i want to say yes, but i don't know if all browsers can do this. visit http://www.salonkberlin.com/ for an example of excessive scroll/anchor usage. – Basti Feb 20 '12 at 17:18
  • what a horribly useless UI on that site haha, thanks for your help. – adamdport Feb 20 '12 at 17:22