...

View Full Version : Wrapping text in a form?



taypandt
09-30-2012, 12:15 AM
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.


<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:


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!

xelawho
09-30-2012, 12:46 AM
I guess the first question is going to be if you want it on various lines, why not use a text area:


<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



<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"

taypandt
09-30-2012, 03:31 AM
Awesome, that works, thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum