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.
#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 { ... }
If the projector's output is a different resolution 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
Related
I developed an extension for Firefox with an option popup for preferences.
On mobile, as it doesn't open as a popup but as a new tab moz-extension://(...)/popup.html, I had to apply some specific CSS media queries.
But as you can see below, it's definitely not working.
What should I do ?
CSS page is here https://github.com/ANN-MB/LEIA/blob/master/extension%20firefox/leia.css
I solved the problem.
It wasn't about media queries but because my manifest.json looked like this :
"options_ui": {
"page": "config.html",
"browser_style": false,
"open_in_tab": true
}
It seems that when open_in_tab is set to true, the Firefox Mobile Browser opens the option page with the desktop display (don't ask me why).
So turning "open_in_tab" to false gave me the good render.
But you need #media querys for wanted solutions! Your Medium is provide an max range of size, you only need is to declare your style on diffents sizeranges:
#media(min-width:XXXpx) {
// your style here
}
for more information take a look at this: https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
How can I make screen size qualifiers for CSS files. Like app.css but for certain screen size like 10" tablets. If it's possible, can I also make Android specific like app.minWH720.android.css. It seems not to work, am I doing something wrong or is only xml supported.
I want to archive different label sizes on different devices. XML file are fine without touching them.
I'm aware of documentations like: https://www.nativescript.org/blog/details/supporting-multiple-screen-resolutions-in-your-nativescript-app
Considering that you have screen qualifers pages like
main-page.minWH720.xml
main-page.minWH480.xml
You can simply provide different CSS classes for your XML elements.
.myButton-minWH720 {
background-color: red
}
.myButton-minWH480 {
background-color: blue
}
And use them accordingly where needed..
As for the second question you can get your metrics using the platform module like this in your app.js
var platform = require("platform");
var screen = platform.screen;
console.log(screen.mainScreen.heightDIPs);
console.log(screen.mainScreen.heightPixels);
console.log(screen.mainScreen.scale);
console.log(screen.mainScreen.widthDIPs);
console.log(screen.mainScreen.widthPixels);
var device = platform.device;
console.log(device.os);
console.log(device.manufacturer);
console.log(device.osVersion);
console.log(device.model);
console.log(device.sdkVersion);
console.log(device.deviceType);
console.log(device.uuid);
console.log(device.language);
console.log(device.region);
I'm currently developing a complex print style sheet which is in some ways different from the HTML currently displayed on screen. I've hit a hurdle with a balance between performance and achieving the desired layout.
Basically there is a gallery of images which are loaded via javascript on the fly. Images are built dynamically via JS and output to the DOM on each request for the next image.
My problem lies in that I need to build this for printing purposes. I think I'm left with a scenario where I will have to build additional html on the page just for the print page to look correct; that isn't so much of a problem, except the images are rather big, and even using "display:none" and media print { display:block; } won't prevent the images from being downloaded on desktop devices behind the scenes by the browser. In essence I need them to stay dormont on screens, and come to life using print styles.
I had considered using the css background-image property - which I believe doesn't cause the image to load in the browser, however background image doesn't seem to reliably print across different browsers.
I've also tried using onbeforeprint javascript, but again, this is mess of browser inconsistency.
Can anyone suggest any sort of solution for this? at the moment it seems like I'm going to have to suck up the additional overhead of all the images to achieve reliable results.
If background images are an option, you could prevent the download of those when setting the parent element of the image container to display: none
Example HTML:
<div class="invisible">
<div class="img-container">
</div>
</div>
Related CSS:
.invisible {
display: none;
}
.img-container {
background: url(img.xyz);
}
#media print {
.invisible {
display: block;
}
}
Apart from that a similar question had been asked: Prevent images from loading
May be that will help you, if background images are definitely NOT an option.
I have a site.css and something similar to mobile.css.
What I am building is a webpage where you can preview the app you've made. Imagine it like a site devided in half where one half has a panel with controls while the other one has the preview (div), curently designed as a mobile phone.
So what I am actually doing is a mobile phone on my site (preview), but the problem is that I dont know how to use the mobile.css file in the preview div only.
Is there a way to import a CSS file for one div (and its children)?
A simplified look of my page: https://jsfiddle.net/kc8rgde2/1/
<iframe>, <style scoped> or external CSS preprocesors are not an option.
EDIT:
I kinda decided to go with SASS as it was the easiest to understand and Visual Studio had a nice extension for it.
Thank you for all the help.
I had an idea. It could work, and it needs a lot of testing.Check this fiddle ->
https://jsfiddle.net/kc8rgde2/2/
Basically, as you can see, in the fiddle there's no bootstrap loaded.
I load bootstrap, and access the file using the CDN link from an AJAX request.
The response of the ajax, is the content of the bootstrap css file (minified version) - (check the console!)
What i do after, is replacing all the classes (dots) with ("#phonePreview .") and this prepends the phone preview div id to all the classes.
$(document).ready(function() {
$.when($.get("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"))
.done(function(response) {
var res = response.replace(/\./g,'#phonePreview .')
console.debug (res);
$('<style />').text(res).appendTo($('body'))
});
})
Prepending the parent id means that the classes are applied only to #phonePreview children.
It's just a starting point, but with some work it could work!
If you want to use styles specifically for devices under a certain size you could use media queries:
#media only screen and (max-width: 431px) {
.myDiv {
style: style;
style: style;
}
#div2 {
style: style;
style: style;
}
}
max-width: 431px means devices that are 431px or lower in width. You could also use height and change it to min-width.
Can anyone tell me how to tell Github, that I want to see code reviews on Pull Requests in full screen width. Code lines are often longer than the area provided by Github and there is a lot of unused screen real estate.
Is there a setting in Github or a Chrome extension or Tamper Monkey or something like that.
Use Stylebot chrome extension
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en
I use my own style for my favourite websites, I love it.
Plus point is that you can use the styles created by other peoples also. Someone might have already done the things you need there. Or else you can modify on your own.
I have few CSS rules for you,
.repository-with-sidebar .repository-content {
width: calc(100% - 50px);
}
.container {
width: 90%;
}
Github's CSS has changed, so the new styles should be:
.container-lg {
max-width: inherit;
}
You can create a shortcut in your browser to automatically apply this style:
javascript:(function(){var a=document.getElementsByClassName("container-lg")[0];a.style.max-width="inherit";})();
There's a class on the body called full-width for that, so all that's needed currently is:
document.body.classList.add('full-width');
This can also be added as a bookmarklet:
javascript:(function(){document.body.classList.add('full-width');})();
Don't know why the OP said it's not a problem anymore, if you're doing a code review of your own work you won't be comparing it against another in side-by-side view.
Fix for full screen:
Inspect element on the white space to the left of the code
You'll be brought to a tag, expand this
Click on the 3rd div child of 'main'
Scroll down through the css on the right hand side until you find ".container-xl"
Untick this and you'll get the code full screen
If you want to you can write a console script or use one of the plugins mentions above but I find this method the simplest to remember and apply on anyones machine.
This is no longer an issue after GitHub introduced side-by-side code review. That really works well.