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.
Related
I am developing chat and call application in my project.
So there are 3 tabs.
people to chat
dialer to dial to particular person
chat / call history
in this tabs there are 3 portions.
header
chat / call / history portion.
tab changer navigator.
I make middle portion scrollable.
I want to make that scrollbar thinner. I don't want to use browser's default scrollbar.
For this I find "::-webkit-scrollbar" which is perfect only for chrome.
I want to apply this css to all browsers.
I find scroll plugins but I don't want to use any external plugin. I want to solve this by using jquery / css/ javascript.
is there any property or anything which can solve my issue?
The ::webkit-scrollbar pseudo element is NON-Standard and there is no way to make this cross-browser-compatible at the moment. There are good reasons why this hasn't evolved as standard yet. Just imagine some touch devices having browsers without scrollbars or with scrollbars, which are hidden by default and shown only when scrolling (to save valuable space). Custom styling would need to fit all these use cases.
Therefore I'd generally recommend you not to style the browser scrollbar with this hack. If you really need a solution, you could try jquery.scrollbar. IMHO this is no robust solution, however. It relies purely on JavaScript and may be jiggling around on some devices.
edit: further info on MDN
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 am just starting with both media queries and viewport statements. Is this what is used to create websites like the following ?
http://html5up.net/escape-velocity/
http://www.sitediscount.ru/parallaxer3bs/index.htm
What I am trying to achieve is a full page / viewport on all screen sizes. Then on scroll to the next section below is also filled with the viewing area. This is a new popular type web desin and I am trying to figure out how to replicate it. Either html5 or bootstrap solutions would be great. Thanks in advance.
Short answer: Yes, media-queries is the main way to go in order to create fluid layouts.
If you're just starting out, I would recommend you to learn writing these from scratch in order to get an understanding. There is a good article available at http://css-tricks.com/css-media-queries/
However, if you do not wish to code the media-queries yourself; that kind of pages with a fluid responsive layout can easily be made with bootstrap.
To download bootstrap, go to http://getbootstrap.com and start working from there.
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.
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