I have inspected elements on a page and I am trying to got the css selector for specific row in a table. I right-click the element and Copy CSS for that row and I got
#content > table.stripe.asking-price-table.property-table > tbody > tr:nth-child(1)
How can I refer to such selector in VBA?
here's the HTML part
<tr>
<td><a class="nolink" href="/for-sale/houses/al1/">Houses</a></td>
<td>
<strong class="price">£245,891</strong><br>
(11)
</td>
<td>
<strong class="price">£464,431</strong><br>
(16)
</td>
<td>
<strong class="price">£729,583</strong><br>
(12)
</td>
<td>
<strong class="price">£1,086,174</strong><br>
(17)
</td>
<td>
<strong class="price">£1,331,667</strong><br>
(3)
</td>
</tr>
I tried such a line but got an error
Set tbl = html.querySelectorAll("table.stripe.asking-price-table.property-table tbody tr:nth-child(1)")
Related
I have an HTML layout engine that has a common component that can switch between ol HTML, ul HTML, and table HTML structure
<component>
<ul>
<li>
<div> Enter Data here </div>
</li>
<li>
<div> Enter Data here </div>
</li>
</ul>
</component>
OR
<component>
<table>
<tr>
<div>
<th>
Enter Data here
</th>
<th>
Enter Data here
</th>
</div>
</tr>
<tr>
<div>
<td>
Enter Data here
</td>
<td>
Enter Data here
</td>
</div>
</tr>
<tr>
<div>
<td>
Enter Data here
</td>
<td>
Enter Data here
</td>
</div>
</tr>
</table>
</component>
I have used WAVE/AXE/Lighthouse to validate the HTML structure of the Table and it seems to be working fine.
Is there any issue if my layout engine creates a few additional divs inside the table HTML?
My layout engine creates a div between the tr and td elements. Are there any issues that can arise from this with respect to accessibility standpoint?
I don't think the <table> structure is valid, which would violate WCAG 4.1.1. The html spec for <tr> says the content model is "Zero or more td, th, and script-supporting elements", where "script supporting" is defined here, https://html.spec.whatwg.org/multipage/dom.html#script-supporting-elements-2, which is essentially the <script> element. So having a <div> as an immediate child of a <tr> is not valid and could cause accessibility problems with a screen reader trying to read the table.
You can use <div role="row"> instead tag <tr>. Link to Accessible Rich Internet Applications (WAI-ARIA) 1.1. Row role
<component>
<div role="table">
<div role="row">
<span role="columnheader">
Enter Data here
</span>
<span role="columnheader">
Enter Data here
</span>
</div>
<div role="row">
<span role="cell">
Enter Data here
</span>
<span role="cell">
Enter Data here
</span>
</div>
<div role="row">
<span role="cell">
Enter Data here
</span>
<span role="cell">
Enter Data here
</span>
</div>
</div>
</component>
On this webpage when you click on a link in the Acoustid column it doesn't change colour to show it has been visited
http://reports.albunack.net/acoustid_report.html
I cant see wny, there is nothing special in the html
<tr>
<td>
<a href="http://acoustid.org/track/1eb887d3-5c75-4533-b508-7c17a118b07b" target="_blank" title="Acoustid Page">
1eb887d3-5c75-4533-b508-7c17a118b07b
</a>
</td>
<td>
Nelly Furtado/my love grows deeper
</td>
<td>
5
</td>
<td>
Nelly Furtado/maneater
</td>
<td>
1
</td>
</tr>
<tr>
<td>
<a href="http://acoustid.org/track/123feaa4-2464-495c-bb76-d4dad91ffca3" target="_blank" title="Acoustid Page">
123feaa4-2464-495c-bb76-d4dad91ffca3
</a>
</td>
<td>
Nelly Furtado/on the radio
</td>
<td>
69
</td>
<td>
Nelly Furtado/....on the radio (remember the days)
</td>
<td>
1
</td>
</tr>
and I cant see anything in the css either
Use CSS
a:visited {
color: red; // #565656 hex code for any other color in place of red
}
Change red to any color of your choice eg. #ff0000 for any other color code
For the links to change color when they have been visted you will have to specify it in your css document . For example you hv to specifie what should happen when the link is not visited , visited and when its active. Note that if u dont specifie these there it automatically fall under defualt setting to which may vary based on the browser
https://jsfiddle.net/therbq0h/
this link provides something similar to is being displays, its not formatted but it gives 2 pages. Has to be printed in IE.
I have a page that stores data in a database and a separate page that displays its in a generic way. I am creating custom pages to exactly match word documents, the way all the documents were created before. The page has a header, body, footer.
I need print to look like:
Page 1
------------Header-------------
------------Body---------------
Partial Data pulled from database entered in a form
------------footer-------------
Page 2
------------Body---------------
Partial Data pulled from database entered in a form
Page 3
------------Body---------------
remaining Data pulled from database entered in a form
data is dynamic in size.
Currently thead and tbody works fine, but i need footer on page 1 only with a horizontal line at the top.
<body>
<div class="wrapper_class" >
<div>
<table style="width:100%;font-size:8pt;">
<thead>
<tr>
<td style="width:33%;">
Customer names:
</td>
<td style="width:33%;">
<img src="" />
</td>
<td style="width:33%;">
Customer names:
</td>
</tr>
<tr>
<td colspan="3">
<table>
<tr>
<td>
some more rows and columns
</td>
</tr>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">
<div class="floatCenterParent">
<p><%SELECT MemoField FROM Table WHERE ID = 100%></p>
</div>
<div>
<p><%SELECT MemoField FROM Table WHERE ID = 101%></p>
</div>
<div style="some more styling">
more text
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
static text
</td>
</tr>
</tfoot>
</table>
</div>
<div class="floating_Menu">
buttons that dont get printed
</div>
</div>
</body>
page layout matches the word document, I need the footer on page 1 only, and must be at the bottom even if there isn't a full page. Only needs to print correctly in IE10+. If possible cross-browser would be nice.
The footer does display correctly on every page at the bottom except for the last page, it follows right after the body text.
.footer { display: none; }
.page-one > .footer { display: block; }
I am trying to use table element to align text to print to A4 page using the plain HTML i got perfect alignment which prints perfectly in a paper but when printing another name td is resized and i lose paper alignment as i have tapleted paper with fields like name already printed so i need right aligment so it would print in the same section on the paper.
any solution for this?
<table width = 100% border =1>
<tr>
<td> </td>
<td> </td>
<td align = "right"><my><?php echo $name;?></my></td>
<td> </td>
<td> </td>
<td> </td>
<td align = "center"><my><?php echo $rollno;?></my></td>
<td> </td>
<td> </td>
</tr></table>
You can set table-layout: fixed property for table element and width: ? (where ? stands for the width value you want to provide) for your td element.
By the way, html attribute value should be always enclosed with quotes, for example: border="1".
Everybody knows how a dropdown menu works where a person clicks on the drop down menu and it displays a drop down list where the user can select an option from the list. What I want to know is that is there a way in html where except displaying a dropdown list can I display a grid instead with the options in the grid? I havn't got any code for this but if anyone knows this is possible and can provide an example of this I would be very greatful and it would be very helpful.
Here's a basic example:
http://jsfiddle.net/QmLmC/
<!-- HTML -->
<div id="myDropdownGrid" class="dropdownGrid">
<div>
<button type="button">Open/Close</button>
</div>
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<p>Click the button above to view open or close the grid.</p>
.
/* CSS */
.dropdownGrid{position:relative;}
.dropdownGrid table{position:absolute; z-index:999; display:none;}
.dropdownGrid td{width:20px; height:20px; background-color:white;}
.dropdownGrid td:hover{background-color:blue;}
.
// Javascript using jQuery
$("#myDropdownGrid button").click( function(){
$('#myDropdownGrid table').toggle();
});
... well, there's no such thing as a 'grid' but a table would present the info in 'grid' form. You could build a grid out of div elements, but that can get unduly tedious.
Feel like using jQuery for this?
/* make button clickable */
$("#someButton").click( function(){
/* grid like container of data, talbe or a complex div 'structure' */
$("#someGrid").toggle() // if grid is visible hide it, if hidden show it
})
... so you'd have a button with an id of "someButton" and whatever grid structure/wrapper with id id of "someGrid" and css of "display:none" on it.