We Keep Coding

set a style value from a javascript var

I want to set the height of a cell in a table but i want to be dynamically. I take the height of the window from javascript and then i want to embed it in div style.
<script language="javascript">
var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
if (height>900 )
{
set_height = "500px";
} else if (height>700 && height<900) {
set_height = "400px";
} else if (height>500 && height<700) {
set_height = "300px";
} else if (height>300 && height<500) {
set_height = "300px";
}
</script>
<table border ="1">
<tr><td>
<div style="height: set_height">
</div>
</td></tr>
</table>
IS IT POSSIBLE?

As mentioned, add an ID to your div:
<table border="1">
<tr>
<td>
<div id="mydiv"></div>
</td>
</tr>
</table>
Wrap your JS in a window.onload function and add the height by identifying your div:
window.onload = function () {
var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
if (height > 900) {
set_height = "500px";
} else if (height > 700 && height < 900) {
set_height = "400px";
} else if (height > 500 && height < 700) {
set_height = "300px";
} else if (height > 300 && height < 500) {
set_height = "300px";
}
// Identify your div by the ID you just put on it and add the height.
document.getElementById('mydiv').style.height = set_height;
}
If you want this function to be called when your window resizes you just replace window.onload with window.onresize:
window.onresize = function() {
// code as above
}
And trigger it so it works on window load:
window.onresize();
Fiddle

best way for this goal is:
<script>
var set_height = "10px"
document.getElementById('test').style.height = set_height;
</script>
<div id='test'></div>

If by "dynamic" you mean you want it to change then what you would need to do is change the style value every time a specific event is fired, say for example when the window resizes.
Something like this:
window.onresize = function () {
var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
if (height > 900) {
set_height = "500px";
} else if (height > 700 && height < 900) {
set_height = "400px";
} else if (height > 500 && height < 700) {
set_height = "300px";
} else if (height > 300 && height < 500) {
set_height = "300px";
}
document.getElementById('myDiv').style.height = set_height;
};
window.onresize();
assuming your DIV has an id value of myDiv, for example:
<div id="myDiv">
</div>
Here is a working example
NOTE: I may have misunderstood the question, if you just want it to load when the page loads (one time only) then you can use the window.onload event instead

Why isn't Chrome running this Javascript?

The script works perfect in FF and IE, but not in Chrome. Could someone help med to locate the problem?
The if statmenst seems not to be runned when they are supposed to, they do nothing when the should.
var top = 285;
var bottom = 650;
var pageheight, maxscroll;
window.onload = function(){
pageheight = document.body.offsetHeight;
maxscroll = pageheight - (bottom+40);
}
window.onscroll = function(){
var element = document.getElementById("guide-menu");
if(window.pageYOffset < top){
element.style.position = "absolute";
element.style.top = "300px";
}
if(window.pageYOffset > top){
element.style.top = "10px";
element.style.position = "fixed";
element.style.marginTop = "0px";
}
if(window.pageYOffset > maxscroll){
element.style.position = "absolute";
element.style.marginTop = (pageheight - bottom - 40) + "px";
}
}

"top" has different meaning in chrome. Just try to rename top variable.

The "top" variable returns the topmost browser window. Chrome is the only major browser not supporting overriding this variable.
Renaming your variable to something like "myTop" works perfectly.
This code works well.
var myTop = 285;
var bottom = 650;
var pageheight, maxscroll;
window.onload = function(){
pageheight = document.body.offsetHeight;
maxscroll = pageheight - (bottom+40);
window.onscroll = function()
{
var element = document.getElementById("guide-menu");
if(window.pageYOffset < myTop)
{
element.style.position = "absolute";
element.style.top = "300px";
}
if(window.pageYOffset > myTop)
{
element.style.top = "10px";
element.style.position = "fixed";
element.style.marginTop = "0px";
}
if(window.pageYOffset > maxscroll)
{
element.style.position = "absolute";
element.style.marginTop = (pageheight - bottom - 40) + "px";
}
}
}
By the way, check that you are puting the right conditions for the IF statements. If you want a menu which scrolls with the webpage, then you have to exchange the two first if conditions.

Detect vertical scroll and scrollbar width and apply width change to body

In my page, I wish to detect whether the page has vertical scrollbars, and if so, need to detect the width of the scrollbar, so I can reduce my body by the width and thus prevent my sidebar from changing location from viewing a non-scrolling page to a scrolling page.
I have the following jQuery/Javascript code:
$(document).ready(function () {
var parent, child, width;
if (width === undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() - child.height(99).innerWidth();
parent.remove();
}
if ($("body").height() > $(window).height()) {
//change width of body here
}
});
Unfortunately, this code doesn't work for me. Can someone please let me know where I'm going wrong?

(function($) {
$.fn.ScrollBarWidth = function() {
if (this.get(0).scrollHeight > this.height()) { //check if element has scrollbar
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild(inner);
document.body.appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild(outer);
return (w1 - w2);
}
}
})(jQuery);
Runs like so :
var scrollbarWidth = $('body').ScrollBarWidth();
console.log(scrollbarWidth);​ //prints the scrollbar width to the console
FIDDLE

You shouldn't need to change the width of the body. By default, it's 100% of the window's width and will adjust when scrollbars appear.
However, if you can't for some reason set the width to 100%, first see if disabling the horizontal scrollbar helps you:
overflow-x: hidden;
If that doesn't cut it, use the function from here to get the scrollbar's width. Then, listen to the window resize event:
var $window = $(window),
$body = $('body');
function resize() {
if ($body.height() > $window.height()) {
$body.width($body.width() - getScrollBarWidth());
}
}
$(window).resize(resize);​

Popup window working out the height

I had a problem where I am position a popup <div> in the center of the window using:
var popup = $("#popup"), popupWidth = popup.css("width").replace("px",""), popupHeight = popup.css("height").replace("px","");
var xPosition = ($(window).width() - popupWidth) / 2;
var yPosition = (($(window).height() - popupHeight) / 2) + $(window).scrollTop();
if (yPosition <= 0){
yPosition = '0';
} else if(yPosition <= $(window).scrollTop()){
yPosition = $(window).scrollTop();
} else {
yPosition = yPosition - 68; //minus top shaddow height
}
if (xPosition >= $('body').offset().left) {
xPosition = xPosition;
} else {
xPosition = '0';
}
$(popup).css({
'top': yPosition + 'px',
'left': xPosition + 'px',
'display' : 'block',
'height' : 'auto'
}).addClass("popup-open");
The problem I had was that on first load the height of the popup was being returned as 0 because it is hidden until after the position above has been worked out. To resolve this I set a default height via CSS and then once the popup has been displayed I overwrite this to auto.
The problem now is that if the popup has been closed and re-opened the height is auto. Is there a way to find the CSS height:value in the stylesheet not the inline height:auto
Updated Code
Following Nicola answer here is the fixed code:
var popup = $("#popup"), popupWidth = popup.css("width").replace("px",""), popupHeight = popup.css("height").replace("px","");
// Save/Get original height
if(popupHeight == "auto"){
popupHeight = popup.data('origHeight');
} else {
popup.data('origHeight', popupHeight);
}
var xPosition = ($(window).width() - popupWidth) / 2;
var yPosition = (($(window).height() - popupHeight) / 2) + $(window).scrollTop();

Why don't you save the original values in a variable?
var popup = $("#popup"), popupWidth = popup.css("width").replace("px",""), popupHeight = popup.css("height").replace("px","");
var originalHeight = popupHeight;
var originalWidth = popupWidth;
When you reopen the pop up you use the original values instead of the actual values
Or you could use use data() to store it and retrieve it
$('#popup').data('origHeight', popupHeight);
//the use $('#popup').data('origHeight') to retrieve it

How do i get relative dimensions of scrollbale window viewport

I am having a Tooltip (larger image view) that is being positioned via e.pageX e.pageY and i am trying to make sure it is not hidden below the current scrolled view port.
I have seen many sites have this
my code is something like this but i am missing something.
var positionImg = function(e) {
var viewportWidth = $(window).width();
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
var mouseAtY = e.pageY;
var mouseAtX = e.pageX;
var maxBottomVPos = viewportHeight-"i dont know";
var maxTopVPos = 30;
if (mouseAtY >= maxBottomVPos)
{
tPosX = mouseAtX+ 10;
tPosY = mouseAtY -520;
}
else if (mouseAtY <= maxTopVPos)
{
tPosX = mouseAtX;
tPosY = mouseAtY +40;
}
else
{
tPosX = mouseAtX;
tPosY = mouseAtY +20;
}
$zoomContainer.css({top: tPosY, left: tPosX});
};

var maxBottomVPos = viewportHeight-"i dont know";
You probably don't want to go any lower than the height of the element that you are positioning. So use the height of zoomContainer to figure out how much higher it needs to go. This way, the whole thing can be included. Of course, you'll have to consider that the user might shrink the screen too small to fit the container.
To get the scroll offset use scrollTop. With this you will have both the size of the viewport and how far down the viewport is.

I found the answer:
Quite simple:
var positionImg = function(e) {
cntnrH = $zoomContainer.height() + 230;
calHight = e.pageY - $(window).scrollTop() + cntnrH;
docH = $(window).height()
var mouseAtY = e.pageY;
var mouseAtX = e.pageX;
if (calHight >= docH)
{
tPosX = mouseAtX + 5;
tPosY = mouseAtY - cntnrH;
}
else if (calHight <= calHight){
tPosX = mouseAtX;
tPosY = mouseAtY + 15;
}
else
{
tPosX = mouseAtX;
tPosY = mouseAtY +20;
}
$zoomContainer.css({top: tPosY, left: tPosX});
};
doIt = $("img.hovelble");
doIt.hover(showZoomImg, hideZoomImg).mousemove(positionImg);
});