We Keep Coding

Jquery width() Function Doesn't Return The Full Width of My Window

I am trying to get full size of my window(browser) which is 1366px. I use jquery width() function to achieve this. But It returns 1349px instead of 1366px. Therefore my slider appears 17px less than it should be. What did I do wrong you guys think?
var theWithObj = $('body').width();
console.log(theWithObj); //It returns 1349 but actual 100% size is 1366
Thank you!

Try
$(window).width();
If that's still not 1366 then you've probably calculated that number incorrectly - if you think you've calculated it correctly and jQuery's still wrong then please tell us how you came to find the width as 1366 :)

Using $(window).width() will give you the width of the browser (with or without srollbars)
If you use only $('body').width(), you'll get the width of the page only (so the width of the browser minus the width of the scrollbars.
alert($(window).width());
alert($('body').width());
FIDDLE

For solve the problem add this rule css:
body {overflow:hidden;}

Font size relative to container

i am designing a site that adjusts itself to the window size, and i need to make the text size relative to it's container (a div). I searched about doing it with css, and found out that it is not possible. So i am trying with JavaScript, but i am not a JavaScript programmer. So i searched each piece of the code i needed and compiled it to this:
<script type="text/javascript">
$(document).ready(function() {
while(true) {
document.getElementById("text").style.fontSize = $("container").height();
}
});
</script>
(the "while" is to re-size it constantly, considering that the user might re-size the window)
I put the script in the "head" tag, and it doesn't work. I don't know if the script is wrong, or if it is not running. What am i doing wrong?
Also i want to put a delay in the end of the script, to avoid it running like crazy, but i don't know how to do that.
Thanks in advance,
Luca
Thanks to the answers, but nothing working.
I guess that the script is not running, what can be wrong??? Please help!

http://jsfiddle.net/AyRMC/
You can use viewport units:
.vw{
font-size:3vw;
color:red;
}
.vh{
font-size:3vh;
color:green;
}
.vmin{
font-size:3vmin;
color:blue;
}
Doesn't have full support quite yet, but IE10, Chrome, Firefox, and Safari all support it.
One downside (or possible upside) is that, at least in chrome, the text doesn't scale as the viewport is resized.
Compatibility: http://caniuse.com/viewport-units

You should try something like this instead (if I understand correctly what you want to do):
$(".container").each(function(){ //if container is a class
$('.text', $(this)).css({'font-size': $(this).height()+"px"}); //you should only have 1 #text in your document, instead, use class
});
or something more like this
$(window).resize(function(){
$('.text').css({'font-size': $('#container').height()+"px"});
});

If you mean that you are making a responsive site, then you can change the font-size based on document.documentElement.clientWidth inside of the window resize handler.
Also, you can use em units instead of pixels which are scalable and mobile-friendly.
CSS3 also has a new interesting "root em" unit :
CSS3 introduces a few new units, including the rem unit, which stands
for "root em". If this hasn't put you to sleep yet, then let's look at
how rem works.
The em unit is relative to the font-size of the parent, which causes
the compounding issue. The rem unit is relative to the root—or the
html—element. That means that we can define a single font size on the
html element and define all rem units to be a percentage of that.
http://snook.ca/archives/html_and_css/font-size-with-rem

Try this:
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(function() {
document.getElementById("text").style.fontSize = $(".container").height();
// let container is a class
});
});
</script>

You can use the .resize() event handler which will only fire when the window is resized
var constant = [Some magic number]
$(window).resize(function() {
var fontSize = $(this).height()*$(this).width()*constant;
$(html).css("font-size",fontSize)
}
Using a constant to calculate the font size based on the new width/height

IE8 max-height in percentage?

So I am trying to use the CSS hack to set the max-height for a div in IE8 like this
height: expression( this.scrollHeight > 333 ? "333px" : "auto" );
I was wondering if anyone knew of a way to change that to a percentage, instead of a fixed pixel size? It would be fantastic if you could. Thanks!
Basically, I just want to say if this.scrollHeight is > window.height * .75 or something.
-Geoff

Not sure exactly what you want to accomplish but it can be done without javascript like this:
http://jsfiddle.net/KFyM4/6/
The trick is this:
max-height:33%;height:auto !important;height:33%;
And it works even in IE6. The only catch is that the parent element has to have a fixed height set so that it knows from what number to calculate the %.
So if you are doing it on browser window you will have to get the height of window and apply it to your body trough javascript - rest can be done trough css.

How can I hide some ID elements using Javascript if the browser window is less than a given size?

I have been looking for an answer to this problem for hours and can't find anything that works.
I need to make some elements if a web page not visible if the browser window width is less than a given size. This is because there are some fixed position "buttons" on the left side of the window which expand when rolled-over, BUT if the window is less than about 1056 pixels in width, the buttons overlap the main page contents.
I have a script for returning the window size and putting that value into a variable.
I have got it to show a message if the variable value is less than 1056. (for testing)
I have seen ways how to make things visible or not with jQuery and and with Javascript but none of them work for me.
The id of the image I'm trying to hide is #go2.
here is a part of the script I have been trying to get to work:
if (viewportwidth <1056)document.write('<p>Your viewport width is LESS than 1056</p>');
if (viewportwidth <1056)document.getElementById('go2').style.display = 'none';
I have had to use {literal} tags as the pages are using SMARTY templates!
I am very new to javascript and jQuery and wouold appreciate any help.
Thanks.

To make sure that the behavior happens when the user resizes the window, you can also bind to the resize event:
jQuery(window).resize(function() {
if(jQuery(window).width() < 1056) {
jQuery(".hide-these").hide();
}
});

You can do, with jQuery:
if(viewportwidth <1056) {
$('.target').hide();
}
Also, you can hide the elements with CSS3, like so:
#media only screen and (min-width: 1056px) {
#go2 {
display:none;
}
}

CSS3 media queries do what you want without Javascript, however browser support is pretty patchy:
http://www.w3.org/TR/css3-mediaqueries/
Alternatively, you could use Javascript as you've suggested above, with the usual caveats about JS being turned on etc. JQuery makes it easier, if you like Javascript libraries:
http://www.ilovecolors.com.ar/detect-screen-size-css-style/
If not, there are plenty of tutorials you can Google that explain how to query window size with Javascript.

Adjusting elements based on scrollHeight using JQuery

Here's what i have so far:
function loadOff(){
$(document).ready(function(){
$("#eLoader").ajaxStop(function(){
$(this).hide();
$("#eventsContent").show();
var h = document.body.scrollHeight;
$("#bodyBackground").css("height",h+100+"px");
$("#sidePanel1").css("height",h-105+100+"px");
$("#bottom").css("top",h+100+"px");
});
});
}
This is a callback function for a JQuery ajax function, basically what is does is when all ajax is finished .ajaxStop() it hides the loader then shows the content.
The problem i am having is adjusting bodyBackground, sidePanel, and bottom to fit the content. I dont care to have it elastic and retract for short content at this point, i would just like it to extend to proper positioning based on content length.
All divs are absolutely positioned. The numbers in the function are broken down simply to make it easy to explain. -105 is the offsetTop of that element and +100 is the margin between the end of the content and the elements.
if there is a better, more efficient way to achieve this outcome, please, do tell.
Thanks.

Based on your code, the only thing you ought to see is the top 105px of #sidePanel1. Is that your intent? (h = the bottom of the window, according to your code.)
Sticking with the JQuery patterns, you would use
var h = $(window).height();
Maybe you're looking for this instead of the browser window's height? It will get the height of the content element.
$("#eventsContent").outerHeight();