Stop being responsive at a certain width - javascript

I know this question sounds crazy, but I'm going to explain it.
I have a responsive website and all works OK, but when the width is too low (width < 500px) the website (which is still responsive) start to rearrange in such a way that I prefer to NOT being responsive anymore.
I'd like to know if there is a script or anything that can solve this. Please any help will be useful :)

set a minimum width on the html / body
html, body {
min-width: 500px;
}
Making elements responsive is usually done by setting width to a percentage of parent elements. The above would be an easy fix, but it's possible there will be elements you need to style using media queries.

You can place your css within media queries so that it only applies under particular conditions. E.g.
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

Related

how to make mediaQuery over write values which were set dynamically in the code?

I have a div which has a basic width value, set in a css file.
In that file, i also have a media query for a new basic width, upon orientation change to portrait.
in my javaScript i have a function updating the width dynamically when document is ready.
What happens is, that when the media query is called, the updated width - is the width which was set dynamically by the js, and it's automatically overwrites the new media query css width.
In other words, once I dynamically set the width in the code - the media query will no longer take any effect.
how can i make the media query css width overwrite the current width (which was set dynamically by js?)
THANK YOU!
HTML + JS :
<html>
<head>
<script>
var defaultNumOfItem = 3;
$(document).ready(function()
{
updateWidth(4);
});
function updateWidth(currentNumOfItems) {
var basicWidthText = $('#list').css('width');
var basicWidth = parseFloat(basicWidthText .slice(0, basicWidthText .indexOf('px')));
$('#list').css('width', basicWidth * currentNumOfItems/ defaultNumOfItem);
}
$(window).bind('orientationchange, function(){
updateWidth(4);
});
</script>
</head>
<body>
<div id='list'>
</div>
</body>
</html>
CSS:
#list {
width: 900px;
}
#media only screen and (orientation: portrait){
#list {
width: 600px;
}
}
P.S the use of !important did not work for me, since if i put it in the css - the js will take no effect. and if i put it in the js - the media query takes no effect - same will happen by putting it in both the js and the css
This can probably be achieved without JavaScript, though the full intent of the code is not totally clear, so this is how to do it while maintaining the current functionality.
#media only screen and (orientation: portrait) {
#list {
max-width: 600px;
}
}
The max-width CSS property trumps width, even if width is defined inline, externally, or made !important. The same is true of the min-width property under different circumstances.
Just give it a try !important
#media only screen and (orientation: portrait){
#list {
width: 600px !important;
}
}
If I understand this correctly you want to use the media query only if orientation is portrait and the js if the orientation is landscape. In this case you can try this:
$(window).bind('orientationchange', function(event){
if(event.orientation != "portrait")
updateWidth(4);
});
this way the js will not overwrite the width that you wanted to set through the media query in portrait
Ok, found a work around that actually works!
What i do, is simply remove the "width" attribute from the #list every time the orientation changes:
$(window).bind('orientationchange, function(){
$('#list').css('width','');
updateWidth(4);
});
so that way, the external css does take before the js manipulation.

Liquid Grid - How do people refer to it

I've been playing with the google apps console and it has a fluid page where there are grids of items. When the user makes the window bigger and smaller the width of the grid items gets smaller and smaller until it drops one onto the next row when it cant make each grid item any smaller.
Can anyone tell me what this technique is called so I can find some tutorials. For bonus points, does it require javascript?
The technique is known as liquid or elastic layout. It is achieved via CSS, no javascript required. If you're looking for tutorials, you might this article useful:
"70+ essential resources for creating liquid and elastic layouts" by Zoe Mickley Gillenwater
Most used method (at least by my observation) is floating div with width in percentage and css media style.
Example
.thumb {
float: left;
width:18%;
margin:1%;
background: #eee;
height: 200px;
}
#media (max-width: 724px) {
.thumb {
width:48%;
}
}
In example above div.thumb will have width of 20%(margin+width) meaning it will have 5 div per row. And if viewport has width of max 724px there will 2 divs per row.
There are a lot of methods for this but this is most easiest to do, if your div's have same height, otherwise you will have some glitches with float.
EDIT: here is jsfiddle http://jsfiddle.net/P2URP/
What you are looking for it's called fluid (or scalable, liquid, etc.) "tiles" better than "grid"
This other question may solve yours if you want to do it only with CSS: Fluid, flexible and scalable tiles to fill entire width of viewport

Size Font to Window

I'm looking for a suitable font size for my page. I currently have it set at -webkit-xxx-large as that fits my window perfectly.
What I need is the text to fit inside the window width (not fussed about height) no matter what the window size.
Example:
1920px Window Width - font-size: -webkit-xxx-large
480px Window Width - font-size: large
Whether it uses Javascript/jQuery or if it's just CSS it doesn't bother me. I just need a suitable one-size-for-all.
Try the media query using #media like (IE support)
body {
font-size: -webkit-xxx-large
}
#media screen and (max-width: 480px) {
body {
font-size: large;
}
}
Demo: Fiddle - reduce the width of the result panel
Don't use the size constants. Find a value based on the em scale and that will work for different screen sizes.
Text can be a pain to size exactly. BigText is a nice Javascript Library that can size it to 1/100th of an em for you pretty easily.
You could look into something like: http://simplefocus.com/flowtype/
Although i would not recommend this for your body text as media queries would probably suffice and give you more control. Smaller on small screens is not always better.

detect screen resolution then compare

I've problem with my css sheet of one page ,So been thinking to detect screen resolution if equal or less than 800 pixel width it will makes my css code is
<style>
body {width:1004px;}
</style>
but if it was greater than 800 pixel width, it will makes my css code is
<style>
body {width:100%;}
</style>
so anyone knows js code that code do it !!
i only care about width detection no need to detect the hights as well.
i've made search for alot of js code doing this but wasn't able to use to do this exact function of passing either of those css code into the page.
You can use CSS Media Queries
body {
width:100%;
}
#media all and (max-width: 800px) {
body {
width:1004px;
}
}

How can I change a CSS attribute by Javascript when a certain minimum screen resolution size is detected

I have this code:
function AUTADIV () {
var BRW = window.outerWidth;
x = (BRW/1280) * 20
document.getElementsByTagName("a").style.fontSize = x
}
and the tag <a> is already under this class in a .css file:
a {
position:relative;
z-index:1;
color:White;
background-color: transparent;
font-size:20pt;
text-decoration: none;
text-shadow: blue 0em 0em 0.4em
}
When someone with a larger screen sees my site, the background does fill it all, but the font is too small. Is there any way to make it automatically resize? If not, how can I change font-size:20pt by JavaScript? My code only works if the font-size style is inline, and I need it in the CSS script.
I have found that the code I need activates with the onResize event.
If it needs to be in the CSS then it might be difficult to do. If however, it's able to be changed dynamically with JS then you can accomplish this with a simple test like:
(I'm using jquery)
$.getDocHeight = function(){
return Math.max(
$(document).width(),
$(window).width(),
/* For opera: */
document.documentElement.clientWidth
);
};
if($.getDocHeight>threshhold){ // some threshhold of a max width
$('a').style('font-size','40pt');
}
This can be done in regular js as well. It's hard to determine the width on all different browsers, thats why I included the function. But once you have the width, you just need to do a simple check and you can bump up the font-size style for your anchor tags. I suggest having static sizes so that the font is more predictable and doesn't scale with your page size.
This is a best practice when considering different types of users (like mobile users where you definitely do not want the font to be so small that all of it fits on one page).
Src for code: http://james.padolsey.com/javascript/get-document-height-cross-browser/
You may modify the rules by accessing the CSSRule-Object.
Details:
IE<9 : http://help.dottoro.com/ljcufoej.php
Others: http://help.dottoro.com/ljdxvksd.php
You might get better results using a media query:
#media all and (max-width: 1280px) {
a{font-size:12pt;}
}
You can repeat this for increasingly smaller sizes. It won't smoothly transition, but it doesn't require JavaScript (and besides so much changes when you resize a window that a jump in text size probably won't be noticed).

Categories