So, I am trying to create a website using Shopify. I tried to edit the code and add three tabs in the product page. 1 Tab will be the description the other is Size chart and the other is reviews. I was able to put the description and reviews in the tab but when I put the size chart and look the website from the phone the size chart doesnt fit. So I wanted to create e horizonal scroll for the table.
Below is the html, CSS and Java code that I put in the product-template.liquid, theme.css, theme.java respectively. Below you can see a picture of the tabs:
Website picture
I used this code to create the review tabs.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab-content
{
display:none;
}
.tab-content.active
{
display:block;
}
ul.tabs
{
list-style-type: none;
padding:0;
margin-left:0;
}
li.tab
{
display:inline-block;
padding:10px 15px;
cursor: pointer;
}
li.tab.active
{
color:grey;
border-bottom:1px solid red;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab" data-content-id="Description">tab 1</li>
<li class="tab" data-content-id="Size chart">tab 2</li>
<li class="tab" data-content-id="Reviews">tab 3</li>
</ul>
<div id="tab-content-1" class="tab-content">content 1</div>
<div id="tab-content-2" class="tab-content">{{product.metafields.meta.sizechart}}</div>
<div id="tab-content-3" class="tab-content">content 3</div>
<script>
tabs= document.querySelectorAll('.tab');
tabContents= document.querySelectorAll('.tab-content');
tabs.forEach(function(tab){
tab.addEventListener('click',function(){
contentId = this.dataset.contentId;
content = document.getElementById(contentId);
tabContents.forEach(function(content){
content.classList.remove('active');
});
tabs.forEach(function(tab){
tab.classList.remove('active');
});
this.classList.add('active');
content.classList.add('active');
});
});
</script>
</body>
</html>
I tried a lot of things to make the horizontal scroll bar. But it still now working. If anyone has any experience with shopify can you please help me.
The table in html:
<div style='overflow-x:auto'>
<table class="t2">
<thead>
<tr>
<td style="width: 54px;" rowspan="2">Size</td>
<td style="width: 112px;" colspan="2">Length</td>
<td style="width: 96px;" colspan="2">Waist</td>
<td style="width: 86.6px;" colspan="2">Hip</td>
</tr>
<tr>
<td style="width: 57px;">CM</td>
<td style="width: 55px;">INCH</td>
<td style="width: 39px;">CM</td>
<td style="width: 57px;">INCH</td>
<td style="width: 40px;">CM</td>
<td style="width: 46.6px;">INCH</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 54px;">S</td>
<td style="width: 57px;">100</td>
<td style="width: 55px;">39.37 </td>
<td style="width: 39px;">61</td>
<td style="width: 57px;">24.02 </td>
<td style="width: 40px;">95</td>
<td style="width: 46.6px;">37.40 </td>
</tr>
<tr>
<td style="width: 54px;">M</td>
<td style="width: 57px;">101.5</td>
<td style="width: 55px;">39.96 </td>
<td style="width: 39px;">65</td>
<td style="width: 57px;">25.59 </td>
<td style="width: 40px;">99</td>
<td style="width: 46.6px;">38.98 </td>
</tr>
<tr>
<td style="width: 54px;">L</td>
<td style="width: 57px;">103</td>
<td style="width: 55px;">40.55 </td>
<td style="width: 39px;">69</td>
<td style="width: 57px;">27.17 </td>
<td style="width: 40px;">103</td>
<td style="width: 46.6px;">40.55 </td>
</tr>
<tr>
<td style="width: 54px;">XL</td>
<td style="width: 57px;">104.5</td>
<td style="width: 55px;">41.14 </td>
<td style="width: 39px;">73</td>
<td style="width: 57px;">28.74 </td>
<td style="width: 40px;">107</td>
<td style="width: 46.6px;">42.13</td>
</tr>
</tbody>
</table>
</div>
Add This CSS & Check Updated HTML
.table-outer{
overflow: auto;
}
.table-outer table{
min-width:600px;
}
.tab-content
{
display:none;
}
.tab-content.active
{
display:block;
}
ul.tabs
{
list-style-type: none;
padding:0;
margin-left:0;
}
li.tab
{
display:inline-block;
padding:10px 15px;
cursor: pointer;
}
li.tab.active
{
color:grey;
border-bottom:1px solid red;
}
.table-outer{
overflow: auto;
padding:0 20px;
}
.table-outer table{min-width:600px;}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul class="tabs">
<li class="tab" data-content-id="Description">tab 1</li>
<li class="tab" data-content-id="Size chart">tab 2</li>
<li class="tab" data-content-id="Reviews">tab 3</li>
</ul>
<div id="tab-content-1" class="tab-content">content 1</div>
<div id="tab-content-2" class="tab-content" style="display:block;"><div class="table-outer"><div style='overflow-x:auto'>
<table class="t2">
<thead>
<tr>
<td style="width: 54px;" rowspan="2">Size</td>
<td style="width: 112px;" colspan="2">Length</td>
<td style="width: 96px;" colspan="2">Waist</td>
<td style="width: 86.6px;" colspan="2">Hip</td>
</tr>
<tr>
<td style="width: 57px;">CM</td>
<td style="width: 55px;">INCH</td>
<td style="width: 39px;">CM</td>
<td style="width: 57px;">INCH</td>
<td style="width: 40px;">CM</td>
<td style="width: 46.6px;">INCH</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 54px;">S</td>
<td style="width: 57px;">100</td>
<td style="width: 55px;">39.37 </td>
<td style="width: 39px;">61</td>
<td style="width: 57px;">24.02 </td>
<td style="width: 40px;">95</td>
<td style="width: 46.6px;">37.40 </td>
</tr>
<tr>
<td style="width: 54px;">M</td>
<td style="width: 57px;">101.5</td>
<td style="width: 55px;">39.96 </td>
<td style="width: 39px;">65</td>
<td style="width: 57px;">25.59 </td>
<td style="width: 40px;">99</td>
<td style="width: 46.6px;">38.98 </td>
</tr>
<tr>
<td style="width: 54px;">L</td>
<td style="width: 57px;">103</td>
<td style="width: 55px;">40.55 </td>
<td style="width: 39px;">69</td>
<td style="width: 57px;">27.17 </td>
<td style="width: 40px;">103</td>
<td style="width: 46.6px;">40.55 </td>
</tr>
<tr>
<td style="width: 54px;">XL</td>
<td style="width: 57px;">104.5</td>
<td style="width: 55px;">41.14 </td>
<td style="width: 39px;">73</td>
<td style="width: 57px;">28.74 </td>
<td style="width: 40px;">107</td>
<td style="width: 46.6px;">42.13</td>
</tr>
</tbody>
</table>
</div></div></div>
<div id="tab-content-3" class="tab-content">content 3</div>
<script>
tabs= document.querySelectorAll('.tab');
tabContents= document.querySelectorAll('.tab-content');
tabs.forEach(function(tab){
tab.addEventListener('click',function(){
contentId = this.dataset.contentId;
content = document.getElementById(contentId);
tabContents.forEach(function(content){
content.classList.remove('active');
});
tabs.forEach(function(tab){
tab.classList.remove('active');
});
this.classList.add('active');
content.classList.add('active');
});
});
</script>
</body>
</html>
Related
I have this HTML code that will display a table consists of rows of filtered data fetched from a google sheet. The filter is based on the value in column 'qty' where the criteria are just to show rows of datarange when the qty value is not zero. Hence, the number of rows displayed could vary from time to time depending on the qty value input in that google sheet. And that would also mean, the lastrow for the displayed table would also be different.
In the HTML code below, I have a loop in javascript that will apply a specific background color when it detects the row number is even number. But I don't know how to set a similar script that will identify the lastrow and set the border-bottom-style for that lastrow only.
Earlier I have tried to set that border-bottom-style in the same code line of <tr> style but that has made every row to have a border at the bottom. I had also tried to set it in another <tr> line after the loop and before </tbody> line but it looks ugly because it shows a gap between the table left border and the table right border line and a gap between the <body> and <tfoot> content.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<br>Dear Mr. PIC,
<br>
<br>Stocktake for today for your kind perusal.
<br>
<br>
<div style="background-color:#3E1176;height:3px;"></div>
<br>
<table style="height: 333px; width: 99.9296%;border-collapse: collapse; border-color: #3E1176; border-style: inset; margin-left: auto; margin-right: auto;" border="0">
<thead>
<tr style="height:50px;background-color:#3E1176;text-align:center;padding:10px;color:white;font-size:15px;font-style:bold;" bgcolor="#3E1176">
<th style="border-style:solid; border-width:thick;border-color: #3E1176 white #3E1176 #3E1176;padding:6px;vertical-align: middle;">Description</th>
<th style="border-top-style: solid;border-bottom-style: solid;border-width:thick;border-color: #3E1176;padding:6px;vertical-align: middle;">Qty</th>
<th style="border-style:solid; border-width:thick;border-color: #3E1176 white #3E1176 white;padding:6px;vertical-align: middle;">MinStock</th>
<th style="border-top-style:solid;border-right-style:solid; border-bottom-style:solid;border-width:thick;border-color: #3E1176 #3E1176 #3E1176;padding:6px;vertical-align: middle;">MaxStock</th>
</tr>
</thead>
<tbody>
<?tableRangeValues.forEach((r,i)=>{
let color;
if(i%2===0){color="white"}else{color="#F6EFFE"}?>
<tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:<?=color?>;">
<td style="vertical-align: middle;text-align:left;padding:6px;"><?=r[0]?></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"><?=r[3]?></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"><?=r[4]?></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"><?=r[6]?></td>
</tr>
<?})?>
</tbody>
<tfoot>
<tr style="color:#3E1176; font-size:22px;font-weight:bold;">
<td colspan="3" style="text-align:right;">Total</td>
<td style="padding:4px;text-align:right;"><?=totalqty?></td>
</tr>
</tfoot>
</table>
<br>
<br>Thank you.
<br>
<br>Yours Sincerely,
<br>Somebody#Work
</body>
</html>
Try to CSS. Like:
tr:last-child{ /*this will select last tr*/
border: 2px solid black;
background-color: yellow;
}
tr:nt-child(3){ /*this will select 3rd tr*/
border: 2px solid black;
background-color: yellow;
}
tr:nt-child(n+2){ /*this will select after 2nd tr*/
border: 2px solid black;
background-color: yellow;
}
It's better to use like this. Shortcut for every style. You won't need to type style to each one.
More: https://www.w3schools.com/cssref/sel_nth-child.asp
Example HTML page:
/*main.css*/
tr:last-child{ /*this will select last tr*/
border: 2px solid black;
background-color: yellow;
}
tr:nt-child(3){ /*this will select 3rd tr*/
border: 2px solid black;
background-color: yellow;
}
tr:nt-child(n+2){ /*this will select after 2nd tr*/
border: 2px solid black;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="main.css"> <!-- your css file should be here with i gave codes to you -->
</head>
<body>
<!-- all the tags should be here -->
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
I believe your goal as follows.
You want to put the border to the bottom of the last table row.
I think that in this case, I would like to propose to set the style to <tbody> as follows.
From:
<tbody>
To:
<tbody style="border-style: none solid solid;">
Result:
When a sample value is used, your HTML becomes as follows.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<br>Dear Mr. PIC,
<br>
<br>Stocktake for today for your kind perusal.
<br>
<br>
<div style="background-color:#3E1176;height:3px;"></div>
<br>
<table style="height: 333px; width: 99.9296%;border-collapse: collapse; border-color: #3E1176; border-style: inset; margin-left: auto; margin-right: auto;" border="0">
<thead>
<tr style="height:50px;background-color:#3E1176;text-align:center;padding:10px;color:white;font-size:15px;font-style:bold;" bgcolor="#3E1176">
<th style="border-style:solid; border-width:thick;border-color: #3E1176 white #3E1176 #3E1176;padding:6px;vertical-align: middle;">Description</th>
<th style="border-top-style: solid;border-bottom-style: solid;border-width:thick;border-color: #3E1176;padding:6px;vertical-align: middle;">Qty</th>
<th style="border-style:solid; border-width:thick;border-color: #3E1176 white #3E1176 white;padding:6px;vertical-align: middle;">MinStock</th>
<th style="border-top-style:solid;border-right-style:solid; border-bottom-style:solid;border-width:thick;border-color: #3E1176 #3E1176 #3E1176;padding:6px;vertical-align: middle;">MaxStock</th>
</tr>
</thead>
<tbody style="border-style: none solid solid;">
<tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:white;">
<td style="vertical-align: middle;text-align:left;padding:6px;">a1</td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
</tr>
<tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:#F6EFFE;">
<td style="vertical-align: middle;text-align:left;padding:6px;">a2</td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
</tr>
<tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:white;">
<td style="vertical-align: middle;text-align:left;padding:6px;">a3</td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
</tr>
<tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:#F6EFFE;">
<td style="vertical-align: middle;text-align:left;padding:6px;">a4</td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
</tr>
<tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:11px;background-color:white;">
<td style="vertical-align: middle;text-align:left;padding:6px;">a5</td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
<td style="vertical-align: middle;text-align:right;padding:6px;"></td>
</tr>
</tbody>
<tfoot>
<tr style="color:#3E1176; font-size:22px;font-weight:bold;">
<td colspan="3" style="text-align:right;">Total</td>
<td style="padding:4px;text-align:right;">sample</td>
</tr>
</tfoot>
</table>
<br>
<br>Thank you.
<br>
<br>Yours Sincerely,
<br>Somebody#Work
</body>
</html>
Reference:
<tbody>: The Table Body element
In JavaScript how can I get the correct offset position from the top of the red border? Basically, I want the "selected" class to line up the checkmark in the next column that is bolded by getting the offset of the red border.
Currently it's only getting the position of the td (which is the parent the selected element is in), but I want it to be the tbody.
See pen: https://codepen.io/billy-hunter/pen/ebvKEV
#familyGroupModal .probTable tbody {
position: relative;
border: 5px solid red;
}
#familyGroupModal .probTable td.relationship-match {
padding: 0;
margin: 0;
}
#familyGroupModal .probTable .iconCheck:before {
color: #6BA410;
}
#familyGroupModal .probTable .viewRelLink {
padding-left: 25px;
}
#familyGroupModal .probTable .selected {
font-weight: bold;
}
#familyGroupModal .probTable .matchedArea {
position: relative;
top: 0;
right: 0;
border: 1px solid blue;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modal</title>
<meta name="description" content=" " />
<link rel="stylesheet" href="https://www.ancestrycdn.com/ui/2.0.0-rc.4/css/core.css" />
</head>
<body>
<button class="ancBtn" id="modal-btn1" type="button">Open Modal</button>
<div id="familyGroupModal" class="modal modalHasTitle">
<header class="modalHeader">
<h4 class="modalTitle">test</h4>
</header>
<table class="table topSpacingBlock probTable">
<thead>
<tr>
<th scope="col" abbr="Name">Probability</th>
<th scope="col" abbr="Relationship">Relationship</th>
<th scope="col" abbr="Relationship Match"></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="probability" class="text2xlrg bold">50%</td>
<td data-label="relationship">
<div>Jane Doe</div>
<div>Jaeenen Doe</div>
<div>Jimmy Doe</div>
<div>Julie</div>
</td>
<td class="relationship-match">
<div class="matchedArea">
<span class="icon iconCheck"></span>
<span class="hide480 bold">Match</span>
<p class="noTopSpacing viewRelLink hide480">View</p>
</div>
</td>
</tr>
<tr>
<td data-label="probability" class="text2xlrg bold">40%</td>
<td data-label="relationship">
<div>Jane Doe</div>
<div>Jenny Doe</div>
<div class="selected">Joeneys Doe</div>
<div>Jerry Donor</div>
</td>
<td class="relationship-match"></td>
</tr>
<tr>
<td data-label="probability" class="text2xlrg bold">7%</td>
<td data-label="relationship">
<div>Julie Doe</div>
<div>Jamie Doo</div>
<div>Jan Doe</div>
<div>Janiee Dooo</div>
</td>
<td data-label="relationship-match"></td>
</tr>
<tr>
<td data-label="probability" class="text2xlrg bold">3%</td>
<td data-label="relationship">
<div>Jery Doe</div>
<div>James Dooo</div>
<div>Janeeie</div>
<div>Jenny Down</div>
</td>
<td data-label="relationship-match"></td>
</tr>
</tbody>
</table>
</div>
<script src="https://www.ancestrycdn.com/ui/2.0.0-rc.4/js/core.js"></script>
<script>
const familyGroupModal = ui.modal('#familyGroupModal', {
});
familyGroupModal.open();
document.getElementById('modal-btn1').addEventListener('click', () => {
familyGroupModal.open();
});
//add 'selected' class to relationship that matches, and offset the top of parent element.
const selectedElem = document.querySelector('.selected');
const parentElem = document.querySelector('.probTable tbody');
const matchedArea = document.querySelector('.matchedArea');
if (selectedElem) {
matchedArea.style.top = selectedElem.offsetTop + "px";
//console.log(selectedElem.offsetParent.offsetParent.offsetTop);
} else {
matchedArea.className = 'noDisplay';
}
</script>
</body>
</html>
I am struggling to figure out the best way to do this. I think modal is involved.
I have a dynamically resizing table. When I click on the row, I want it to add a row below with info from a php file. PHP file will include details and maybe associated charts. The PHP file will be the same for all rows and call on the row data to populate associated info. Ideally I'd want to be able to expand multiple, but one at a time would be perfect for now.
Ideal concept of operations:
1. Click on row 3 (NFLX)
2. Row 3 moves to the top of the page (I figured this out already)
3. Create a row below NFLX row 3 and populate with spreadInfo.php?variables
4. Click on row 2 (IBB)
5. Collapse NFLX info tab
6. Create a row below IBB row 2 and populate with spreadInfo.php?variables
Here's the fiddle I've started on:
https://jsfiddle.net/wolfpack06/w76ezpfq/
Before click:
After clicking IBB first row:
<style type="text/css">
#formatscreen {
font-family: Arial;
width: 790px;
border-collapse: collapse;
}
th {
background: black;
color: white;
font-size: 20px;
}
th,
td {
border: 1px solid #000;
border-bottom: 2px solid #fff;
// padding-left: 5px;
// padding-right: 5px;
}
#screen_symbol {
font-size: 40px;
font-weight: bold;
text-align: center;
}
#screen_price {
font-size: 32px;
font-weight: bold;
}
#screen_net_pct {
font-size: 24px;
font-weight: bold;
}
#screen_expiry.header,
#screen_type.header,
#screen_dist.header,
#screen_short_leg.header,
#screen_long_leg.header {
font-size: 20px;
}
#screen_change.header,
#screen_delta.header,
#screen_short_leg_vol.header,
#screen_long_leg_vol.header,
#screen_net.header {
font-size: 14px;
}
#screen_expiry,
#screen_type,
#screen_dist,
#screen_short_leg,
#screen_long_leg {
font-size: 24px;
}
#screen_change{
display: inline-block
}
#screen_change,
#screen_delta,
#screen_short_leg_vol,
#screen_long_leg_vol,
#screen_net {
font-size: 16px;
}
#media only screen and (max-device-width: 480px),
(max-width:800px) {
#formatscreen {
width: 100%;
}
th {
font-size: 2.5vw;
}
#screen_symbol {
font-size: 5vw;
}
#screen_price {
font-size: 4vw;
}
#screen_net_pct {
font-size: 3vw;
}
#screen_expiry.header,
#screen_type.header,
#screen_dist.header,
#screen_short_leg.header,
#screen_long_leg.header {
font-size: 2.5vw;
}
#screen_change.header,
#screen_delta.header,
#screen_short_leg_vol.header,
#screen_long_leg_vol.header,
#screen_net.header {
font-size: 1.75vw;
}
#screen_expiry,
#screen_type,
#screen_dist,
#screen_short_leg,
#screen_long_leg {
font-size: 3vw;
}
#screen_change,
#screen_delta,
#screen_short_leg_vol,
#screen_long_leg_vol,
#screen_net {
font-size: 2vw;
}
}
#screen_change.up {
background: green;
color: white;
}
#screen_change.down {
background: red;
color: white;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
tr[data-bau="Bull Put"] {
background: #99ff99;
}
tr[data-bau="Bear Call"] {
background: #ff9999;
}
tr:hover[data-bau="Bull Put"] {
background-color: #00b300;
cursor: pointer;
}
tr:hover[data-bau="Bear Call"] {
background-color: #ff0000;
cursor: pointer;
}
</style>
<div id="prescreen">
<table id="formatscreen">
<tr>
<th>Symbol</th>
<th>Price Action</th>
<th>Expiry Date
<br>Type</th>
<th class="right">
<div id="screen_dist" class="header">Distance</div>
<div id="screen_delta" class="header">Delta</div>
</th>
<th class="right">
<div id="screen_short_leg" class="header">Short Leg</div>
<div id="screen_short_leg_vol" class="header">Volume</div>
</th>
<th class="right">
<div id="screen_long_leg" class="header">Long Leg</div>
<div id="screen_long_leg_vol" class="header">Volume</div>
</th>
<th>Return</th>
</tr>
<tr data-bau="Bull Put">
<td>
<div id="screen_symbol">IBB</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="down">-$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">1420</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bull Put">
<td>
<div id="screen_symbol">IBB</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="down">-$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">1420</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bear Call">
<td>
<div id="screen_symbol">NFLX</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="up">+$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bull Put">
<td>
<div id="screen_symbol">IBB</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="down">-$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">1420</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bear Call">
<td>
<div id="screen_symbol">NFLX</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="up">+$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bull Put">
<td>
<div id="screen_symbol">IBB</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="down">-$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">1420</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
<tr data-bau="Bear Call">
<td>
<div id="screen_symbol">NFLX</div>
</td>
<td class="center">
<div id="screen_price">$1260.39</div>
<div id="screen_change" class="up">+$12.36 (0.91%)</div>
</td>
<td class="center">
<div id="screen_expiry">20160819</div>
<div id="screen_type">Bull Put</div>
</td>
<td class="right">
<div id="screen_dist">15.5%</div>
<div id="screen_delta">0.077</div>
</td>
<td class="right">
<div id="screen_short_leg">$1220.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_long_leg">$1915.00</div>
<div id="screen_short_leg_vol">20</div>
</td>
<td class="right">
<div id="screen_net_pct">3.00%</div>
<div id="screen_net">$0.25</div>
</td>
</tr>
</table>
words words
</div>
I have to create a 1 page html website.I have already done it in french language now i am trying to add an option at the top of my website to translate language between french or english.
The idea is to have a table which contains a button of flag of France and england (french and english) in first row (something like this:http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using html and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french).
see this part in code:
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
I have all my html like this (it don't contain code for English table but it will have the table of same html code except that the written content are in English and the switching has to be done between these two tables on respective flag selection):
<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Axestrack</title>
<!--general stylesheet-->
<style type="text/css">
p {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p, li {
font-family: Helvetica, Arial, sans-serif;
}
td {
vertical-align: top;
}
ul, ol {
margin: 0;
padding: 0;
}
.tab {
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<div id="img_home"></div>
<table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;">
<tbody>
<tr valign="top">
<td valign="top">
<!--container-->
<table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;">
<tbody>
<tr>
<td valign="top" border="0" style="border: none; ">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;">
<tbody>
<tr>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<!--Formation-->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1>
</td>
</tr>
<!-- Paris -->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1>
<p class="tab" style="margin-right:0;font-size: 12px;">
Master en Génie informatique à paris. (Diplôme d'ingénieur)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---->
</tbody>
</table>
</tr>
<tr>
<td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--faltu kaam here -->
<script>
function myFunctionFrench() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
function myFunctionEnglish() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "green";
}
</script>
</body>
</html>
How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question).
Could some one please help me in doing this ?
Write all the divs (and put class on them, like for example : .french ) in both languages and then use jQuery as following :
$(document).ready(function(){
$("#frenchFlag").click(function(){ //When you click on the French flag
$(".french").show(); //Show the divs with the class .french
$(".english").hide(); //Hide the divs with the class .english
});
$("#englishFlag").click(function(){ //Same thing
$(".french").hide();
$(".english").show();
});
});
Obviously you'll hide either the divs with the class .french or the divs with .english at the start of the loading of your page (basically in your
$(document).ready(function() {
//Write here, for example if your website is in French by default :
$(".french").show();
$(".english").hide()
});
You could write your HTML like this:
<div id='english' style='display: none'>
[your complete english HTML]
</div>
<div id='french' style='display: block'>
[your complete french HTML]
</div>
And for your buttons:
<img [...] onClick="document.getElementById('english').style.display=none; document.getElementById('french').style.display=block;">
For the french version. The english switches the display attribute, of course.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<button id="bt1">In English</button>
<button id="bt2">In French</button>
<div>
<div id="one">
<table style="width:50%">
<tr>
<th>Language</th>
<th>Name</th>
<th>Pattern</th>
</tr>
<tr>
<td>English</td>
<td>c#</td>
<td>MVC</td>
</tr>
<tr>
<td>English</td>
<td>Java</td>
<td>J2EE</td>
</tr>
<tr>
<td>English</td>
<td>.Net</td>
<td>MVC4</td>
</tr>
</table>
</div>
<div id="two" style="display:none">
<table style="width:50%">
<tr>
<th>Language</th>
<th>Name</th>
<th>Pattern</th>
</tr>
<tr>
<td>French</td>
<td>PHP</td>
<td>MVC</td>
</tr>
<tr>
<td>French</td>
<td>Java</td>
<td>J2EE</td>
</tr>
<tr>
<td>French</td>
<td>.Net</td>
<td>MVC4</td>
</tr>
</table>
</div>
</div>
<script>
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
document.getElementById('bt1').addEventListener('click',function(e){
swap('one','two');
});
document.getElementById('bt2').addEventListener('click',function(e){
swap('two','one');
});
</script>
</body>
</html>
Instead of button you can replace your image.
<div id="bt1" ><img src="english.png" alt="Smiley face" height="20" width="20"></div>
I want to Create A Simple Web Crawler in Java.
I am trying to use this code
WebDriver driver = new HtmlUnitDriver();
driver.get("https://codereview.qt-project.org/#change,70");
String pageSource=driver.getPageSource();
System.out.println(pageSource);
So I got this source code >>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gerrit Code Review</title><meta content="locale=en_US" name="gwt:property">
<script language="javascript" type="text/javascript">var gerrit_hostpagedata={"config":
{"useContributorAgreements":true,"useContactInfo":false,"allowRegisterNewEmail":false,
But the content is produced with JavaScript, I want to obtain the HTML snapshot.
Create a Javascript enabled driver..
WebDriver driver = new HtmlUnitDriver(true);
Results:
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>
codereview.qt-project Code Review
</title>
<meta content="locale=en_US" name="gwt:property"/>
<script language="javascript" type="text/javascript">
//<![CDATA[
var gerrit_hostpagedata={"config":{"useContributorAgreements":true,"useContactInfo":false,"allowRegisterNewEmail":false,"authType":"HTTP","downloadSchemes":["DEFAULT_DOWNLOADS"],"sshdAddress":"*:29418","wildProject":{"name":"All-Projects"},"approvalTypes":{"approvalTypes":[{"category":{"categoryId":{"id":"CRVW"},"name":"Code Review","abbreviatedName":"R","position":1,"functionName":"MaxWithBlock","copyMinScore":true,"labelName":"Code-Review"},"values":[{"key":{"categoryId":{"id":"CRVW"},"value":-2},"name":"This shall not be merged"},{"key":{"categoryId":{"id":"CRVW"},"value":-1},"name":"I would prefer this is not merged as is"},{"key":{"categoryId":{"id":"CRVW"},"value":0},"name":"No score"},{"key":{"categoryId":{"id":"CRVW"},"value":1},"name":"Looks good to me, but someone else must approve"},{"key":{"categoryId":{"id":"CRVW"},"value":2},"name":"Looks good to me, approved"}],"maxNegative":-2,"maxPositive":2},{"category":{"categoryId":{"id":"SRVW"},"name":"Sanity Review","abbreviatedName":"S","position":2,"functionName":"MaxWithBlock","copyMinScore":false,"labelName":"Sanity-Review"},"values":[{"key":{"categoryId":{"id":"SRVW"},"value":-2},"name":"Major sanity problems found"},{"key":{"categoryId":{"id":"SRVW"},"value":-1},"name":"Sanity problems found"},{"key":{"categoryId":{"id":"SRVW"},"value":0},"name":"No sanity review "},{"key":{"categoryId":{"id":"SRVW"},"value":1},"name":"Sanity review passed"}],"maxNegative":-2,"maxPositive":1}]},"editableAccountFields":["REGISTER_NEW_EMAIL","USER_NAME","FULL_NAME"],"commentLinks":[{"find":"[Tt]ask-number:\\s+([\\w\\-]+)","replace":"\u003ca href\u003d\"http://bugreports.qt-project.org/browse/$1\"\u003e$\u0026\u003c/a\u003e"}],"documentationAvailable":false}};gerrit_hostpagedata.theme={"backgroundColor":"#FCFEEF","topMenuColor":"#44A51C","textColor":"#000000","trimColor":"#B6DCA6","selectionColor":"#FFFFCC"};
//]]>
</script>
<style type="text/css">
#gerrit_topmenu {
color: #ffffff;
}
#gerrit_topmenu .gwt-Label {
color: #ffffff;
}
#gerrit_topmenu .gwt-TabBarItem-selected .gwt-Label {
color: #000000;
}
#gerrit_topmenu a, #gerrit_topmenu a:visited, #gerrit_topmenu a:hover {
color: #ffffff;
}
#qt-footer-links {
background-color: #44A51C;
}
#qt-footer-links ul {
width: 100%;
margin: 0;
text-align: center;
padding: .1em 0 .3em 0;
}
#qt-footer-links li {
display: inline;
padding: .1em 1em;
}
#qt-footer-links a, #qt-footer-links a:visited, #qt-footer-links a:hover {
font-family: Arial;
color: white;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
</style>
<link href="favicon.ico" rel="icon" type="image/gif"/>
<link href="gerrit/gwt/chrome/30B802F72484AED7E67C91FE77CD50BD.cache.css" rel="stylesheet"/>
<link href="undefined" rel="stylesheet"/>
</head>
<body>
<div id="gerrit_topmenu" class="GCLMTUVDNF">
<table class="GCLMTUVDIK">
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td class="GCLMTUVDMK">
<table cellspacing="0" cellpadding="0" class="GCLMTUVDJK">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table cellspacing="0" cellpadding="0" class="gwt-TabBar" role="tablist" style="width: 100%;">
<tbody>
<tr>
<td align="left" style="vertical-align: bottom;" height="100%" class="gwt-TabBarFirst-wrapper">
<div class="gwt-TabBarFirst" style="white-space: normal; height: 100%;">
</div>
</td>
<td align="left" style="vertical-align: bottom;" class="gwt-TabBarItem-wrapper gwt-TabBarItem-wrapper-selected">
<div tabindex="0" class="gwt-TabBarItem gwt-TabBarItem-selected" role="tab">
<div class="gwt-Label" style="white-space: nowrap;">
All
</div>
</div>
</td>
<td align="left" style="vertical-align: bottom;" width="100%" class="gwt-TabBarRest-wrapper">
<div class="gwt-TabBarRest" style="white-space: normal; height: 100%;">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top;" height="100%">
<div class="gwt-TabPanelBottom" role="tabpanel">
<div style="width: 100%; height: 100%; padding: 0px; margin: 0px;">
<div class="GCLMTUVDMG" role="menubar" style="width: 100%; height: 100%;">
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:open,n,z" role="menuitem">
Open
</a>
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:staged,n,z" role="menuitem">
Staged
</a>
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:integrating,n,z" role="menuitem">
Integrating
</a>
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:merged,n,z" role="menuitem">
Merged
</a>
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:deferred,n,z" role="menuitem">
Deferred
</a>
<a class="GCLMTUVDPG" href="#q,status:abandoned,n,z" role="menuitem">
Abandoned
</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="GCLMTUVDLK">
<div>
</div>
</td>
<td class="GCLMTUVDMK">
<div class="GCLMTUVDKK">
<div class="GCLMTUVDMG" role="menubar">
<a class="GCLMTUVDPG" href="javascript:;" role="menuitem">
Sign In
</a>
</div>
<div class="GCLMTUVDJJ">
<input type="text" class="gwt-TextBox GCLMTUVDHG" value="Change #, SHA-1, tr:id, owner:email or reviewer:email"/>
<button type="button" class="gwt-Button">
Search
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="GCLMTUVDGJ">
<span class="GCLMTUVDEJ GCLMTUVDFJ" style="">
Loading ...
</span>
</div>
</div>
<div id="gerrit_header">
<div>
<img src="static/logo_open_gov.png" style="margin: 18px 0 0 10px;"/>
<img src="static/logo_qt.png" style="float: right; margin: 18px 28px 0 0;"/>
</div>
</div>
<div id="gerrit_body" class="GCLMTUVDMF">
<div>
<div style="display: none;">
<div class="GCLMTUVDHJ GCLMTUVDLB">
<div class="GCLMTUVDIJ">
<span class="gwt-InlineLabel">
</span>
</div>
<div>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table class="GCLMTUVDFG GCLMTUVDKB">
<colgroup>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td class="header GCLMTUVDNK">
Change-Id:
</td>
<td class="GCLMTUVDNK GCLMTUVDBC">
</td>
</tr>
<tr>
<td class="header">
Owner
</td>
<td>
</td>
</tr>
<tr>
<td class="header">
Project
</td>
<td>
</td>
</tr>
<tr>
<td class="header">
Branch
</td>
<td>
</td>
</tr>
<tr>
<td class="header">
Topic
</td>
<td>
</td>
</tr>
<tr>
<td class="header">
Uploaded
</td>
<td>
</td>
</tr>
<tr>
<td class="header">
Updated
</td>
<td>
</td>
</tr>
<tr>
<td class="header GCLMTUVDDB">
Status
</td>
<td>
</td>
</tr>
<tr>
<td class="GCLMTUVDHI">
</td>
<td class="GCLMTUVDHI">
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" style="vertical-align: top;">
<div class="GCLMTUVDMB">
</div>
</td>
</tr>
</tbody>
</table>
<div class="GCLMTUVDO">
<table class="GCLMTUVDGG">
<colgroup>
<col/>
<col/>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td class="header">
Reviewer
</td>
<td class="header">
</td>
<td class="header">
Code Review
</td>
<td class="header">
Sanity Review
</td>
<td class="header GCLMTUVDDJ">
</td>
</tr>
</tbody>
</table>
<ul class="GCLMTUVDCH">
</ul>
<div class="GCLMTUVDK" style="display: none;">
<div>
<input type="text" class="gwt-SuggestBox GCLMTUVDHG" value="Name or Email"/>
<button type="button" class="gwt-Button">
Add Reviewer
</button>
</div>
</div>
</div>
<table cellspacing="0" cellpadding="0" class="gwt-DisclosurePanel gwt-DisclosurePanel-closed">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<a href="javascript:void(0);" style="display: block;" class="header">
<table>
<tbody>
<tr>
<td align="center" style="width: 16px;">
<img onload="this.__gwtLastUnhandledEvent="load";" src="https://codereview.qt-project.org/gerrit/clear.cache.gif" style="width: 16px; height: 16px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfklEQVR42mNgoDZITk4WosiAtLS0M6mpqb1Amp9cAy4B8X8gfpWenp5MiQEwfB6IbSgxAIaXArEcJQaA8Ddg+NQVFhZykmsADG8MDQ1lJseA5wQDFocBP0FRm5WVxUNOGGwEJi4VcmLhKtC5HuSkg8NA5+bjDCRCAG8UDUoAAIw8kVdwMG+3AAAAAElFTkSuQmCC) no-repeat 0px 0px" border="0" class="gwt-Image"/>
</td>
<td>
Included in
</td>
</tr>
</tbody>
</table>
</a>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top;">
<div style="padding: 0px; overflow: hidden; display: none;">
<table class="content">
<colgroup>
<col/>
</colgroup>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" class="gwt-DisclosurePanel gwt-DisclosurePanel-closed">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<a href="javascript:void(0);" style="display: block;" class="header">
<table>
<tbody>
<tr>
<td align="center" style="width: 16px;">
<img onload="this.__gwtLastUnhandledEvent="load";" src="https://codereview.qt-project.org/gerrit/clear.cache.gif" style="width: 16px; height: 16px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfklEQVR42mNgoDZITk4WosiAtLS0M6mpqb1Amp9cAy4B8X8gfpWenp5MiQEwfB6IbSgxAIaXArEcJQaA8Ddg+NQVFhZykmsADG8MDQ1lJseA5wQDFocBP0FRm5WVxUNOGGwEJi4VcmLhKtC5HuSkg8NA5+bjDCRCAG8UDUoAAIw8kVdwMG+3AAAAAElFTkSuQmCC) no-repeat 0px 0px" border="0" class="gwt-Image"/>
</td>
<td>
Dependencies
</td>
</tr>
</tbody>
</table>
</a>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top;">
<div style="padding: 0px; overflow: hidden; display: none;">
<table class="GCLMTUVDOB content" style="width: auto;">
<colgroup>
<col/>
</colgroup>
<tbody>
<tr>
<td class="GCLMTUVDDG"/>
<td class="GCLMTUVDDG"/>
<td class="GCLMTUVDFB GCLMTUVDKD">
ID
</td>
<td class="GCLMTUVDKD">
Subject
</td>
<td class="GCLMTUVDKD">
Owner
</td>
<td class="GCLMTUVDKD">
Project
</td>
<td class="GCLMTUVDKD">
Branch
</td>
<td class="GCLMTUVDKD">
Updated
</td>
</tr>
<tr>
<td colspan="8" class="GCLMTUVDKJ">
Depends On
</td>
</tr>
<tr>
<td colspan="8" class="GCLMTUVDOE">
(None)
</td>
</tr>
<tr>
<td colspan="8" class="GCLMTUVDKJ">
Needed By
</td>
</tr>
<tr>
<td colspan="8" class="GCLMTUVDOE">
(None)
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="GCLMTUVDLJ">
<colgroup>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td>
Old Version History:
</td>
<td>
<select class="gwt-ListBox">
<option value="Base" selected="selected">
Base
</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
</div>
<div class="GCLMTUVDJB">
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear: both; margin-top: 15px; padding-top: 2px; margin-bottom: 15px;">
<div id="gerrit_footer">
<div>
<div id="qt-footer-links">
<ul>
<li>
<a href="http://qt.digia.com/">
qt.digia.com
</a>
</li>
<li>
<a href="http://qt-project.org/doc/">
Qt Documentation
</a>
</li>
<li>
<a href="http://qt-project.org/">
Qt-Project
</a>
</li>
<li>
<a href="http://planet.qt-project.org/">
Planet Qt
</a>
</li>
<li>
<a href="http://qt.gitorious.org/">
Qt Repositories - Gitorious
</a>
</li>
<li>
<a href="http://bugreports.qt-project.org/">
Qt Bug Tracker - JIRA
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="gerrit_btmmenu" style="clear: both;">
<div class="GCLMTUVDIG">
Press '?' to view keyboard shortcuts
</div>
<div class="GCLMTUVDAL">
Powered by
<a href="http://code.google.com/p/gerrit/" target="_blank">
Gerrit Code Review
</a>
(V2.2.1-NQT-012) |
<a href="http://code.google.com/p/gerrit/issues/list" target="_blank">
Report Bug
</a>
</div>
</div>
</div>
<iframe id="__gwt_historyFrame" src="javascript:''" style="position:absolute;width:0;height:0;border:0" tabindex="-1">
</iframe>
<script language="javascript" type="text/javascript">
//<![CDATA[
<!--
function gerrit(){var s,l,t,w=window,d=document,n='gerrit',f=d.createElement('iframe');function m(){if(s&&l){var b,i=d.createElement('img');i.src=n+'/clear.cache.gif';b=i.src;b=b.substring(0,b.lastIndexOf('/')+1);gerrit=null;f.contentWindow.gwtOnLoad(undefined,n,b);}}gerrit.onScriptLoad=function(){s=1;m();};gerrit.r=function(){l=1;m();};f.src="javascript:''";f.id=n;f.style.cssText='position:absolute;width:0;height:0;border:none';f.tabIndex=-1;d.body.appendChild(f);f.contentWindow.location.replace(n+'/7209E38C5F54FA2918411884E5DCDFEC.cache.html');d.write('<script defer="defer">gerrit.r()</'+'script>');}gerrit();
//-->
//]]>
</script>
<iframe src="javascript:''" id="gerrit" style="position:absolute;width:0;height:0;border:none" tabindex="-1">
</iframe>
<script defer="defer">
//<![CDATA[
gerrit.r()
//]]>
</script>
</body>
</html>