Just wondering if theirs a more efficient means of doing this?
$(window).resize(function()
{
$('.title').css('font-size',Math.floor($(window).width()*0.2)+'px');
$('.title').css('background-size',Math.floor($(window).width()*0.5)+'px');
$('.title').css('padding',($(window).width()*0.1)+'px 0px '+($(window).width()*0.1)+'px');
}); `
I'm doing this to get my web applicatiion (cordova/phonegap) to resize properly for all devices. I've tried using viewport and had mixed results especially when it came to getting text to scale relative to dpi and screen dimensions.
There are a few ways of doing this.
There are some pre-made libraries such as BootStrap for mobile view.
You can use percentage instead modifying the css through jquery.
For some help a nice tutorial site for css is w3Schools css tutorial page.
Each result has different results.
Now on your example code you are using window.width* 0.5 or window.width / 2 which is half. If you are in the root element with no width settings you could use 50% instead of pixels to easily achieve the effect you are looking for.
However it is most likely not like that. You may have to specify widths of parent elements to achieve this.
have you considered using css #media .
it is more neat , and doesnt require javascript event to be triggered.
more info can be found here
http://www.w3schools.com/css/css_mediatypes.asp
You can use #media queries to serve the purpose.
Related
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.
How does this website http://www.rallypoint.com scale their background pictures?
As I change the size of my browser I can see the height css attribute on the div element changing so I'm assuming it's some kind of javascript working in the background.
The javascript function I see in the body is new Slider however I can't find any reference anywhere on the web about this except JQuery UI Slider which does not seem relevant, is that a custom function they wrote?
They use the 'background-size' CSS3 attribute:
background-size: cover !important;
Read more about it: http://www.css3.info/preview/background-size/
Well, there is certainly more than one way to get the result you want.
I found this the most helpful ...
Perfect Full Page Background Image
That is called FLUID layout.... and it is dependent on CSS and not javascript
read a little about boots strap and other CSS properties
By the way here you can see the background-position as 50% in CSS(learn to use chrome development tool)...so that is the HINT
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'm trying to get a background image to behave like GE's background on their website:
http://www.ge.com/stories/powering-gas-engines.html
I was wondering what CSS or javascript techniques they were using to get that kind of effect.
There is a jQuery plugin that can help you accomplish this, and he's laid out the code in his description to give a good idea of how it all works. What I like about this one is it also maintains aspect ratio.
http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/
it is an image, rather than a background image, and they use a javascript function called from the onresize event to set the width and/or height of it to the full width of its containing div.
It is possible to create a similar effect by using the css3 background-size property, but this is only supported in the css3 compliant browsers.
css width: 100% for both container and background image and use media queries to control minimum windows size to use elastic width or fix width
I built a new .Net website which will fit nicely on 1200px width resolution.
The problem is that some of my users will browse this website with 1024px width.
Is there a way to fix this problem quick without changing all the design of the page? For example, to put some javascript that will do the trick.
Please keep in mind that the top banner of my site is 1200px wide, and I don't need to support less then 1024px resolution.
Thanks a lot.
It all depends on how 'properly' your web site was designed. You might need to change a few widths for the main containers (hopefully divs) and the whole content will reflow nicely.
However, if your website contains fixed widths for individual elements, or if there are some images / background images with fixed width, then you will have to amend them as well.
Relatively / absolutely positioned elements will need to by amended as well.
There is no silver bullet 'make my page look nice in smaller resolution', if that's what you're looking for.
I would use javascript. I'd check user's width with document.width, then use jQuery's css() element to change what's needed.
If you really don't need to support users with horizontal resolutions less than 1200px, then why not just let them have the horizontal scrollbars?
Wrap the whole structure of the site in a (div) container that has a min-width: 1200px and be done with it.
Otherwise, if you can't stomach some users having horizontal scrollbars and you really want to maintain the beauty of the site, then you really need to get out of your way and re-design the site in a way that it gracefully degrades in lower resolutions. It definitely is not easy but it can be beautiful.
Here's an article from alistapart that discusses the techniques involved.
You can use the following CSS:
min-width:600px;
max-width:2000px;
this code will set the webpage to all resolutions between 600px to 2000px.