So I want to change the width of an element as the page gets bigger.
However, if the page width doubles i dont want the elements width to increase by double. I want the element to increase with diminishing returns. Anyone know how to do this?
You can achieve this with jQuery, basically you would check the size of your page and by that you should set width of your elements, for example
If you are using jQuery, you can get the size of the window or the document using jQuery methods:
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)
For screen size you can use the screen object in the following way:
screen.height;
screen.width;
There are methods you could use, and here is an example how you might set value of your element by depending of your page size:
var width = $(window).width();
$("#myElement").width(width) - 100;
I put a 100 there as a variable number, you can change it as you want to.
I mean you can put a number whichever you want to just to get width of your element as you want it to be.
I hope this helps to you
Related
Is there way to check page height?
Like If I have container div and my contents goes of 100% height.
I need to check full height of that container div.
Like if it is 100% + more 400px I want to add something next to that div.
$('.container div').outerHeight();
codepen-http://codepen.io/nagasai/pen/XKZgyq
Add if condition for that value
var x = $('.container div').outerHeight();
Update x ,onresize check x value greater than x+400px
Page height is a native javascript property.
Just do a
window.innerHeight
to get the current window height which works well since it only includes from the bottom tool/search bar to the end of browser
I am using an accordion which was written by somebody else. When the accordion is initially displayed, each rows' initial heights are persisted, and then their heights are set to 0. And then when the row becomes visible, its height is restored to its original value.
But in my case, the accordion's heights will change because I am asynchronously populating them with data. So, when the row becomes visible, I'd like to calculate the rows' height based on it's new constents. However, because its height was set to 0 with .css('height', 0), $(elem).height() gives 0.
Is there a way to calculate the height of the element, rather than just retrieve it's css height value?
Use jQuery's innerHeight function to get the calculated height of an element, sans border and margin.
var height = $('#myElement').innerHeight();
Edit:
Use jQuery's outerHeight function to get the calculated height of an element, including padding, border and optionally the margin.
//without margin
var height = $('#myElement').outerHeight();
//with margin
var height = $('#myElement').outerHeight(true);
Edit 2:
You may also compare these results with native Javascript.
var el = document.getElementById('myElement');
var height = el.offsetHeight;
You can also use the Javascript offsetHeight function.
var elementHeight = document.getElementById(id_attribute_value).offsetHeight;
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
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.
What I want is, an example when passing the mouse on element in page, then forced to increase the height of scrollbar, in that case, I want to shows alert box.
I have used the following code
if(document.body.offsetHeight < document.body.scrollHeight ){
alert('not Equal')
}
Also I have used clientHeight function Instead of offsetHeight function,
But he does not work well except only in chrome and safari browsers.
Update....
You can not determine if the page has scrollbars using document.body, use an div container instead, it must have overflow css property and specified height and / or width. After this you can use .offsetHeight and .scrollHeight to dermine if the content is bigger than the size of the container.
Is possible to do something like: when the browser is resized I dont' want to alterate width and height to any element of body.
I hava a large table in my page and when I resize I want to have the same width or height as when was loaded in full browser mode.
just give your table a fixed width and height. With min-width and min-height it will still resize untill it matches the defined minimum width and height
table
{
width:500px;
}
the width might not be a problem but you never know the height of a table, this can change a lot so with jQuery you can do the following:
var myTable = $('.table');
var myTableHeight = myTable.height();
myTable.css('height', myTableHeight);
EDIT:
Based on your comment this is what you could do. You leave the 200% but the first time the browser loads you get the width of the table and set it as fixed width. It will then always stay the same.
<script type="text/javascript">
$(document).ready(function() {
//once the document was completely loaded get the width of the table and se it as fixed width
var myTable = $('.table');
var myTableWidth = myTable.width();
myTable.css('width', myTableWidth);
});
</script>
Use CSS min-width and min-height.