View Single Post
Old 09-30-2012, 12:15 AM   PM User | #1
taypandt
New Coder

 
Join Date: Aug 2012
Posts: 24
Thanks: 5
Thanked 0 Times in 0 Posts
taypandt is an unknown quantity at this point
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!
taypandt is offline   Reply With Quote