We Keep Coding

CSS - changing fixed width to a calculated width

Can I legitimately change a CSS width using JS from
width: 100%
to:
width: calc(100% - 180px);
i.e. will the CSS3 calc function work after JS has inserted it into the attribute?
There are probably better ways of doing this (float etc), but this is due to the appearance of a left navbar. Also will this work with JQuery methods for setting width?

I can't guarantee $().width('calc()') compatibility, but it should work if you directly set it as the width style.
$('myselector').css('width','calc(100% - 180px)');
But is there any reason you can't put it directly in the CSS?

I think you should approach this by other means. Here are some options:
Set box-sizing: border-box; on the element and add a 180px padding on the left.
Give the content wrapper (not containing the navigation bar) a left padding of 180px.
Note: box-sizing: border-box is arguably a preferable property for all elements, since it doesn't mess up your widths when setting paddings and borders.

try this :
Some of the browsers not support calc(); so please try following jquery
$('your id').css('width', '100%').css('width', '-=100px');

Referencing another element in CSS / doing math in CSS

I have two divs nested inside of a div.
<div id='outter' class='one'>
<div id='inner'></div>
<div id='button' class='bttn'>Click me!</div>
</div>
The outter div's height is a percentage of the page. I'd like one of the inside div's height to be a fixed difference away the outter div (i.e. $('#inner').height($('#outter').height() - 35)), because the second inner div is essentially a button with fixed height (35). I'd like this to happen even when I change the height (through CSS triggers (:hover/adding a class/etc. so I can use Transitions) or otherwise).
I googled around a bit and saw Less might be an answer, but from what I can tell it compiles in to static values, but I still need to use percentages, since I want this app to work/feel the same on any screen size.
I have examples of what I'm currently doing/how I'm thinking about it in some jsfiddles.
Current 'solution': http://jsfiddle.net/L9NVj/5/ (End heights are what I want them to be, but the transition looks terrible)
Idealistic 'solution': http://jsfiddle.net/L9NVj/6/ (End heights are wrong, but the inner div hugs appropriately)
Potential solution: http://jsfiddle.net/L9NVj/7/ (This hides the inner div on click and then shows it again when the appropriate size has been reached)
Any help/thoughts/insights would be greatly appreciated!

Consider absolute-positioning the inner elements, since the outer's size isn't controlled by their size/position.
#inner {
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 35px;
/* ... */
}
.bttn {
position: absolute;
bottom: 2px;
left: 2px;
/* ... */
}
Example: http://jsfiddle.net/L9NVj/9/

How about conflicting absolute positioning. To do it, you'd just need to set the top, bottom, left and right of the #inner element and then transition those. That will maintain the distances around the edges of the element, and allow other positioning as well.
Note that while you don't need to actually calculate the value in this case, in the future, calc() can be used to calculate a dynamic value in CSS. In that case, you could do something like height: calc(100% - 37px); to get the same effect.

CSS3's calc() is the answer you're looking for, in combination with a JavaScript fallback for browsers that don't support calc(). In your 'Idealistic solution' fiddle, change your CSS height definition to the following:
height: -webkit-calc(100% - 35px);
height: calc(100% - 35px);
While normally you should include all prefixes (and you still may need to, depending upon your level of browser support), according to Can I Use, the only browsers that currently need prefixing are -webkit browsers.
What I would do with this knowledge is the following: grab a feature detection script, I really like Modernizr and detect to see if calc() is available in the browser. Modernizr has a non-core detect for calc() that you can use. Use that CSS in your CSS file as the default, then using a resource loader such as yepnope (comes with Modernizr), load in a JS solution if calc() isn't available.
Of your JavaScript solutions, I'd probably suggest your "Potential Solution" option, but instead of jQuery's hide() and show(), set opacity to 0 and 1 and use a CSS3 transition to transition between the two. I'd also not rely upon a timeout, but rather use the transitionend JavaScript event.

I edited your first jsfiddle little bit i think that's what you wanted. Just added line.
$(window).resize(function(){$('#inner').height($('#outter').height() - 35)});
jsfiddle:http://jsfiddle.net/Qqb3g/
You may have to some workaround to make transition smooth when button the button is clicked.

you need to calculate the inner div in %, so it can resize belong outer div, change your js code to this :
//calculating inner div'x height in % of outer
$('#inner').height((100 - (33/$('#outter').height() * 100)) + '%');
$('#button').click(function () {
$('#outter').toggleClass('two');
});
give a try to DEMO

Image scaling size dependent on browser size

Using this site as an example : http://www.reebok.com/en-GB/
The header div height adjusts dependent on the size of the browser, and the inner content has 100% height & width.
Is this controlled by javascript of can this be done solely with CSS?

You can only do this with the help of html & css. Write like this:
img{
width:100%;
height:auto;
}
check this http://jsfiddle.net/e8V47/

In your page, it's actually Javascript which is used.
The height of the container is modified inline (the style attribute)
<div class="module module-hero use-full-width displayed" data-module="Hero" style="height: 232px;">
It's however possible to do a similar thing with CSS, using % in height. For example :
.module{
height:40%; // A percentage relative to the parent element
}

the image in your example is adjusting by browser, it's in , if you only set up the width or height, the browser will adjusts another automatically.

My webpages div doesnt set dynamic width correctly

I have 2 toolbars, 1 of each side of the screen, and a main content area. I dont want it to have to sidescroll cause that is pathetic, so i was trying to figure out if someone could help me set it up.
My current attemp was:
$("#main").css("width", window.outerWidth - $("#t1").width() - $("#t2").width());
The issue is that it is too big still because of margins. Instead of me doing width, should i do outerWidth, similar to how i did window, or is there a jquery command which will do just that?
Thanks
here is a basic fiddle: it is set up differently, but the idea is there. I just am unsure as to how to do it. http://jsfiddle.net/fallenreaper/DfZx7/
Upon tinkering deeper and deeper with my fiddle, i am fairly certain i figured it out in the example i had given. derp Standby while i look and see if i can apply the same thing to my code.
The sample did not work with my code, but border was set to 2px around, for both main and attributes. Deducting 8 pixels resolves.

You don't need JavaScript to avoid scrollbars. It's a layout width two fixed-width columns and a liquid one.
Here is the "skeleton" of your layout in a responsive way:
<div id="window">
<div id="column-sx"></div>
<div id="main"></div>
<div id="column-dx"></div>
</div>​
CSS:
#window {
width:100%;
overflow:hidden;
}
#column-sx {
width:54px;
float:left;
}
#column-dx {
width: 140px;
float:right;
}
#main {
width:100%;
float:left;
margin-right:-194px; /* left + right col width */
}
#main > * {
margin-right:194px; /* left + right col width */
}
This way it will never "break" nor cause an horizontal scrollbar.
Anyway, probably you want to set a min-width for #main contents, and add another container for contents instead of targeting them with > *
Check this fiddle with your code revised

Off the top of my head, i would think outerWidth would work. If it doesnt, you can find the margin value via the .style attribute - but thats not ideal.
One thing you should be aware of is window resize if your setting your widths dynamically and you truely hate horizontal scrolling. You could put the above function also in the $().resize() function to ensure the widths are always within the window and complement this with css min-width so it doesnt go too small.

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).