How to select visible element using XPath or CSS? - javascript

I want to select the apply button in the following code. There are two buttons and only one button is visible.
//input[#value='Apply' and #id='btn' and #name='btn' and not(ancestor::td[contains(#style,'display:none')])]
I have written above XPath to select the visible one but in web driver it says unable to access the element. (browser - IE8)
<table class="ColumnTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="dashboard~120" class="Section" style="" headeron="" minimized="false" rendered="false">
<table class="SectionT" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style=" display:none;">
<div id="dashboard~Contents" style="">
<table style="width:100%">
<tbody>
<tr height="100%">
<td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
<div id="EmbedViewd" reloadinline="">
<div id="NavDone" style="display:;">
<div id="Result" result="Prompt">
<table class="ViewTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="newLayout">
<form style="margin: 0;" method="post" action="javascript:void(null);">
<div style="">
<table class="PromptView" style="">
<tbody>
<tr>
<td class="ButtonsCell">
<input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="dashboard~121" class="Section" style="" headeron="true" minimized="false" rendered="false">
<table class="SectionT" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div id="dashboard~Contents" style="">
<table class="SectionTD" style="width:100%; border-top:none;">
<tbody>
<tr height="100%">
<td class="EItem" valign="TOP" align="CENTER" colspan="2" style="">
<div id="EmbedViewd" reloadinline="">
<div id="NavDone" style="display:;">
<div id="Result" result="Prompt">
<table class="ViewTable" cellspacing="0">
<tbody>
<tr>
<td>
<div id="newLayout">
<form style="margin: 0;" method="post" action="javascript:void(null);">
<div style="">
<table class="PromptView" style="">
<tbody>
<tr>
<td class="ButtonsCell">
<input id="btn" class="button" type="button" tabindex="0" value="Apply" name="btn" style="background-color: rgb(240, 240, 240);">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
My question is there anyway other work around for this issue. I think there are plenty of ways to write the above xpath am i right?

You could try the following in case this is a Selenium issue:
//input[#value='Apply'][#id='btn'][#name='btn']
[not(ancestor::td[contains(#style,'display:none')])]
It's the same expression with the same result, but as mentioned here Xpath does not work with Selenium it's possible that Selenium has an issue with evaluating and in XPath.
Another issue I just want to mention is that you shoudn't use the same id for multiple elements, ids should be unique. Otherwise your HTML is not valid. When you change the ids to unique values, it'd be possible to reduce the XPath match conditions.

Selecting an element using xpath:
Selecting the first element:
//div[#id='dashboard~120']descendant::input[#id='btn'].Click;
Selecting the second element:
//div[#id='dashboard~121']descendant::input[#id='btn'].Click;

Related

How to hide parent table based on child table style visibility

I have a html as below and basically it contains main table with class as <table class="customFormTable block" and this in turn contains some tables like <table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
So i want jQuery/javascript to scan for parent table with class table customFormTable and find if any children has table with style="visibility: hidden;", if so hide the parent table i.e table customFormTable
<table class="customFormTable block" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:9px;" ignore="all">
<tbody><tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="15%" class="portlet-form-field-label">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="portlet-form-field-label"><strong>
Police Details
</strong></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="85%">
<table border="0" cellpadding="0" cellspacing="0" width="85%" class="MarginL10px">
<tbody><tr>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)" class="portlet-form-field-label" style=""><label for="app_spec_info_POLICE_DETAILS_Police_Station">Police Station</label> <font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementMessage" class="Redstar"></font></font></td><td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)"><input type="text" id="app_spec_info_POLICE_DETAILS_Police_Station" name="app_spec_info_POLICE_DETAILS_Police_Station" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font> </td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" class="portlet-form-field-label" style=""><label for="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number">Police Report/ Case Number</label> <font id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRedstar" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementMessage" class="Redstar"></font></font></td><td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)"><input type="text" id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" name="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
first change id from 'elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)' to anything else like 'elementTableContainerCheckHidden'
Because jquery throw error while parsing () contains id name.
Try below solution which gives you true / false for elementTableContainerCheckHidden for hidden visibility
if ($('.customFormTable')
.find('#elementTableContainerCheckHidden').css("visibility") === "hidden") {
$('.customFormTable').hide(); //hide your parent table
}
Hello
which table do you want to hide ? You can try to use jQuery like this
$("yourSelector").find(' + "yourTarget"').event("");
"yourSelector" , that means ID/Class which is the child or your selector
"yourTarget" , that means your parent of the selector or your target
"event", means hide()/addClass() like this or your event
I hope you can try this
$("yourSelector").find(' + "yourTarget"').addClass("yourClass");
and by the help of css you can easily done you wish.
OR
$("yourSelector").find(' + "yourTarget"').hide();
is very helpful I hope
you need to traverse all tds and find table element.
$(document).ready(function(){
var tds=$(".customFormTable tbody tr td")
$.each(tds,function(){
var htmls=$.parseHTML($(this).html())
$.each(htmls,function(i,o){
if(o.outerHTML)
if(o.outerHTML.indexOf("table")){
console.log(o.style.visibility)
if(o.style.visibility=='hidden' || o.style.display=='none')
console.log(o)
$(".customFormTable").hide();
}
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="customFormTable block" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom:9px;" ignore="all">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="15%" class="portlet-form-field-label">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="portlet-form-field-label"><strong>
Police Details
</strong>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="85%">
<table border="0" cellpadding="0" cellspacing="0" width="85%" class="MarginL10px">
<tbody>
<tr>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Station)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)" class="portlet-form-field-label" style="">
<label for="app_spec_info_POLICE_DETAILS_Police_Station">Police Station</label> <font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Station*ElementMessage" class="Redstar"></font></font>
</td>
<td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Station)">
<input type="text" id="app_spec_info_POLICE_DETAILS_Police_Station" name="app_spec_info_POLICE_DETAILS_Police_Station" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table id="elementTableContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" width="80%" style="visibility: hidden;">
<tbody>
<tr>
<td id="elementLableTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)" class="portlet-form-field-label" style="">
<label for="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number">Police Report/ Case Number</label> <font id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number*ElementRedstar" class="Redstar"></font> <font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRedstar" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementRequiredLabel" class="Redstar"></font>
<font id="app_spec_info_POLICE_DETAILS_Police_Report%252F_Case_Number*ElementMessage" class="Redstar"></font></font>
</td>
<td width="0"></td>
</tr>
<tr>
<td id="elementTdContainer(app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number)">
<input type="text" id="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" name="app_spec_info_POLICE_DETAILS_Police_Report%2F_Case_Number" maxlength="4000" value="" class="inputField portlet-form-input-field" style="height: 19px;"> <font class="inputField">(Text)</font>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Javascript :not selector not working

I have this javascript / jQuery which essentially wraps every 2 <td> elements with <div class="table-half">, however I specifically state in the variable that I do not want this to take effect if the table has a #profileContent parent.
var divs = $("div:not('#profileContent') table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}
However, for some reason the wrapping still takes place with html in this structure:
<div id='profileContent'>
<table width="100%" class="form">
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
Any ideas why?
The reason it's not working is because your table is nested in multiple levels of DIV, and the selector is written to match a table that's any descendant of a DIV. The parent matches the ID, so the :not excludes it, but the grandparent does not have that ID, so it's it's not excluded.
Instead of putting the :not around the DIV id, put it around the selector for the table itself.
var divs = $("table.form:not(#clientsummarycontainer table) tr td");
.color {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contentarea Client-Profile" id="contentarea" style="margin-left:209px;">
<div style="float:left;width:100%;">
<h1>Client Profile</h1>
<div class="tab-content client-tabs">
<li class="dropdown pull-right tabdrop hide"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <b class="caret"></b></a>
<ul class="dropdown-menu"></ul>
</li>
<div class="tab-pane active" id="profileContent">
<div id="clientsummarycontainer">
<div class="clearfix">
</div>
<p align="right">
<input type="button" value="Status Filter: Off" class="btn btn-xs btn-small" onclick="toggleStatusFilter()">
</p>
<div id="statusfilter">
<form>
<div class="checkall">
<label class="checkbox-inline">
<input type="checkbox" id="statusfiltercheckall" onclick="checkAllStatusFilter()" checked=""> Check All</label>
</div>
</form>
</div>
<form method="post" action="/redacted/clientssummary.php?userid=redacted&action=massaction">
<input type="hidden" name="token" value="redacted">
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Products/Services</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="prodsall">
</th>
<th>ID</th>
<th>Product/Service</th>
<th>Amount</th>
<th>Billing Cycle</th>
<th>Signup Date</th>
<th>Next Due Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td>
<input type="checkbox" name="selproducts[]" value="redacted" class="checkprods">
</td>
<td>redacted</td>
<td style="padding-left:5px;padding-right:5px">redacted 7 Day Free Trial - (No Domain)</td>
<td>$0.00 USD</td>
<td>Free</td>
<td>01/06/2016</td>
<td>-</td>
<td>Active</td>
<td>
<img src="images/edit.gif" width="16" height="16" border="0" alt="Edit">
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Addons</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="addonsall">
</th>
<th>ID</th>
<th>Name</th>
<th>Amount</th>
<th>Billing Cycle</th>
<th>Signup Date</th>
<th>Next Due Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="9">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Domains</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="domainsall">
</th>
<th>ID</th>
<th>Domain</th>
<th>Registrar</th>
<th>Registration Date</th>
<th>Next Due Date</th>
<th>Expiry Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="9">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Current Quotes</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th>ID</th>
<th>Subject</th>
<th>Date</th>
<th>Total</th>
<th>Valid Until Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="7">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div class="btn-container">
<div class="button-container">
<input type="button" id="massUpdateItems" value="Mass Update Items" class="button btn btn-default" onclick="$('#massupdatebox').slideToggle()">
<input type="submit" name="inv" value="Invoice Selected Items" class="button btn btn-warning">
<input type="submit" name="del" value="Delete Selected Items" class="button btn btn-danger">
</div>
</div>
</form>
</div>
<script language="javascript">
$(document).ready(function() {
$("#prodsall").click(function() {
$(".checkprods").attr("checked", this.checked);
});
$("#addonsall").click(function() {
$(".checkaddons").attr("checked", this.checked);
});
$("#domainsall").click(function() {
$(".checkdomains").attr("checked", this.checked);
});
});
</script>
</div>
</div>
</div>
<div class="clear"></div>
</div>
After a few more hours of playing around, I finally figured out something that works, although I don't know if it's really the best way of accomplishing what I'm after (I'm thinking it's probably not) nor do I know how efficient it is:
var divs = $("table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
if ($('table.form').parents('#clientsummarycontainer').length == 0) {
divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}
}

Issues with ui bootstrap modal CSS and printing

I am creating a webpage using angularjs and ui bootstrap to create modals. Then I have javascript to print just the modal. However, I am having an issue with my CSS. Firstly, for some reason (most likely because my CSS is messed up) the text is extending outside the div they belong in. Specifically, the ingredients and nutrition facts within the div with the class "onerow" are extending below the div with the class "modal-body".
Here is the plunker: http://plnkr.co/edit/fxvD6MTvbEHsaonLR669?p=preview
Furthermore, I have some javascript to print just the modal pane. It seems to work except for the fact that for some reason the thick solid black borders in the nutrition facts become borders with rounded corners. Again, refer to the plunker to better see what I am talking about.
Here is the html that makes up the modal:
<div class="modal-header" id="modalHeader" style="text-align: center;">
<h3 class="modal-title">PLU# {{productData.PLU}} -- {{productData.Dept}}</h3>
</div>
<div class="modal-body" id="modalBody">
<div ng-show="!pluValid" style="text-align:center;">
PLU {{productData.PLU}} not found in Database
</div>
<div class="onerow" ng-show="pluValid">
<div class="col6">
<div style="text-align: center;">{{productData.Desc1}} {{productData.Desc2}}</div>
<br />
<br />
Ingredients:
<br />
{{productData.Ingredients}}
<br />
<br />
<br />
<div style="text-align: center;">
<b>UPC NUMBER</b>
<br />
{{productData.UPC}}
</div>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="!areFacts">
<table style="width:100%;" cellspacing:0 cellpadding:0>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts</td>
</tr>
<tr>
<td style="text-align: center;">N/A</td>
</tr>
</tbody>
</table>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="areFacts">
<table style="width:100%;" cellspacing:0; cellpadding:0;>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts<br /><br /></td>
</tr>
<tr>
<td>
Serving Size {{productData.ServSize}}
<br />
Servings Per Container {{productData.ServPer}}
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<div class="line">Amount Per Serving</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Calories
<div class="weight">{{productData.Calories}}</div>
</div>
<div style="padding-top: 1px; float: right;" class="labellight">Calories from Fat
<div class="weight">{{productData.CaloriesFat}}</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<br />
<div class="dvlabel" style="text-align: right;">% Daily Value<sup>*</sup></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Fat
<div class="weight">{{productData.TotalFat}}g</div>
</div>
<div class="dv">{{productData.PerFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Saturated Fat
<div class="weight">{{productData.SatFat}}g</div>
</div>
<div class="dv">{{productData.PerSatFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Trans Fat
<div class="weight">{{productData.TransFat}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Cholesterol
<div class="weight">{{productData.Cholesterol}}mg</div>
</div>
<div class="dv">{{productData.PerCholesterol}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Sodium
<div class="weight">{{productData.Sodium}}mg</div>
</div>
<div class="dv">{{productData.PerSodium}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Carbohydrates
<div class="weight">{{productData.Carbs}}g</div>
</div>
<div class="dv">{{productData.PerCarbs}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Dietary Fiber
<div class="weight">{{productData.Fiber}}g</div>
</div>
<div class="dv">{{productData.PerFiber}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Sugars
<div class="weight">{{productData.Sugars}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">
Protein
<div class="weight">{{productData.Protein}}g</div>
</div>
</div>
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" class="vitamins">
<tbody>
<tr>
<td>Vitamin A {{productData.VitA}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin C {{productData.VitC}}%</td>
</tr>
<tr>
<td>Calcium {{productData.Calc}}%</td>
<td style="text-align: center;">•</td>
<td>Iron {{productData.Iron}}%</td>
</tr>
<tr>
<td>Vitamin D {{productData.VitD}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin E {{productData.VitE}}%</td>
</tr>
<tr>
<td>Thiamine {{productData.Thia}}%</td>
<td style="text-align: center;">•</td>
<td>Riboflavin {{productData.Ribo}}%</td>
</tr>
<tr>
<td>Niacin {{productData.Niac}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B6 {{productData.VitB6}}%</td>
</tr>
<tr>
<td>Folate {{productData.Folate}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B12 {{productData.VitB12}}%</td>
</tr>
<tr>
<td>Biotin {{productData.Biotin}}%</td>
<td style="text-align: center;">•</td>
<td>Phosphorus {{productData.Phos}}%</td>
</tr>
<tr>
<td>Zinc {{productData.Zinc}}%</td>
<td style="text-align: center;">•</td>
<td>Magnesium {{productData.Mag}}%</td>
</tr>
<tr>
<td>Iodine {{productData.Iodine}}%</td>
<td style="text-align: center;">•</td>
<td>Copper {{productData.Copper}}%</td>
</tr>
<tr>
<td>Pantothenic Acid {{productData.Acid}}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="labellight">
*Percent Daily Values are based on a 2000 calories diet. Your daily values may be higher or lower depending on your calories needs.
<table border=0 width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="30%"> </td>
<td width="30%">Calories:</td>
<td width="20%" style="text-align:left">2000</td>
<td width="20%" style="text-align:left">2000</td>
</tr>
</table>
</div>
</div>
<div class="line labellight" style="width: 100%;">
<table border=0 cellspacing="0" cellpadding="0" style="width: 100%">
<tr>
<td width="30%">Total Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">65<i>g</i></td>
<td width="20%" style="text-align:left">80<i>g</i></td>
</tr>
<tr>
<td width="30%">Sat Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">20<i>g</i></td>
<td width="20%" style="text-align:left">25<i>g</i></td>
</tr>
<tr>
<td width="30%">Cholesterol</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
</tr>
<tr>
<td>Sodium</td>
<td>Less Than</td>
<td style="text-align:left">2400<i>mg</i></td>
<td style="text-align:left">2400<i>mg</i></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">Total Carbohydrates</td>
<td style="text-align:left">300<i>g</i></td>
<td style="text-align:left">375<i>g</i></td>
</tr>
<tr>
<td colspan="2"> Dietary Fiber</td>
<td style="text-align:left">25<i>g</i></td>
<td style="text-align:left">30<i>g</i></td>
</tr>
</table>
<div class="line">
Calories per gram:
<br />
Fat 9 - Carbohydrate 4 - Percent 4
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" ng-click="print()">Print</button>
<button class="btn btn-primary" type="button" ng-click="close()">Close</button>
</div>
The problem is the table content requires more then the div width.
A very simple fix to start with is using the overflow CSS property in the #nutritionfacts div.
#nutritionfacts {
border: 1px solid black;
padding: 3px;
font-family: 'Arial Black', sans-serif;
overflow: scroll;
}
As for the modal border-radius problem, you need to override the default .modal-content class which in bootstrap styles has a border-raidius: 6px rule.

Moving data betwen tables with "this"

I have a game that i'm working on and in it theres a shop that has two divs: a "Buy" section and a "Checkout". The first allows you to select different items and then move them into the "Checkout" using a button for each row. My problem is that i'm unsure how to move each selected row across to the second div (checkout).
Eg:
<!-- Shop Buy -->
<div id="buy">
<h3>Purchase</h3>
<table id="buyTable">
<th>Level Required</th><th>Item</th><th>Cost</th>
<tr><td>Level 1</td><td><img src="img/shop/pickaxe_rusty.png" id="item1"></td><td>50 Gold</td><td class="moveToCheckout">⇒</td></tr>
<tr><td>Level 10</td><td><img src="img/shop/pickaxe_iron.png" id="item2"></td><td>500 Gold</td><td class="moveToCheckout">⇒</td></tr>
<tr><td>Level 25</td><td><img src="img/shop/pickaxe_steel.png" id="item3"></td><td>5000 Gold</td><td class="moveToCheckout">⇒</td></tr>
</table>
</div>
The <td class="moveToCheckout">⇒</td>or ⇒ is what the user will click on to move the items across.
<!-- Shop Checkout -->
<div id="checkout">
<h3>Checkout</h3>
<table>
<th>Items</th><th>Quantity</th><th>Price</th>
<tr><td><img src="" id=""></td><td><input type="text" value="1" id="quantity"><td>X Gold</td></td></tr>
</table>
<div id="checkoutBoxes">
<span id="checkoutYes">✔</span>
<span id="checkoutNo">✘</span>
</div>
</div>
Additional info:
I have an array for each item with all the info for it (cost, level, img src), would it be possible to use this to create a new row in the checkout section and insert the details into it using a for loop?
I don't exactly understand what you want, but something like this should look close enough :
function buy(elem) {
$(elem).parents('tr').appendTo("#co-table");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Shop Buy -->
<div id="buy">
<h3>Purchase</h3>
<table id="buyTable">
<tr>
<th>Level Required</th>
<th>Item</th>
<th>Cost</th>
</tr>
<tr>
<td>Level 1</td>
<td>
<img src="img/shop/pickaxe_rusty.png" id="item1">
</td>
<td>50 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
<tr>
<td>Level 10</td>
<td>
<img src="img/shop/pickaxe_iron.png" id="item2">
</td>
<td>500 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
<tr>
<td>Level 25</td>
<td>
<img src="img/shop/pickaxe_steel.png" id="item3">
</td>
<td>5000 Gold
<button onclick="buy(this)">Buy</button>
</td>
</tr>
</table>
</div>
<!-- Shop Checkout -->
<div id="checkout">
<h3>Checkout</h3>
<table id="co-table">
<tr>
<th>Items</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>
<img src="" id="">
</td>
<td>X Gold</td>
<td>
<input type="text" value="1" id="quantity">
</td>
</tr>
</table>
<div id="checkoutBoxes">
<span id="checkoutYes">✔</span>
<span id="checkoutNo">✘</span>
</div>
</div>

Tabbed Forms Using HTML, CSS, JS

I've been playing around with some ideas I've been searching for, and I came across this:
http://jsfiddle.net/RcrCJ/
original html
<div id="container">
<div id="content">
<ul id="info-nav">
<li><span>Tab1</span></li>
<li><span>Tab2</span></li>
</ul>
<div id="info">
<form action="inex.html" method="post" id="form1" name="form1" class="formfields">
<div id="equipment_details" class="hide">
<table border="0" cellspacing="1" cellpadding="2" id="tbl_equipment_details" width="100%">
<tr>
<td width="23%" class="txt-right">XXXX</td>
<td width="31%"><input type="text" name="" id="qw" /></td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td><input type="checkbox" id="" value="1" name="" checked=""></td>
</tr>
<tr>
<td class="txt-right">XXX XXX</td>
<td><input type="text" value="" name="" id="we" /></td>
</tr>
</table>
<!--tbl_equipment_details closed-->
</div><!--div equipment_details closed-->
<!--<div id="specifications" class="hide">-->
<div id="job_costs" class="hide">
<table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_specifications">
<tr>
<td width="18%" class="txt-right">Notes</td>
<td colspan="2" valign="top">
<textarea rows="3" id="description" cols="60" name=""></textarea> </td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td width="39%">
<select name="purchased_from">
<option selected></option>
<option value="xxx">xxx1</option>
<option value="xxx">xxx2</option>
</select> </td>
<td class="txt-right"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center">
<div>
<input value="Cancel" name="qq" type="button">
<input value="Save Changes" name="ww" type="submit">
</div> </td>
</tr>
</table>
</div><!--div feedback closed-->
</form>
</div><!--div info closed-->
</div><!--div content closed-->
</div><!--div container closed-->
original javascript
$(document).ready(function(){
$( '#info #job_costs' ).hide();
$('#info-nav li').click(function(e) {
$('#info .hide').hide();
$('#info-nav .current').removeClass("current");
$(this).addClass('current');
var clicked = $(this).find('a:first').attr('href');
$('#info ' + clicked).fadeIn('fast');
e.preventDefault();
}).eq(0).addClass('current');
});
It was almost exactly what I was looking to do, but I wanted more tabs. I started playing around with it, but for some reason that I can't seem to understand, when I add a third or fourth etc. tab and I run it, it will display all of the tabs until you click on one of them, then it appears normal. I figured it was something silly, but I must have played around with this for hours now and I'm still no further ahead than when I started.
I'm no pro, but I'm usually pretty good at trial / error. This is what I hacked together in an attempt to make 3 tabs:
http://jsfiddle.net/cwaddilove/0Lo7jnoj/
modified html
<div id="container">
<div id="content">
<ul id="info-nav">
<li><span>Tab1</span></li>
<li><span>Tab2</span></li>
<li><span>Tab3</span></li>
</ul>
<div id="info">
<form action="inex.html" method="post" id="form1" name="form1" class="formfields">
<div id="equipment_details" class="hide">
<table border="0" cellspacing="1" cellpadding="2" id="tbl_equipment_details" width="100%">
<tr>
<td width="23%" class="txt-right">XXXX</td>
<td width="31%"><input type="text" name="" id="qw" /></td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td><input type="checkbox" id="" value="1" name="" checked=""></td>
</tr>
<tr>
<td class="txt-right">XXX XXX</td>
<td><input type="text" value="" name="" id="we" /></td>
</tr>
</table>
<!--tbl_equipment_details closed-->
</div><!--div equipment_details closed-->
<!--<div id="specifications" class="hide">-->
<div id="job_costs" class="hide">
<table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_specifications">
<tr>
<td width="18%" class="txt-right">Notes</td>
<td colspan="2" valign="top">
<textarea rows="3" id="description" cols="60" name=""></textarea> </td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td width="39%">
<select name="purchased_from">
<option selected></option>
<option value="xxx">xxx1</option>
<option value="xxx">xxx2</option>
</select> </td>
<td class="txt-right"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
</table>
</div><!--div feedback closed-->
<div id="job_assignment" class="hide">
<table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_assignment">
<tr>
<td width="18%" class="txt-right">Notes</td>
<td colspan="2" valign="top">
<textarea rows="3" id="assignment" cols="60" name=""></textarea> </td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td width="39%">
<select name="sold_to">
<option selected></option>
<option value="xxx">xxx1</option>
<option value="xxx">xxx2</option>
</select> </td>
<td class="txt-right"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center">
<div>
<input value="Cancel" name="qq" type="button">
<input value="Save Changes" name="ww" type="submit">
</div> </td>
</tr>
</table>
</div><!--div feedback closed-->
</form>
</div><!--div info closed-->
</div><!--div content closed-->
</div><!--div container closed-->
modified javascript
$(document).ready(function(){
$( '#info #job_costs #job_assignment' ).hide();
$('#info-nav li').click(function(e) {
$('#info .hide').hide();
$('#info-nav .current').removeClass("current");
$(this).addClass('current');
var clicked = $(this).find('a:first').attr('href');
$('#info ' + clicked).fadeIn('fast');
e.preventDefault();
}).eq(0).addClass('current');
});
I'm hoping someone will be able to see what I've done wrong and can help point me in the right direction.
Thanks in advanced!
You have an error in jQuery selector:
$( '#info #job_costs #job_assignment' ).hide();
To hide several elements you need to put comma in between selectors like this:
$( '#info, #job_costs, #job_assignment' ).hide();
Solution in your case: you just need to hide two of the tabs so that one would be visible at the beginning. This is what you need to use in your code:
$( '#job_costs, #job_assignment' ).hide();
There is some room for improvement here but this will work. Here is updated fiddle

Categories