I would like to create a client-side screen capture of the actual webpage without a browser extension. Some bug reporting sites solved this problem so it seems to be possible. Browser compatibility is not an issue. It is ok if it works only on modern browsers.
I have tried html2canvas, but want a more accurate representation. So try to use WebRTC getDisplayMedia. I have tried the WebRTC example.
It works, but the screen selector dialog has too much information. Screens, apps, tabs. Besides this, it doesn't reflect the actual site design.
In my case, I want always the actual browser screen where the user clicked the capture button.
Is there a way to preselect the current tab and eliminate the screen selector dialog?
Or maybe some other solution/technology?
Related
Making a document for the designers that displays the desktop and mobile examples of each visual component in a style library. Client wants to see the examples of each on the page at the same time.
Currently doing this by putting it in an iframe, similar to here. Unfortunately the iframe solution is causing odd complications and side-effects.
I was wondering if theres a better/simpler way I can tell the container of the mobile example to use the mobile breakpoint media queries?
I use the last firefox release (45.02) on windows 7.
I want to prevent user to resize manually the windows. I have a non responsive GUI, and I want to fix the browser interface.
I can't use the javascript resizeTo(...) function because of MDN docs
You can't reasonably do this. Which is a Good Thing. The user is in control of their browser, not you.
You can control the size of a popup (including whether it can be resized), within reason, so temporarily while you sort out the responsive thing, you could provide users a link to open a window in the size you want:
Open window in XxY for best experience of this site.
then
document.getElementById("open-window").addEventListener("click", function() {
window.open("http://example.com", "", "width=640,height=480,resizable=no");
}, false);
Note that some browsers may still allow resizing, either in the normal way or via a small "grippy" (as the Firefox folks call it).
I am developing a web-based database that needs to be opened through firefox web browser(because of some css3 elements). I want the page to open automatically in full screen mode. I dont want the user of the database to have access to the firefox menu items
Can't be done if you just have control of the webpage. Controls in the webpage cannot cause changes in the browser instance itself.
It would be a security issue if that were allowed. You could look into writing a Firefox extension to do that, as they have more access to the browser instance itself.
You shouldn't look at trying to hide the firefox menu controls. That seems like a flaw in your problem-solving approach.
You will want to look at Fullscreen APIs of the browser. If you accept a small request/info to the user in the application it can be done quite easily. You just can't force the user into Fullscreen mode against his will. This is good (for security reasons).
http://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/
I'm the processing of redesigning a website that uses hover effect on a button (like button images changes when you put your mouse over it and when you click it, it goes to a different page).
Now that works fine if you're on a a desktop/laptop computer. But on a tablet, the hover/onmouseover effect does not work. On a tablet, when clicking the button image, it changes briefly and then immediately goes to a new page.
What are methods and techniques where a website can detect if a visitor comes from a tablet or not? Then would it be possible to switch to a tablet CSS version? Or, are there tablet framework (i.e. Modernizer?) that can help with this process?
Touch devices don't have a hover event and there is no way to emulate the user interaction that might initiate it. Make sure that there is no critical functionality assocaited with hover events (most just do highlighting) so there is no loss of functionality if the device doesn't have it. Browser sniffing by UA string is a flawed strategy - you must update it every time a new device comes along or the string changes for an existing device. Great if you're into high prices for maintenance, but not if you're the one paying for it.
You could identify the iPad (or mobile device) simply by checking the User-Agent parameter of the browser.
In PHP for example you could do something like:
if( strstr($_SERVER['HTTP_USER_AGENT'],'iPad') ) { // Add custom iPad CSS }
If you want to get it further you could use WURFL (http://wurfl.sourceforge.net/)
I am working on a Flash app that is 900x700 pixels. When viewed in misc. browsers at 1024x768, the browser chrome causes robs too much of the vertical space and the app appears in a window with a vertical scrollbar. Unacceptable.
The flash app will be launched via a link emailed to the viewers.
I'd like to avoid resizing the flash app and am wondering if there's a way to do the following via javascript, with no clicks involved:
maximize the current browser window
remove current window address bar and tabs / switch browser to full screen view (equivalent to pressing F11).
An alternative would be to resize the flash app vertically to match the browser canvas height to avoid scrolling. This may cause the app to become unreadable, so not the best approach in my case.
Thank you!
UPDATE: Seems that browser resizing and autoswitch to full screen won't work and neither will the flash app auto resize. What is the best approach then? And, some users may have browsers with toolbars or open a small browser window.
The only idea I have is to use javascript and display a message to users with small browser windows to pres F11 manually. The audience is executes and some may not even know what an F11 means...
There is no way to maximize the browser window to full screen with JavaScript. While this is unfortunate for your genuine requirement, it is considered a security restriction.
Sources:
Stack Overflow - To view the silverlight app in fullscreen mode(F11)
SitePoint Forums - Trigger F11 using javascript
Webmaster World - F11 Fullscreen using Javascript
The window size can be altered by using:
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
To answer the question in the comment you made to your own post. Yes. You can have a button whose click handler does this
stage.displayState = StageDisplayState.FULL_SCREEN;
You can use JavaScript to open a new window (using window.open) and control the window that is opened (no address bar, etc). You can also control the size of the window (you can't maximize it, but you can get the users screen size, and set the window that same size).
Chrome 15, Firefox 10, and Safari 5.1 now provide APIs to programmatically trigger fullscreen mode. Fullscreen mode triggered this way provide events to detect fullscreen changes and CSS pseudo-classes for styling fullscreen elements. These APIs may present you with a more acceptable solution for those browsers.
See this hacks.mozilla.org blog post for details.