This question already has answers here:
Auto-size dynamic text to fill fixed size container
(21 answers)
Closed 8 years ago.
I have been searching for a solution to resize the text size in a div to make the text fill out the entire div height and width, with no avail.
I have made some images to help understand this problem:
So this is a simple div with a height and width set. This height and width does not change, the text in the box does! So what I want to do is to make that text fill the whole width and height of the div just like in the image below.
I have been working on the simple example below and I simply cannot find out how to do this. I have tried setting relative font-sizes with percentage, doing things with overflow,
text-aligning all not giving me the result I want.
<html>
<head>
<title>Test</title>
<style type="text/css">
#box1, #box2{
width: 400px;
height: 300px;
color: white;
margin: 10;
font-size:larger;
text-align:justify;
letter-spacing: 100%;
}
#box1 { background-color: green;}
#box2 { background-color: blue;}
</style>
</head>
<body>
<div id="box1">
Llorem ipsum foo bar baz
</div>
<div id="box2">
Foobar
</div>
</body>
</html>
Is this problem even solvable with simple CSS or will I have to do some javascript/jQuery?
As I said this may be a dupe of
Auto-size dynamic text to fill fixed size container.
The OP did a jQuery plugin for that means, you can download it here
It doesn't seem to up to date though!
Good luck!
You can use FitText.js (github page) to solve this problem. Is really small and efficient compared to TextFill. TextFill uses an expensive while loop and FitText don't.
Also FitText is more flexible (I use it in a proyect with very special requirements and works like a champ!).
HTML:
<div class="container">
<h1 id="responsive_headline">Your fancy title</h1>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
You also can set options to it:
<script>
jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>
CSS:
#responsive_headline {
width: 100%;
display: block;
}
And if you need it, FitText also has a no-jQuery version.
My guess is, this is not the kind of thing you can do with CSS. There isn't any kind of notion of percentage in fonts (as far as I know). You'll probably need to use Javascript.
Related
I was trying to get a parallax effect on my website's landing page. I used the interactive_bg.js plugin and working backwards from the demo tutorial I was finally able to get the picture I want with the desired effect.
Here's my code:
HTML -
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
</body>
CSS -
html {
height: 100%;
}
body {
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper { // this class isn't really needed but I thought it may help when putting other elements atop this div.
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.bg {
position: absolute;
min-height: 100% !important;
width: 100%;
z-index: 0;
}
.ibg-bg {
position: absolute;
}
Js -
$(document).ready(function(){
$(".bg").interactive_bg({
strength: 20,
scale: 1.00,
contain: false,
wrapContent: true
});
});
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
I reverse engineered the tutorial files to find this code.
Now the problem is, anything that I put into the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> messes up the picture. Any div I want to put after the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div doesn't even show up on the screen but is rather behind the background image.
How do I put text and other divs on the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div and more content after that div ends?
I have tried z-index and positioning (by looking at the code from the tutorial). It doesn't seem to work.
Also, the CSS only works when I put it in a style tag inside the <head> of the HTML. If I put the CSS in a separate file it doesn't work.
(I did link the CSS to the HTML correctly)
P.S refer to the tutorial I linked above, it'll get you an idea.
UPDATE:
I made some changes to the HTML and now I have text over the image. And the text isn't moving anymore but adds a white space on top. I tried margin but it didn't remove the white space. I still can't add anything below the image.
HTML-
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
<div class="main"> <h1> SOME TEXT </h1></div>
</body>
CSS -
#main{
position: relative;
}
Did you see the demo? http://www.thepetedesign.com/demos/interactive_bg_demo.html
wrapper div will take all the space available, width 100% and height 100%.
wrapper div holds all the content, position absolute.
ibg-bg div is just holds the background image and its not intended to have content inside, position absolute makes easy to put content over it; no need for z-index.
Any other div inside wrapper div and after ibg-bg div will show on top.
How do you put text over the background?
As I said before, put that content inside the wrapper div and after the ib-bg div.
How do you put text or more content after that div?
Add your new content below wrapper div and start playing with css properties to adapt the demo to your preferences.
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
<!-- You need this next div -->
<div class="ibg-bg"></div>
<div>This will appear over your background</div>
</div>
<div>This will appear below your background</div>
</body>
[Edit]
CSS Copied from demo.
#main {
position:relative;
float:left;
width:100%;
margin:0 auto;
}
[/edit]
After pondering around for a while it turned out to be a JS error. I had done a mistake in javascript while copying the script for the plugin execution.
Shout-out to #Triby for helping me out with the CSS, though that is a different thing and I will state it in another question.
Here's the working JS -
$(document).ready(function(){
$(".bg").interactive_bg({
scale: 1.05,
strength: 25,
animationSpeed: "150ms"
})
})
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
I like using mosaic because when a user increases the size of their browser, it will automatically move around to find the best possible fit. 5 columns can resize to four columns quite nicely. I'd like an effect similar to this, but without the "move to find best fit".
Right now I'm using a table to store some data, each cell of size 300x250. The problem arises when a user increases the size of the page, since cells are rigid and will not reduce column size to compensate, and I end up with cells outside the width of the page, necessitating scrolling.
How can I achieve this effect? To summarize:
start with for example 5 columns that span the width of the page
if the user zooms in to the point where an element would go beyond the width of a page, make it into four columns instead
if the user zooms out, have it go back to five columns (but cap it at five)
Is there an easy method to get this tiling scheme? Here's an image to illustrate:
That's how display: inline-block elements are laid out. Combine with min-width if you want them to be uniform rather than dictated by their actual content.
Example: Live Copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
.box {
display: inline-block;
border: 1px solid black;
min-width: 100px;
text-align: center;
margin-bottom: 2px;
margin-right: 2px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</body>
</html>
Note that some old versions of IE don't like you to take an element (like div) that defaults to display: block and make it inline-block instead. If you need to support them, use an element (like span) that defaults to inline-block instead.
I've a simple javascript function which is meant to increase my sidebar div's height to make it equal to the height of the content div. this is how I am doing this....
Javascript:
<script type="text/javascript">
function absar(){
document.getElementById("sidebar").style.height = document.getElementById("content").clientHeight;
}</script>
HTML:
<body onLoad="absar()">
<div id="sidebar" style="border:1px solid red">Few content</div>
<div id="content" style="border:1px solid red">
some content <br>
some content <br>
some content <br>
some content <br>
some content <br>
</div>
</body>
This code will make the height of sidebar equal to the height of content div. ** OK**
But when I paste same code in wordpress(where I've same id values content & sidebar) just after the body tag and provide onload="absar()" to body it does nothing, exactly nothing.
At this point when I've designed almost whole layout I can't go with a new solution like Faux Columns or table etc. .
At last a stupid css trick worked and worked perfectly,....
for my sidebar div I set
padding-bottom: 5000px;
margin-bottom: -5000px;
and for the container which contained sidebar and content divs. I set
overflow: hidden;
and it worked perfectly - Just like the way I wanted, Please tell If you know any drawbacks of this trick,... I'll be posting here if I found some,
Below is the example code,
HTML
<div class="main">
<div class="sidebar">Few Sidebar Widgets</div>
<div id="content">
Bang Bang Content <br>
Bang Bang Content <br>
Bang Bang Content <br>
</div> <!-- End of Content -->
</div> <!-- End of Main -->
CSS
#main{
overflow:hidden;
}
#sidebar{
padding-bottom: 5000px;
margin-bottom: -5000px;
}
Further to #Absar 's answer, can I just add my adaptation?
I did this:
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
I did the "101%" thing to cater for the (ultra rare) possibility that somebody may be viewing the site on a huge screen with a height more than 5000px!
Great answer though, Absar. It worked perfectly for me.
For several reasons, this should be solved by using proper CSS and HTML markup, not by Javascript. The main reason is the separation between your site logic and your presentation layer. CSS is just for visual layout, and simple presentation issues should be solved in the CSS domain. This seems to be the case of your question.
I suggest you have a look at this CSS-tricks article. It is both enlightening and thorough.
Hope it helps.
Right now i am using multiple heading tags and a css class to achieve the effect shown in the image below, Is there any way to achieve this by using just a single heading/line and css?
Current Code :
<h2 class="heading">Hi guys, How can i achieve this effect using just a single</h2>
<div class="clearfix"></div>
<h2 class="heading">line of text and css. Right now i am using</h2>
<h2 class="heading">multiple <h2> tags and a css class to achieve this effect.</h2>
<h2 class="heading">Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
Expected Code
<h2 class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
The main problem with this according to me is, I cannot make it responsive without decreasing font size, padding, etc which i don't want.
And even if i make it responsive i cannot add line breaks wherever i want without using other tags or javascript.
How did you guys get around this?
one, of the tons of solutions
<h2 class="heading">
<span>Hi guys, How can i achieve this effect using just a single</span>
<span>line of text and css. Right now i am using</span>
<span>multiple <h2> tags and a css class to achieve this effect.</span>
<span>Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
<span class="clear"></span>
</h2>
with this styles in <head>
<style type="text/css">
h2.heading {
background:#0f0;
padding:2px;
float:left;
}
h2.heading span {
clear:left;
display:block;
float:left;
background:#fff;
padding:1px;
margin:1px;
}
h2.heading .clear {
clear:left;
margin:0px;
padding:0px;
float:none;
}
</style>
EDIT: second variant
<style type="text/css">
h2.heading {
background:#0f0;
padding:2px;
display:inline-block;
font-size:20px;
}
h2.heading span {
background:#fff;
padding:1px;
margin:1px;
line-height:30px;
}
</style>
with this markup
<div style="width:300px;">
<h2 class="heading">
<span>Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
</h2>
</div>
No need of CSS or JavaScript, just use the <br> tag.
<h2 class="heading">
Hi guys, How can i achieve this effect using just a single
<br>
line of text and css. Right now i am using
<br>
multiple <h2> tags and a css class to achieve this effect.
<br>
Is it possible to achieve this only with css or do i have to use Javascript as well?
</h2>
Or did I misunderstand the question?
I kind of solved the problem. Take a look here http://jsfiddle.net/7nafE/ (remove the div to see the responsivness)
HTML:
<span class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple <h2> tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>
Same as your HTML except that I used a span instead of h2
And css:
.heading {
background: white;
line-height:2em;
padding: 0.3em;;
}
body { /*not really neccessary to show, but anyway*/
background: limegreen;
font-family: verdana;
color: #999999}
Problem with that is that there are no paddings to the left and right of the text.
And also. you can't get your line breaks where you want. It is all up to which container you place it in. It is, if you asked me, just good because that makes it responsive in a way a <br /> or something like that wouldn't do.
I currently have a web site in which I am using some Javascript to change the Background of a DIV.
The DIV is defined as follows :
<td style="width: 750px; height: 300px; background-color: Black; border: 0px;">
<div id="outerscreen">
<div id="mainscreen">
</div>
</div>
</td>
and the Javascript I am using is as follows :
var docEl = document.getElementById('outerscreen');
docEl.style.backgroundImage = "url('pics/intro.gif')";
My problem arises where this function works perfectly on IE but fails for Chrome, FF and Safari.
Can anyone shed any light on what the problem is and how I might be able to resovle this.
Thanks in advance
Chris
Assuming that you have some content inside #mainscreen, the most likely explanation is that #mainscreen is floated, so it isn't used when calculating the height of it's parent, but that you have a Doctype (or no Doctype at all) that triggers Quirks mode in Internet Explorer, so it doesn't allow floats to fall through the bottom of their containers.
Add a Doctype that triggers standards mode (so IE will be more consistent with other browsers)
set overflow: hidden on #outerscreen
This does work in FF4 and Opera10. You need to specify the height and width of <div id="outerscreen">, or have some content inside which takes up screen real estate for this effect to be visible.
Although i don't recommend using a table for your layout here is a solution that works better and gives you more control
<style type='text/css'>
.outerCell {
width: 750px; height: 300px; background-color: Black; border: 0px;
}
.outerScreen {
background-image : url('pics/intro.gif');
height: 300px;
}
</style>
<td class='outerCell' >
<div id="outerscreen">
<div id="mainscreen">
</div>
</div>
</td>
now the javascript:
var docEl = document.getElementById('outerscreen');
docEl.className = "outerScreen";
Having your style defined in a css is more flexible when you want to make changes,
code seperation is always good
I think the problem is with the '
try:
docEl.style.backgroundImage = "url(pics/intro.gif)";