www.webdeveloper.com
Results 1 to 12 of 12

Thread: Resizing

  1. #1
    Join Date
    Oct 2012
    Posts
    8

    Resizing

    Hi!

    I'm having a problem with resizing text. I uploaded picture for illustrative purposes.
    http://i46.tinypic.com/34ys9s7.png

    The problem is. The big box is the parent div in which there is a smaller div (smaller box) that contains an image. The rest of the bigger div should be filled with text (red/pink lines). Text is formatted in paragraphs (<p> .... </p> <p> .... </p>) and there are some links within text.

    Sizes of divs are dynamic, they change when window size changes. So I want the font size to change to fit the main div. Is there any solution? I would really appreciate it.

    Cheers!

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    It sounds like you're looking for "responsive font size." If so, here's a great plugin:
    http://fittextjs.com/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Oct 2012
    Posts
    8
    Hey there!

    Thank you for your response. Still I have one question - how can I use mentioned script in html... let's say I have html code somewhat like this:


    <html>

    <head>
    </head>

    <body>
    <div id="main_div">
    <div id="image_div"></div>
    <p> text </p>
    <p> text </p>
    </div>
    </body>

    </html>

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    Something like this?

    $('#main_div p').fitText();
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  5. #5
    Join Date
    Oct 2012
    Posts
    8
    Shouldn't i write <script> something something </script> somewhere with the path of the script.
    And where should I place this line you wrote?

    Sorry for those questions, I haven't done anything like this before. Yet, I would like to make a website by myself. So all the help is appreciated. Thanks!

  6. #6
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    Can you post your current code? I'll tell you where to place it then.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  7. #7
    Join Date
    Oct 2012
    Posts
    8
    Hey! Thanks for your response Here's my html code:

    <html>
    <head>
    </head>

    <body>
    <div id="taust" align="justify">

    <img src="images/1.png" width="30%" height="auto" alt="1" id="top_foto">
    <img src="images/A.png" width="auto" height="15%">

    <p> text </p>
    <p> text </p>
    <p> text </p>
    <p>text <a href="link" target="_blank">Link</a>!</p>

    </div>
    </body>
    </html>

    As you can see, there is the main div called "taust" and there is div "top_foto" inside it. There's also one additional photo and text with hyperlinks.

  8. #8
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    Alright, I think I'm getting a better understanding on what you're trying to achieve. Give this a look:
    http://jsfiddle.net/QPdh9/3/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  9. #9
    Join Date
    Oct 2012
    Posts
    8
    Thanks for your response, but I have to admit it, it does not work the way I would like. This fits the last row of each paragraph, but I would like to fit whole text into the div "taust". Because if I change my browser's window size, the size of the div "taust" changes, but the text size does not change, and breaks out of the div, but I would like the text to fit the div, yet I would not like to stretch my div. So I would like to manipulate the font size in order to fit it in the div. I think it is not possible just using html and/or css, that's why I would like to know, how to use the script you mentioned.

    As you can see, text breaks out of the div
    http://jsfiddle.net/QPdh9/7/
    Last edited by Webino; 10-12-2012 at 12:19 PM.

  10. #10
    Join Date
    Oct 2012
    Posts
    8
    Hey, can anyone show me how to use this script: https://github.com/davatron5000/FitT...ery.fittext.js

    in this code, so that the text would fit into div
    http://jsfiddle.net/QPdh9/28/

    I would be really grateful!

  11. #11
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    Webino,

    I'm still looking at this. That script seems to handle fitting text horizontally. It sounds like you need something that will fit the text both horizontally and vertically.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  12. #12
    Join Date
    Oct 2012
    Posts
    8
    Yeah, it should be simple procedure - if the text breaks out of the div, then decrease font-size. And function should do it until it fits. I would do it myself, but I don't have the skills writing javascript.

    Still, thanks for your time and effort! Seems like no-one is able to help me

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles