Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2013
    Thanked 0 Times in 0 Posts

    Looping, dimensions, and the DOM

    I've got a function that picks a short phrase (a string) randomly from an array.
    Let's say I'd like to display that phrase inside a div (#div1) of fixed width (960px). Within that div, I'd like the phrase to be placed at a random position.

    (Edit: for aesthetic reasons, I'd like to keep the phrase all on one line.)

    It's relatively easy to do that by randomizing some values, and appending the to that string to #div1 inside another div tag (#div2) with absolute positioning. Only problem is, I want the phrase #div2 to fit inside #div1... and since I don't know which phrase will be selected, I don't know the width of the #div2! So if #div2 ends up with a width of 200px and is placed at left:860px, it runs over by 100px.

    Normally for these sorts of problems, I would use a while loop; ie: keep re-rolling until a value that does not run over is obtained. But a) I'm not so familiar with element dimension retrieval functions, and b) it seems like this could never work anyway, because once javascript rendered the new element in the DOM, (such that dimensions could be retrieved), the script would have already run and it would be 'too late'.

    Thoughts on the matter? Is this problem solvable in js, or should I try a workaround?
    Last edited by GregoryG; 12-30-2013 at 11:15 PM.

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Thanked 1,016 Times in 1,013 Posts
    This maybe easier to do in PHP, don't know, it took long enough to get it in JS.
    Since the string comes from a DB, PHP defines it. This is a PHP file:

    PHP Code:
    "The string I want to place";
    <!DOCTYPE html>
    <title>Title of the document</title>
    <style type="text/css">
        border: 1px solid red;

    <span id="test"><?php echo $the_str?></span>
    <div id="place"></div>

    <script type="text/javascript">
        var textWidth = document.getElementById("test").offsetWidth;
        alert(textWidth+" px");/*   So you can see the width   */
        document.getElementById("place").style.width = textWidth+"px";
        document.getElementById("place").innerHTML = "<?php echo $the_str?>";
    In order to keep the user from seeing the string before it's placed o the CSS:
    and remove the alert.

    You should be able to handle this from here.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Thanked 626 Times in 605 Posts
    div2.offsetWidth will let you know for example that left=860px is too far to the right for the div to fit the container.
    you can always update the style after appending, it's never "too late" to re-position.
    Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com


Tags for this Thread

Posting Permissions

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