I programming very simple layout.
It consist 5 div -> http://jsfiddle.net/8tSk6/ .
I want that div with ID "kubka" equal 100% - 100px (height: calc(100% - 100px);). Unfortunately, it doesn't work.
I try apply tips with CSS3 height: calc(100%) not working (add height = 100%,margin & padding = 0), but script still doesn't work.
1) you need to add html {height:100%;}
2) remove the spaces between your div and # - what your styles mean is an id of whatever found inside a div and if you look at your www div it is not inside any other div
If you sort these out i think it will work: fiddle
You could use javascript to get the height of the element and then change it :
function updateHeight(divId){
var urDiv = document.getElementById(divId);
urDiv.height = window.innerHeight - 100;
urDiv.style.height = urDiv.height + "px";
}
Hope it solves your problem.
Related
I need to know the width and height of a SVG element? Im trying to use the following:
$('g#myGroup').height()
...but the result is always zero?
svg <g> elements don't have explicit height and width attributes, they auto size to whatever they contain. You can get their actual height/width by calling getBBox on the element though:
var height = document.getElementById("myGroup").getBBox().height;
If you're really into jquery you could write it as
$('g#myGroup').get(0).getBBox().height;
according to Reed Spool
I wasn't able to get any of the answers above to work, but did come across this solution for finding it with d3:
var height = d3.select('#myGroup').select('svg').node().getBBox().height;
var width = d3.select('#myGroup').select('svg').node().getBBox().width;
getBBox() here will find the actual width and height of the group element. Easy as that.
Based on the above answer, you can create jQuery functions .widthSVG() and .heightSVG()
/*
* .widthSVG(className)
* Get the current computed width for the first element in the set of matched SVG elements.
*/
$.fn.widthSVG = function(){
return ($(this).get(0)) ? $(this).get(0).getBBox().width : null;
};
/*
* .heightSVG(className)
* Get the current computed height for the first element in the set of matched SVG elements.
*/
$.fn.heightSVG = function(){
return ($(this).get(0)) ? $(this).get(0).getBBox().height : null;
};
I want to have to floated columns side-by side. If second column has contents then the first column should resize its content based on the second column, is that possible with CSS? Widths are not defined.
It's possible using javascript but not with straight CSS. Here are some ways to do it:
Using javascript:
var rightDiv = document.getElementById("straightJ2");
var rightWidth = rightDiv.clientWidth;
var leftDiv = document.getElementById("straightJ1");
if($('#straightJ2').text() || rightDiv.hasChildNodes()) {
leftDiv.style.width = rightWidth + "px";
}
Or more minimal (and possibly overwhelming/hard to follow) javascript:
if($('#minimal2').text() || $('#minimal2').firstChild) {document.getElementById("minimal1").style.width = document.getElementById("minimal2").clientWidth + "px";}
Using jQuery:
if($('#secondColumnId').html() != '')
{
$('#firstColumnId').width($('#secondColumnId').width());
}
Each of these check the second div for text or a child element and change the width of the first if one of those conditions is met
All examples can be found used in this jsFiddle
I have been trying to get the height of an image dynamically while adjusting the browser window.
I used console.log() to get the value to check if my results are correct, and somehow the result is always 0! What am I doing wrong?
$(function(){
var ScreenHeight = $(window).height();
var ImageHeight = $('#bkgImages').height();
var ImageMove = (ScreenHeight-ImageHeight)/2
$('#wrapper').slideDown(500);
$('#bkgScreen').animate({opacity: .5}, 700);
$('#bkgImages').css({top: "-" + ImageMove + "px"});
console.log(ImageHeight);
});
I manage to get the window height result working but not the div element height. The other issue is this calculates the result only once per session, where as I need to function to run every-time a user adjusts the browser window size. How do I go about doing that?
I think it depends on the css property of the div, and you may refer to answer here https://stackoverflow.com/a/10656669/693110.
In short, you need to specify the div to have display: inline-block; property.
I need for the code section shown in pre to point to a particular line number. If there are 100 lines in pre I want what is shown to be line 51 for right in the center of the 150px box.
Try this (for 10 lines):
<pre style="width: 300px; height: 10pc; overflow-y: scroll;">
1
2
3
4
5
6
7
8
9
10
11
12
</pre>
Note "pc" instead "px"
You can do this using scrollTop in jQuery:
$("#code").scrollTop(topPosition);
where scrollPosition is "the number of pixels that are hidden from view above the scrollable area".
The difficulty is working out what this value should be. If you know the height of each line (which you can set using font-size in CSS, you could use:
topPosition = lineHeight * (lineNumber - 1);
But then you want the specified line to be in the middle of the container, so perhaps:
topPosition = lineHeight * (lineNumber - 1) - 70;
if (topPosition < 0) topPosition = 0;
I would play around with this and see if you can make it work. :)
To achieve that, you need a fixed line height for your pre element. For 150px height I suggest 15px for line-height and 11px for font-size. This will ensure 10 lines in your scrollable area.
The rest is some math and using scrollTop property.
example:
function goToLine(centeredLine){
var pre = document.getElementById('scrollablePre');
pre.scrollTop = (centeredLine - 5) * 15;
};
I have this html:
<div id="subNav"></div>
<div id="feed"></div>
<div id="feedBar"></div>
I have floated all of these divs left. I set the width of #subNav and #feedBar, but on #feed I set its min-width . It takes the min-width even though the window is larger. Is there any way that with floating you can make the min-width work? I am trying to make a flexible layout on the page.
The following answer uses a JavaScript solution, in response to #Chromedude's comment (to the original question):
#David Is there any way to override this behavior? with javascript?
I'm sure there's a far more simple way of doing this (certainly with a JavaScript library), but this was the best I could come up with at this time of morning (in the UK):
var feed = document.getElementById('feed');
var width = document.width;
var feedBarWidth = document.getElementById('feedBar').clientWidth;
var subNavWidth = document.getElementById('subNav').clientWidth;
feed.setAttribute('style', 'width: ' + (width - (subNavWidth + feedBarWidth)) + 'px');
JS Fiddle demo.
Using jQuery (just as a suggestion as to the ease offered by a library):
var bodyWidth = $(document).width();
var subNavWidth = $('#subNav').width();
var feedBarWidth = $('#feedBar').width();
$('#feed').css('width', bodyWidth - (subNavWidth + feedBarWidth));
Use a grid system such as the one in Foundation 3. When placed on a div representing an element of the grid, min-width behaves just fine.
To get min-width to work without a grid, use a CSS rule that inserts an invisible pseudo-element with the desired minimum paragraph width.
p:before {
content: "";
width: 10em;
display: block;
overflow: hidden;
}
Further details are at the source where I learned this.