I want to have a calclation that is based on the width and height of the window
I know I can use #media min-width: 700px to have css work only when width is 700px at minimum.
is there a way to have something like this?:
$calc = percentage((#media.width)/200)*3);
div{
width: $calc
}
in which I use the width or height of the window in my calculation the same way that the css checks for the current width and compares it with the min-width
take a look at jquery ..
http://api.jquery.com/width/
http://api.jquery.com/height/
In the mean while, can you elaborate your question. What is the context of the code you want to write ? PHP, css, html, javascript ??
Also, take a look at the CSS function Calc()
http://caniuse.com/calc
Carry on.
Related
Is it possible to get the difference between width and max-width for a CSS class? For example, let consider the following class:
.className {
width: 100mm;
max-width: 100vw;
}
If the container is smaller than 100mm, let's say it is 90mm, then the difference would be 10mm. Then based on that difference apply different styling, similar to as one would with a media query for different screen sizes.
The use case being, className is 10% (10mm of 100mm) smaller than expected and there for all sub-components in it need to be scaled down by 10% to maintain their relative size.
If not possible with straight CSS can this be done with SASS/SCSS or maybe stylus or LESS?
I am using 100vh for my body content, but how can I make it so it takes away the height of my navbar?
Like
100vh - 50px
Is it possible?
You should be able to do so in LESS with the following
calc(~"100vh - 50px");
If you're happy with just a css solution, here is an example
calc(100vh - 50px);
JSFiddle Link
It is possible with the calc() css function
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
Doesn't work in all browsers. vh/vw/vmin support in this might be even smaller.
except in LESS you have to escape it, to prevent it being calculated by the compiler, like so:
height: calc(~'100vh - 50px');
I am working on a site where certain sections have 100% height. To achieve this I am using the new css3 unit vh as a min-height (100vh).
In each section there is also a element which is absolute positioned and aligned with the bottom of the page. You can see an example of it here.
The problem which occurs is that on a smaller screen the button shows up upon the text.
I know that I could e.g. let the button disappear on smaller screens with #media; instead I would like to know if there is a css3 possibility in doing something like this:
.element {
min-height: 100vh && 200px;
}
Any other css tricks too achieve this are also appreciated (I can change the markup).
No, it makes no sense to use like that. You must use media query.
If it was to be added like you mentioned it would just sense if vh is undefined px would take.
But to say, it would never be applied like so.
Is it possible to work only on css, to set a dynamic height of the div to a proportion of full screen?
Would like to have something like the following example
.my_div {
width:100%;
height:90%;
}
No, only dynamic width. You need javascript to adjust height dynamically.
Unless you are looking to do this, in which case search before asking next time. :)
I agree with #Alexander O'Mara.The parents like html or body or any wrapper must have dynamic heights on js that their children elements are free to set their heights with percentage.It is not possible to work only on css.
This probably was answered somewhere, but I can't find it :s
My question is about dynamic resizing of divs based in percentages.
Please look at code example below for the examples and possible solutions I made.
I ask if there is a better way to do resizing?
More detailed explanation:
Say I am writing a plugin that people can insert in their pages. (Imagine login form).
I go ahead and design the plugin's divs. I use media queries to achieve desired look for different devices. I work on a div straight inside of a 'body' element.
I use percentages for design (I like percentages). Say I set div to 80% width.
Now I give this plugin to the user. User goes ahead and puts the plugin's div inside of another
div that is 100px in width. Now everything looks awful. (80% of 100px is not a lot [80px]).
And of course I want user to put my plugin inside of whatever small-width divs that he have.
The solutions I saw so far to this problem was to create a holder div of certain width - say hardcode 300px. (ex - jQuery UI's Datepicker div; Meteor's login widget div). And then code to it always knowing the 300px width that I set before is not going to change.
But I don't know how good of a solution this is.
Moreover if I decide to go with hard-coding width, my plugin would need width of ~ 1000px. Because I want div to resize with media queries.
And if I go with hard-coding width (say holder div of 1000px width) and put it on a page, the page will have horizontal scrolling. And you cannot simply hide holder div (parent div) and have child to show at the same time. So this requires setting position:relative for holder (parent) div, putting it outside of window, and use same for child div - position:relative with same offset in opposite direction of parent offset.
I hope I am being clear so far and have not confused you!
A code example to illustrate what I am talking about:
http://jsbin.com/ifawez/18/edit
#cimmanon's comment cleared things out for me.
The problem is with lack of HTML/CSS "tools" available at the moment. Since responsiveness came into play fairly recently there are not a lot of CSS-native tools to accommodate changes in dimensions.
For instance media-queries exclusively work with width of window/document and not of other elements such as divs.
The solution I currently employ is using Javascript to determine width of a div and resize accordingly.
What I resize is the number of columns I want to display (I use Multi-Column module as suggested by cimmanon) which is pretty stable on webkit browsers. Since it is all done in Javascript (and jQuery's Sizzle) I keep an array of sizes like so:
var widthArray = [
{min:0, max:250, columns:1, secondary:false},
{min:251, max:350, columns:1, secondary:true },
{min:351, max:479, columns:1, secondary:true },
//more div sizes
];
// more code here
$(element).css({
"column-count": object.columns,
"-moz-column-count": object.columns,
"-webkit-column-count": object.columns
});
This is sort of like media-queries, but allows to work with width of html elements, not screen size alone.
Additionally I follow the way jQuery UI displays its components: using position relative/absolute.
.outer_div {
position: relative;
}
.inner_div_with_elements {
position: absolute;
z-index: 1010;
width: 99%;
float: left;
overflow: hidden;
...
}
.inner_components_displayable {
position: relative;
display: block;
}
.inner_components_hidden {
display: none;
}
So in Summary:
Media queries alone work with size of screen, and resizing of any inner element can be done in percentages to the screen size. They can be of huge help, but you turn into making your components work either with percentages based off screen, or specifying something like min-height and !important (as suggested by #Octavian)
Javascript manipulation of elements is currently easier, but is a costlier alternative (jQuery SIzzle is pretty slow)
A lot of libraries (ex. jQuery UI) use Javascript together with position relative/absolute to make sure their components/plug-ins will work nicely on all users' screen sizes.
I ended up combining position with javascript to emulate media-queries and multi-column design at the same time for responsiveness.
Thanks everyone who participated!
If I am reading this correctly, the main issue here is that it can potentially become too small based on where the code is located.
So why not just add a min-width property with !important? That way you can still base the size off of the parent container, but be sure that it doesn't get too small and ugly.
Potentially, you could even have a script to base the width off of the parent div and the min-width off of the screen size.