I'm pretty confused! with this:
...
<div id="main">
<div id="content">
<div class="col1">
...COLUMN1 CONTENT GOES HERE...
</div>
<div class="col2">
...COLUMN2 CONTENT GOES HERE...
</div>
</div><!-- #content -->
</div><!-- #main -->
...
there are columns as you see, and I want to set their container element's height to the maximum size of both columns(plus 130px). so by using Prototype framework:
//fixing column height problem
Event.observe(window,"load",function(){
if(parseInt($('col1').getStyle('height')) > parseInt($('col2').getStyle('height')))
$('main').setStyle({'height' : parseInt($('col1').getStyle('height'))+130+'px'});
else
$('main').setStyle({'height' : parseInt($('col2').getStyle('height'))+130+'px'});
});//observe
It working nice in Firefox, Opera, Safari & Chrome but it fails to return the actual height of columns. in IE7+ (not tested in IE6) it returns NaN as columns height.
I've managed to find out that's because of this:
.col1,.col2{"height:auto;"}
I've also used "$('col1').offsetHeight" and it's returning 0 as the height value of each column.
the HTML is styled in this way:
#main{
height: 455px;
background: #484848 url(../images/mainbg.png) repeat-x;
}
#content{
/*height:80%;*/
width: 960px;
direction: rtl;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.col1,.col2{
width: 33%;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}
.col1{padding-top:20px;}
.col1 ul{
margin:0;
padding:0;
list-style: url(../images/listBullet.gif);
}
.col1 ul li{
margin-bottom:20px;
}
.col2{
top: 0;
right: 70%;
position: absolute;
}
any idea on the issue please?!
update/ It tooks three days to solve, and I was at the very risk of making a bounty!
for the solution please take a look at this question/answer.
As a completion for Marc's answer; There's an equal for jQuery's height() in Prototype:
$('col1').getDimensions().height //or .width ofcourse
And here's the docs: http://prototypejs.org/api/element/getDimensions
Update: I agree with crescentfresh below. Since I had the absolute same problem in the past, I've searched all possible methods to find the dimension properties but I failed as you will. please take a look at this:
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
As you see, the function has been written to get the computed rendered current style of an element, but in our case even this method will fail, I guess. (worth a try)
So, as crescentfresh said, you have to find the problem in your CSS positioning method while not wasting your time seeking for a proper javascript function which could be able to do the magic. let's begin by removing that #content DIV and letting the #main to be the only wrapper of said columns, and then styling the remain to achieve the desired goal.
Since IE wants to give you a hard time, you can give it some special attention and use a property that I believe it will recognize...
var height;
if(document.all) { //This means it is IE
height = document.getElementById('col1').offsetHeight;
}
else {
height = //Use what is working in other browsers now
}
From:
Why would jquery return 0 for an offsetHeight when firebug says it's 34?
An element that is not actually taking
part in the document render process
has no dimensions, and will give an
offsetWidth/Height of 0.
Both Prototype's getDimensions() and jQuery's height() read the offsetHeight or clientHeight properties, which you've tried and got 0. So somewhere in your code there must be something taking #col out of the rendering flow. That's all I can think of.
Artarad,
The above style i.e. css shows that you have not assigned height.
Please try adding _height:auto in class which will look like
.col1,.col2{
width: 33%;
_height:auto;
height:auto;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}
Basically, many browsers fail to recognize the height when assigned to a particular div or any element . In this case we use the above work arounds.
I hope the above helps you.
Thanks,
Samiksha
I don't know if it will work (without testing), but you could try jQuery and height(); this (in theory) gives the computed height. Worth a try...
I know this is an old question but I found a better answer than "Fix the css and forget the javascript".
I had the exast same problem and used .innerHeight() and it forced jQuery to calculate the height. For some reason .outerHeight() did not work whilst .innerHeight() solved the problem. Not sure if there is a similar method for prototype. You could look into the jQuery library and figure out how .innerHeight() works, and write your own.
Related
Working on a project requiring old-school CSS support and want to keep <aside> filling up the page by remaining the same height as the <article> element's box (It may be between a header and footer, in which case it would not extend past them.)
<article id="article">
...
<aside id="sidebar">
Here's my attempt at dynamically setting the height. It doesn't seem to work.
<script>
function sidebarHeight() {
sidebar=window.document.getElementById('sidebar')
article=window.document.getElementById('article')
sidebar.style.height=article.style.height;
console.log('article.style.height: ' + article.style.height);
}
window.onresize=sidebarHeight;
</script>
This doesn't work because article.style.height always has the value "" instead of the current height. How can I keep the sidebar stretched vertically in sync with the article height?
By the way, can someone explain why the only way to get at properties like height, or at least color, which I know works, requires a call to getElementById()? If I use the more logical-sounding getElementsByTagName('article') I get access to a much more limited set of properties.
To get the calculated height onresize you need to use .offsetHeight and you need to add a unit to the returned value.
sidebar.style.height = `${article.offsetHeight}px`;
also, your DOM queries should just be called on document
sidebar = document.getElementById('sidebar')
article = document.getElementById('article')
article {
float: left;
height: 40vh;
width: 75vw;
background-color: gray;
}
aside {
float: right;
width: 20vw;
background-color: tomato;
}
<article id="article"></article>
<aside id="sidebar"></aside>
<script>
function sidebarHeight() {
sidebar= document.getElementById('sidebar')
article= document.getElementById('article')
sidebar.style.height= `${article.offsetHeight}px`;
}
window.onresize=sidebarHeight;
</script>
I'm new to jquery and I'm having some trouble with it.
.pageimage {
width:80%;
height:60%;
margin:0 auto;
background:#0FF;
position:absolute;
left:;
top:20%;
}
Using jquery, I'm trying to find the pixel value of 'top', subtract 50% from that value, and then place that value on the 'left' property.
Also, does anyone know how to rerun this script after the browser window has been resized?
Help is greatly appreciated.
You can easily do this, using the .css() method creatively. If you get the .css("top") of an element, it is returned in px, so you have to replace("px","") to be able to use the numeric value, then divide by 2, then add the "px" at the end again.
Wrap this up in a function and call it when your page loads. Then add a $window.resize() handler to run the function every time the window is resized after it's loaded.
Here's a full example:
function updatePageImageLeft() {
var calculatedLeft = $(".pageimage").css("top").replace("px", "") / 2 + "px";
// console.log(calculatedLeft);
$(".pageimage").css("left", calculatedLeft);
}
// Called when the page loads
updatePageImageLeft();
// Page has been resized, call it again
$(window).resize(function() {
updatePageImageLeft();
});
.pageimage {
width: 80%;
height: 60%;
margin: 0 auto;
background: #0FF;
position: absolute;
/*left: ;*/
top: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageimage"></div>
Note: You might also want looking into the CSS calc() function, as it could help you avoid writing any Javascript/jQuery code in the first place (especially if you combine it with CSS custom properties).
To get the Value of "top" you can youse the function css.
var top = $(".pageimage").css("top");
$(".pageimage").css("left",parseInt(top)* 0.5);
to rerun the script after the window has been resized use:
$(window).resize(function() {
//place Code here
}
Link to jsfiddle
Edit
use parseInt to get the int-Value of top
I've got HTML+CSS code. I need 1st div (row-1, white colored) to take first half of the container height, and 2nd div (row-2, orange-colored) to take the second part.
Here is my html:
http://pastebin.com/ipiEKHBZ
and my css:
http://pastebin.com/jtxw695F
Revised answer: After realising the default approach did not work with your HTML, this should work. You have classes .content-row-1 and 2 respectively. You can use those to tell the corresponding rows to always use a certain portion of the height. For this to work you also need to manually fix the positioning. (Someone correct me if this can be done more elegantly) For example those classes could look something like:
.content-row-1 {
background: #eee;
position: absolute;
top: 10%;
display: block;
height: 40%;
width: 100%;
}
I noticed that your footer already takes 10% of the height and and assumed you did not want any overlap or gaps. For that to work you should also give your header a percentage for height (10% in my example to keep things simple).
And for the future: try using https://jsfiddle.net/ when showing your code samples. I put it together at https://jsfiddle.net/kvbyk3f1/.
If I have a div acting as a container that when empty shows an image, and I want to remove that image when content gets added to the container dynamically, what would be the best Jquery method to accomplish this? Doing the usual -
if ($(".container").html().length <= 0) {
$('.ad').show();
}
does not work in this case since the content being added is dynamic and does not involve a refresh. I tried storing the check in in a setIntercal function that would run every 100ms but the results didn't turn out as expected and it also caused some odd flickering on the page.
EDIT**
Josh Burgess' method would be the one I use in all cases if I didn't have to support IE8. Because of this I'm going to fall back to adding a .hide() method on the when the click event for adding content is fired. Thanks for the help!
Why use jQuery at all?
Try this CSS:
div.myDiv:empty{
background-image: url(path/to/myimage);
height: 50px;
width: 50px;
}
div.myDiv {
background-image: none;
height:auto;
width: auto;
}
--EDIT--
Here's a working example in jsfiddle, and it works in reverse as well
I've been all over stackoverflow looking for a solid solution for this; however, I'm coming up a short. I believe my problem is just in my semantics.
http://jsfiddle.net/hzRAN/10/
here's some sample code.
For best results: I would love for this script to re-adjust if there is a page width change.
the real code is linked from this website
http://designobvio.us/DoUs/Blog.html
its a fluid layout which is why I need the horizontal list item to justify itself correctly.
Thanks for the help !
The only way you can accomplish this is by setting the width of each list item or by using padding:
ul {
list-style: none;
margin-left: 0;
padding-left: 0; /* remove the indention */
overflow: hidden; /* to enclose the float children */
}
li {
width: 20%; /* actually, use some slightly undersized value to supply a bit of slop */
float: left;
}
If you are looking to use jQuery to achieve this, use the window.resize function, and then call that function on load.
$(document).ready(function(){
$(window).resize(function() {
// your code here:
});
$(window).resize();
});
I have managed to get a quick example running on jsfiddle (I forked yours) http://jsfiddle.net/rSeaE/1/ but its having trouble due to the width of the #daymenu I think.