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
    Aug 2012
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Wrapping text in a form?

    I'm not exactly sure what the best way to go about this is, but I'm building a page that cycles through images and text using the setInterval() method. I've got the text and images side by side in a table row, with the text on the left, but I'm having trouble getting the text to wrap rather than being on one single long line.

    Code:
    <td width="200" rowspan="6" align="right" valign="middle">
            <form action="" name="toolBox">
                <p class="wrap"><input type="text" name="definition" size="50" width="20"
                    style="color:black;font-weight:bold; border-style:none; 
                    border-color: inherit; border-width:medium; background-color:
                    Transparent; width: 200; word-wrap: break-word;" value="'Sed at mauris lorem, id viverra nulla. Donec egestas odio vitae felis fermentum accumsan. Integer sit amet erat tortor, eget dapibus quam.'" /></p>
            
    </td>
    <td width="800" rowspan="6" align="center" style="margin-top:50px">
            <img src="images/powertool1.jpg" width="300" height="300" id="toolpics" alt="Tool Images" border="7px" style="border-color:#5F2601"/>
                <p><input type="text" name="toolName" size="50"
                    style="color:black; text-align:right; font-weight:bold; border-style:none; 
                    border-color: inherit; border-width:medium; background-color:
                    Transparent" value="Power Drill" /></p>
            </form>
    </td>
    I know I could wrap the text if it weren't set up as an input field, but the problem is that I need the text to also be able to cycle when called by the function being used by setInterval. Here's my function as it is right now:

    Code:
        var showTxt="powertext";
        function cycleTxt() {
            if (showTxt == "powertext") {
                document.toolBox.definition.value = "'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dui vitae mauris bibendum lobortis at ut mi. Cras nec eleifend tellus'";
                showTxt = "handtext";
            }
            else if (showTxt == "handtext") {
                document.toolBox.definition.value = "'Vivamus quis purus elit, in sodales sem. Donec placerat dignissim dui id scelerisque. Donec lacinia ultricies arcu vitae hendrerit. Nunc ut elit risus.'";
                showTxt = "autotext";
            }
            else if (showTxt == "autotext") {
                document.toolBox.definition.value = "'Sed at mauris lorem, id viverra nulla. Donec egestas odio vitae felis fermentum accumsan. Integer sit amet erat tortor, eget dapibus quam.'";
                showTxt = "powertext";
            }
        }
    I feel like I'm not explaining myself very well in this post, so feel free to tell me if I need to give more information or clarification. Thanks in advance!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,912
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I guess the first question is going to be if you want it on various lines, why not use a text area:
    Code:
    <p class="wrap"><textarea name="definition" rows="6" cols="30" style="color:black;font-weight:bold; border-style:none; border-color: inherit; border-width:medium; background-color: Transparent; width: 200; word-wrap: break-word;">'Sed at mauris lorem, id viverra nulla. Donec egestas odio vitae felis fermentum accumsan. Integer sit amet erat tortor, eget dapibus quam.' </textarea></p>
    but an even better question is why not make it a div and change its contents using innerHTML

    Code:
    <div id="definition" style="height:50px; width:30px; color:black;font-weight:bold; border-style:none; border-color: inherit; border-width:medium; background-color: Transparent; width: 200; word-wrap: break-word;">'Sed at mauris lorem, id viverra nulla. Donec egestas odio vitae felis fermentum accumsan. Integer sit amet erat tortor, eget dapibus quam.' </div>
    
    ...
    
    document.getElementById("definition").innerHTML = "'Lorem ipsum dolor sit amet, etc"

  • Users who have thanked xelawho for this post:

    taypandt (09-30-2012)

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Awesome, that works, thank you!


  •  

    Posting Permissions

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