Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    38
    Thanks
    5
    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
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,721
    Thanks
    25
    Thanked 662 Times in 661 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:
    <?php
        $the_str 
    "The string I want to place";
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    div{
        border: 1px solid red;
    }
    </style>
    </head>

    <body>
    <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?>";
    </script>
    </body>
    </html>
    In order to keep the user from seeing the string before it's placed o the CSS:
    Code:
    span{
    	visibility:hidden;
    }
    and remove the alert.

    You should be able to handle this from here.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 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.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    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
    •