I've been dealing with taking screenshots for Firefox and Safari browsers but I can't figure out how to do it! With Google Chrome API I can do it this way (it's pretty simple):
chrome.tabs.captureVisibleTab(null, null, function (image)).....etc
BUT I can't find a SIMPLE way to do it on Firefox and Safari!! The only answer I got here was using the 'html2canvas' (http://html2canvas.hertzen.com/examples.html) BUT IT IS NOT a 100% solution in order to take EXACT screenshots of a specific webpage!! It doesn't work for me in this case!!!
Can someone help me with this issue in order to find a simple solution for Firefox and Safari?
I have personally used html2canvas and I found it quite efficient for taking partial or full page screenshots. But it does require you some knowledge of JavaScript and client side scripting.
If you are looking for a more easier approach , there are numerous extensions on Google Chrome webstore.
A popular one is Awesome Screenshot which even allows you to take screenshot of entire webpage (till the scroll bar ends).
You can use Mozilla's chrome tools to draw some or all of the window to an image canvas:
var c2d = myCanvas.getContext('2d');
c2d.drawWindow(window, x, y, w, h, 'rgb(255,255,255)');
See drawWindow(), XUL.
I don't remember exactly, but that's the gist. The magic is the .drawWindow() method, which cannot be executed on the content side, it must be in an area with chrome privileges (like an add-on/extension).
Edit: Here's a good example.
Related
I'm currently doing some work with D3 and one of these things I'm finding slightly frustrating is the ability to debug stuff in the DOM. My typical browser of choice is Chrome (latestet update to date version) yet when I try to select stuff in the DOM chrome seems to get very confused!
The circle I've selected in the DOM, isn't even contained within the SVG as far as chrome thinks.
Having just checked IE11 seems to have similar issues, however Firefox seems to handle it (unfortunately I'm not a big fan of Firefox). It this a common feature that developers using D3 have found workarounds for? Or is everyone using Firefox? Or do I need to go log some bugs against various browsers?
I think this is a new bug. It worked fine on Chrome as well a couple weeks ago.
I have less distance between the displayed and the actual position. Maybe 10 or 20 pixels. So I can live with it. But it was flawless not long ago.
I have this question mainly about youtube video's, but extentable to any flash app that plays in fullscreen. Is there a possibility to make fullscreen not take over the entire screen, but just inside the tab where the video is loaded? Is there any addon or setting I can use to make this happen?
If other browsers (eg Chrome) do support this functionality, please feel free to reply!
Thanks in advance, Tom
Quick and dirty code for scratchpad or bookmarklet to view a youtube video as full page:
if(location.href.match(/^https?:\/\/(?:www\.)?youtube\.com\/watch\?v=(\w+)/)){
location.assign(["http://www.youtube.com/embed/",RegExp.$1].join(""));
}
Note: Snippet omits encodeURIComponent and parsing query parameters, which you probably should implement if you're going to use it in an actual bookmarklet/userscript/addon.
I've just downloaded the latest Nivo slider 3.2 as I need it on a responsive site and out of the box with no modifications the transitions in ie7 and ie8 don't work.
They simply flick between images - no sliceDown or Fade they just rotate.
I've used it in the past with no problems - I've just view 2.6 in ie7 and ie8 and it's fine.
Does anyone know what can be done to fix it?
I've just checked out their demo too http://nivo.dev7studios.com/responsive-demo/ and the same issue is happening there.
Cheers
Just sharing what worked on my site -- I was using the default demo code, pretty much unedited from the download. It was beautiful and responsive (which I wanted) in all of the browsers I tested, except any version of i.e.. If i.e., it was just a rotation, no effects.
However, when I designated a size dimension for the wrapper div and the image divs, the transitions worked in i.e. also. (height: 350px;) You can specify the dimension in your css/stylesheet or inline -- if that's what it takes.
On my site, I only needed to specify a height dimension; for your site, you might need both height and width, or just width. A little experimentation was all it took.
But, with the height dimension specified, this threw off the display in the other browsers, so the dimension needs to be specified in terms of a "hack" for internet explorer: either a separate stylesheet just for internet explorer users or by using whatever your favorite internet explorer hacking method is: underscore, or \9, and so on. Here's a list of useful internet explorer workarounds, just for reference: internet explorer hacks
I know we hate to recommend hacking, but we all do it :). Would love to find out why this one worked for me, maybe there's a better way without the hack.
I'm pulling my hair out over this probably very simple problem..
I just built a website for an iphone repair company:
http://www.cellcity.co.nz/
When viewed on google chrome and safari the website shows up without any problems,
when viewed on internet explorer i just have the mobile optimised version showing while i get around to sorting out its problems.
but on firefox all my elements are pushed up one pixel. I have all the content within a table within divs, have a quick look at my source code or request some code to be shown. I don't understand what could be wrong, I am using the border-collapse css style, maybe that might be a contributing factor?
Thanks in advance,
Matt
Ok I figured out that for every css class and id, you can make a firefox independant one that is only seen by firefox. Just place #-moz-document url-prefix() {.....} around the second version of your css class and firefox will override the old version =D
hopefully this helps someone else!
I am creating an in-house web application that I want to run in a WebKit shell browser on the Mac. I searched and came up empty. Basically, I want the site rendered and shown in a window with no chrome for navigating to other pages, bookmarks, etc. Seems to me that there should be a relatively easy way to get something like that up and running in Xcode, but alas I don't know how. The more barebones the better. Anybody know the answer?
Not sure if this is what you're looking for, but you could use a WebView. The content is rendered by Safari/WebKit.
As for chrome, if you just put the view, that's all you'll have. You can shape the rest of the User Interface however you'd like.
Apple's documentation has a couple of examples using WebView... Should this solve your problem.
Did you take a look at the phonegap mac project.
Its a full screen webkit without any chrome in which you can put your html / css / javascript to run:
https://github.com/callback/callback-mac