How to take a screenshot that includes a scrolling element within a web page in Firefox?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I need to take a screenshot of an entire webpage. The trick is that I need the screenshot to include the entire contents of a single element that does not fit in the screen.
It is a single column table that has a scrollbar due to its height. It is not an IFRAME (which would be simple to load in its own tab).
The column contains formatted text and a few small images.
For long web pages that scroll, it is trivial to perform this task. But how can it be accomplished when it contains an individual element within the page that scrolls?
To be clear, I need to capture the entire page, not just the element itself.
I would like to accomplish this using Firefox on Windows.
windows firefox scrolling screenshot capture
|
show 2 more comments
I need to take a screenshot of an entire webpage. The trick is that I need the screenshot to include the entire contents of a single element that does not fit in the screen.
It is a single column table that has a scrollbar due to its height. It is not an IFRAME (which would be simple to load in its own tab).
The column contains formatted text and a few small images.
For long web pages that scroll, it is trivial to perform this task. But how can it be accomplished when it contains an individual element within the page that scrolls?
To be clear, I need to capture the entire page, not just the element itself.
I would like to accomplish this using Firefox on Windows.
windows firefox scrolling screenshot capture
2
Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.
– JakeGould
Jun 13 '16 at 6:30
@JakeGould Thanks Jake. Would that work to scroll and element within a page?
– RockPaperLizard
Jun 13 '16 at 7:17
Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.
– JakeGould
Jun 13 '16 at 7:23
Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.
– a CVn
Jun 13 '16 at 10:57
If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.
– tehwalris
Jun 13 '16 at 18:47
|
show 2 more comments
I need to take a screenshot of an entire webpage. The trick is that I need the screenshot to include the entire contents of a single element that does not fit in the screen.
It is a single column table that has a scrollbar due to its height. It is not an IFRAME (which would be simple to load in its own tab).
The column contains formatted text and a few small images.
For long web pages that scroll, it is trivial to perform this task. But how can it be accomplished when it contains an individual element within the page that scrolls?
To be clear, I need to capture the entire page, not just the element itself.
I would like to accomplish this using Firefox on Windows.
windows firefox scrolling screenshot capture
I need to take a screenshot of an entire webpage. The trick is that I need the screenshot to include the entire contents of a single element that does not fit in the screen.
It is a single column table that has a scrollbar due to its height. It is not an IFRAME (which would be simple to load in its own tab).
The column contains formatted text and a few small images.
For long web pages that scroll, it is trivial to perform this task. But how can it be accomplished when it contains an individual element within the page that scrolls?
To be clear, I need to capture the entire page, not just the element itself.
I would like to accomplish this using Firefox on Windows.
windows firefox scrolling screenshot capture
windows firefox scrolling screenshot capture
edited Jun 14 '16 at 6:47
JDługosz
582312
582312
asked Jun 13 '16 at 6:28
RockPaperLizardRockPaperLizard
3,241133672
3,241133672
2
Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.
– JakeGould
Jun 13 '16 at 6:30
@JakeGould Thanks Jake. Would that work to scroll and element within a page?
– RockPaperLizard
Jun 13 '16 at 7:17
Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.
– JakeGould
Jun 13 '16 at 7:23
Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.
– a CVn
Jun 13 '16 at 10:57
If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.
– tehwalris
Jun 13 '16 at 18:47
|
show 2 more comments
2
Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.
– JakeGould
Jun 13 '16 at 6:30
@JakeGould Thanks Jake. Would that work to scroll and element within a page?
– RockPaperLizard
Jun 13 '16 at 7:17
Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.
– JakeGould
Jun 13 '16 at 7:23
Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.
– a CVn
Jun 13 '16 at 10:57
If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.
– tehwalris
Jun 13 '16 at 18:47
2
2
Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.
– JakeGould
Jun 13 '16 at 6:30
Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.
– JakeGould
Jun 13 '16 at 6:30
@JakeGould Thanks Jake. Would that work to scroll and element within a page?
– RockPaperLizard
Jun 13 '16 at 7:17
@JakeGould Thanks Jake. Would that work to scroll and element within a page?
– RockPaperLizard
Jun 13 '16 at 7:17
Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.
– JakeGould
Jun 13 '16 at 7:23
Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.
– JakeGould
Jun 13 '16 at 7:23
Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.
– a CVn
Jun 13 '16 at 10:57
Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.
– a CVn
Jun 13 '16 at 10:57
If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.
– tehwalris
Jun 13 '16 at 18:47
If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.
– tehwalris
Jun 13 '16 at 18:47
|
show 2 more comments
9 Answers
9
active
oldest
votes
My suggestion is to use the Firefox's built in feature that allows you to take screenshots of single DOM element.
Just pop open the developer tools → Find the element → Right Click and take screenshot
It didn't work on one of my internal site so cannot say it will work for all.
Update after OP's Edit:
If you intend to record full page along with whole of DOM element content as shown below, you should live edit the height of DOM element but...
It is going to push a lot of DOM elements out of viewport and screenshot or AFAIK any other tool will not capture it, which beats your purpose I think.
Read below from https://en.wikipedia.org/wiki/Screenshot
A screenshot, screen capture, screen cap, cap, screen dump, or
screengrab is an image taken by a person to record the visible
items displayed on the monitor, television, or other visual output
device in use.
If I really had to do it your way, I would either create a GIF or take two screenshots one full page and other only of the DOM element to merge into one.
Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.
– RockPaperLizard
Jun 13 '16 at 19:14
5
@RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the<body>
element and it will give you the desired screenshot.
– Digital Chris
Jun 13 '16 at 19:34
2
If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.
– user76225
Jun 14 '16 at 17:52
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.
– MrFox
Dec 22 '17 at 14:16
add a comment |
You can use the screenshot command from the Developer Toolbar:
Press Shift + F2 to open the toolbar or select it from the Web Developer Tools menu.
In the toolbar, type the command
screenshot --fullpage fullpage.png
.
To capture a single element you can use its css selector with the --selector flag e.g.
screenshot --selector #hot-network-questions
will get you the image below
4
@RockPaperLizard I found another post with the same answer and OP was edited by you.
– pun
Jun 13 '16 at 8:55
@pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.
– RockPaperLizard
Jun 13 '16 at 19:13
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.
– MrFox
Dec 22 '17 at 14:13
add a comment |
Use Firefox's Responsive Design Mode, set the width to something normal and the height such that it's enough to encompass the entire page, click the screenshot button (the camera icon).
add a comment |
There is Software called Snagit that may solve your issue. This software can take the screen shot in different types, like a scrolling window and also can record video.
It is a paid application, but does have a trial available as well.
if you find this as an answer mark it and post it in comment What does that mean?
– A.L
Jun 13 '16 at 15:14
3
@A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.
– MonkeyZeus
Jun 13 '16 at 18:43
I've used SnagIt for years. It's a very useful piece of software.
– Roy Tinker
Jun 14 '16 at 17:08
add a comment |
There is an extension called Nimbus Screen Capture which is perfectly suited to this task.
You have the option to capture:
- the visible part of the page (useful to not include the browser elements as opposed to alt+Print Scrn)
- a fragment of the page (whereby you can hover over regions on the screen in order to find the fragment you want - these regions correspond to their underlying HTML elements)
- selected area (you manually click and drag where you want the screenshot, supports scrolling while dragging)
- the entire page
Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?
– RockPaperLizard
Jun 14 '16 at 16:22
@RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.
– Keith Hall
Jun 15 '16 at 8:46
Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.
– RockPaperLizard
Jun 15 '16 at 9:33
add a comment |
I use Screenpresso. It allows you to take a scrolling screenshot. Basically you take a screenshot, scroll down and take another and so on, then Screenpresso stitches them together. Screenpresso is also free.
FYI, the shortcut keys for scrolling screenshot is WindowsKey+Shift+PrintScreen. You then need to click the window you would like to scroll. When you get to the next part to screenshot, right click, scroll down, right click and so on. Whe you are finished, left click and they will get stitched together. Make sure to get some overlap on each screenshot so the stitching process works better.
add a comment |
Options to fit everything on one page:
- Use
<Ctrl>-
to fit everything on one page - Rotate your screen to portrait mode
- Use a second screen in portrait mode and locate it below the first one
- Combine all of the above
Another option is to take a screen shot of the upper part of what you want to capture. Scroll down, take the next screen shoot. Repeat this until you've captured everything.
Optionally: combine the screen shots into one big image using an image editor (e.g. gimp).
Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.
– RockPaperLizard
Jun 13 '16 at 7:20
But if you zoom out the page, there is no way to scale it back out without distortion.
– NiCk Newman
Jun 14 '16 at 13:17
add a comment |
To take screenshots you can add an Extension like easy screenshot.
Then It will be much easier for you to take screen shots.
add a comment |
For DESKTOP programs, with scrolling window ApowerSoft capture did the job for me.
add a comment |
protected by Community♦ Jun 23 '18 at 11:12
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
9 Answers
9
active
oldest
votes
9 Answers
9
active
oldest
votes
active
oldest
votes
active
oldest
votes
My suggestion is to use the Firefox's built in feature that allows you to take screenshots of single DOM element.
Just pop open the developer tools → Find the element → Right Click and take screenshot
It didn't work on one of my internal site so cannot say it will work for all.
Update after OP's Edit:
If you intend to record full page along with whole of DOM element content as shown below, you should live edit the height of DOM element but...
It is going to push a lot of DOM elements out of viewport and screenshot or AFAIK any other tool will not capture it, which beats your purpose I think.
Read below from https://en.wikipedia.org/wiki/Screenshot
A screenshot, screen capture, screen cap, cap, screen dump, or
screengrab is an image taken by a person to record the visible
items displayed on the monitor, television, or other visual output
device in use.
If I really had to do it your way, I would either create a GIF or take two screenshots one full page and other only of the DOM element to merge into one.
Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.
– RockPaperLizard
Jun 13 '16 at 19:14
5
@RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the<body>
element and it will give you the desired screenshot.
– Digital Chris
Jun 13 '16 at 19:34
2
If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.
– user76225
Jun 14 '16 at 17:52
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.
– MrFox
Dec 22 '17 at 14:16
add a comment |
My suggestion is to use the Firefox's built in feature that allows you to take screenshots of single DOM element.
Just pop open the developer tools → Find the element → Right Click and take screenshot
It didn't work on one of my internal site so cannot say it will work for all.
Update after OP's Edit:
If you intend to record full page along with whole of DOM element content as shown below, you should live edit the height of DOM element but...
It is going to push a lot of DOM elements out of viewport and screenshot or AFAIK any other tool will not capture it, which beats your purpose I think.
Read below from https://en.wikipedia.org/wiki/Screenshot
A screenshot, screen capture, screen cap, cap, screen dump, or
screengrab is an image taken by a person to record the visible
items displayed on the monitor, television, or other visual output
device in use.
If I really had to do it your way, I would either create a GIF or take two screenshots one full page and other only of the DOM element to merge into one.
Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.
– RockPaperLizard
Jun 13 '16 at 19:14
5
@RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the<body>
element and it will give you the desired screenshot.
– Digital Chris
Jun 13 '16 at 19:34
2
If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.
– user76225
Jun 14 '16 at 17:52
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.
– MrFox
Dec 22 '17 at 14:16
add a comment |
My suggestion is to use the Firefox's built in feature that allows you to take screenshots of single DOM element.
Just pop open the developer tools → Find the element → Right Click and take screenshot
It didn't work on one of my internal site so cannot say it will work for all.
Update after OP's Edit:
If you intend to record full page along with whole of DOM element content as shown below, you should live edit the height of DOM element but...
It is going to push a lot of DOM elements out of viewport and screenshot or AFAIK any other tool will not capture it, which beats your purpose I think.
Read below from https://en.wikipedia.org/wiki/Screenshot
A screenshot, screen capture, screen cap, cap, screen dump, or
screengrab is an image taken by a person to record the visible
items displayed on the monitor, television, or other visual output
device in use.
If I really had to do it your way, I would either create a GIF or take two screenshots one full page and other only of the DOM element to merge into one.
My suggestion is to use the Firefox's built in feature that allows you to take screenshots of single DOM element.
Just pop open the developer tools → Find the element → Right Click and take screenshot
It didn't work on one of my internal site so cannot say it will work for all.
Update after OP's Edit:
If you intend to record full page along with whole of DOM element content as shown below, you should live edit the height of DOM element but...
It is going to push a lot of DOM elements out of viewport and screenshot or AFAIK any other tool will not capture it, which beats your purpose I think.
Read below from https://en.wikipedia.org/wiki/Screenshot
A screenshot, screen capture, screen cap, cap, screen dump, or
screengrab is an image taken by a person to record the visible
items displayed on the monitor, television, or other visual output
device in use.
If I really had to do it your way, I would either create a GIF or take two screenshots one full page and other only of the DOM element to merge into one.
edited Jun 14 '16 at 5:01
answered Jun 13 '16 at 7:18
punpun
4,88381853
4,88381853
Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.
– RockPaperLizard
Jun 13 '16 at 19:14
5
@RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the<body>
element and it will give you the desired screenshot.
– Digital Chris
Jun 13 '16 at 19:34
2
If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.
– user76225
Jun 14 '16 at 17:52
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.
– MrFox
Dec 22 '17 at 14:16
add a comment |
Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.
– RockPaperLizard
Jun 13 '16 at 19:14
5
@RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the<body>
element and it will give you the desired screenshot.
– Digital Chris
Jun 13 '16 at 19:34
2
If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.
– user76225
Jun 14 '16 at 17:52
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.
– MrFox
Dec 22 '17 at 14:16
Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.
– RockPaperLizard
Jun 13 '16 at 19:14
Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.
– RockPaperLizard
Jun 13 '16 at 19:14
5
5
@RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the
<body>
element and it will give you the desired screenshot.– Digital Chris
Jun 13 '16 at 19:34
@RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the
<body>
element and it will give you the desired screenshot.– Digital Chris
Jun 13 '16 at 19:34
2
2
If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.
– user76225
Jun 14 '16 at 17:52
If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.
– user76225
Jun 14 '16 at 17:52
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.
– MrFox
Dec 22 '17 at 14:16
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.
– MrFox
Dec 22 '17 at 14:16
add a comment |
You can use the screenshot command from the Developer Toolbar:
Press Shift + F2 to open the toolbar or select it from the Web Developer Tools menu.
In the toolbar, type the command
screenshot --fullpage fullpage.png
.
To capture a single element you can use its css selector with the --selector flag e.g.
screenshot --selector #hot-network-questions
will get you the image below
4
@RockPaperLizard I found another post with the same answer and OP was edited by you.
– pun
Jun 13 '16 at 8:55
@pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.
– RockPaperLizard
Jun 13 '16 at 19:13
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.
– MrFox
Dec 22 '17 at 14:13
add a comment |
You can use the screenshot command from the Developer Toolbar:
Press Shift + F2 to open the toolbar or select it from the Web Developer Tools menu.
In the toolbar, type the command
screenshot --fullpage fullpage.png
.
To capture a single element you can use its css selector with the --selector flag e.g.
screenshot --selector #hot-network-questions
will get you the image below
4
@RockPaperLizard I found another post with the same answer and OP was edited by you.
– pun
Jun 13 '16 at 8:55
@pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.
– RockPaperLizard
Jun 13 '16 at 19:13
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.
– MrFox
Dec 22 '17 at 14:13
add a comment |
You can use the screenshot command from the Developer Toolbar:
Press Shift + F2 to open the toolbar or select it from the Web Developer Tools menu.
In the toolbar, type the command
screenshot --fullpage fullpage.png
.
To capture a single element you can use its css selector with the --selector flag e.g.
screenshot --selector #hot-network-questions
will get you the image below
You can use the screenshot command from the Developer Toolbar:
Press Shift + F2 to open the toolbar or select it from the Web Developer Tools menu.
In the toolbar, type the command
screenshot --fullpage fullpage.png
.
To capture a single element you can use its css selector with the --selector flag e.g.
screenshot --selector #hot-network-questions
will get you the image below
edited Jun 13 '16 at 10:45
Tymric
2622515
2622515
answered Jun 13 '16 at 7:54
tophertopher
35119
35119
4
@RockPaperLizard I found another post with the same answer and OP was edited by you.
– pun
Jun 13 '16 at 8:55
@pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.
– RockPaperLizard
Jun 13 '16 at 19:13
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.
– MrFox
Dec 22 '17 at 14:13
add a comment |
4
@RockPaperLizard I found another post with the same answer and OP was edited by you.
– pun
Jun 13 '16 at 8:55
@pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.
– RockPaperLizard
Jun 13 '16 at 19:13
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.
– MrFox
Dec 22 '17 at 14:13
4
4
@RockPaperLizard I found another post with the same answer and OP was edited by you.
– pun
Jun 13 '16 at 8:55
@RockPaperLizard I found another post with the same answer and OP was edited by you.
– pun
Jun 13 '16 at 8:55
@pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.
– RockPaperLizard
Jun 13 '16 at 19:13
@pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.
– RockPaperLizard
Jun 13 '16 at 19:13
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.
– MrFox
Dec 22 '17 at 14:13
I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.
– MrFox
Dec 22 '17 at 14:13
add a comment |
Use Firefox's Responsive Design Mode, set the width to something normal and the height such that it's enough to encompass the entire page, click the screenshot button (the camera icon).
add a comment |
Use Firefox's Responsive Design Mode, set the width to something normal and the height such that it's enough to encompass the entire page, click the screenshot button (the camera icon).
add a comment |
Use Firefox's Responsive Design Mode, set the width to something normal and the height such that it's enough to encompass the entire page, click the screenshot button (the camera icon).
Use Firefox's Responsive Design Mode, set the width to something normal and the height such that it's enough to encompass the entire page, click the screenshot button (the camera icon).
answered Jun 13 '16 at 6:51
OuroborusOuroborus
2,47221024
2,47221024
add a comment |
add a comment |
There is Software called Snagit that may solve your issue. This software can take the screen shot in different types, like a scrolling window and also can record video.
It is a paid application, but does have a trial available as well.
if you find this as an answer mark it and post it in comment What does that mean?
– A.L
Jun 13 '16 at 15:14
3
@A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.
– MonkeyZeus
Jun 13 '16 at 18:43
I've used SnagIt for years. It's a very useful piece of software.
– Roy Tinker
Jun 14 '16 at 17:08
add a comment |
There is Software called Snagit that may solve your issue. This software can take the screen shot in different types, like a scrolling window and also can record video.
It is a paid application, but does have a trial available as well.
if you find this as an answer mark it and post it in comment What does that mean?
– A.L
Jun 13 '16 at 15:14
3
@A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.
– MonkeyZeus
Jun 13 '16 at 18:43
I've used SnagIt for years. It's a very useful piece of software.
– Roy Tinker
Jun 14 '16 at 17:08
add a comment |
There is Software called Snagit that may solve your issue. This software can take the screen shot in different types, like a scrolling window and also can record video.
It is a paid application, but does have a trial available as well.
There is Software called Snagit that may solve your issue. This software can take the screen shot in different types, like a scrolling window and also can record video.
It is a paid application, but does have a trial available as well.
edited Jun 13 '16 at 18:54
Simon Sheehan
7,745124269
7,745124269
answered Jun 13 '16 at 7:26
Gurumurthy.GGurumurthy.G
391213
391213
if you find this as an answer mark it and post it in comment What does that mean?
– A.L
Jun 13 '16 at 15:14
3
@A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.
– MonkeyZeus
Jun 13 '16 at 18:43
I've used SnagIt for years. It's a very useful piece of software.
– Roy Tinker
Jun 14 '16 at 17:08
add a comment |
if you find this as an answer mark it and post it in comment What does that mean?
– A.L
Jun 13 '16 at 15:14
3
@A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.
– MonkeyZeus
Jun 13 '16 at 18:43
I've used SnagIt for years. It's a very useful piece of software.
– Roy Tinker
Jun 14 '16 at 17:08
if you find this as an answer mark it and post it in comment What does that mean?
– A.L
Jun 13 '16 at 15:14
if you find this as an answer mark it and post it in comment What does that mean?
– A.L
Jun 13 '16 at 15:14
3
3
@A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.
– MonkeyZeus
Jun 13 '16 at 18:43
@A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.
– MonkeyZeus
Jun 13 '16 at 18:43
I've used SnagIt for years. It's a very useful piece of software.
– Roy Tinker
Jun 14 '16 at 17:08
I've used SnagIt for years. It's a very useful piece of software.
– Roy Tinker
Jun 14 '16 at 17:08
add a comment |
There is an extension called Nimbus Screen Capture which is perfectly suited to this task.
You have the option to capture:
- the visible part of the page (useful to not include the browser elements as opposed to alt+Print Scrn)
- a fragment of the page (whereby you can hover over regions on the screen in order to find the fragment you want - these regions correspond to their underlying HTML elements)
- selected area (you manually click and drag where you want the screenshot, supports scrolling while dragging)
- the entire page
Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?
– RockPaperLizard
Jun 14 '16 at 16:22
@RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.
– Keith Hall
Jun 15 '16 at 8:46
Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.
– RockPaperLizard
Jun 15 '16 at 9:33
add a comment |
There is an extension called Nimbus Screen Capture which is perfectly suited to this task.
You have the option to capture:
- the visible part of the page (useful to not include the browser elements as opposed to alt+Print Scrn)
- a fragment of the page (whereby you can hover over regions on the screen in order to find the fragment you want - these regions correspond to their underlying HTML elements)
- selected area (you manually click and drag where you want the screenshot, supports scrolling while dragging)
- the entire page
Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?
– RockPaperLizard
Jun 14 '16 at 16:22
@RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.
– Keith Hall
Jun 15 '16 at 8:46
Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.
– RockPaperLizard
Jun 15 '16 at 9:33
add a comment |
There is an extension called Nimbus Screen Capture which is perfectly suited to this task.
You have the option to capture:
- the visible part of the page (useful to not include the browser elements as opposed to alt+Print Scrn)
- a fragment of the page (whereby you can hover over regions on the screen in order to find the fragment you want - these regions correspond to their underlying HTML elements)
- selected area (you manually click and drag where you want the screenshot, supports scrolling while dragging)
- the entire page
There is an extension called Nimbus Screen Capture which is perfectly suited to this task.
You have the option to capture:
- the visible part of the page (useful to not include the browser elements as opposed to alt+Print Scrn)
- a fragment of the page (whereby you can hover over regions on the screen in order to find the fragment you want - these regions correspond to their underlying HTML elements)
- selected area (you manually click and drag where you want the screenshot, supports scrolling while dragging)
- the entire page
answered Jun 14 '16 at 12:05
Keith HallKeith Hall
301110
301110
Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?
– RockPaperLizard
Jun 14 '16 at 16:22
@RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.
– Keith Hall
Jun 15 '16 at 8:46
Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.
– RockPaperLizard
Jun 15 '16 at 9:33
add a comment |
Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?
– RockPaperLizard
Jun 14 '16 at 16:22
@RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.
– Keith Hall
Jun 15 '16 at 8:46
Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.
– RockPaperLizard
Jun 15 '16 at 9:33
Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?
– RockPaperLizard
Jun 14 '16 at 16:22
Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?
– RockPaperLizard
Jun 14 '16 at 16:22
@RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.
– Keith Hall
Jun 15 '16 at 8:46
@RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.
– Keith Hall
Jun 15 '16 at 8:46
Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.
– RockPaperLizard
Jun 15 '16 at 9:33
Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.
– RockPaperLizard
Jun 15 '16 at 9:33
add a comment |
I use Screenpresso. It allows you to take a scrolling screenshot. Basically you take a screenshot, scroll down and take another and so on, then Screenpresso stitches them together. Screenpresso is also free.
FYI, the shortcut keys for scrolling screenshot is WindowsKey+Shift+PrintScreen. You then need to click the window you would like to scroll. When you get to the next part to screenshot, right click, scroll down, right click and so on. Whe you are finished, left click and they will get stitched together. Make sure to get some overlap on each screenshot so the stitching process works better.
add a comment |
I use Screenpresso. It allows you to take a scrolling screenshot. Basically you take a screenshot, scroll down and take another and so on, then Screenpresso stitches them together. Screenpresso is also free.
FYI, the shortcut keys for scrolling screenshot is WindowsKey+Shift+PrintScreen. You then need to click the window you would like to scroll. When you get to the next part to screenshot, right click, scroll down, right click and so on. Whe you are finished, left click and they will get stitched together. Make sure to get some overlap on each screenshot so the stitching process works better.
add a comment |
I use Screenpresso. It allows you to take a scrolling screenshot. Basically you take a screenshot, scroll down and take another and so on, then Screenpresso stitches them together. Screenpresso is also free.
FYI, the shortcut keys for scrolling screenshot is WindowsKey+Shift+PrintScreen. You then need to click the window you would like to scroll. When you get to the next part to screenshot, right click, scroll down, right click and so on. Whe you are finished, left click and they will get stitched together. Make sure to get some overlap on each screenshot so the stitching process works better.
I use Screenpresso. It allows you to take a scrolling screenshot. Basically you take a screenshot, scroll down and take another and so on, then Screenpresso stitches them together. Screenpresso is also free.
FYI, the shortcut keys for scrolling screenshot is WindowsKey+Shift+PrintScreen. You then need to click the window you would like to scroll. When you get to the next part to screenshot, right click, scroll down, right click and so on. Whe you are finished, left click and they will get stitched together. Make sure to get some overlap on each screenshot so the stitching process works better.
edited Feb 15 '17 at 3:16
user26398
17117
17117
answered Jun 14 '16 at 0:10
garethbgarethb
1212
1212
add a comment |
add a comment |
Options to fit everything on one page:
- Use
<Ctrl>-
to fit everything on one page - Rotate your screen to portrait mode
- Use a second screen in portrait mode and locate it below the first one
- Combine all of the above
Another option is to take a screen shot of the upper part of what you want to capture. Scroll down, take the next screen shoot. Repeat this until you've captured everything.
Optionally: combine the screen shots into one big image using an image editor (e.g. gimp).
Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.
– RockPaperLizard
Jun 13 '16 at 7:20
But if you zoom out the page, there is no way to scale it back out without distortion.
– NiCk Newman
Jun 14 '16 at 13:17
add a comment |
Options to fit everything on one page:
- Use
<Ctrl>-
to fit everything on one page - Rotate your screen to portrait mode
- Use a second screen in portrait mode and locate it below the first one
- Combine all of the above
Another option is to take a screen shot of the upper part of what you want to capture. Scroll down, take the next screen shoot. Repeat this until you've captured everything.
Optionally: combine the screen shots into one big image using an image editor (e.g. gimp).
Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.
– RockPaperLizard
Jun 13 '16 at 7:20
But if you zoom out the page, there is no way to scale it back out without distortion.
– NiCk Newman
Jun 14 '16 at 13:17
add a comment |
Options to fit everything on one page:
- Use
<Ctrl>-
to fit everything on one page - Rotate your screen to portrait mode
- Use a second screen in portrait mode and locate it below the first one
- Combine all of the above
Another option is to take a screen shot of the upper part of what you want to capture. Scroll down, take the next screen shoot. Repeat this until you've captured everything.
Optionally: combine the screen shots into one big image using an image editor (e.g. gimp).
Options to fit everything on one page:
- Use
<Ctrl>-
to fit everything on one page - Rotate your screen to portrait mode
- Use a second screen in portrait mode and locate it below the first one
- Combine all of the above
Another option is to take a screen shot of the upper part of what you want to capture. Scroll down, take the next screen shoot. Repeat this until you've captured everything.
Optionally: combine the screen shots into one big image using an image editor (e.g. gimp).
answered Jun 13 '16 at 6:42
NZDNZD
2,007916
2,007916
Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.
– RockPaperLizard
Jun 13 '16 at 7:20
But if you zoom out the page, there is no way to scale it back out without distortion.
– NiCk Newman
Jun 14 '16 at 13:17
add a comment |
Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.
– RockPaperLizard
Jun 13 '16 at 7:20
But if you zoom out the page, there is no way to scale it back out without distortion.
– NiCk Newman
Jun 14 '16 at 13:17
Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.
– RockPaperLizard
Jun 13 '16 at 7:20
Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.
– RockPaperLizard
Jun 13 '16 at 7:20
But if you zoom out the page, there is no way to scale it back out without distortion.
– NiCk Newman
Jun 14 '16 at 13:17
But if you zoom out the page, there is no way to scale it back out without distortion.
– NiCk Newman
Jun 14 '16 at 13:17
add a comment |
To take screenshots you can add an Extension like easy screenshot.
Then It will be much easier for you to take screen shots.
add a comment |
To take screenshots you can add an Extension like easy screenshot.
Then It will be much easier for you to take screen shots.
add a comment |
To take screenshots you can add an Extension like easy screenshot.
Then It will be much easier for you to take screen shots.
To take screenshots you can add an Extension like easy screenshot.
Then It will be much easier for you to take screen shots.
answered Jun 15 '16 at 5:53
user606374user606374
1
1
add a comment |
add a comment |
For DESKTOP programs, with scrolling window ApowerSoft capture did the job for me.
add a comment |
For DESKTOP programs, with scrolling window ApowerSoft capture did the job for me.
add a comment |
For DESKTOP programs, with scrolling window ApowerSoft capture did the job for me.
For DESKTOP programs, with scrolling window ApowerSoft capture did the job for me.
answered Jan 31 at 13:15
T.ToduaT.Todua
1,50131828
1,50131828
add a comment |
add a comment |
protected by Community♦ Jun 23 '18 at 11:12
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
2
Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.
– JakeGould
Jun 13 '16 at 6:30
@JakeGould Thanks Jake. Would that work to scroll and element within a page?
– RockPaperLizard
Jun 13 '16 at 7:17
Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.
– JakeGould
Jun 13 '16 at 7:23
Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.
– a CVn
Jun 13 '16 at 10:57
If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.
– tehwalris
Jun 13 '16 at 18:47