Can't set DIV equal to another DIV HTML/Javascript - javascript

for some reason, my wrapper div won't equal the same height as my maincontent div. I'll post the code and I would love if someone could help me understand why. Also, I can use jquery if need be
Javascript:
var wrap=document.getElementById('wrapper');
var left=document.getElementById('maincontent').style.height;
wrap.style.height=left;
HTML:
<div id="wrapper">
<!-- TemplateBeginEditable name="Main Content" -->
<div id="maincontent">
</div>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Background image" -->
<div id="image" style="background-image: ;">
</div>

I don't know if I have guessed right, but . . .
One possible cause of what you describe is the presence of a float instruction in the maincontent DIV.
See this jsFiddle example
In the example, the wrapper DIV is the wrong height -- it ignores the presence of the maincontent DIV, and the maincontent DIV appears to be below it.
This is caused by the float:left instruction in the maincontent DIV. A float will remove that DIV from the HTML flow, and the parent DIV will be missing that height. In fact, the maincontent DIV is overflowing the wrapper DIV.
SOLUTION:
Place a overflow:hidden or overflow:auto on the parent DIV (that is, on the wrapper DIV).
See this jsFiddle demo of the solution
Note:
position:absolute and position:fixed will also remove DIVs out of the flow. However, they cannot be "fixed" by using overflow:________. Manually setting the height of the containing DIV, or using javascript or some other wizardry may be necessary.

1- If you wan to get the rendered height of element use one of the clientHeight or offsetHeight or scrollHeight instead of style.height
2- make sure that wrapper has closing tag </div>
3- when setting height of element don't forget "px" after height value.
4- If you have images without height set for them in your div, you have to wait for images to be loaded before triggering height function. you may use $(window).load or some other methods...

You should know the difference between ele.style.height and ele.clientHeight.
I wrote a demo here,
http://jsbin.com/ninure/edit?html,css,js,console,output
May it help.

Related

How can I check, if all divs are fully visible inside an other div?

I have a div, called "wrapper", with responsive height and overflow-y auto (so scroll enabled). Inside this div are lots of other divs, called "box". So, for example, if there are 3 divs inside the wrapper and I see them all fully, nothing should happen. But if any of this divs inside the wrapper are not fully visible (on page load and page resize), an other div (called "button") should fadeIn.
I just found this post, but it doesn´t solve my problem:
stackoverflow post
HTML:
<div class="wrapper">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<div class="button">
My Button
</div>
My fiddle:
HTML + CSS
How can I check, if all divs are fully visible inside an other div (on page load and page resize)?
#
UPDATE:
My problem is, that "viewport" doesnt work for me, because the script has also to check what happens outside the viewport (dynamically). The height of my divs is responsive and so not every time all of it is in the viewport ...
... but for me, I found an other solution. Now I check the height of my main div (my main content) and if this div is smaller than the "wrapper" div, I will fadeIn the "button" div.
You can try this my friend"
if ($(".wrapper div").css('visibility') === 'hidden') {
// ...
}
When hosting your HTML:
Right click on your wrapper and inspect element
Hover over the first div inside of the wrapper, and it should become highlighted
Check to see if that div is visible on the page
Continue the above steps for every div in your wrapper
This seems to solve a problem that's the same as, or very similar to, the problem you're describing:
zeusdeux/isInViewport
The "examples" folder includes various examples where DIVs react to whether or not they are contained within a defined viewport div.
EDIT: After reading comments on the question, this seems to be the best resource for reading up on the general problem and solutions (even though isInViewport looks very useful as well):
How to tell if a DOM element is visible in the current viewport?

How to display only as many pictures within a div as there is space for them?

I have an empty div element like this:
<div class="mydiv"></div>
My product owner now wants to fill this div with pictures until there is no more space left (in vertical direction):
<div class="mydiv">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
<img src="pic4.jpg">
<!-- keep going until mydiv is full -->
</div>
Unfortunately, the size of this div element is unknown until the page is actually loaded since it's a responsive website and thus the size of the div is dynamically adapted to the size of the screen/browserwindow. We do know the size of the images though.
Is there a pure HTML/CSS solution for this?
The only way I can think of is to check the width + height of the div during runtime via JavaScript and then do the math to see how many pictures are probably gonna fit in there and then insert only the images that will probably go in.
Ok so there is a way to use it with "hacks" :
I made a first container that is the with you defined.
set overflow:hidden to this container
Then i made another container inside the first one but with greater width
Inside this container put all the images ( works vertically and horizontally, add float:left to my example to make it work horizontally )
Here is the example
You see that i made 4 images ( faked them with fix position divs ) and that we can see 2.5 of them because of the container width.
Hope this trick is what you're looking for :)
This is my solution in javascript :
var mydiv = document.getElementById('mydiv') // or by class not important
while(!(mydiv .offsetHeight < mydiv .scrollHeight
|| mydiv .offsetWidth < mydiv .scrollWidth)) {
mydiv.innerHTML = mydiv.innerHTML + '<img src="myimg.jpg" />;
}

jQuery scrolling doesn't show up

I'm writting a dynamic page using jQuery and I have a problem. I'm for example adding to my html file div's using append() function like this:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'></div>");
I will be creating different amount of that div's base on datebase so that's why I use this variable i to assign different id's for each div.
My problem is that even if I'm creating that div's in body and when I look at code they are in it, if I check body's height it is 0 (width is ok, something like 1200).
Main problem with that is when there are too many div's they are beyond screen but there is no scroll bar. It's something like div's aren't in body although in code they are in.
Could you propose me any solution for that? Or what am I doing wrong? My line of thought is that I'm using $(document).ready so html file is creating a page, but see empty body so height = 0 and all my div's are beyond body. What do you think about that?
Take care of positioning; position:fixed removes your divs from normal flow ->
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
as W3C says
An empty <div> does not have a height. Thus you could add as many as you want to the page and it will never get any longer. For the scroll-bar to appear you need to either set a height to the <div> with CSS like this:
.diamond_div{
height:100px;
}
Or add some content to the <div> so you would have something like this instead:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'>hello</div>");
Then your <div> would have height and once there are enough on the page to go beyond the height of the browser, the scroll-bar will then appear.
Following on from your comments. Setting the position to "fixed" removes the element from the workflow and thus will not extend the length of the page in the normal way.

Hide child <div>s as parent div shrinks?

I am trying to write a zoom in/out feature on a web app I am making using the jqueryUI slider.
I am having difficulty handling when my parent div shrinks too much, and cramps its child containers.
<div class="puck originator inline-block" style="width: 310.5px; left: 0px;">
<div class="conflicted inline-block originator">
<div class="right-number">I should stay</div>
<div class="left-number">I should stay</div>
<div class="middle-number">I Should disapper</div>
</div>
</div>
Here is the relevant section of code I have
http://jsfiddle.net/aQKwE/
Basically I have the parent div (class 'puck') that is being shrunk using a jquery slider. For this code I just used a text box, but same idea.
When I shrink that div, the containing divs stick around and are very garbled.
I want to be able to remove the middle child div when it becomes to cramped, leaving the left and right child divs to occupy all the space
Furthermore, if it becomes to cramped yet after that, I want to remove the right div, leaving only the left.
Finally I want to be able to remove all contents so that nothing more than the background of the parent shows.
Is there a way to do this easily, preferably through CSS? I don't want to write more javascript code to set 'display:none' on each child div, since it seems like some CSS rules should handle this.
Any ideas?
There's not really any logic built into CSS to handle something like this. You can set rules based on viewport size, but that won't help in this case.
I updated your jsfiddle with this code so you can test it and see what you think, but essentially I just added some checks in your javascript function to hide based on the width submitted.
var newwidth = $('#text').val();
$(".middle-number").show();
$(".right-number").show();
if (newwidth < 280) {
$(".middle-number").hide();
}
if (newwidth < 180) {
$(".right-number").hide();
}
$('.puck').css('width',newwidth);

get contents height of div that has oveflow:hidden style

I'm designing a vertical scroll-bar plugin for jquery. my plugin accepts a height value as option and if the div height exceeds the given height the scroll-bar will be visible. now the problem is I need to get the real height of the div content.
<div id="scroll">
Contents Here
</div>
jquery:
$.fn.vscrollbar = function (options) {
.
.
.
var contentHeight=this.contents().height() //that is not working correctly
if(contentHeight > options.height){
this.css({overflow : 'hidden'}).height(options.height);
}
.
.
.
})(jQuery);
I can get the height of div before applying 'overflow:hidden' but the problem is I want this to work even if it has overflow:hidden style from the begining.
You should have a hidden div on the page, of the same width but overflow auto. As soon as your plugin is called/instantiated, take the height of that hidden div and do what you want.
One way I know should work is having a content element inside of the overflow and get the height of that since it should retain its height value.
The .css() method should work
$(this).css('height');

Categories