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.
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;
};
if(anchorWidthFlag)
{
popUp.popUpWidthMatchesAnchorWidth = false;
popUp.explicitWidth = anchorWidth;
}
here AnchorWidthFlag = true and anchorWidth = 350;
i tried this way
1) popUpWidthMatchesAnchorWidth = false
2) explicitWidth = anchorWidth //350
but not get appropriate output.
I want to set minWidth and maxWidth to anchor popup, can anyone help me?
Try to set popUpWidthMatchesAnchorWidth to false and set minWidth and maxWidth on dropDown group. If I understood what you want, it would work.
Setting minWidth/maxWidth on popupAnchor woudn't make any effect due to the fact, that popup is not a child of popupAnchor. So standard flex measuring steps wouldn't work here. Though popup doesn't know parent minWidth/maxWidth. If you open the source code of PopUpAnchor you will see that if popUpWidthMatchesAnchorWidth is true the size of popup is set to explicit size of the popupAnchor, but there is no code about minWidth/maxWidth. If you really need to set these sizes on PopUpAnchor you would extend PopUpAnchor class and implement this functionality.
How can I reliably ask for the size (in pixels) an SVG element is taking up on the host page?
Both svg.offsetWidth and svg.getBoundingClientRect().width work in Chrome v34.
Neither of those work correctly in Firefox v29. (The former is empty, the latter returns incorrect values.)
Test Page: http://jsfiddle.net/dL5pZ/3/
The motivation for this question is to get a reliable implementation for this answer, which requires knowing the aspect ratio of the outside of the element. Further, for this question I need to know the actual size of the SVG, or at least something that returns proportionate values across different calls and a resizing element.
I've been down that road before. Unfortunately, most of the functions for getting the size of the <svg> element are buggy in Firefox. The only working solution I found was using window.getComputedStyle(svgElement).width (or height), which needs to be parsed (and also only works when svgElement.display == 'block', which it is in your example).
I have adopted your fiddle to work in Firefox: http://jsfiddle.net/dL5pZ/5/
Update: The issue with display 'inline' was fixed some time ago around Firefox 29.
Update 2: As mentioned in another answer, getBoundingClientRect should also work nowadays.
Some more info from my research because I've spent the last 2 days working on this issue..
So, it always works in Chrome and Opera, it works in IE if you add preserveAspectRatio="xMinYMin slice" but Firefox seems buggy.
To make it work cross platform try:
a) accessing width and height of SVG directly - Ch,O,IE
b) getComputedStyle:
var style = window.getComputedStyle(svg, null);
var svgWidth = style.getPropertyValue("width").slice(0, -2); // "1240px" -> "1240"
keep in mind that for single queries it is fine, but when you try to do it about 60 times per second then the browser becomes very slow
c) as we know this issue happens when we have
<div><svg style="width:100%; height:100%"></svg></div>
and the width and height of SVG element are 1 in Firefox.. but these dimensions are as same as the dimensions of the div parent element which you can access! But to make life harder it doesn't work in IE.
So reassuming, this is my final cross browser code:
if(!svg.width.baseVal.value || svg.width.baseVal.value < 2){
//this is the FF case
if(!this.parentElement) return;
this.width = this.parentElement.clientWidth;
this.height = this.parentNode.clientHeight;
}
else{
//this works for Ch,O,IE
this.width = svg.width.baseVal.value;
this.height = svg.height.baseVal.value
}
getBoundingClientRect has been fixed in Firefox from version 33 onwards and will do what you want it to now. See bug 530985 for details.
This was the way I fixed it:
var heightComponents = ['height', 'paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'],
widthComponents = ['width', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'];
var svgCalculateSize = function (el) {
var gCS = window.getComputedStyle(el), // using gCS because IE8- has no support for svg anyway
bounds = {
width: 0,
height: 0
};
heightComponents.forEach(function (css) {
bounds.height += parseFloat(gCS[css]);
});
widthComponents.forEach(function (css) {
bounds.width += parseFloat(gCS[css]);
});
return bounds;
};
Using your jsFiddle: http://jsfiddle.net/dL5pZ/7/
This is what I ended up using:
var svgWidth = svg.clientWidth || window.getComputedStyle(svg).width.slice(0, -2),
svgHeight = svg.clientHeight || window.getComputedStyle(svg).height.slice(0, -2);
as clientWidth and clientHeight always return 0 in Firefox.
For d3 users:
var svg = d3.select('#yoursvg')[0][0],
svgWidth = svg.clientWidth || window.getComputedStyle(svg).width.slice(0, -2),
svgHeight = svg.clientHeight || window.getComputedStyle(svg).height.slice(0, -2);
Hope it helps.
<button onclick="demosvg()">click on</button>
<svg>
//<image xlink:href="demo.jpg" id="img1" height="200" width="200"/>
<img id="myImg" src="demo.jpg" style="width:500px;height:98px;">
</svg>
<div id="demo"></div>
<script>
function demosvg() {
var var1 = document.getElementById("img1").naturalWidth;
document.getElementById("demo").innerHTML = "width is: " + var1+ " pixels";
}
</script>
What is the default height of a scroll bar(Horizontal)?
I couldn't find the document online.
UPDATED: Can we write a javascript function to get it? Please don't down vote it. It is hard to get it.
Thank you.
Found this here: How can I get the browser's scrollbar sizes?
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
alert( getScrollBarWidth () );
That's going to depend on the clients screen resolution and browser. If you explain why your asking then I might be able to give a better answer.
Whatever the user's computer is set to. There is no hard-and-fast rule on this. For example, on my Ubuntu machine, the default scroll bar size is 0 - instead of a conventional scrollbar, it has a scroll line with arrows that appear when the mouse moves near it, and it takes no space on the document. However, on my Windows installation, the scrollbar size is 14 pixels, but I could set it from anything between about 8 and over 500...
Interesting question. My thought is: when a property you are interested in is not readily available, test.
One DOM property I can think of that would be affected by the scrollbar height is the clientHeight of the body (or whatever box has the scrollbar) if you set it to 100%. This is maybe a dumb approach, and not sure how useful it really is, but check it out:
get clientHeight before
expand width of an internal element, wide enough to cause a scrollbar
get clientHeight after
subtract
I made a fiddle of this. Like I said, not sure how useful this approach could be in real life, but maybe it's a start on something.
http://jsfiddle.net/brico/t6zMN/
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.