Can't get height of div to adjust - javascript

I'm in a pickle.
I'm working on a layout, and I need the main div to adjust to the window size, mainly to get that middle div to make a scrollbar upon resizing. It's acting as a table cell currently, which is why it's forcing itself to simply become taller instead of using a scrollbar. It's in a containing div in the efforts to keep from doing this though.
<div id="ALL">
<div id="VOLTRON">
<div id="MAINSIDEBAR">ok</div>
<div id="CONTENT">
<div id="TICKER">please</div>
<div class="WRAP">
<div id="POSTSGOHERE">
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
<div id="RIGHTSIDEBAR">WELL THEN.</div>
</div>
</div>
</div>
</div>
I resorted to Jquery, and though I found a code for this very thing, it's not working.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){
$('#ALL') .css({'height': (($(window).height()))+'px'});
$(window).resize(function(){
$('#ALL') .css({'height': (($(window).height()))+'px'});
});
});
</script>
I've tried setting a max height, I've tried setting it to vh instead of percent, I've tried containing it, and I feel like I've exhausted a pretty decent amount of time on this conundrum myself to finally get help.
Here is the entire code, in case that also helps. I'm certain that the way I'm doing this is the reason it's not working.
So, any idea for a fix for this? And why what I'm trying isn't working?
EDIT: I need to specify this again: I want the entire "table" to only fit the window, but the purple div is the one that should scroll. The problem is, though I've set it to overflow-y: scroll; it just changes the size of the entire container. The entire table just grows past the window to compensate for the overflow.

Your code looks good, you just don't see it as it takes the exact size of the window. You would see it better if you subtracted a little off of it and added the overflow-y:scroll to #ALL instead of the container:
#ALL {
background-color: red;
max-width: 100%;
max-height: 100%;
overflow-y: scroll;
}
$(function () {
$('#ALL').css('height', $(window).height()-50 + 'px');
$(window).resize(function () {
$('#ALL').css('height', $(window).height()-50 + 'px');
});
});
HERE IS A DEMO
EDITED: Following your edit, and I know this would threw off your layout completely, but the only thing that worked for me, if you wanted the purple one to move only, was to remove the table-cell display and set the height to the container instead of ALL, and adding the scroll only to that:
#ALL {
background-color: red;
max-width: 100%;
max-height: 100%;
}
#POSTSGOHERE {
background-color: purple;
max-height: inherit;
overflow-y: scroll;
}
$(function () {
$('#POSTSGOHERE').css('height', $(window).height()-50 + 'px');
$(window).resize(function () {
$('#POSTSGOHERE').css('height', $(window).height()-50 + 'px');
});
});
I updated the demo

Keep the max-height and set
overflow:scroll;
This should do the trick.
PS: Also try adding it to the Wrap class.

You think to display the #all div as an iframe style in fullscreen?
like here:
You can check it here
You were just missed one line of CSS.
#all
overflow: scroll
SASS syntax
NOTE: pls use small letter div selectors dont use capital ones, thanks ;)

This might work better
Place the window height in a var
so the div can read it, and rewrite the var when the user resizes
$(document).ready(function(e) {
var heightt = $(window).height();
$('#ALL').css('height',heightt);
$(window).resize(function(){
var heightt = $(window).height();
$('#ALL').css('height',heightt);
});
});

Related

Issues using a simple jQuery script to grab one div height & make another div the same size

Basically I want to get the height of .r-side and have it applied to the height of .l-side so that these two elements are always the same height even if the window is resized, and positioned on top of each other. I'm not sure what's wrong with my jQuery.
Here's what I got:
$(window).load(function(){
$(".l-side").css({'height':($(".r-side").height()+'px')});
});
Using jQuery 3.1.1. And here's a jsFiddle of the issue I'm having.
I'm open to other methods than jQuery to accomplish this but in my research I only found solutions that were specific to columns, and these divs need to be positioned directly on top of each other.
You have referenced .l-side and .r-side as classes in the jQuery, and coded them as ID's in the markup :)
In the snippet I altered your widths so it displays in the preview window, but you can see the heights now match.
$(window).load(function() {
$("#r-side").css({
'height': ($("#l-side").height() + 'px')
});
});
#l-side img {
width: 100px;
}
#r-side {
width: 100px;
height: 100px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="l-side"><img src="http://connor.la/sandbox/refsmaster/images/forever-2.jpg"></div>
<div id="r-side"></div>
Please use id selector '#' as you have used id not classes and use document.ready instead of window.load.$(document).ready(function(){
$("#r-side").css({'height':($("#l-side").height()+'px')});
});

resize an html element on window resize

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

Disable mouse scroll when overflow-x: hidden [CSS,HTML]

PROBLEM:
The contents of my div are positioned 'absolute' and the width of the contents are larger than the div.
As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !
I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.
#wrapper {
position: absolute;
width: 100%;
overflow-x: hidden;
}
I think the default behavior for the document body is to allow scrolling of content that is too big for it. This seems like it might not be too easy to work around.
Instead of specifying a width on your BODY, you could try using one more DIV and putting the width on that instead.
<div style="width:1000px;">
<div style="width:1200px;"></div>
</div>
Is there a reason you have to put width on the BODY tag?
You must use
$("element").on('mousedown', function(e) {}
Just change live to on

Centering a div contained inside a div relative to browser window when there's more content on the right

I've been working on my new portfolio/website and decided to go for a design that is basically one big index page that scrolls horizontally to show the different sections and vertically to show the content of the sections. Both the container and the boxed inside have a fixed width. The container is positioned relative and the boxes inside are floated left and positioned relative.
My question now is - how do I make it so that, regardless of the size of the browser window the user has when opening the website and even when re-sizing, the first box appears centered horizontally in the browser window AND without revealing the content that is on its right (content to which the user can scroll horizontally using buttons)?
The inspiration for my website came from this website http://www.cosstores.com/
I've inspected the code and I believe they are doing it using JavaScript and negative margins; but my Javascript knowledge is quite basic and I don't really understand how these negative margins are implemented effectively.
Would appreciate it if someone could explain how it works for the COS website or even come up with an easier alternative a noobie like me could use.
Thank you and please feel free to ask me to post anything else you think could help understand the problem better!
This is really quite simple, don't you worry. See it in action!
You'll need to work on a grid system. (You can use different-sized columns, but it's simpler if everything's nice and square.) Create a container div and a bunch of child "box" divs in your HTML:
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br />
<div class="box"></div>
<div class="box "></div>
<div class="box"></div>
<div class="box"></div>
</div>
Use <br /> to start a new row. Otherwise, rows will extend infinitely. The container div is exactly the height and width of one box, so it will only show one box at a time. But you can scroll, obviously.
Annotated CSS below:
#container {
font-size: 0; /* remove gaps between boxes */
height: 400px; /* show one box at a time */
margin: 0 auto; /* center horizontally */
overflow: scroll; /* show scroll bars */
width: 400px; /* show one box at a time */
white-space: nowrap; /* let boxes continue horizontally until manually <br />'d */
}
.box {
display: inline-block; /* stack up left to right */
font-size: 14px; /* undo font-size from parent so you can actually see text */
height: 400px;
vertical-align: top; /* line up tops of boxes within row */
width: 400px;
}
Then, to scroll to a location with Javascript:
$("#container").animate({ scrollTop: 400, scrollLeft: 800 }, "slow"); //with animation
$("#container").scrollTop(400).scrollLeft(800); //without animation
You'll need jQuery to use that code. Well worth it, since it hides browser inconsistencies in scrolling with Javascript.
If you want to use the browser's scrollbars, you'll need to use the body as your container. It's trickier, because you don't have a specified width and height. There is no way to hide elements (for sure) from every user—some have truly massive screen resolutions.
Basically, add a margin on each box so you get some space around it. With some quick JS calculations, you can figure out the location of each box and center it on screen. See updated fiddle.
Here's the relevant JS for anyone interested:
$("#scroll").click(function() { scrollCenter("#target"); });
scrollCenter("#home", 0);
function scrollCenter(target, duration) {
if (duration == undefined) duration = "slow";
target = $(target);
var offset = target.offset();
var top = offset.top - ($(window).height() - target.height()) / 2;
var left = offset.left - ($(window).width() - target.width()) / 2;
$("html, body").animate({ scrollTop: top, scrollLeft: left }, duration);
}
Run that OnDOMReady. The call to scrollCenter("#home", 0) forces the page to center the first box on load. You shouldn't even notice the jump.
Happy coding!
you should use the jQuery plugin scrollTo
http://archive.plugins.jquery.com/project/ScrollTo
Centering a div tag on the screen is easy. Set the margin property in it's css class to this:
margin:0px auto;
As for the rest of your question, this is a case for jQuery (in my opinion). Take a look at this link:
http://addyosmani.com/blog/building-spas-jquerys-best-friends/
And also google jQuery tutorials (you need to learn the framework first) and then, more specifically, "single-page sites" and "jQuery Paralax".
Good Luck!

Change div height onclick with animation

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;
}

Categories