83182

Projection media query: browser support and workarounds?

I'm trying to get styles applied to a page only when the page is projected on the wall (by a projector, when someone is giving a presentation). As the moment, I can only get this in Opera in fullscreen mode.

Is there any way to get @media projection to take affect in other browsers? Also, is there a way to make it only apply to the projection, and not the laptop its projecting from?

If not, are there any viable workarounds to this? I am trying to create a slideshow in css, but also offer a "presenter view" with extra controls on the laptop of the presenter.

Any help in any surrounding area is much appreciated.

Answer1:

@media projection is an abstract concept. Practically projection can be 'on' only on devices of special kind with custom browser builds.

On desktop/laptop with projector attached as an external monitor there is no way for the browser to know what kind of additional monitor is used (if any) for viewing.

The only option for you is to put <button>"Fullscreen" mode</button> and to use something like:

$(button).click( function() { $(document.body).toggleClass("fullscreen") } );

And use styles:

body { ... } body.fullsceen { ... }

Answer2:

If the projector's output is a <strong>different resolution</strong> than your laptop monitor, you can use a CSS media query to control the display of an extra element inside each slide, with notes for the presenter.

For example, let's say the laptop is 1024x768, the projected screen is 1280x800, and the notes are inside an element with the class name "notes" -- you'd do something like this:

.slide > .notes { display:none; } @media projection and (width:1280px) { .slide > .notes { display:block; } }

It would still require the projector and the laptop to be different screens (like using two monitors), but with that as a given, it totally works -- I've done this for real.

I use Opera in fullscreen mode whenever I give presentations; I also use a Mac OS X app called "Mira", which allows you to configure the Apple Remote so it sends keystrokes to applications. So mapping the "Fwd" and "Back" keys on the remote to "page-up" and "page-down" in Opera, I can use the remote to step-through the slides :-D

Recommend

  • Android TV, how to change color of title and color of headeritem?
  • Windows Forms Form hanging after calling show from another thread
  • Abstract class in Swift
  • Javascript MIME
  • Error handling in WPF PasswordBox
  • How to convert from one date format to another, in Microsoft SQL server?
  • Open source augmented reality framework for BlackBerry
  • Building libiconv fails with the Android standalone toolchain
  • SQL Server - Get all children of a row in many-to-many relationship?
  • How to Moq this view?
  • Generate a business key
  • Raise Session_OnStart event from custom ASP.NET SessionStateProvider class
  • How to only store 3 values for a key in a dictionary? Python
  • Find unique tuples in a relation represented by a BDD
  • How to override __call__ in celery on main?
  • Programatically open file in visual studio
  • What is the reason that Policy.getPolicy() is considered as it will retain a static reference to the
  • Creating a C++ function that calls other Lua function
  • Why isn't my “Fizz Buzz” test in R working?
  • how to change api_token column in token guard
  • Magento site down due to mysql error General error: 1030 Got error -1 from storage engine
  • How to estimate the Kalman Filter with 'KFAS' R package, with an AR(1) transition equation
  • Validate jQuery plugin, field not required
  • Hash Code in SQL Server?
  • jQuery: add elements until a particular height is reached
  • UWP/C# - Issue with AQS and USB Devices
  • accepts_nested_attributes_for practical form use for in Rails 3
  • Reduction and collapse clauses in OMP have some confusing points
  • gspread or such: help me get cell coordinates (not value)
  • How to define and use opencv mat of user type
  • Custom Tabgroup Appcelerator
  • Atlas images wrong size on iPad iOS 9
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • Different response to non-authenticated users and AJAX calls
  • WOWZA + RTMP + HTML5 Playback?
  • R: gsub and capture
  • Cannot Parse HTML Data Using Android / JSOUP
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Getting Messege Twice Using IMvxMessenger
  • How to load view controller without button in storyboard?