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/
Related
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.
I have a responsive app for desktop and mobile.
In the app i have a div which randomly shows texts of all kinds of lengths.
I want to do the following:
If the line breaks because the length of the text is too wide for the width of that div, i want the font-size to reduce itself (I am using em's in my app).
Is it something i need to build directive for it? is it something that was built and used wildly?
Writing a robust solution for this problem is going to be non-trivial. As far as I know, there's no way to tell whether a line of text breaks. However, we do know the criteria for line breaking is the width of the text being wider than the element, accounting for padding.
The Canvas API has a method called measureText which can be used to measure a string, using a given context with a font and size set. If you spoof the settings of the element with a canvas, then you can measure the text with the canvas and adjust the size until it fits without overflowing.
I've written up a rough implementation of the way I would tackle this.
function TextScaler(element) {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
var scaler = {};
scaler.copyProps = function() {
var style = element.style.fontStyle,
family = element.style.fontFamily,
size = element.style.fontSize,
weight = element.style.fontWeight,
variant = element.style.fontVariant;
context.font = [style, variant, weight, size, family].join(' ');
};
scaler.measure = function(text) {
text = text || element.innerText;
return context.measureText(text);
};
scaler.overflows = function() {
var style = window.getComputedStyle(element),
paddingLeft = style['padding-left'],
paddingRight = style['padding-right'],
width = style.width - paddingLeft - paddingRight;
return scaler.measure() > width;
};
scaler.decrease = function() {
// decrease font size by however much
};
scaler.auto = function(retries) {
retries = retries || 10;
if(retries <= 0) {
scaler.apply();
console.log('used all retries');
}
if(scaler.overflows()) {
scaler.decrease();
scaler.auto(retries - 1);
} else {
console.log('text fits');
scaler.apply();
}
};
scaler.apply = function() {
// copy the properties from the context
// back to the element
};
return scaler;
}
After you've sorted out some of the blank details there, you'd be able to use the function something like this:
var element = document.getElementById('');
var scaler = TextScaler(element);
scaler.auto();
If it doesn't manage to decrease it within 10 retries, it will stop there. You could also do this manually.
while(scaler.overflows()) {
scaler.decrease();
}
scaler.apply();
You'd probably want some fairly fine tuned logic for handling the decrease function. It might be easiest to convert the ems to pixels, then work purely with integers.
This API could quite trivially be wrapped up as a directive, if you want to use this with Angular. I'd probably tackle this with two attribute directives.
<div text-scale retries="10">Hello world</div>
Of course, if it's not important that all the text is there onscreen, then you can just use the text-overflow: ellipsis CSS property.
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>
I'm trying to control two containers using only one scrollbar. I have a large container that I shift (using CSS translations) to reveal another container that is sticky to the screen and to the right side. You can see my experiment here:
http://codepen.io/anon/pen/ipaCI
What I want is to use only the outer scrollbar (which controls the big and large div) to scroll both. I'm not looking for any synchronized scrolling, I want the scrollbar to first scroll the small container to the right, and when it's reached the end I want it to scroll the big container to the left.
I've experimented with trying to set a overflow-y: scroll on the body that contains both of these - but I can't seem to control the one on the right. Is it because it's fixed? If I make it positioned absolute it just follows like part of the page - which is not the desired effect.
Has anybody successfully implemented this kind of situation?
I have searched for plugins to do this but was unable to find any.
I've come up with a solution myself using jquery:
var $window = $(window),
$panel = $('.right-panel'),
windowPos = $window.scrollTop(),
scrollPos = $window.scrollTop(),
maxPos = $('.panel', $panel).height() - $window.height();
$window.on('scroll.panels-handler', function() {
var scrollDelta = $window.scrollTop() - windowPos;
windowPos = $window.scrollTop();
scrollPos += scrollDelta;
if (scrollPos < 0) {
scrollPos = 0;
} else if (scrollPos > maxPos) {
scrollPos = maxPos;
}
$panel.scrollTop(scrollPos);
});
I added a min- and max-scroll value for the container. Basically - it will always scroll the sidebar first - until it's reached its end - and then only the main window.
I couldn't figure out how to scroll only the sidebar (the main always scrolls) - but I'm satisfied with the solution.
See original codepen for a working demo
http://codepen.io/anon/pen/ipaCI
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.