JQuery :: Resizing Font-Size According To Amount Of Characters
Apr 25, 2011
I'm looking for a way to resize the 'font-size' of an element so it fits in it's container. What I currently have is this:
var maxWidth = 100;
var $width = $('.number span').width();
while ($width > maxWidth) {
$width.css({ 'font-size' : '-1px' });
alert("bigger");
}
I was trying to make it so while the width of the text is larger than the width of its container, 100px, the size would decrease by 1 in a loop until it's the correct size. Unfortunately, this yield's no results for me.
I'm reading jQuery in Action for my learning and thought I could start with a simple exercise for my page: I have several divs of the class ".important_new" with headings in there which are links to the articles:
<div class="important_new"> <h1><a href="#">New York Knicks sign Patrick Ewing Jr.</a></h1> <img class="important_new_flag" src="images/body/flags/USA.png" /> <span class="important_new_country">USA</span>
[Code]....
This results in displaying all the headings in an 8px font size except two of them (which don't have more than 40 characters either). The 40+ character headings also get reduced.
I've gone through it lots of times and changed a ton of things, but can get more than that. Can anyone see what my failing/s are?
I'm attempting to make a web page that adapts to the size of your browser size when it maximized. Because I'm only 15 I'm not such a great programmer or coder. I've done my best with the resources I have though (Fluent in Lua and a natural ability to pick languages syntax up quickly)
Here is what I have so far, it doesn't work and it is starting to puzzle me. As it seems correct as I look at it. I'm sorry if this question show my ignorance. I try my best to hide it.
Some of it is Copy pasted from sources on Google. But only for educational purposes, I learn off reading, examining and testing out snippets.
I'm basically trying to get the max size of the window and resize the div accordingly.
All my font-sizes are set as relative sizes in CSS (large, medium, small, x-small, etc). Let's say something is set in CSS to be xx-large, but a visually impaired user wants it displayed even bigger. Can a script determine an element's absolute size, *as it is being rendered by the browser*, and then increment the element's font-size in absolute terms?
where da boss wants our a large piece of our site to be fully dynamic and integrated on any screen size. This means changing font on size. Well I cam up with a solution, figured if no one has one better, then i'll share
How can I change my text or font size when the user changes the browser size. Example: When the browser is maximized, the font goes to normal, when the browser window decreased, the font size is reduce.
when i resize the div then i want the text within font tag should be resized as per my div. for example if my div height=400 and width=200 after resized dynamically using jquery then my font (eg: vivek) must be resized with same height and width.
is there any property (in js or jqurey) through which i can set height and width of a font but not using size property.
I want to resize the div based on browser size, I mean when first it load I want it to fit on browser window and no scrolling bars should be appear and when I resize the browser size by dragging, it should be fix on that size.for example visit this link:I WANT THE SAME BEHAVIOR (SIZE BASED ON BROWSER) BUT USING JQUERY.
I;m trying to implement increase/decrease font size buttons on a site, but nothing is happening. I've set breakpoints and tried changing $('html') to $('body') and although the code runs, no attributes are set. The code I'm using is:
[Code]...
Even if I remove the cookie, the code runs but nothing happens. Am I missing something obvious?
Im using a vb script that will show the latest x forum threads on forumhome but i would like to be able to restrict how many characters it out puts so after say 150 chars then the 3 dots would appear.ie. This would be my forum thread ti ...Heres the script im using
<if condition="$vbulletin->options['externaljs']"> <!-- show latest active threads --> <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0"
I am using the bookflip plugin i found here: [URL]
I am attempting to modify the code so the book pages resize based on the screen width... or height... not really sure how this should be done as I need the proportions of the pages to stay consistent.
I have been able to achieve the resize on page load but I now need to add the resize() method to the variable.
This is what I have so far (original code):
var $containerwidth = $(window).width(); var $pagewidth = $containerwidth/1.22; var $pageheight = $containerwidth/2.05;
I think I need to add an if() statement in the variable that says if page width or height changes resize else original code that is working. I have this code which I know works but I can't seem to get to work with one variable without overriding the original code... which doesn't work with this application.
I've been trying to find a way to animate a font-size increase on hover - which I'd expect is probably quite straightforward but so far I can't seem to find how to do it (and incorporate into below).
I have a ul list using "hoverscroll" and would like to use it on this rather than just doing a straight CSS hover font size which is a bit naff.[code]...
I am using the following code to adjust the size of all P tags. Thistag is design to work with three buttons a increase font button adecrease font button and a reset buttonI would like to modify this so it works with just one button.... Iwould like the first 4 clicks to run the increase font size functionthen the 5th click to reset the font.
// font resizer $(document).ready(function() { // Reset Font Size
I am using the following code to allow the user to increase / decreasethe font size of the document. I have tested it in many browsers andin all of the following it comes back with a starting font size of16px.Firefox 3.0.8Google Chrome 1.0.1Safari Win 4 Public BetaIn IE 6/7 the font size is always coming back 1243px. Why is theresuch a difference and is there anyway to get around this besides hardcoding the starting size?
<script type="text/javascript" language="javascript"> $(document).ready(function(){ var originalFontSize = getFontSize();
I have an unusual situation. I need to increase the font size of every word in a sentence, one at a time, everytime you click on the page / div. any ideas ?
my closest idea was to wrap each word in a <span> tag and then use .next("span"), but that controls all of spans.
If i had <span>word one</span> <span>word 2</span>, how would i style one span at a time by clicking a single button ?
We are working within a CMS and we have a dynamic text header that pulls into the top of the page. The problem is that there are certain titles that are too long and are breaking into other design elements. I'm thinking there should be a way to count the number of characters and then dynamically change the font-size of the header.
I'm doing a text resizer with a cookie to remember the font size level. I'm running into a little problem and was wondering if someone sees something obvious I'm missing. The cookie is being set/read OK and the text resizer works when triggered manually, but it's not being executed on page load when you navigate to other pages.
For example, on the home page, I set it to the largest size, size 3. This gets set to the cookie. If you quit/relaunch the browser, the cookie still reports size 3. Also, when you navigate to another page, onload, it reads the size 3 and it passes it to the textResize() function (these are my console.log() lines), but the text isn't actually resized on page load. If you trigger the text resizer manually, it works.
I'm controlling the font size by adding (or removing) a class to the body tag. Anyone have any ideas why the text isn't resizing automatically onload?
i have created an option on a website to give the possibity to the user to change the font size (smaller, bigger, reset), like the famous x3 'A' that we see in most of the websites. the code i have is based on a plugin copywrite to [URL]. now i'm facing a problem with different font size for different elements. to make the text bigger and smaller works like a charm but to reset the font size is not working so good. here is the code of the plug in the reset part:
//on clicking default font size button, font size is reset jQuery(container + " .defaultFont").click(function(){ jQuery("#content *").css('font-size', defSize); // coockie to rememebr the selected font size updatefontCookie(target, defSize); });
here is how i'm calling the function: fontSize("#container", "#content *", 8, 12, 20); container is where i have the images to make the text smaller or bigger content is the div that has the content that i want it to be changed 8 is the smallest fonr size 12 default 20 max now the thing is that i have different font sizes in the page and some of them don't have a class just the <font> ....</font> when i'm clicking the rest button then i'm getting everything with size 12 and this is what i want to change. i want to remember the current font size and set it back.
How can I change font size according to window size?font-size=xx% is not working as I expect.Plz give me code for that.My wish is to chage font size according to window size, so that I can always get same type of screen.Currently when i reduce my window , my text also changes its position,looks quite messy.
if it's possible to re-size a div vertically based on the size of another div.I have this code but it's malfunctioning. Basically it takes the ID of the two divs and offset their height.
Example: The dynamic div will stretch or re-size vertically based on the size of the content div. So if the contents in the content div is increased, like text size, the the other div stretch to give equal height.Here is my code:
Code: <script type="text/javascript"> <!-- function equalize() {[code].....
Why is it bad to use pixels to specify font size. If people think its too small/too big, they can Ctrl + and Ctrl - in their browser even in IE. is there another reason why its a bad idea to use pxs?
I have a current script that I am using to dynamically resize the font within all paragraph tags on a page. Does anybody have a simple JavaScript that will retreive the P tag and change it's font size, either up or down a few pixels?
I would like slim code that might only work in the latest browsers. IE6 and Netscape 7 is fine.
I operate as a admin a online print site where clients can enter in contact info to create imprint on promotional items.
I create pdf templates with field placeholders |1.1|[address]
This template is uploaded to the print site which interprets the tags and makes them into variable fields for clients to enter in their info. The site can pull the font name, size, position, etc... from the pdf template.
For each info field that the site creates it also has an option to apply javascript to that field. So if the template predefines font size X, I just want to apply code that will affect only the numbers of that text and make the numbers a larger font size than the letters.
The code I'm use to writing is pretty simple stuff for example to format dots instead of dashes for phone numbers like:
if (hasValue(curInput.name)) { if (! AutoFormat(curInput, '###.###.####', 'Please enter your number in a 555.555.5555 format'))curInput.focus(); }
