I'm adapting a wordpress theme and it would be nice to have the text of the whole page scale depending on the width of each container div.
So far all the widths are in % but as w3c mentions the font-size property only takes into account the font-size of the parent and not the size of the container div.
As multiple other answers hint, I could do that with javascript and target each container div,
which though being a very helpful answer from my point of view doesn't apply to my problem because I dont know all the possible container ids or classes since I have to account for future plugin installations which could output text, e.t.c.
so is there any other way to do this?
Not without Javascript. CSS bases font-size percentages based on height of a line, there are no width-based controls.
I'd strongly recommend changing your design.
If you want to try to go with it, I'm not sure how proficient you are at Javascript, but you could iterate through DOM nodes, look for a common condition, find the width of the DIV, and move forward that way.
one possible solution could be to target only the body element and change its font-size, this way every font-size should adapt due to the parent changing.
this solution combined with media queries to target the most common screen size should be perfect.
Based on that, I pieced together the following ( http://jsfiddle.net/8TrTU/73/ )
function adaptFontSize() {
var defaultW = 100;
var defaultFontSize = 16;
var width = parseInt($("#header").width());
var fontSize = (defaultFontSize * width)/defaultW+"px";
$("#page").css('font-size', fontSize);
// alert(width +" "+ defaultFontSize * width+ " " fontSize);
}
$(document).ready(adaptFontSize);
$(window).resize(adaptFontSize);
opinions? possible improvements?
Related
I've got a simple Bootstrap3 page, with some existing rows, and I want to insert a single new row that is full screen height.
What's the best (most clean & compatible) way to do this? I'd say using CSS3's new "height:100vh" would do the trick, but it still doesn't seem to be supported in quite some browsers.
Upon searching I came accross all sorts of tricks and wizardry, including using jquery, or plugins, but I wonder if there is just a simple css attribute or Bootstrap3 class that I can use for this?
Note that my page does not consist of just this one full-height row, I've got several dynamically sizes rows with random content, and now I want to insert one new row that has to be full screen height.
height:100vh
Should do the trick like you said, IE 9 support it very well.
EDIT :
For android user then forget CSS use Javascript :
var h = document.getElementById("container").offsetHeight; //the parent container or body
document.getElementById("my_100_percent_row").style.height = h + "px"; //the row that must have 100% height
There is one simple task I want to achieve.
I have an image in a variable width container.
The container can have a width of 300, 400, 700, or 900 pixels. This is done by the means of media-queries
The image should take up all the width of that container. So it will be also 300, 400, 700, or 900 pixels wide.
The image should have different sources for all that width values. So I can serve smaller images on mobile phones.
I thought that this could be done with the srcset attribute of the img element, maybe under help of the sizes attribute. width something like this
<img src="http://dummyimage.com/300x200/abc/000"
alt="dummy"
srcset="
http://dummyimage.com/900x200/abc/000 900w,
http://dummyimage.com/700x200/abc/000 700w,
http://dummyimage.com/400x200/abc/000 400w,
http://dummyimage.com/300x200/abc/000 300w
"
/>
But it's not working in that way, because the browser chooses the image in proportion to the width of the display port and not to that of the image itself.
Example with use of picturefill polyfill from http://scottjehl.github.io/picturefill/: http://codepen.io/HerrSerker/pen/itBJy . This does not work, because it will take the one image that is the next size.
I could of course take that into account and change my srcset to this
srcset="
http://dummyimage.com/900x200/abc/000 999999w,
http://dummyimage.com/700x200/abc/000 900w,
http://dummyimage.com/400x200/abc/000 700w,
http://dummyimage.com/300x200/abc/000 400w
"
This will work on the desktop, but fails on retina displays, because the device pixel ratio is taken into account here, but in a different way than with the media queries. And it is not useful, because the image should know about the width of the viewport and of the same width and that at compile time? No way. Image I use the image in a grid system. The image has different widthes if I'm in a 3 column grid on desktop devices and a 1 column grid on smart phones. That should not be in the responsibility of the image to calulate the ratio of width and viewport-width.
I did not have any luck with the sizes attribute as well (no example here). The reason is tha same as above. In the sizes attibute I say which amount of the viewport width should my image be wide according to media queries. This is so off. How should the image know?
So I came around with this solution. I setup a data-srcset attribute with the same syntax as the srcset attribute itself, but with a custom JavaScript programming. Example here: http://codepen.io/HerrSerker/pen/tCqJI
jQuery(function($){
var reg = /[\s\r\n]*(.*?)[\s\r\n]+([^\s\r\n]+w)[\s\r\n]*(,|$)/g;
var regw = /(.*)w/;
var sets, $set, set, myMatch, i, w, that, last;
var checkData = function() {
$('img[data-srcset]').each(function() {
that = $(this);
$set = that.data('srcset');
sets = [];
while(myMatch = reg.exec($set)) {
set = {};
set.src = myMatch[1];
set.w = (myMatch[2].match(regw))[1];
sets[set.w] = set;
}
w = that.width();
last = 0;
for (i in sets) {
last = i;
if (w <= i) {
that.attr('src', sets[i].src);
return;
}
}
that.attr('src', sets[last].src);
});
};
checkData();
$(window).on('resize', checkData);
});
This works, but it feels wrong. But maybe not, as the specifications says for responsive images to behave just in the way that it does. But I feel that it's the wrong way. 90 % of use cases for responsive images won't work with the spec.
So am I wrong? Didn't I use the srcset in the defined way? Did I understand the spec incorrectly? And do the W3C and Responsive Images Community Group think in such a way apart from reality?
Are the smaller images scaled down versions of the bigger image? Or are they cropped (art direction)? If the latter, you should use picture and source media.
The reason the browser only uses the viewport for deciding which image to download is that it's the only thing that is available when the browser wants to download an image. The CSS (probably) isn't downloaded yet. So if you use srcset+sizes, you have to repeat the breakpoints and image widths in sizes.
This question seems like a duplicate of Responsive full width image banner with fixed height using srcset
Like zcorpan said, what you are trying to do falls under the "art-direction" use-case (since the different images have different proportions), so you should use the <picture> element, rather than srcset. See the other question's answers for a syntax example.
I have a problem determining the width of a rendered text node in JavaFX 2. When using the standard style, everything works fine:
Text testText = new Text("test");
double width = testText.getLayoutBounds().getWidth();
But if I apply custom CSS styling which sets a different font size like this
.text-class {
-fx-font: 20px "Tahoma Bold";
}
and apply the CSS class to my example above:
Text testText = new Text("test");
testText.getStyleClass().add("text-class");
double width = testText.getLayoutBounds().getWidth();
I will get the same result as in the first case, so obviously styling is delayed to some later point in time.
How do I determine the width of a CSS-styled text in JavaFX 2? Is it possible to somehow force immediate CSS styling?
CSS application is not done immidiately, so, the way to solve the issue, is do your actions, when size of text actually changes.
testText.layoutBoundsProperty()
Is the property, which responds to bounds, and it stores an immutable object. There are also other properties, telling you about size and position. What you can do - is to attach a change listener on this property, and apply changes, when a modification is done.
CSS-Styles are applied on the next so called pulse beside that the layoutBounds are influence by the parent container your put it into.
I'm having sizing issues with a TabNavigator. The direct children of the TabNavigator are Canvases, and within these I am adding Images. I'm trying to resize the images to fit within the Canvas without scrollbars. The Canvas height is set to 100% of the parent, which is the TabNav. Then I'm setting the image.height = parent.height * .9
The result is that Flex is generating scrollbars because the images are too high. It appears that the root cause is that the height property of the TabNavigator is the height of the entire component, including the height of the tabs. I'm assuming therefore it also contains that little strip of space between the tabs and the children of the TabNavigator.
This makes sense, but is there a property that returns only the height of the children?
I'm aware of the scrollbar policy properties and I've experimented with those. I know I can also try a different multiplier for the image size to get it to fit. It just seems like there should be a property to get the size of the space for the children.
Looking through the source, there's a "contentHeight" property that seems to be the thing you want.
The method ends with this line:
return unscaledHeight - tabBarHeight - vmTop - vmBottom;
which seems to be exactly what you're looking for. Unfortunately this property is protected, as is the case with many things we developers want out of the Flex library. :)
Your quickest solution using this would be to sub-class TabNavigator and expose this property publically; or you could just do this calculation yourself:
image.height = (parent.height - TabNavigator(parent).tabBar.height) * .9);
I'm working on a JavaScript image resizing feature which rely on the IE only DXImageTransform addon.
Wanting to address modern browsers as well, I gave a shot to canvas, with pretty good results.
However, I face an issue in my resize function, which is the following:
function Resize(oObj, flMultiplier)
{
var canvas = document.getElementById('canvas');
var canvasContext = canvas.getContext('2d');
oObj.style.visibility = 'hidden';
canvasContext.clearRect(0,0,canvas.width,canvas.height); // clear canvas
canvasContext.fillStyle = 'rgba(0,0,0,0.4)';
canvasContext.scale(flMultiplier,flMultiplier);
canvasContext.drawImage(oObj, 0, 0);
}
If my image becomes bigger than the canvas item, then one will see only a portion of the image, which is bad.
I tried to tweak the canvas size at runtime, but if affects the display of the resized image.
So I ended up declaring a big canvas element, which is pretty OK, except that the css overflow of my web page is adjusted on my biggest element, and not on my resized image, which is a pain.
So I guess there are two ways to solve my problem:
Try to exclude the big canvas element from the overflow scheme
Try to update the canvas element size when resizing (I may have missed something there)
I haven't tried that myself, but perhaps you can create a canvas element out of the Dom, with document.createElement. It could be of arbitrary size without disturbing the display.
Now, I lack context (why do you resize images this way instead of using width and height attributes, among other questions) so maybe I am missing the point.