The short question:
I have a simple monitor and a projector, both should show the same browser window with the same page loaded, but with some different content for each of them. Is there any way to achive this with css or js (or maybe with a specific browser extension)?
Longer explanation:
I want to build a little presentation plugin with js and css, and the biggest presentation programs all have a timer on the screen, but not on the projector. This feature is something I want to realise. Notes or something like that could also be added, but all that requires different content on different screens/projectors, so I need a solution for that. For this even a browser extension would be useful because I only want the plugin for myself.
So, do you have any suggestions?
You can specify different media. Like this:
#media projection{
//projection css
}
#media screen{
//screen css
}
Then, obviously, the projection ones will apply to projection media, like slides, projectors, etc, and the screen stuff will only apply to a computer screen. Now, you may want to toy around with the projection css, as I've never actually tested it. But you could easily get away with just using the screen stuff to set certain stuff to display:block;, while it is display:none; otherwise.
I guess you can use media queries for that in CSS3.
See thinkvitamin.com for example, resize your window and see how it is arranging the UI according to the screen size.
You can also hide or show divs at a particular screen resolution, but I think that this will work only in CSS3.
Related
I'm trying to set something up where my background would scale depending on the user's browser width, but I'm tied to a background set in the external stylesheet under a certain element. I can change the background, I can modify its attributes, but I cannot replace it with a html background.
I've been researching solutions for this and most of them don't seem to work. I even tried linking (in the html) an external JS that detects screen resolution and chooses a bg file accordingly, which is exactly what I need, only the browser doesn't detect it at all, whether I nest the script within the html or just link it. So I'm looking for a way to link it under the bg setting in CSS. From what I read, this is "possible but risky", with no real instructions on how it's done.
I'm willing to try it despite the risk, but I'm also open to alternative suggestions. All I need is to be able to set two different image files (same image, just scaled differently) for small phones vs everything else. I've already looked at srcset but that requires embedding in html, so it's no go for me, although I was excited about it. I don't mind actually editing the images myself.
I'm not sure what you mean by link javascript in bg settings in the css.
But you should be able to set different backgrounds using media queries within CSS. Take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
It sounds as though you're looking for media queries. You can set specific CSS based on media features.
See W3Schools for a description and examples on media queries.
I made the download of several free responsive layout (you can find them simply through google if you're curious) and I see that the layout has at least one or two javascript files.
The question is: javascript is essential to create a responsive layout?
Then, in the reply to this question is "no" and you have also the possibility to link a free responsive layout made only with html and css, well, you will receive a wonderfull BIG thank you.
The whole point of responsive layouts is that it can (and should) be done with CSS3 media queries only.
However, this can often require some clever HTML design, especially if you want to have a slide-in menu (hint: :active can be very powerful when combined with tabindex to make an otherwise "inert" element respond to click events like a link) and many developers just can't be bothered with that, especially when jQuery is so readily available.
So basically, yes, you can make a responsive layout with CSS only. And if you succeed, congratulations! JavaScript can be used to make things easier, but in general if you think you need it, you probably just need to rethink how you're doing things.
Unfortunately, I have no links to JavaScript-less responsive layouts for you, that's because I'm very DIM - Doin' It Meself!
Edit back While I appreciate Martijn's demonstration of a use of JavaScript in making images essentially have variable resolution depending on screen size, images can be made responsive simply by using SVG if possible. If this is not an option, consider using a container with a background-image - only the image that matches the media query will be loaded :)
Sometimes yes, sometimes no.
First understand what is response layout: Responsive Layout is the one that dynamically changes itself. Depending on the Browser's screen size. So that it fits perfectly on every screen type, size, resolution etc. So that the website's layout doesn't break.
You can just use CSS3 media query to change the layout, or else you can use jQuery or some other JavaScript to make this happen.
But remember, JavaScript is not required to make the document Responsive.
Sometimes Yes!
Sometimes the developer is better in writing the code using JavaScript, such as jQuery API. So he would find it easy to write the code in jQuery to dynamically handle all the events in the Browser window to make a website Responsive.
I myself would find it pretty easy to write the code in jQuery as compared to CSS. So for that purpose, I would have to add the jQuery source file to the document to render it that way. Otherwise I won't be able to create the responsiveness in the Website or would have to stick to the pure JavaScript
Example would be:
if($(window).width() > '1300') {
$('body').css({
'height': '100%' /* etc */
});
}
Sometimes No!
Some developers are good at CSS (CSS3, and its media Queries too). So they try using CSS3 to render the document and make it responsive.
CSS3 is really much easy than jQuery and it would be helpfull to use it. It would also won't require any of the Script file to be included. You can easily write the code, in the default CSS file. And the changes would be made accordingly.
#media only screen and (max-width: 1300px) {
body {
height: 100%;
}
}
But Remember
If you use plain CSS and then use CSS3 Media Queries to change the layout of the website, you will be able to just detect the screen size and other elements. You won't be able to check for the Browser's properties or the content on the screen etc.
Both answers are acceptable.
No, if you pretend to work with something like a flash site, which I hardly discourage it.
Yes, because javascript is essential to do that, CSS3/HTML5 are solutions to your case, but, they come with some javascript included functions, that you will not see, so, there is javascript.
Responsive by Default
No, you do not need JavaScript for Responsive Webdesign. It is necessary for those cool fly outs and sliding effects.
If you do a website in pure CSS, you might need to take some compromises like a different menu layout or always visible sidebar content. Sliders are a problem.
But consider this:
If you think about it, responsive layout is not a new thing. Open a simple HTML file in a web browser, and the content automatically adapts to fit the width of that browser. The web is responsive on its own—by default. It's us that's been breaking it all these years by placing content in fixed-width containers.
Andy Hume in "Responsive by Default",
http://blog.andyhume.net/responsive-by-default/
Media queries allows you, to do responsive pages with css only. But you should remember about jquery function '.resize()' when user change horizontal layout to vertical on phone or tablet.
I've been researching Responsive Web Design lately. While there are many techniques and practices that fall under the umbrella of "Responsive Web Design", essentially the main pillar of RWD seems to be CSS3 media queries. So, RWD is basically a client side strategy.
But with low-resolution layouts, you often have to simply remove entire sections of HTML. For example, a 3 column layout may need to become a 1 or 2 column layout on lower resolutions, meaning that you're basically hiding entire DIVs at lower resolutions. The problem I see here is that you still need to actually SEND the same amount of HTML code to a low-res device, even though it will never be displayed. In other words, you're sending the same 3-columns worth of HTML to a hi-res screen and a low-res mobile phone, but it's really a complete waste of bandwidth every time you send it to the low-res mobile phone.
Question: Am I correct in my understanding here, or does RWD also incorporate server-side techniques?
For example, suppose you have a skeletal HTML page like:
<div id = "main-content">
<!-- content goes here -->
</div>
And onload (or onresize), the client browser detects the screen resolution and makes an AJAX request that fills in main-content with the appropriate HTML for that resolution.
Are techniques like this that utilize server-side strategies to implement RWD ever used in practice?
In general, responsive development - if done correctly - should not have any redundant or repeated data in the markup. Likewise, content displayed at one screen width will also be displayed at another width, just in a different way.
I love the idea of making an AJAX call based on screen dimensions at page-load, but that's not really the idea of responsive design, and would actually take longer for the page to load (for the visitor).. It would also mean that the page layout wouldn't adapt when the browser window dimensions are changed (for example: switching orientation on a tablet). Unless you propose a new AJAX call at that point, in which case you'll be sending a lot more traffic than a single responsive page-load, and putting more load on your server too.
You pretty much answer your on question...
The time you will need to make a ajax call when the window is resized is much more longer then just give the whole html page once and use css instead.
And the main idea of responsive design is not hide your content. When you hide your content, you got a lot of troubles, like search engines that will show up your content but when a guy visit your website on his tablet the content doesn't show up.
Edit:
Just to make clear when I talk about content, I am talking about what is important on your page stuffs like a "adsense" or other things that doesn't really matter to the visitor should be hide at no problem at all.
About server-side technique there is a bunch out there, one good example is Adaptive Images that send images on lower resolution to lower devices, but you can do that with client side technique too.
Edit2:
I almost forgot that
Not to mention that onresize fires once for every single change in dimensions. In other words, if you go from 1000x1000 to 950x1000, it'll fire 50 times - 50 AJAX calls. #Sébastien Renauld
Why would you hide additional columns on mobile? Removing information is never a good idea, that'll only make visitors dislike the mobile version of your site.
Columns on a web site are usually created with floated html elements. Remove said floats with a media query and voila! The information is now all in one column.
If that one column ends up being far too tall you may want to consider adding toggles for showing/hiding the information, but that's as far as I'd go about removing content for mobile sites.
http://css-tricks.com/make-client-side-data-available-server-side/
In this article Chris Coyier talks about using clientside methods to check the current width of the screen, then save it to a cookie for use server side - then refresh the page. I don't entirely approve of the method, but perhaps it could be useful to you.
You may want to look into JavaScript feature detection or even UA sniffing, though its frowned upon.
You don't have to remove/hide columns in lower resolutions. The trick would be to stack then underneath each other in low res, then align them in columns in higher res. For example:
<div class="one">Column One</div>
<div class="two">Column Two</div>
<div class="three">Column Three</div>
.one, .two, .three {
blah blah blah, whatever needs to be here.
}
then add CSS:
#media only screen and (min-width: 600px) {
float: left; /* screens larger than 600px wide will throw them into columns via float*/
}
I have a legacy web application that was written long before there were even mobile browsers, never mind responsive design. As such, everything is static.
I can't modify all aspects of the site's pages. For example, I cannot change that the main container is set to 900px with auto margins. But through other server-side output classes, I can modify bits here and there. For example, one class builds a <div> element with other nested markup, and I can add inline styles and attributes to any of this markup. I can also modify the header include to a certain degree. So what I'm wondering about options:
Right now, the whole page fits in the mobile viewport, making text tiny. Can I instead zoom in for mobile? I don't mind if you can't see all the content but at least fonts are at a readable size. Is there some CSS or a meta tag that I can use to zoom by default? (desktop browsers must remain the same as they have always been, though)
If I have an iframe within a page that is, say, 320px wide, is there a way that will allow me to automagically focus of that iframe on page load so that it fills the width of my mobile viewport?
plain JavaScript is an option (no external libraries like jQuery); if this can't be done with a tag or with styles, is there a JavaScript method I could employ?
I apologize for lack of sample code... I've certainly tried a few different things with CSS properties, but no matter what I'm always viewing the zoomed out full-page version.
To make sure your fonts are readable you could use a font-size per percentages instead of pixels if thats what you are using.
View this article about adaptive design for mobile if this helps :
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
I am using the same stylesheet for the main site as well as a 'preview' of the site (NOT in an iframe because I need it to be interactive). The issues is, the preview does not take up 100% of the screen width, so when media queries are based on screen size, the page behaves oddly. I am ok with making the editor/preview mode fixed width, though, so I thought perhaps there is some way I can disable the media-queries under certain conditions? I have no idea how to approach that, though. Either through javascript, or potentially loading an additional, generic stylesheet after the mediaqueries that would somehow reset things.
Otherwise I may have to make alternate stylesheets, which would be a pain to maintain, or redesign the page so that the preview area is 100% of the width.
You've got a number of options.
First off, you can disable the "offending" stylesheet:
with <link id="mediaSheet" rel="stylesheet" href="....">, you may run this in your onload handler: document.getElementById("mediaSheet").sheet.disabled = true;.
If you feel like coding, you may add this link to your final HTML conditionally. E.g. if the page is requested with a GET parameter ?preview=true, the stylesheet element will not be generated.
Set the viewport meta to be a certain width that complies with the media query.
Ensure you have the scale set correctly though. I tend to remove it if you want a mobile to be able to see the desktop version.
Just like to add to A.Pavlov's answer (I can't add comments yet):
If you want to use JQuery
$('#mediaSheet')[0].sheet.disabled = true
Or if you want to disable all media queries, use class="mediaSheet" instead of ID:
$('.mediaSheet').each(function(){
$(this)[0].sheet.disabled = true;
});