Im trying to get pagesection to fill the browserheight. I´ve tried to apply a 100 height to all elements, but it´s not working. It works good if I set a heigh: 100vh, but It´s not the way I want to take, so I wonder what Im doing wrong?
Site: Svenssonsbild.se/Konsthandel Second and third menu are anchorlinks to the spagesections.
Setting height:100% means 100% of the height of the parent element so you need to specify the height of the parent for it to work.
If you want to set your element to 100% of the height of the browser, you need to make sure all the parent elements up to the <body> tag have a percent height.
Setting the element's CSS height to 100vh is the intended way to do exactly what you're trying to do. 100vh specifies that the element should always be the full height of the viewport, so unless you've got some other requirement that you haven't described, that's what you should be doing -- you'll need to explain why "that's not the way I want to take" if there's more to your question.
Depending on your content it might be a good idea to set the min-height property instead of the height property since the content might need more space than the available viewport size offers. Or you can just evaluate the section's height and compare it to the viewport height. Using jQuery the following might work:
$('section').each(function(){
var height = ($(this).height() > $(window).height()) ? $(this).height() : $(window).height();
$(this).css('height', height + 'px');
});
You might need to adjust the selector to fit your needs.
Related
I am looking for an easy way to do the following:
I am building a website, and i have a .content class and its height is = height:auto; and its width = width:80%;
but i do not want the div to become "TOO" bit vertically, when i am scaling it.
Question:
Is there a javascript 'if' statement that checks for the height of a div, and then is able to put overflow-y:scroll; on the element if it gets too big, say 400px vertically?
Note that, the div has no height in the css. It is set to auto.
thx
If you don't want to do it via CSS, then the jQuery functions you're looking for are:
$("#element").outerHeight() and $("#element").outerWidth()
They return the computed height and width of elements, rather than the height and width that was explicitly set.
So,
if ($("#element").outerWidth() > 400) {
$("#element").width(400);
$("#element").css('overflow-y', 'scroll');
}
If you are going the jQuery way, adding to #ieeehh, first include jQuery. Then assuming the element has the id of #element
$(function(){
if ($("#element").outerHeight() > 400) {
$("#element").width(400).css('overflow-y', 'scroll');
}
});
This is a followup to my question here. I would like to understand why applying position:absolute to the CSS of a div via jQuery fails, while applying it in a static style works. Here are two jsfiddle examples:
Works: http://jsfiddle.net/jasper/Ty6Af/2/
No worky: http://jsfiddle.net/Ty6Af/3/
Note that the only difference between the two is where I apply position:absolute. Vertical centering always works, but horizontal centering does not work when the page loads for the first time. If you manually re-size the window the div will center correctly.
All of my testing has been on Chrome under Ubuntu thus far.
Anyway, I'm just now delving into the world of web development and these are exactly the kinds of 'quirks' that I need to begin understanding.
EDIT:
#Jasper found something interesting. If you make two calls to .css(), first applying position and subsequently applying a margin, it works. I would love to understand why. Here is an example: http://jsfiddle.net/jasper/Ty6Af/5/
So the issue is with how the width of the div is calculated by the browser depending on its position.
If the div is set to position : static (by default) then it's width is 100% of it's parents width and the element is not allowed to move around the page.
If the div is set to position : relative then it's width is 100% of it's parents width but it can be moved around with left.
If the div is set to position : absolute then its width is determined by the actual content of the div, for instance if there is only a 200px wide <span> element within the div then the div will be 200px wide.
You can test these observations by changing the CSS of your jsfiddle to specify position : relative (etc...) and remove the JavaScript that makes the div position : absolute, then use your Developer Tools to inspect the element and it's calculated width.
The problem with your code is that it sets the position : absolute at the same time it sets the margin of the element by using its width/height (which are calculated differently depending on the position of the element).
If you want to set the position of the div in JavaScript then you can do something like this:
$(function() {
//notice I cached the selector so it can be used in the future as well as set the position of the div
$signuparea = $('#signuparea').css({position : 'absolute'});
$(window).resize(function() {
$signuparea.css({
'margin-top' : '-' + Math.round($signuparea.height() / 2) + 'px',
'margin-left' : '-' + Math.round($signuparea.width() / 2) + 'px',
});
}).trigger('resize');
});
Here's a jsfiddle: http://jsfiddle.net/jasper/Ty6Af/8/
I believe the problem is that when you apply your left and right in your second fiddle, you have yet to add position absolute to the div. Hence, the browser has no idea what do with the left and right values and ignores them initially.
Practically speaking in your second fiddle, you only actually add the position:absolute on the resize trigger. So before you resize your actual div has no positioning.
If you instead add the position absolute on load it works fine:http://jsfiddle.net/Ty6Af/9/
Notice that if you give it position:relative from the start (like this http://jsfiddle.net/Ty6Af/11/ ) it allready applies both the left and right value. The reason you can't actually see the effect of "left" is because it is a block element.
I hope that answers your question, I'm not quite clear on where you are stuck.
http://jsfiddle.net/Ty6Af/7/ this should work, the trigger function in jquery has bugs with chrome so you have to run the function on load too.
The problem seems to be that position:absolute; negates the current layout and requires you to position it.....
See: http://jsfiddle.net/ZHaRD/
Which Jasper explains much more eloquently than myself!
i use 1 div element to make the .background for my site. and it's will be 100% height. to achieve that i use jQuery dimensions utility.
<div class="background"></div>
with this script to get the height
$('.background').css( 'height', $(window).height() );
but now, i want to make it's height dynamic. if we resizing the browser. the height of .background will follow the new size of browser. i understand this will require some event since the size change after the page is first rendered.
can you please tell how to make it with jQuery?
Use .resize().
$(window).resize(function() {
$('.background').css( 'height', $(window).height() );
});
Take a look at http://api.jquery.com/resize/.
You'll have to add the same code above to the window's resize event.
Shouldn't you be using css fixed positioning? This lets you set the height, width and position of an element relative to the viewport (the browser window).
Take a look at http://www.w3schools.com/Css/pr_class_position.asp
I wonder if there is any way to get div height in pixels, although its height set earlier to 100% height.
This is required as div content is dynamic so div height has different values based on content itself.
[Edit]
Div by default is hidden.
I need to get div height in pixels for later manipulation (smooth scrolling will be done for div)?
Is there any way to do this?
Since you tagged jQuery, use
$("#myElement").height();
http://api.jquery.com/height/
For Plain Ol' Javascript, you can use element.clientHeight or element.offsetHeight, depending on which one suits your needs.
Since the div is hidden, you will have to .show() it before calling .height(), and you can hide it again straight away:
var $myEl = $('#myElement').show();
var height = $myEl.height();
$myEl.hide();
theDiv.clientHeight
You can use height()
$("#divInQuestion").height();
You could use the .height() function:
$('#divid').height()
Well on slow browsers the show/hide method MIGHT cause the box to flicker (though the computer have to be really slow). So if you want to avoid this, give the div a opacity: 0 - and perhaps even a position: absolute, so it doesnt push the content. So to extend the code from before:
var $myEl = $('#myElement').css({"opacity": "0", "position": "absolute"}).show();
var height = $myEl.height();
$myEl.hide().css({"opacity": "", "position": ""});
But again. This might be overkill.
I'm unable to get the height of a page in javascript when the page is larger than the screen.
I thought this would get me the right height:
$(document).height();
but that only gets the height of the screen, same as:
$('body').height();
same as:
document.offsetHeight;
For some reason all these examples only return the height of the screen. Can somebody help?
Using jQuery (which you did specify), $(document).height() will return exactly what you're asking for.
To clarify the usage of the height() method:
$('.someElement').height(); // returns the calculated pixel height of the element(s)
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
I suspect, that if $(document).height() is not working for you, something is wrong. You may be:
Calling it too early. Like, before the DOM is ready
Have some uncleared floats that are not causing some block level elements to expand to their real height. Thus messing up height calculations.
Have something critical absolutely positioned. Absolutely positioned elements do not contribute towards height calculations of their parent elements.
If you're cool with using jQuery, what about getting the body or html height? like:
var winHeight = $('body').height();
I was looking for this and landed up here. Without Jquery, you can get this with plain JS also. Below works:
console.log(document.body.clientHeight,document.body.scrollHeight,document.body.offsetHeight)
Do note the below link to clarify which to use:
Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
I think you need to add window.pageYOffset (the amount the page has been scrolled, in pixels).
http://www.quirksmode.org/dom/w3c_cssom.html
Not sure about JQuery. But this link, might help you to understand various properties and how they behave in different modes in different browsers.
http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html