Develop Reference

setting min-height via jquery

This is the code I'm trying to use in order to set the height of a background div to always cover at least the background of the maindiv + the footer I have set up.
var bgheight = $('.maindiv').css("height");
$('#background').css('min-height', bgheight+'75px');
For some reason the code won't even apply to the #background div and I'm starting to run out of ideas.
When I do something like this
var bgheight = $('.maindiv').height();
$('#background').css({'min-height':beheight+'75px'});
The style is applied but the min-height is gigantic, like almost 50000px tall.
Any ideas?

You are making a string concatenation, not a sum.
Try this:
var bgheight = $('.maindiv').height();
$('#background').css({'min-height': (beheight + 75) + 'px'});
To ensure you are not concatenating strings, you can set Number() function.
var bgheight = Number($('.maindiv').height());
$('#background').css({'min-height': (beheight + 75) + 'px'});
OR (two parameters instead of object)
$('#background').css('min-height', (beheight + 75) + 'px');

How to set a CSS property with a variable in JQuery?

I need to set the CSS property of width as the same size as the browser's current width. To do this, I did var setWidth = $(window).width(), but I don't know how to apply this to my current code, which is something like this:
$(document).ready(function(){
$("#backgroundImg").css("width", "");
});
Is there any way to do this? I'm new to JQuery so I might just be really amateur.

Try this
$(document).ready(function() {
var setWidth = $(window).width();
$("#backgroundImg").css("width", setWidth + 'px');
});
or you can use $.width
$(document).ready(function() {
$('#backgroundImg').width( $(window).width() )
});

update code to following
$("#backgroundImg").css("width", setWidth + "px");

One option: $("#backgroundImg").css("width","100%");
with your variable option do: var setWidth = $(window).width() +'px';
so your code would be
$(document).ready(function(){
$("#backgroundImg").css("width", setWidth);
});

This should make the background match the browser's current width:
$( "#backgroundImg" ).width( setWidth )
Source

What is wrong with following javascript code

what is wrong with the following code? I had problem to mix double quotes, with single quotes. so, I defined separate method for onclick. Some how it seems syntax is not right
<table style='border-style:none; cursor:pointer;' onclick="myFunc()" >
function myFunc() {
width1= getWindowDim().width;
height1= getWindowDim().height; opt23='resizable=yes,fullscreen=yes,location=no,toolbar=no,directories=no,status=no,menubar=no,scrollbars=yes,fullscreen=yes,width='+width1 +',height='+heigh1;
window.open('http://ibm.com','popupwin',opt23);
}

Use jquery for height and width it may work
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document

Try this, onclick had missing double quote
<table style="border-style:none; cursor:pointer;" onclick="myFunc()" >
function myFunc() {
width1 = getWindowDim().width;
height1 = getWindowDim().height;
opt23 = 'resizable=yes,fullscreen=yes,location=no,toolbar=no,' +
'directories=no,status=no,menubar=no,scrollbars=yes,' +
'fullscreen=yes,width= ' + width1 + ',height=' + heigh1;
window.open('http://ibm.com','popupwin',opt23);
}

JQuery - Automatically changing image width

I'm creating a website and I have a problem with IE compatibility. My idea to fix this is to have a JQuery script that changes the images width proportional to the window.
However, my script isn't working.
$(document).read(function() {
updateSizes();
$(window).resize(function() {
updateSizes();
})
});
function updateSizes() {
var $windowHeight = $(window).height();
var $windowWidth = $(window).width();
$(".fadingImg").css("width",$windowWidth * 0.7)
}
I have tried adding + "px" to $(".fadingImg").css("width",$windowWidth * 0.7)
My JQuery implementation is:
<script src="http://abrahamyan.com/wp-content/uploads/2010/jsslideshow/js/jquery-1.4.3.js" type="text/javascript"></script>

It should be
$(document).ready(function() {
not
$(document).read

You need to add px but in the right place
$(".fadingImg").css("width", ($windowWidth * 0.7) + "px")
You also need to make sure that you have class="fadingImg"
You also need to make sure that you put it within a ready block
$(function() {
//code here
});

Instead of using JavaScript for this solution, why not use CSS?
.fadingImg { width: 70%; }

if your fadingImg is a <img>, then try to set the attribute
$(".fadingImg").attr("width",$windowWidth * 0.7)

document.getElementById(); does not work for third time

Determine Minheight and put it via javascript. It work successfully twice but same code is not working in third calling. This one (document.getElementById("rightadmin").style.minHeight=wrapHeight+'px';) is not working. More amazing is that if I make the 3rd one elevate to 2nd position then it works and then 3rd one not working. So basically whatever I put after 2nd one don't work.
JavaScript:
function height(){
var dheight= ($(document).height());
var wheight= ($(window).height());
if(dheight>wheight){
var wrapHeight= dheight;
}
else {
var wrapHeight=wheight;
}
document.getElementById("iframeArea").style.minHeight=wrapHeight+'px';
document.getElementById("dailySchedule").style.minHeight=wrapHeight+'px';
document.getElementById("rightadmin").style.minHeight=wrapHeight+'px';
}
html:
<body onload="height();">
<!--Start of iframeArea-->
<div class="iframeArea" id="iframeArea">
<div class="btnRight" id="rightadmin">
</div>
<!--End of btnRight-->
</div>
<!--End of iframeArea-->

Are you sure the dailySchedule id exists ? If not your function will throw an error and won't execute the last line.

Might be due to scope problems - the variable wrapHeight is local in two blocks.
Should not have any effect on the outcome, but this code is more elegant way to assign the third variable:
var dheight = $(document).height();
var wheight = $(window).height();
var wrapHeight = (dheight > wheight) ? dheight : wheight;
As all others already said, something else is the problem.

I don't see element with id=dailySchedule on the page. If no element with that id is on the page you should get an error. Check browser console for javascript error.

you say <body onload='height()'> and never check if the document is ready, and then there is perhaps no div with id rightadmin...
Try to convert to jQuery and do something like this and delete the onload attribute.
$(document).ready(function(){
//your code here
}

I am using now the following code. It works fine for everything.
$(function(){
var dheight= ($(document).height());
var wheight= ($(window).height());
var wrapHeight = (dheight > wheight) ? dheight : wheight;
$('.dailySchedule').css({ "min-height": wrapHeight + 'px' });
$('.iframeArea').css({ "min-height": wrapHeight + 'px' });
$('.btnRight').css({ "min-height": wrapHeight + 'px' });
});
Thanks for answeri