When I use scale or rotate, the parent element wraps to the size of the pre-translation dimensions of the element.
JSFiddle Example
Is there any way to wrap the parent container around the bounding box of the transformed element with CSS, or do I need to use Maths to manually position things?
Based on this earlier question it sounds like you will need to use some math and javascript to change the wrapper.
By using the function in the answer you could then set the wrapper dimensions based on the dimensions you just calculated.
Related
Basically I have a bunch of elements inside a div, lets say <div class="wrapper">. I want to be able to scale this outer div and have the elements inside scale properly along with it.
For example, if this were a collection of SVGs all we would have to do is change the transform of the outer SVG. to get this result:
Scaled SVG from blue bounding box
I want to do this same effect with a div wrapper... Is that even possible? (The reason I want to do this is because I want to be able to use img tags etc, otherwise I would simply use the svgs). If it helps, the end goal is to allow the user to drag and drop elements to create their own interface, but it would help if it works on multiple screens.
Credit to #samuellawrentz
Use transform:scale(x, y) to scale any wrapper element
I want to display div boxes in a container and arrange them horizontally. As this can get quite wide I also want to provide a zoom slider which will rescale these divs.
This works but the items are rescaled but not repositioned. I have created an example here: http://jsfiddle.net/mtphLyem/5/.
I would like the container to re-layout the items after the transform has been applied. How can I do this?
I think the problem comes with transform, because transform only "simulates" bigger elements, but doesn't change any width values or sth. like that which means your browser still tries to layout with your raw values.
You could achieve such an effect by just changing the font-size, which changes width, height and position all by itself.
For example:
http://jsfiddle.net/mtphLyem/7/
function zoom(zoomFactor) {
$('.container > .step').css('font-size', zoomFactor + 'px');
}
Update
From comment below:
'Then you might also change margins since changing size would again trigger the scaling. This one looks quite experimenting and I'm sure there's a more efficient way to do that but still it seems to work: jsfiddle.net/mtphLyem/10'
Since you're already using jQuery, just bind to the change event:
$("#zoom").on("input change", function() { zoom($(this).val()) });
I am adding element dynamically to DOM.
$('<div class="entry"></div>').text(data.status).appendTo(app.twitter_feed);
I want to get element height before it is added to DOM. The usual approach is to add the element within a hidden element with the same style and then simply see what is the height.
Though, is it imposible to calculate element height if you know container's width, padding and line-height (content is only plain-text) and content?
How the content wraps inside a container may depend on browser and zoom level, so unless you're very sure the content will never wrap, I would advise determining the height the way you have described.
If your text font is mono-sized-font, yes you can calculate it with formula [(text-length/(width/char-width))], but I'm sure you are not using mono-sized-font like courier, monospace etc.
Answer is this : there is no way to do this with multi-sized-fonts, me sorry.
Have you noticed that by using jquery's slideDown(), even on elements with dynamic content, you always get the perfect height of the effected element. Which is, for me at least, impossible to do by simply animating the css height value. Mostly because there is no way for me to know how did the height of an element (with a display:none) changed, during a dynamic content (AJAX) update.
And since i've been working on some custom controls, i do need that capability to calculate things the way slideDown() does.
If you are inserting a new dinamically loaded content, it means you have that element in memory, so you can refer to it and know its height. You only have to read its height (or maybe outerHeight) and slide by that amount.
EDIT
Just give a height of 0 to the hiden item and overflow:hidden, so that the content inside it won't be sohwn, and it will retain its height.
http://jsfiddle.net/jgyLm/9/
You can try this after appending the dynamic content to the element.
$(element).height();
$(element).outerHeight();//if you need margin to be included pass true to outerHeight method
Consider:
$("#PlotPlace").append('<div style="position:absolute;left:200px;top:40px;font-size:smaller">Hello world!</div>');
I need to execute that line only if the width of the resultant text would be less than 60px. How can I check the width before placing the object?
Unfortunately, the div will only have a width value once it is rendered into the DOM.
I would append that content to an inconspicuous area of the document, perhaps even absolutely positioned so that no flow disruption occurs, and make sure that it is set to "visibility:hidden". That way it will be inserted into the DOM and be rendered, but be invisible to the viewer.
You can then check the width on it, and move it into position and set it to "visibility:visible" at that point. Otherwise, you can remove it from the document.
Maybe you can append it invisible, then check it's width, and then consider to show or hide.
$("#PlotPlace").append('<div style="position:absolute;left:9001px;top:40px;font-size:smaller">Hello world!</div>');
var div = $('#PlotPlace').children("div");
if(div.width() < 60)
div.css({left:200})
Sounds like something you'd have to hack. I don't believe the JavaScript runtime in any browser has an event you can hook into in between calculating the layout and displaying the element, so you can add it in a way that it can't be seen and doesn't affect the height (doesn't cause additional scrolling), and then show/hide it based on the width at this point. It's hacky and ugly, but because you don't have many event hooks it might be the only way to do it.
You can´t. At least not so easy. The text you insert is written in a specific font, which must be rendered by the browser, then you know the width of the element. By the Way, what exactly do you want to insert, with such a restriction? Wouldn´t it be simpler to cut the text within the output parameters?