Check if website is displayed on TV? - javascript

If I'm watching my website on my PS4 browser on my TV, the text is very small (probably because the tv is 1920x1080) - but I actually want it to format, as if it was on mobile (filling the whole screen to be readable from my sofa).
Is there a way to check if the website is displayed on a tv-screen?
(It could be through chromecast as well)

You could check for a special user agent in your TV's browser by going to a page like this (http://mybrowserinfo.com/detail.asp).
Then you can use the data-useragent and data-platform attributes to selectively apply CSS (see an example here: https://css-tricks.com/snippets/javascript/add-data-attribute-of-user-agent/).

Related

WebRTC getDisplayMedia - How to avoid screen area selector

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?

How to make a notification blink with javascript / HTML

Okay so I've been looking around for this and I cannot find it. I am looking to make the white glow that streams across the top of the tab in Google Chrome. It notifies a message in Facebook or google+. It's similar to window's glowing taskbar icons, except it's in browser. I know about desktop notifications, but those are too intrusive. I am looking for a way to call that with javascript or jquery. Thank you
The glowing tabs are relatively new features in Chrome, and are not something you can call/run directly. The implementation varies across operating systems (for example, in Windows 7 there is no "glow" as you mention).
The effect happens when the title of the webpage is changed. You change the title with javascript:
document.title = "This is the new page title.";
See this post for further clarification: https://productforums.google.com/forum/#!msg/chrome/33rVaX7pmRE/arl1bLL98XkJ

Firefox : Force full-screen mode from webpage

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/

Dragging and dropping images from Firefox into Microsoft Powerpoint

I am trying to make a web page which allows users to drag and drop images into Microsoft Office applications, specifically Powerpoint.
By default (as of FF3.5), Firefox will insert the source URL when an image is dropped rather than the image itself. After adding the following Javascript/jQuery code (derived from https://developer.mozilla.org/En/DragDrop/Drag_Operations),
$('img').attr('draggable', true).bind('dragstart', function (event) {
event.originalEvent.dataTransfer.effectAllowed = 'copy';
});
dragging and dropping works from Firefox to Word and Excel, but not to PowerPoint. For an example of what happens, see http://slides.html5rocks.com/#drag-and-drop. I have tested this with FF3.6 and FF9.
How can I make it work with PowerPoint?
Just drag'n'drop outside the boundaries of the ppt slide (to make sure you're not dropping on a predefined textbox) - and release the mouse button -no coding needed!
Firefox drag will drop the image at the center of te ppt slide.
Status quo
Sadly there is nothing you can do from within your browser and the application to enable drop support for PowerPoint.
This is something that needs to supported at source level in PowerPoint (and it seem to be if you don't drop the image on an existing element but right outside the slide frame you want to drop it onto - but probably depending on version).
If it (for some reason still) does not support the image part of the drop but just the link (and if there is no option provided for changing this behavior) there is little to do but to hope Microsoft will update PowerPoint with this support in the future, - or - check the following options for work-arounds if needed:
Add-ins
You can look into writing an add-in (or possibly just use a macro - you might need to lower security to medium [PDF] for macros) for PowerPoint that will take the link that is dropped and replace it with the image the link refers to.
Here is one place to get you started making add-ins if this is a viable option.
Here is a commercial framework that makes creating add-ins very simple.
(disclaimer in this regard: I am here assuming this will be possible due to add-ins such as this which allow you to show a live web page inside PP).
Pipe-line / work process
There is also the option of injecting a third-party applications in the pipe-line to do screen snapshots of the image and have it inserted automatically into PP.
SnagIt is such an application (and there are probably others) and it has free extensions that will allow you to integrate "snags" directly with PowerPoint.
Or (the perhaps too obvious option): simply copy the image in browser and paste it into PowerPoint.
What is your version of Powerpoint?
It's very important because image format support may be lacking.
If that's the case your code needs a minimum version warning addition.
Could also ask to convert image to suitable format.
It may even be the case that it's impossible to the version of Powerpoint you're using to support this in the way you want.
You could try to use html code.
This code might help you:
http://classroomtech.org.uk/2008/08/drag-and-drop-in-powerpoint/
Other possibilities are OLE object with a link to a image.
Could check how other Microsoft applications, that do something similar, handle things.
If that doesn't work you could try to generate an OLE object with a link to the image in it.

How to make a few webpages display different on mobile devices

I have a webpage that is quite wide and short on about 3 pages, the pages that are wide and long display fine on a mobile phone browser, but the pages that are short show up on only less than half the screen.
Is there anyway I can make a seperate page for each of those 3 pages and have them come up only when someone is using a mobile phone.
Thanks
You need to insert some JavaScript that will sniff out the User Agent (web browser & version) on each page. Here is a link that explains how to do this:
http://www.quirksmode.org/js/detect.html
Once you have done that, then swap your CSS file for that page to the one appropriate for the device, or redirect to a special HTML page for that device.
If you search Google for 'Responsive Design', there is lots of advice on how to use the same page, but make it appear differently on mobile devices.
Along with "responsive design" you should investigate "media queries" which will allow you to adjust your CSS and help align the elements to the display size of each device viewing it. No javascript necessary.
How to use Media Queries in Mobile
Like others have stated. Responsive web design with Media Queries is best. Check out these sites.
http://www.alistapart.com/articles/responsive-web-design/
http://www.stuffandnonsense.co.uk/projects/320andup/

Categories