How To Adjust Copy Format for Copy Button/Function? - html

I have this html code:
<div id="people-sheet">
<div class="stats-people">
<table>
<tr>
<td id="inplaceStr">Strength</td>
<td id="pointerStr">-</td>
</tr>
<tr>
<td id="inplaceSpd">Speed</td>
<td id="pointerSpd">-</td>
</tr>
<tr>
<td id="inplaceDex">Dexterity</td>
<td id="pointerDex">-</td>
</tr>
<tr>
<td id="inplaceDur">Durability</td>
<td id="pointerDur">-</td>
</tr>
<tr>
<td id="inplaceEnd">Endurance</td>
<td id="pointerEnd">-</td>
</tr>
<tr>
<td id="inplaceSen">Senses</td>
<td id="pointerSen">-</td>
</tr>
<tr>
<td id="inplaceInt">Intellect</td>
<td id="pointerInt">-</td>
</tr>
<tr>
<td id="inplaceWil">Willpower</td>
<td id="pointerWil">-</td>
</tr>
<tr>
<td id="inplaceCha">Charisma</td>
<td id="pointerCha">-</td>
</tr>
</table>
</div>
<div class="skills-people">
<p class="skills-list">Skills Ranks: </p> <p id="p-rankcap">Rank Cap: </p>
<textarea rows="10" cols="50" id="p-skills"></textarea></p>
</div>
<div class="equipment-people">
<p>Equipment:</p>
<textarea class="equipment-text-area" rows="10" cols="50" placeholder="Remove and Add at your discretion."></textarea>
</div>
<div class="traits-people">
<p>Traits:</p>
<textarea class="trait-text-area" rows="10" cols="50" placeholder="Remove and Add at your discretion."></textarea>
</div>
<div class="racial-traits-people">
<p>Racial Traits:</p>
<textarea class="racial-trait-text-area" rows="10" cols="50" placeholder="Remove and Add at your discretion."></textarea>
</div>
</div>
And this copy button function:
$(document).ready(function () {
$("#copy").click(function(){
console.time('time1');
var temp = $("<input>");
$("body").append(temp);
temp.val($('#people-sheet').text()).select();
document.execCommand("copy");
temp.remove();
console.timeEnd('time1');
});
});
But it copies it like this:
Strength - Speed - Dexterity - Durability - Endurance - Senses - Intellect - Willpower - Charisma - Skills Ranks: Rank Cap: Equipment: Traits: Racial Traits:
How do I get it to copy the contents like this:
Strength -
Speed -
Dexterity -
Durability -
Endurance -
Senses -
Intellect -
Willpower -
Charisma -
Skills Ranks:
Rank Cap:
Equipment:
Traits:
Racial Traits:
Including the inside of the text areas.

Related

Force an element to take exactly half of available height in print media

I am dynamically creating elements (student bills) on a web page which I want to print.
I want this element to take only half of the total printable height in print media, so that I can print two elements on one page.
But in the picture, It's clear that some part of the third element is appearing on first page, which should actually go on the second page.
How can I force this element (one student's bill) to take exactly half of the height of the page?
<div class="col-md-6">
<div id="page-wrap">
<div style="clear:both"></div>
<div id="customer">
<div id="customer-title">
<table>
<tbody>
<tr>
<td style="text-align:center">
12017 </td>
<td style="text-align:center">
dfsdgf sdgsdg sdgsdg </td>
<td style="text-align:center">
1st </td>
</tr>
<tr>
<td style="text-align:center">
32817 </td>
<td style="text-align:center">
Sarika Godara </td>
<td style="text-align:center">
3rd </td>
</tr>
</tbody>
</table>
</div>
<table id="meta">
<tbody>
<tr>
<td class="meta-head">Bill #</td>
<td>149</td>
</tr>
<tr>
<td class="meta-head">Date</td>
<td id="date">11-08-2017</td>
</tr>
<!--tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">Rs.</div></td>
</tr-->
</tbody>
</table>
</div>
<table id="items">
<tbody>
<tr>
<th colspan="1">Sr.No.</th>
<th colspan="4">Description</th>
<th colspan="1">Detail</th>
<th colspan="1">Sub-total</th>
</tr>
<tr>
<td colspan="1">1
</td>
<td colspan="4"> Tuition Fees(upto September)
</td>
<td colspan="1">2600 + 2750
</td>
<td colspan="1">5350
</td>
</tr>
<tr>
<td colspan="1">2
</td>
<td colspan="4"> AC
</td>
<td colspan="1">2450 + 2450
</td>
<td colspan="1">4900
</td>
</tr>
<tr>
<td colspan="1">3
</td>
<td colspan="4"> Transport Fees(upto September)
</td>
<td colspan="1">1650
</td>
<td colspan="1">1650
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Grand Total</td>
<td class="total-value">
<div id="total">Rs. 11900</div>
</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line">Amount Paid</td>
<td class="total-value">Rs. 0</td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="4" class="total-line balance">Balance Due</td>
<td class="total-value balance">
<div class="due">Rs. 11900</div>
</td>
</tr>
</tbody>
</table>
<div id="terms">
<h5>Please Note</h5> आपने अपने बच्चे की फीस पेमेंट में बहुत देर कर दी है. कृपया जल्दी से जल्दी भुगतान करें.
</div>
</div>
</div>
Try this
add a div after every 2nd elements with page-break-after property
<div style="page-break-after:always"></div>
page-break-after property sets whether a page break should occur AFTER a specified element
DEMO

My form answers are not attaching to email

I have wrote in scripting a simple question list, I need the responses to be returned in a txt file via email when the person hits submit. The front end of the file works, the email creates but the form does not post. Can anyone help with this scripting please?
Coding listed below:
<form action="mailto:test#yahoo.com?subject=Test" id="form" method="post" name="form" >
<!-- PAGE HEADER -->
<table bgcolor=#D1DEE5>
<tr>
<td width="833px"align="center">
<input class="title" name="Title" value="Customer Satisfaction Survey">
</td>
</tr>
</table>
<!-- QUESTIONS -->
<p>
<table>
<tr>
<td>
<p> Welcome message
<p>
</ul>
</td>
</tr>
</table>
<br>
<table>
<tr class="shaded">
<td align="left">
<p><b>Please tell us based on your experience, how satisfied you are with the following services:</b>
</td>
<td align="center" width="50px">Very satisfied</td>
<td align="center" width="50px">Satisfied</td>
<td align="center" width="50px">Dissatisfied</td>
<td align="center" width="50px">Very Dissatisfied</td>
<td align="center" width="50px">N/A</td>
</tr>
<tr>
<td>A</td>
<td align="center" width="50px"><input type="radio" name="q1" value="Very satisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Satisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Dissatisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Very Dissatisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="N/A"></td>
</tr>
</table>
<br>
<table class="outlineTable" bgcolor=#D1DEE5>
<tr>
<td align="left" rowspan=5 width=500 style="vertical-align:top" style="padding-top:5px">
<p><b>Please add comments to explain your answers</b>
<br><textarea name="Comments10" id="Comments10" rows="7" cols="55"></textarea>
</td>
<td align="left">
Month being scored
</td>
<td align="left" class="submitButton">
<input class="name" name="Month">
</td>
</tr>
<tr>
<td align="left">
Name
</td>
<td align="left" class="submitButton">
<input class="name" name="Name">
</td>
</tr>
<tr>
<td align="left">
Date
</td>
<td align="left" class="submitButton">
<input class="name" name="Date">
</td>
</tr>
<tr>
<td align="left">
</td>
<td align="left" class="submitButton">
<input class="button2" type="submit" value="Click here to submit results">
</td>
</tr>
</table>
<br>
<table bgcolor=#D1DEE5>
<tr>
<td align="center">
<h1> Many thanks for taking the time to complete this survey
</td>
</tr>
</table>
<p>
</form>
</body>
</html>

Select Link after fetching label in front of it

I am writing a selenium java code and at a particular webpage i want to select a link from a group of links where each link has an emebeded text within a table. How can i select particular link at this situtation. for eg.
run title--text 1
run title--text 2
run title--text 3
how can select specific run link for a specific title text? the text is not a label rather it is just simple text on the webpage.
i am using the following code:
verify.text("text 1");
it will only verify the presence of text, it wont go towards the link as link of every execution is named RUN. so it will identify the corresponding run link? The HTML code for the above is:
<HTML>
<HEAD>
<TITLE>TEST</TITLE>
</HEAD>
<BODY>
<div align="center"><table class="module" width="630">
<tr>
<th class="banner" width="70">ACTION</th>
<th class="banner" width="560">REPORT TEMPLATE</th>
</tr>
<tr>
<td class="modulenav" width="70">
<table class="innermodule" width="100%">
<tr><td class="moduleNav"><a class="listingLink"
href="www.abc.com/">Run</a></td></tr>
<tr><td class="moduleNav"><a class="listingLink"
href="www.zxc.com">UnShare</a></td></tr>
</table>
</td>
<td>
<table class="innerModule" width="100%">
<tr>
<td class="label" width="70">Title</td>
<td width="490"><span class="listingHead">Incident Performance by Priority</span></td>
</tr>
<tr>
<td class="Label" width="70">Description</td>
<td class="listing"></td>
</tr>
<tr>
<td class="Label" width="70">Owner</td>
<td class="listing"> Software Engineer Tel: </td>
</tr>
<tr>
<td class="Label" width="70">Shared With</td>
<td class="listing">
Software Engineer Tel: <br>
</td>
</tr>
<tr>
<td class="label">Report Type</td>
<td class="listing">Performance by Priority</td>
</tr>
</table>
</td>
</tr>
<tr><td class="tableRuleNavy" colspan="2"></td></tr>
<tr>
<td class="modulenav" width="70">
<table class="innermodule" width="100%">
<tr><td class="moduleNav"><a class="listingLink"
href="www.abc.com">Run</a></td></tr>
<tr><td class="moduleNav"><a class="listingLink"
href="www.cxd.com">UnShare</a></td></tr>
</table>
</td>
<td>
<table class="innerModule" width="100%">
<tr>
<td class="label" width="70">Title</td>
<td width="490"><span class="listingHead">Incident Trend Analysis Report</span></td>
</tr>
<tr>
<td class="Label" width="70">Description</td>
<td class="listing"></td>
</tr>
<tr>
<td class="Label" width="70">Owner</td>
<td class="listing">Software Engineer Tel: </td>
</tr>
<tr>
<td class="Label" width="70">Shared With</td>
<td class="listing">
Software Engineer Tel: <br>
</td>
</tr>
<tr>
<td class="label">Report Type</td>
<td class="listing">Trend Analysis</td>
</tr>
</table>
</td>
</tr>
<tr><td class="tableRuleNavy" colspan="2"></td></tr>
<tr>
<td class="modulenav" width="70">
<table class="innermodule" width="100%">
<tr><td class="moduleNav"><a class="listingLink"
href="www.sdfds.com">Run</a></td></tr>
<tr><td class="moduleNav"><a class="listingLink"
href="www.asdg.com">UnShare</a></td></tr>
</table>
</DIV>
</td>
</BODY>
</HTML>
Get a list of web elements and iterate over them.
This is not tested
E.g.
List<WebElement> we = findElements(By.cssSelector("tr a"));
Iterator itor = we.iterator()
While(itor.hasNext()) {
WebElement we = itor.next();
if (we.getText().equals("your visible text")) {
we.click // click link
}
}

I don't understand how to add a table inside a div

I have a very simple table and I would like to understand what is incorrect with using this . I have entered a styling of color: red; just to visualize where the will work correctly.
<table>
<tr>
<td colspan=2>
<div id="transportation_table" >
<tr>
<td align="right"> Flights (round trip) </td>
<td align="right"> <input type="text" size="10" id="flights" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Oversized baggage fee (skis) </td>
<td align="right"> <input type="text" size="10" id="oversized" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Taxi to airport, shuttle to resort (X2) </td>
<td align="right"> <input type="text" size="10" id="shuttle" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
</div>
</td>
</tr>
</table>
You are not declaring a table inside of your div. Tr elements belong inside of tables.
See: http://dev.w3.org/html5/markup/tr.html
That is likely the big error you are seeing.

How do I increase the width of a column in an HTML table?

How do I increase the width of a column in an HTML table?
Below is my code. I am trying to get the second <td> tag in each row to expand so that there is more space between the input text box (1st <td> tag) and the name of the cookie and it's price (3rd <td> tag). Any ideas?
<!--Order Info. table -nested table 2 -->
<!--This is the first nested table within the main table -->
<table border="0" width="65%" cellpadding="2">
<!--Row 1 -->
<tr>
<th colspan="3" align="left">Order Information</th>
</tr>
<!--Row 2 -->
<tr>
<td>QTY</td>
<td colspan="15"></td>
<td>Subtotal</td>
<td colspan="90"><input name="Gift Wrapping" id="Gift Wrapping" type="checkbox" /> Gift wrapping? (Additional charge of 1.95 per box)</td>
</tr>
<!-- Row 3 -->
<tr>
<td><input name="quantitya" id="quantitya" size="3" type="textbox" value="0"/></td>
<td colspan="4"></td>
<td colspan="11" align="left">Chocolate Nut - $10.99</td>
<td><input name="subtotala" id="subtotala" size="10" type="textbox" value="0"/></td>
<td colspan="40">If yes, note the text for the gift card:</td>
</tr>
<!-- Row 4 -->
<tr>
<td><input name="quantityb" id="quantityb" size="3" type="textbox" value="0"/></td>
<td colspan="4"></td>
<td colspan="11" align="left">Chocolate Chip - $9.99</td>
<td><input name="subtotalb" id="subtotalb" size="10" type="textbox" value="0"/></td>
<td colspan="5"><textarea wrap="soft" name="giftcardtext" id="giftcardtext" rows="3" cols="20" ></textarea></td>
</tr>
<!--Row 5 -->
<tr>
<td><input name="quantityc" id="quantityc" size="3" type="textbox" value="0"/></td>
<td colspan="4"></td>
<td colspan="11" align="left">Macadamia Nut - $12.99</td>
<td><input name="subtotalc" id="subtotalc" size="10" type="textbox" value="0"/></td>
</tr>
<!--Row 6 -->
<tr>
<td><input name="quantityd" id="quantityd" size="3" type="textbox" value="0"/></td>
<td colspan="4"></td>
<td colspan="11" align="left">Oatmeal Raisin - $10.99</td>
<td><input name="subtotald" id="subtotald" size="10" type="textbox" value="0"/></td>
</tr>
<!--Row 7 -->
<tr>
<td><input name="quantitye" id="quantitye" size="3" type="textbox" value="0"/></td>
<td colspan="4"></td>
<td colspan="11" align="left">Chocolate Dessert - $10.99</td>
<td><input name="subtotale" id="subtotale" size="10" type="textbox" value="0"/></td></td>
<td>Shipping:</td>
<td colspan="30"></td>
<td colspan="150">$5.95 for 1-5 boxes, $10.95 for five or more boxes</td>
</tr>
<!--Row 8 -->
<tr>
<td><input name="quantityf" id="quantityf" size="3" type="textbox" value="0"/></td>
<td colspan="4"></td>
<td colspan="11" align="left">Butter - $7.99</td>
<td><input name="subtotalf" id="subtotalf" size="10" type="textbox" value="0"/></td></td>
<td>Total:</td>
<td colspan="30"></td>
<td colspan="1"><input name="totala" id="totala" size="3" type="textbox" value="0.00" /></td>
</tr>
<!--Row 9 -->
<tr>
<td colspan="0"></td>
<td colspan="4"></td>
<td colspan="11" align="left">Subtotal</td>
<td><input name="subtotalg" id="subtotalg" size="10" type="textbox" value="0" /></td></td>
</tr>
</table>
You can do it in pixels or as a percentage:
<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="300">
<TR>
<TD WIDTH="100">Column 1</TD>
<TD WIDTH="200">Column 2</TD>
</TR>
</TABLE>
or
<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD WIDTH="25%">Column 1</TD>
<TD WIDTH="75%">Column 2</TD>
</TR>
</TABLE>
You would give the column a width, either using inline styles
<td style="width: 50%">
or, better, in a style sheet
td.column1 { width: 50% }
....
<td class="column1">
....
You can also specify padding for space between columns
td.column1 { padding-right: 64px }
by the way, the varying huge colspan values look very weird. What are they supposed to achieve?
If you need more space between table columns, you can use CSS margin/width properties with any value suitable for you. I would highly discourage including html visual formatting in your html code, albeit if you do, take the time to learn the meaning of some html properties, as "colspan" does not specify the width between tds, but combines them into one td.
<td style="width: 100px;">Cell data here</td>
Replace the number with whatever width you want. Note that the columns will be the max size throughout the table. So if column 2 is 200px in row 1 and 300px in row 2, the column will end up being 300px in all rows.
After you resolve the colspan issue that Jared Updike brought up, I'd check out using CSS and increasing the values for padding-left and padding-right.