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');
}
});
Related
What I have is a div with some items (menu item), this div will be the height of the browser viewer and I would like the spacing between the <p> to fill the height of the div.
So for a 1024px screen sixe, 20 px spacing is fine between paragraph, but sometimes it better to be 17px and for some big screen, 22 px should be fine.
Do you have a javascript function to auto calculate this or a jQuery plugin ?
there is a newish css module called flexbox. check this out.
basically set the container height to 100%, and set the elements each to flex:1 1 auto.
play around with that URL too
more info:
here is a jsfiddle. it's rudimentary but demonstrates the basic idea. just set the height of .flex-container to 100% when you put it in on your page. (i have the fiddle set to 400px because 100% doesn't grab the result-frame height in a jsfiddle.)
the CSS looks daunting because a lot has to be vendor-prefixed but it's actually quite simple.
If I understand you correctly, you are looking to modify the margin of p tags based on height of parent div - maybe something like this would help
MAX = 200;
if ($('div').height() > MAX) {
$('p').attr('style', 'margin:10px 0 10px 0;')
} else {
$('p').attr('style', 'margin:0 0 0 0;')
}
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.
Im trying to make a header with three sections. (all section are lined up horizontally) I want the middle section to adjust depending on the size of the content (text) within it. When I adjust this middle size, I want the other two to adjust accordingly so that the three sections always take up the full width of the site and stay even. my site width is 1000px, this is how I have it set up
< div .side_header> < div #header> < div .side_header>
I want to make a script that says something along the lines of:
"the width of .side_header equals (1000px minus the width of #header)*.5"
This is what I wrote but my syntax is off:
<script>
$(document).ready(function () {
$(".side_header").css("width", "$("#header_text").css("width") * .5");
})
</script>
css:
#title{
}
.side_header{
display:inline-block;
background-color:#999;
}
#header_text{
display:inline-block;
background-color:#3FF;
}
html:
<div id="title">
<div class="side_header"> </div>
<div id="header_text"> Header text</div>
<div class="side_header"> </div>
</div>
RESOLUTION:
Using javascript to make dependent values can be troublesome and can result in errors easily. It is better to use a css perpricessor like .less or .sass
You are trying to set the width to a string. Try
<script>
$(document).ready(function () {
$(".side_header").css("width", ($(document).css("width") - $("#header_text").css("width")) * .5);
})
</script>
Didn't get what you exactly want to do but just keep in mind that $.css("width") returns the CSS width of an element and not the actual width of it. So if you are trying to set the sidebars width as to occupy the rest of the page width available to them you should use $.width() to read the middle div width.
$(".side_header").css("width",((1000 - $("#header_text").width())/2) + 'px');
It is even better to use .outerWidth() as CSS wise they can be different. You can find docs about them on the following pages:
http://api.jquery.com/width/
http://api.jquery.com/outerwidth/
But after all if you want to position some div horizontally this is not a really good strategy. the width() method also works somehow not satisfactory as your CSS styling might be in a way that affects the middle div width itself. Using solid percentage width is more stable than using JS to achieve this.
So I am redesigning my website: http://staging.slackrmedia.com/keenanpayne/, but I am coming across a small issue. I want each "pane" of the website to be the exact height of the window, no matter what the size. I also want the content therein to be exactly positioned in the center.
I am trying to accomplish this with jQuery at the moment:
function setSectionHeight() {
// Set section heights
windowHeightPadding = $(window).height() / 2;
firstSectionPadding = ($(window).height() - $('header').height()) / 2;
// Apply proper styling
$('section').css({"padding-top":windowHeightPadding,"padding-bottom":windowHeightPadding});
$('section.home').css({"padding-top": firstSectionPadding,"padding-bottom":windowHeightPadding});
}
setSectionHeight();
// Adjust section heights on window resize
$(window).on('resize', function(){
setSectionHeight();
});
So what this is doing is calculating the window height and dividing it by 2, so I can set the top and bottom padding on each section.
However, for the first section, to get the proper top and bottom padding, I need to subtract the height of the header, which is why I have a firstSectionPadding variable.
Then I just add the CSS to each section tag on my website, with separate styling for the home section tag.
This works pretty well, but as you can see when you visit my site, for some reason the heights are not correct.
Right now it looks like:
And it should look like:
I have absolutely no idea where this extra padding or space is coming from on the top. I think my equations are right, but perhaps there isn't something I'm taking into consideration?
This could be done with CSS. One div set to 100% height and width, with text-align:center; A second div within set to display:table and 100% height and width. Finally, a third div set to display:table-cell and vertical-align:center;
This should be simple but nothing's working:
Question
How do you set the height of a webpage to be, lets say, exactly 4000 pixels—in such a way that scroll bars exist even when the page is blank?
Background
I'm new to JavaScript/JQuery but very experienced with similar technologies. I'm trying to do some fancy effects based on scrolling the page. To accomplish this methodically, as a first step I'm looking to make a "really tall" page. From there I will hide/display items based on the scroll height with pseudo-code along the lines of:
function onScrollEvent() {
var height = scroll height
var sectionIndex = Math.floor(height / MAX_SECTION_HEIGHT);
for each item in my array of graphics
if item index != sectionIndex then item.fadeOut else item.fadeIn
}
Once I have that working, I'll start creating the effects I want to see. The problem is, I can't make the stupid page "really tall."
Summary
When I set the height style property of the main-content div, it doesn't seem to trigger scroll bars unless there's actual content on the page. How do I make the page "permanently tall," so to speak? That is, I want the page to behave (scroll) as though it has 4000 pixels of content even if there's only one line of text on the page. Right now it behaves as though there's a call to:
height = Math.min(height of contents, height of div style)
Have you tried min-height for body, or html tags? min-height requires the element to be at least that height regardless of the content contained.
CSS
html, body{
min-height: 4000px;
}
Live Demo
Reference
Easy in CSS:
body
{
height: 4000px;
}
Example here.
This is the simplest way. min-height is not supported by all browsers. This is a specific height that you can set to the body tag (essentially the webpage itself) to make it really tall.
In your CSS add:
body
{
min-height: 4000px;
}
And you'll also need:
body
{
height: 4000px;
}
for internet explorer (via IE's conditional comments).
In Chrome 10, on OSX 10.6 -- this renders a complete blank page with scroll on the Y axis, hope this is how you meant:
http://pastie.org/1674432