Is it possible to take a screenshot/PDF of part of the page? for ex. a particular div? - google-chrome-headless

I tried to use Phantomjs for taking screenshots of my SPA. As per my requirement, i should be able to take screenshot of part of the page rather than whole page. The png/image works fine with phantom but the PDF is not working. I'm trying to see if it's possible to do a part of the page(not the whole page) as PDF export with Puppeteer. I checked their documentation but nowhere it was mentioned.
Has anybody tried to achieve the same with puppeteer?
Thanks

As far as I am aware, you can take screenshots of specific parts of the screen using the clip options for the screenshot method. You can read about it in the docs here.
It's not possible to do the same with the pdf method. The relevant docs are here.

Related

Modify url in Firefox

I want to intercept and modify a url in firefox so that part of it turns into a "better" version of the website.
More specificity I want to turn this:
https://www.youtube.com/shorts/(video-id)
into this:
https://www.youtube.com/watch?v=(video-id)
I want a general solution so I can do this to more sites than just youtube.
I found my answer, not completely what I wanted but good enough:
https://git.bradleylaboon.com/lb.laboon/youtube-shorts-disabler
also as:
https://addons.mozilla.org/sv-SE/firefox/addon/youtube-shorts-disabler/
It is so simple I can do a new addon for every site if need be.
The only problem I have is that it does not work if I follow a link/left klick on a YouTube short within YouTube, apparently Firefox does not report that the URL has changed to the plugin. A simple page refresh (F5 in my case) fixes that.

Automatically fetch preview image from given URL in Rails

I need help again from the community.
I'm interested to know how to extract a preview image from a given URL in rails.
Basically, it would be a functionality like you have on reddit. When user submits a link (fills in the link field in the _form), a preview image/thumbnail is automatically pulled from a given url. (I would like to save the link of the image as a field in the model, I don't want to save the image itself).
Is there a gem for that or? What's the best way to do it?
Thanks for the help.
There is a gem
github.com/gottfrois/link_thumbnailer
that does exactly what I wanted.
I tested it, and it works as described, so I can recommend it.
You can use some wrappers around PhantomJS:
PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
It's also known for its ability to make web page screenshots.
I found a couple of gems for you: screencap and webshot.
Example with screencap:
require 'screencap'
f = Screencap::Fetcher.new('http://google.com')
screenshot = f.fetch
You're also encouraged to check the documentation, it's pretty straightforward.

I can't get the first modal, in the series of modals, to open

Greeting and thanks for your generosity in providing this wonderful forum,
I'm using jQuery Orbit Slider and Reveal Modal. I setup the slider to include content and within the content are hotlinks to a series of modals.
I can't get the first modal, in the series of modals, to open. It appears the plugin is programmatically generating inline CSS that is overriding my CSS stylesheet. Mainly z-index selector is keeping the first modal hidden (or invisible). The subsequent modals in that series work as intended.
When viewed using Chrome Inspect Console shows the inconsistency please note at "featuredContent10" which is where the slide4 resides (it's actually a background image). The data-reveal-id="slide4-1" is the first one in the series of modals. I did not add the inline styles it's in the reveal.js file.
Unfortunately, I don't know enough about reveal and can't find any information regarding a solution. The information I came away with is to ask for assistance on stackoverflow.com. 99.9% of the time I find solution on my own, however, I'm at a lost and my client likes the features of both plugins. Any help you can give me would be very much appreciated.
If it helps here’s a link to the beta site: http://www.partnershipwithearth.com/thecooperationway-1/
Go to Slide 11 lower left link is the culprit. You'll notice the dialog box and close button do appear without the image (slide4-1).
Your expertise is greatly appreciated

what function is being called?

i am not sure that this is the right place to ask this question, but i will anyway. i have only been working with html / javascript & jquery for about 2 months, but i have learned a little.
this is what i am trying to do. i have a free image gallery that i managed to included in a website i am trying to make. the gallery works fine, and i have set it up so that on top of each image is a button that fires a short .mp4.
it works fine, but when i click the gallery button to show the next page of pictures (about 15 per page), there are my old buttons. i think, just maybe if i could figure out what js or jq function id being called i may be able to swap in new buttons.
but i cannot understand what is happening. i looked for an onclick, but what they use is a bunch of "this" statements. i am pretty sure they are using an anchor tag to flip the page, but i can't figure out what is being called.
so i came across this site, and after about 10 attempts, finally got the thing to let me join.
i'm hoping i can post the code and maybe somebody could tell me what is happening.
i guess this wasn't much of a question, just an appeal for assistance.
Are you asking how you can debug your code? If you are using Chrome, you can use its Javascript debugger. Similarly, Firebug is a good developer plugin for Firefox.

Alternative til jQuery Lazyload

I have searched and searched, but didn't find what I was looking for, so sorry if it's already there. I did a photo blog for a friend and used to implement jQuery Jazyload (http://www.appelsiini.net/projects/lazyload) to load all the pictures along the way, however, it doesn't work in all browsers anymore and he stopped developing it. I heard of http://www.sebastianoarmelibattana.com/projects/jail/, but it will need a lot of extra text and code when you have 500-1,000 pictures on one site. Also I want to be able to load the images lets say 1000px, before they appear in the window.
Do anyone have suggestions/solution or else, to get the problem fixed?
You can view his site here: www.theblackguido.com (NSFW)
Thank you in advance.
Kristian
It is the part of automatically removing image src which does not work anymore. Version 1.5 released Dec 23, 2009 provided alternative where you must alter HTML and store image url in original attribute. I renamed it recently to data-originalto be HTML5 friendly. I also updated to documentation which better explains how to use it.
But yes. The way Lazy Load used to work is not possible anymore. Before you could just drop in the JavaScript and it handled everything automagically. Due to changes in new browsers you now must alter the HTML.
PS. Lazy Load is not dead. It was just orphan for a while.

Resources