Dynamically resize container to fit text - javascript

There are many jQuery plugins that let you resize a text to fit a container. But how can you dynamically change the width/height of a div container to fit the text inside of it?
Below an example. As you can see the text is currently overflowing the div. How can you programatically resize the container div to fit the text independent of the font size and content?
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:100px; height:100px;border:1px solid red; overflow: hidden;">
<p style="font-size:40px;">This is the text</p>
</div>
</body>
</html>

It should be done with css but this is how to do it in JS/jQuery
$('#container').each(function(){
var inner = $(this).find('p');
$(this).height(inner.outerHeight(true));
$(this).width(inner.outerWidth(true));
});
http://jsfiddle.net/2CDt5/2/
Alternative solution is to set the width height and display property with the css method
$('#container').css({'width':'auto','height':'auto','display':'table'})
http://jsfiddle.net/7yH2t/

Remove width and height, add display:table;

You could decide how do you want the box to fit the text - in width or in height.
If you want width, change
width: auto
If you want height, change
height: auto
JSFiddle: http://jsfiddle.net/39e7z/

Related

Automatically setting height for a covered background image

On this website, I'm using the CSS3 Cover property of the Background rule to stretch an image behind the header.
Right now, I had to set the header element to have a min-height of 500px for it to work. However, this is not an optimal solution because when I resize the window, I expect the height to be less so the image shrinks proportionally. I'm thinking the solution might be in Javascript?
Here is the code:
<div style="background: url(http://altushealthsystem.com/dev/wp-content/uploads/home-banner.jpg) no-repeat 0 0 transparent;background-size: cover; min-height: 500px;"></div>
Link to the JS Fiddle
Is this possible?
You do not need javascript for that. You could specify the header height using percents. However that will work only if the parent has specified height.
In your example you should add
height: 100%;
for html and body elements (all ancestors of header), and for example:
height: 40%;
for you header element.
Instead of declaring a background for the header, you can add an image element with the following styling:
<header....>
<img src="http://altushealthsystem.com/dev/wp-content/uploads/home-banner.jpg" style="max-width:100%; height:auto;position: absolute;z-index: -999;">
<div class="container">
<div class="row top-row">
...
You should also take advantage of the #media tags to declare a certain width and height when the screen is of certain size.

Can't style a div with javascript

I am applying style qualities to a div containing external javascript, and they seem to be ignored by the browser. The first div works correctly.
http://jsfiddle.net/TxWN3/2/
<div style="text-align:center;">Working center text</div>
<div id="btc-quote" style="text-align:center;"></div>
<script type="text/javascript" src="//cdn-gh.firebase.com/btcquote/embed.js"></script>
The content of the div class="btc-quote" might have some css code not wanting it to center. (I have not read all that code from BTC) To workaround this, you can make the div itself centering, not the content.
A simple trick to do this is add the following css to the div:
width:212px;
margin:auto;
This is a nice workaround found here
If you want to center it, first give it a width and then margin:0 auto:
<div id="btc-quote" style="width:212px;margin:0 auto"></div>
To center your included div, add this CSS:
.btc-box {
margin:0 auto;
}
jsFiddle example
The text-align:center; CSS property is not used in the way you are assuming.
If you check this fiddle, you will see that the default width of a div is the width of the container, and so when you center the text it appears the div is centered. However this is not the case.
To center a Div you can use the Position CSS property :
Add the following CSS attributes :
position:absolute;
left:50%;
margin-left:-106px; /* Half of the width of the div */
And see the following fiddle for the Second Div being center aligned
http://jsfiddle.net/Nunners/TxWN3/7/

Resizing inner div on resizing size of dijit.layout.BorderContainer

I have a div of dojoType dijit.layout.BorderContainer, And i am trying to set the size of this bordercontainer dynamically with respect to size of the viewport. The html code to create the border container is
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer" style="border: solid green 3px;">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 230px; padding:2px 0px 0px 0px;">
</div>
</div>
I am updating the size of the border container using the following javascript code
var viewport = dojo.window.getBox(dojo.doc);
dojo.setStyle('borderContainer','height','430px');
but on executing the code i was able to see the size of the div of type border container to be changed, however the div inside the div of type bordercontainer is not changing.
You will need to call resize on the widget and the widget will resize its children.
var viewport = dojo.window.getBox(dojo.doc);
var borderContainer = dijit.byId('borderContainer');
dojo.setStyle(borderContainer.domNode, 'height','430px');
borderContainer.resize();
An alternative approach
When I want the border container to take up the whole screen, I will set it's height and width to 100%. All parent dom nodes of the border container will also need a height of 100% set (i.e. <html>, <body>, etc.)

Google Maps API div in another div

Today I started to implement Google maps into my site, but I've ran into a problem, because the div with the maps provided for me can't be put into another div?!
I use the code stated on this site and when I do something like
<div><div id="map_canvas" style="width:100%; height:100%"></div></div>
it stops working. Why? I don't want my maps to be displayed over the whole page, I want it to be displayed in an normal div which I can restyle whenever I want...
You can style the div map_canvas. It doesn't need putting inside another div to do that.
So for example, change your code to this:
<div id="map_canvas"></div>
And CSS:
#map_canvas{
width:400px; /* your own height here */
height:300px; /* your own height here */
border:solid 1px green; /* your own border if you like */
/* maybe you want to position it somewhere? you can do for example */
position:absolute; top:50px; left:50px;
}
UPDATE
Apparently you need to set the width & height on the parent DIVS too. I haven't tested this yet, though try the following:
<div id="mapHolder"><div id="map_canvas" style="width:100%; height:100%"></div></div>
#mapHolder {width:100%; height:100%;}
Failing that, have you tried an absolute size, rather than % as in my CSS at the top of this answer?
Change style sheet like this:
<style type="text/css">
#map_canvas { width : 500px; height : 500px; }
</style>
And also get rid the inline stylesheet from the div tag.
<div id="map_canvas"></div>
you can re-size the map by change the width and height values. so
<div id="map_canvas" style="width:50%; height:50%"></div>
Right now you have
<div><div id="map_canvas" style="width:100%; height:100%"></div></div>
This should not work because your parent div has no width and height. When you are using width/height in %, the element measures the dimension depending on it's parent element. If you apply some width and height to your parent element/div, i.e.
<div style="width:300px;height:300px"><div id="map_canvas" style="width:100%; height:100%"></div></div>
then the inner div (map_canvas) will apply the width and height to itself 100% of 300px. Alternatively you can remove the outer div. Hope it helps.

CSS / JavaScript - content outside a element with overflow:hidden

I have a container div element that has overflow:hidden on it. Unfortunately this property is required on it because of the way the site is made.
Inside this div it's all the site content, including some tooltips. These tooltips are displayed with jQuery when you mouse over a link or something.
The problem is that some of these tooltips will display partially hidden because of the overflow thing above, because they are positioned outside the container div...
Is there any way to be able to show a specific element from inside this container, even if it's out of its boundaries? Maybe a javascript solution?
the html looks like this:
<div style="overflow:hidden; position:relative;">
the main content
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
try this:
<div style="position:relative;">
<div style="overflow:hidden; position: relative; width: {any}; height: {any};">the main content<div>
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
just place your main content to another div inside the main div and give provided css to hide the content if overflowing...
CSS works like a box, and sometimes, you have elements "flowing out". Setting overflow: hidden on the main element hides contents that flow out of this box.
Consider the following:
HTML
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
CSS
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}`
This outputs the following:
Note that the rest of the texts that overflow are hidden.
if overflow:hidden is to contain floats, then there are other ways that would allow tooltips to not be cut off. look foe clearfix:after

Categories

Resources