My goal is to have a white div (#containMe) stretch to the full height of the document, regardless of window size or how much content I have on the page.
I put my HTML head and JQuery in a PHP document and use PHP's require_once to put that header onto each page. However, when I've got #containMe set to the document's height with Jquery, it tries to set it to the body height instead. The body's height also seems to change each time I refresh, causing #containMe's height to change unpredictably.
The document's height appears to stay consistent, but the body's height fluctuates, and #containMe is trying to stick to the body's height instead of the document's. This happens with Chrome, Android Chrome, and Firefox. I tried the following:
$('body').height($(document).height());
But it seemed to have no effect.
Here's my Jquery in my head:
<script>
$(document).ready(function () {
$("#containMe").height($(document).height());
$("#containMe").width($(document).width() - 200);
$('.dropdown').hover(function () {
$('.dropdown-toggle', this).trigger('click');
});
});
</script>
(Note that the bootstrap dropdown is still working)
Here's my relevant CSS:
body
{
background: #333577 url(bg1.png);
height: 100%;
}
html
{
height: 100%;
}
#containMe
{
background: white;
margin-left: auto;
margin-right: auto;
padding-bottom: 25px;
padding-top: 15px;
box-shadow: 0px 0px 25px #111111;
}
Here's the relevant HTML:
<div id="containMe" class="container-fluid">
<div class="container-fluid jumbotron text-center"><h1>Web Pofrtfolio</h1>
<h2>By Rhea Herrmann</h2></div>
And here's a link to the page where the problem is occurring.
http://www.rheaherrmann.com/other/wiki.php
If you scroll to the bottom and keep refreshing, the div's height appears to fluctuate. I'm not sure what I'm doing wrong.
If i'm getting this right i think you could do the following and everything should be as you expect it to be:
Remove #containMe's height from the CSS, don't use any height at all.
Remove .container-fluid in .jumbotron. Since you already have a .container-fluid class above you don't need another .container-fluid, and as bootstrap's documentation states: containers are not nestables: http://getbootstrap.com/css/#overview-container.
Remove the .container-fluid class next to .innards (for the same reason as above). If you need to keep the paddings as it was, you could use .col-sm-12.
Remove or comment any javascript code that modify the height of #containMe.
Please let me know if this worked for you.
$(document).ready(function () {
var windowheight = $(document).height();
var windowwidth = $(document).width() - 200;
//alert (windowheight);
$('#containMe').css('height', windowheight + 'px');
$("#containMe").css('width' ,windowwidth + 'px' );
$('.dropdown').hover(function () {
$('.dropdown-toggle', this).trigger('click');
});
});
Use this in the JS
-Use 100vh instead of 100% in your css for #containMe.
-Don't nest containers with bootstrap. "Note that, due to padding and more, neither container is nestable." http://getbootstrap.com/css/#overview-container
Get rid of
height: [whatever];
In your #containMe class in the style sheet and remove it from your element style(the style attribute of the #containMe div). It has to be gone from both places.
Related
I am working on a form on a webpage. I want to have a button on a panel which when pressed expands a div (underneath the button) to make it visible and then invisible again when the button is pressed again - a kind of further details popout box. So far i have got this:
function blockappear() {
var ourblock = document.getElementById("theblock");
ourblock.style.transition = "all 2s";
if (ourblock.style.height == "0px") {
ourblock.style.height = "220px";
} else {
ourblock.style.height = "0px";
}
}
and this:
#theblock {
background-color: #a83455;
height: 220px;
width: 100%;
padding: 0;
margin: 0;
display: block;
}
and this:
<p><button type="button" onclick="blockappear()">Try it</button></p>
<div id="theblock">
Some text
</div>
And it seems to work which is quite pleasing (even though it has taken hours to get this far). The problem is this. I want the div to change from 200px to 0px including the contents not just to the extent it can according to the contents. At the moment the div shrinks, but the content "some text" stays put on the page. I have tried changing the display attribute of the div to 'block' and 'table' and still no joy. I thought that the point of a div was that it enclosed the content with the group tags and that the content could not exist without the div. If the div has 0px height how can the text still show?
Incidentally, if i just use display:none; on the div it works (without the transition of course). I need the content of the div to respond to the height of the div somehow - i suspect using the css properly.
I think this has been covered before by using jquery, but i want to use javascript now that i have started as it will probably take me another few hours if i start again with a whole new language :-)
Thanks for any help...
Add overflow: hidden; to your div. This will hide the content which doesn't fit into the container.
You want to use this CSS property on your div:
overflow: hidden;
This will make any content of #theblock bigger than #theblock itself invisible. So - if #theblock has height of 0px - all of its contents will be hidden.
Default value is overflow: visible;, so even content bigger than containing element itself will still be there for all to see. That's all there is to it.
Read more: overflow CSS property (MDN)
I have spent 10 hours on this issue but I am still unable to solve it. I am using bootstrap 3 with disqus comments. Somehow disqus comments are overlapping my footer. See following picture.
I have tried many tricks but none of them worked.
Following is my HTML code:
<div class="wrapper">
<div class="sections">
<div class="row">
.... truncated unnecessary code
<div id="comments">
<div id="disqus_thread"></div>
</div>
</div>
</div>
</div>
<footer>
.....
</footer>
CSS
.wrapper {
width:100%;
min-height: 100%;
height: auto !important;
height: 100%;
}
.sections {
width: 100%;
padding-top: 20px;
border-bottom: #d8d8d8 solid 1px;
height: auto !important;
}
#comments {
width: 100%;
min-height: 350px;
height: auto !important;
}
Here is what I have done so far:
Changed iframe size using js but it does not work
setInterval(function() {
$('#comments').css({
'height': $('#disqus_thread').height() + 'px'
});
}, 1000);
Changed disqus_thread height to 400px but it does not change the height when new comments are posted
Used disqus onReady event to change the height of iframe but this one is also not working. Perhaps, disqus comments are loading after calling onReady event?
JS Code
this.callbacks.onReady = [function() {
resizeIframeWidth($('#disqus_thread iframe'));
}];
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}
You can handle the loaded events like this
// called by disqus
function disqus_config() {
this.callbacks.onReady = [function() {
// if your code respond to this event to resize the sidebar
$(window).trigger('resize');
}]; }
There are a heap of things it could be and you'd need to provide a link to your site where this occurs to diagnose properly. A code sample just isn't enough as the problem will becoming from your site's CSS (most likely).
Probably culprits:
no "clear:both" property on or between the comments and your footer.
alternatively, try clear:both; to #comments
the footer element has some crazy negative top margin, or has position: absolute.
I understand that it's jQuery that is causing a dynamically loaded object to break things. But the solution will actually be bullet proof CSS in my opinion.
Ensure that the following CSS properties:
clear:both;
width: 100%;
display:block;
float: none;
Are applied to the footer & comments ID's/elements or alternatively, that you have a full width block clearing element between the main area and the comments AND the comments and the footer. Alternatively, you might just get away with applying these to the #comments div (ie: just making it self clear, regardless of how high it goes).
If this STILL isn't working, put overflow:hidden on your #comments. It won't be wonderful, but at least it will stop the behaviour you describe :)
I solved this problem by removing position:relative from .sections css rule.
I found a similar question a few days ago, and I've been trying to implement one of the suggestions since then without an success. Any I have an ASPx page, not the master, that has two tables stacked one on top of the other. I've got the top formatted just the way I want. However, the bottom on I want to have it fit within the window, or better yet, show a vertical scrollbar.
I've wrapped the bottom table in a div with overflow-style: auto; in the CSS file. Then I'm using the following script in the page to manage the resizing:
$(function () {
$('.tblContent table').css({ 'height': (($(window).height()) - 50) + 'px' });
$(window).resize(function () {
$('.tblContent table').css({ 'height': (($(window).height()) - 50) + 'px' });
});
});
My div looks like:
<div class="tblContent">
The CSS file contains:
.tblContent
{
overflow-style: auto;
}
for the bottom div containing the table (assuming you want it as 50% of the screen. you can obviously adjust that.):
overflow:auto;
height:50%;
width:100%;
for the table itself:
width:100%;
I'm not a master of css, but make sure to give your table a specific height to cause overflow to occur.
.tblContent
{
overflow: auto;
height : 400px;
display : block;
}
Why display : block;? Because I suck at css and I use that for almost everything. Also, I use overflow: auto. I'm not sure what overflow-style is, although it could be correct.
Also, since we both are terrible at css, here is a css reference link.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.
$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/
Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/
try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO
jQuery rules. Check this out.
http://api.jquery.com/resize/
The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)
I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}
I've been trying to recreate an effect from this tutorial: http://jqueryfordesigners.com/jquery-look-tim-van-damme/
Unfortunately, I want a background image underneath and because of the resize going on in JavaScript, it gets resized and cut off as well, like so: http://dev.gentlecode.net/dotme/index-sample.html - you can view source there to check the HTML, but basic structure looks like this:
<div class="page">
<div class="container">
div.header
ul.nav
div.main
</div>
</div>
Here is my jQuery code:
$('ul.nav').each(function() {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelWrapper = $panels.filter(':first').parent(),
delay = 500;
$panels.hide();
$links.click(function() {
var $link = $(this),
link = (this);
if ($link.is('.current')) {
return;
}
$links.removeClass('current');
$link.addClass('current');
$panels.animate({ opacity : 0 }, delay);
$panelWrapper.animate({
height: 0
}, delay, function() {
var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();
$panelWrapper.animate({
height: height
}, delay);
});
});
var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
$links.filter(showtab).click();
});
In this example, panelWrapper is a div.main and it gets resized to fit the content of tabs. The background is applied to the div.page but because its child is getting resized, it resizes as well, cutting off the background image.
It's hard to explain so please look at the link above to see what I mean.
I guess what I'm trying to ask is: is there a way to resize an element without resizing its parent? I tried setting height and min-height of .page to 100% and 101% but that didn't work. I tried making the background image fixed, but nada. It also happens if I add the background to the body or even html. Help?
Another solution could be to use jquery to set a minimum height on the .page element. Height must be set in pixels, not percentages. I've tested the following and it works:
$('.page').css('min-height',$('body').height()+'px');
But you will need to run this whenever the browser window is resized.
For a completely non-javascript solution you could put the bubbles in an absolutely positioned div behind the content. Use the following CSS to make the div fill the screen:
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
z-index:1;
You'll have to make sure this doesn't sit on top of your page content by giving that a higher z-index (for z-index to take effect you will need to set position:relative or position:absolute on the page content)
Have you tried adding min-height: 100%; background-attachment: fixed; to the body element?
The background-attachment might not be needed, though.
Could you add the background image to the body instead of the .page element?
.page {
background: transparent url(../img/glass/bg-page.png) top center fixed no-repeat;
overflow: hidden;
}
The body fills the browser window but the .page div is only as big as its content, which is why it's getting cut off as the content animates.