FitText.js
A jQuery plugin for inflating web type
FitText - A plugin for inflating web type
I'm trying to use FitText.js to resize the headlines to fit into the browser width.
In a few sections of my website the script works just fine, but on this page it's not doing the work for iPhone. It works fine on my Desktop though.
Here's the code:
jQuery(".inner-title h2").fitText(1, { minFontSize: '12px', maxFontSize: '96px' });
Here's a screenshot.
http://imageshack.com/a/img713/6315/4myi.png
So the text should resize to fit the width of that red box.
Source: (StackOverflow)
when I first open my page, my h1 element's font-size shows very small. When I resize it, it automatically becoming huge. I want to know what is the problem with my code?
$('h1').fitText(0.273);
I didn't write font-size property in h1's css code. Thanks!
Source: (StackOverflow)
I use fittext.js and I try to make a h1 fit the whole width of the containing div in one line.
But the text makes two lines. 2014 of the text 17., 18. og 19. juli 2014 is on line two.
If I put nowrap on the h1, the text is in one line, but wider than 100%.
How to force the text to stay in one line?
Source: (StackOverflow)
JSFiddle
Link jsfiddle https://jsfiddle.net/jimmyphong/867wvc9u/2/
Im using jquery Fittext with bootstrap carousel , for first and active item work fine , so with another item or (hidden maybe) it not work !
any help !
Thanks
Source: (StackOverflow)
I'm working with fittext.js. It's working clearly. But my problem is different screen sizes. If I use the 100% width for container on 1920px*1080px font size is bigger than 1280px*800px. But if I define the width for container like 800px 2 screen size has same font size. How can I change it?
Source: (StackOverflow)
I have seven divs with id 1 to 7 in my html when I resize my window diagonally then the fittextjs plugin resizes the text within the 7 divs thats fine.
When I resize the window horizontally then the font-size decreases/increases fine...
What is not working as expected is: When I resize the window only vertically then the font-size does not decrease/shrink.
How can I make it work for the last non-working case?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FitText</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
font-family: arial;
/*overflow: hidden;*/
}
* { /* Every element which has a border or padding value puts this value inside the div */
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0;
margin: 0;
}
._Z {
width: 12.50%;
}
.Stack {
display: table;
height: 100%;
float: left;
}
.Stack li {
list-style: none;
display: table-row;
}
.Stack li div {
display: table-cell;
}
.horizontal-right {
text-align: right;
}
.horizontal-center {
text-align: center;
}
.vertical-center {
vertical-align: middle;
}
#responseView {
height: 100%;
}
</style>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="responseView" data-bind="swipeLeftRightContentViews: $root.showMapView">
<div style="height: 100%;">
<ul class="Stack _Z" data-bind="foreach: replyTimeStack.segments">
<li style="height:14.2%;background: green; color: black;">
<div id="div1" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">1</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div2" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">2</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div3" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">3</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div4" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">4</div>
</li>
<li style="height:14.2%;background: yellow; color: black;">
<div id="div5" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">5</div>
</li>
<li style="height:14.2%;background: orange; color: black;">
<div id="div6" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">6</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div7" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">7</div>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
$("#div1").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div2").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div3").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div4").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div5").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div6").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div7").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
</script>
</body>
</html>
Source: (StackOverflow)
I am creating a responsive design and I keep on struggling with one issue: I have a vertical menu for which I use a html list. I want to have the font-size to be adjusted to the width available. For that I use fittext.js which is awesome, but I can't get my vertical list working, I get a list who goes diagonal, and not from up to down like it should.
html:
<div class="main-nav">
<ul>
<li><a rel='nofollow' href="”#”">Home</a></li>
<li><a rel='nofollow' href="”#”">The Next Page</a></li>
<li><a rel='nofollow' href="”#”">Another Page</a></li>
<li><a rel='nofollow' href="”#”">Last Page</a></li>
</ul>
</div>
CSS:
div ul li a {
width: 25%;
float: left;
}
My full code if you want fast testing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FitText</title>
<style type="text/css">
div ul li a {
width: 25%;
float: left;
}
</style>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div class="main-nav">
<ul>
<li><a rel='nofollow' href="”#”">Home</a></li>
<li><a rel='nofollow' href="”#”">The Next Page</a></li>
<li><a rel='nofollow' href="”#”">Another Page</a></li>
<li><a rel='nofollow' href="”#”">Last Page</a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
$(".main-nav ul li a").fitText();
</script>
</body>
</html>
Fittext can you find here: https://github.com/davatron5000/FitText.js
Please help
Source: (StackOverflow)
like the title says I am desperately trying to center a text h1 in the middle of a responsive element. I tried around for 2 hours now and can't seem to get it work correctly. What am I doing wrong?
I tried absolute positioning and - margins but that seemed not really accurate:
.category-description{
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -10% 0 0 -30%;
font: 16px/1.8 "Titillium Web", sans-serif;
}
I made a JSFiddle for better understanding
Fiddle goes here
Thanks in advance and sorry for my bad english
Source: (StackOverflow)
I' want to use jquery.fittext.js to change font sizes in a perticular div using a dropdown menu. But I can't seem to get this working.
I'm aware that this can be done as $("#ftType").style.fontSize = $(this).val(); But I need to get this working with the above plugin. Basically how do I trigger this plugin when a dropdown item is selected?
<script id="ftyp" type="text/template">
<select name="dropdown">
<option value="25%">50</option>
<option value="50%">100</option>
<option value="75%">150</option>
</select>
</script>
<script>
inWrapper.append($($('#ftyp').html()).change(function(){
$("#ftType").css("width", $(this).val()); //the div resizes correctly but the font doesn't change its size
$("#ftType").fitText(); //doesn't work
});
</script>
fittext.js syntax:
jQuery("#responsive_headline").fitText();
Source: (StackOverflow)
How do I trigger the below fittext.js function
$.fn.fitText = function( kompressor, options ) {
var compressor = kompressor || 1,
settings = $.extend({
'minFontSize' : Number.NEGATIVE_INFINITY,
'maxFontSize' : Number.POSITIVE_INFINITY
}, options);
return this.each(function(){
// Store the object
var $this = $(this);
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};
)};
using the change() Method?
$('#drop').change(function(){
$('#tf').css('width', $(this).val());
//resizer(); // does not work
//$('#tf').fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });// does not work
});
Source: (StackOverflow)
I was tried to apply FitText.js in nested element. Like below:
<span class="my_fitext">Good<span class="my_fitext">Luck</span></span>
or
<span class="my_fitext">Good</span><span class="my_fitext">Luck</span>
I know it need width. There is any way to make responsive text on nested elements.
Also, Tried
<span class="my_fitext" data-font-size="70px">Good</span><span class="my_fitext" data-font-size="40px">Luck</span>
jQuery(".my_fitext").each(function(ind, elm) {
var mf = jQuery(elm).attr('data-font-size');
var ex = jQuery(el);
var h = ex.height();
var w = ex.width();
ex.fitText(Math.min(h,w)/Math.max(h,w), { minFontSize: '16px', maxFontSize: mf } );
});
Source: (StackOverflow)
Im using the plugin fittextjs to automatically resize my fonts to make them fit to the current div width's. For example i use it here in the <span>:
<ion-view class="menu-content" view-title="Polaroid">
<ion-content>
<div class="polaroid">
<div class="polaroid-img">
<img ng-src="{{polaroid.cropped}}" />
</div>
<div class="polaroid-title">
<span data-fittext style="font-family: {{polaroid.style}}">{{polaroid.title}}</span>
</div>
</div>
</ion-content>
</ion-view>
The keyword here is data-fittext. When i open the html page the resizing of the font size gets applied without problems. Also when im resizing the changing of the font size works very good.
Now i navigate forward to another page where i can change the font style. The changing of the font style works perfectly. When i navigate back the font style is applied..
BUT
The fittext does not apply. The text size gets very small (i guess 10px). I have to resize my page so that fittext applies the font-size again.
Why does fittext does not apply the font-size after changing the font-family?
Source: (StackOverflow)
I have two div tags in my HTML code like this
<div id="parent">
<div id="child">
<p class="child-text"> ..... </p>
<a class="child-link"> ..... </a>
<p class="child-text"> ..... </p>
</div>
</div>
#parent{ height: 400px; width:100px}
How can force the content of #child div vertically fit into the parent div ?
I am looking for some thing that can take child div ID and resize its content dynamically. I have worked with jQuery.fittext. However, it get the child-text class id instead of child div id. In other words, it is not intelligent enough to identify what is in the child div and then rescale them.
Is there any other alternative for this ?
Source: (StackOverflow)
I have some tag clouds placed within a div. For each tag cloud there is a thumbs down icon and I used sliding tag css from http://www.cssflow.com/snippets/sliding-tags
If a tag cloud is greater than 80px, it does not fit inside that div. I used word wrap and also fittext plugin from jquery but I could not manage to make it work. Could you suggest what could be the possible solution for it?
I have created fiddle for it: http://jsfiddle.net/aexqoe8n/1/
In Js side :
resultDiv = document.getElementById('tokenCloudResultDiv');
resultDiv.innerHTML = '';
resultDiv .innerHTML="<ul class='tags blue' style='list-style-type: none;padding:5px;'>";
for (i in json) {
addToken(resultDiv, i, json[i]);
}
resultDiv.innerHTML=resultDiv.innerHTML+"</ul>";
function addToken(target, key, result) {
var str;
var weight;
if(result['tagWeight']>80)
$("#tokenCloudResultDiv").fitText(1.2);
weight= "style='font-size: " + result['tagWeight'] + "px;'";
if(addedAutomatically)
str = "<li><div><a " + weight + " >" + result['tagName'] +"</a><span class='thumbsDownIcon' id ='" + tagId + "' style='display:block;cursor:pointer;' ></span></div></li>";
target.innerHTML += str;
}
Source: (StackOverflow)