I have multiple tables, on mouse over on the row tables are floating, tables should be constant without moving. When i mouse over on the first or second table row the other tables are rendering which should not be the case. Please find the fiddle http://jsfiddle.net/L1b5542r/1/ .
Sample code:
<div id="test1" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td><a id="#044b66">
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<table width="300px">
<tr>
<td class="rowrowbStatus">COLUMN1</td>
<td class="rowrowbStatus">COLUMN2</td>
</tr>
</table>
<table width="300px">
<tr><td class="status1">row1
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" /></td>
<td class="status2">rowb1
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15"/>
</td></tr>
<tr><td class="status1">row2
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" /></td>
<td class="status2">rowb2
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15"/>
</td></tr>
<tr><td class="status1">row3
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" /></td>
<td class="status2">rowb3
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15"/>
</td></tr>
<tr><td class="status1">row4
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" /></td>
<td class="status2">rowb4
<img class="statusImg1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15"/>
</td></tr>
</table></td></tr>
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<table width="300px">
<tr>
</tr>
</table></td></tr>
</table>
</a></td>
</tr>
</table>
</div>
How can i make tables not to be moved/rendered when i mouse over on any row in the table.
PS: You can notice this behavior if the result screen in http://jsfiddle.net/L1b5542r/1/ is dragged to view full screen and mouse over on any row of first or second table. Please suggest.Thanks.
Edit
So below simply hid the problem by making the rows not change size when the image appeared by making the image small enough. With regards to a larger image size, you'll still get the shifting. What is happening is the use of 'float: left' is causing issues:
When table1 (top left) gets larger say it is actually moving the table below it (table 3) to the right and then shifting table 4 to some position a way bit further down and etc.
I'd recommend, if the format you want is two tables side by side, which is what I get in the fiddle, just to add some extra divs to prevent this move (or restart without using float!)
ie a 'row' div containing tables 1 & 2, another containing 3 & 4, and finally one with 5 & 6. this way you can plonk any size image in the tables and the rest will line up neatly below (though larger images than row size will still warp the row to fit the image unless you specify overflow hidden!)
Result: http://jsfiddle.net/L1b5542r/5/
http://jsfiddle.net/L1b5542r/3/
Edited so the image which appears on hover doesn't affect the size of the row and hence doesn't shift the rows down and force the tables out of alignment
New CSS:
td.status1 > img {
display: none;
float:right;
height: 8px; /* define suitable height otherwise will shift*/
}
td.status1:hover > img {
display: inline-block;
}
td.status1:hover {
background-color: #C0C0C0;
padding-left: 15px; /* padded to keep text central*/
width: 85px;
}
td.status2 > img {
display: none;
float:right;
height: 8px;
}
td.status2:hover > img {
display: inline-block;
}
td.status2:hover {
background-color: #C0C0C0;
padding-left: 15px;
width: 85px;
}
Related
Attempting to filter out search results with low quality images in a table. I have run it in the browser console and receive the error something is undefined, but as to what, I am unaware of.
var imgTag = document.querySelectorAll('img > center');
var imgSize = ['Low Quality', 'Medium Quality'];
for (i = 0; i < imgTag.length; ++i) {
var imgElm = imgTag[i];
var indic = false;
for (j = 0; j < imgSize.length; ++j) {
var size = imgSize[j];
if (imgElm.getAttribute("alt").match(size)) {
indic = true;
break;
}
}
if (indic) {
var p = imgElm.parentNode.parentNode.parentNode;
p.setAttribute("style", "display:none;")
}
}
Here is a minimal working example of the html the script is attempting to work for.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minimal Example</title>
</head>
<body>
<table border="1px">
<td align="center" valig="top">
<div class="avatar" style="height: 140px; width: 100px;"><a class="gal_title" style="font-size: 11px;" href="/profile/User00">User00</a><br />
<a class=link3 href="/profile/User00"><img alt="User00's profile" style="border: solid 1px #CCCCCC;" width="90" height="90" src="/img/unknown.jpg"><img class="uonline" src="/img/online.png" title="User00 is online!"></a><div class="opt" style="clear: left; width: 80%;"><div class="random icon"></div><div class="country iconCountry" style="background:url(/images/country/AT.gif 0 0 no-repeat;"></div><div class="sendmail"><img border=0 src="/img/pm.gif"></div><div class="clear"></div></div><div class="subscribers" style="clear: left;"><88 fans></div></div>
</td>
<td align="left" valign="top" style="font-size: 10px;" nowrap>
</td>
</tr>
<tr id="10180382" bgcolor="#E5E5E5" style="border-top: dotted 1px #000000;">
<td width="70%">
<img style="margin-top: -6px;" align="absmiddle" src="/img/arrow-r.gif">
<a title="View Gallery 1" class="gal_title" href="/gallery.php?gid=10180382"><i><b>Gallery 1</b></i></a>
</td>
<td><center> 298 </td>
<td><center>
<img alt="Low Quality" src="/img/small_img.gif">
</td>
<td nowrap><center> 2022-02-28 </td>
</tr>
<tr valign="top">
<td colspan="3">
<table><tr>
<!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View Gallery 1" href="/photo/1986223183/"><img class="gal_thumb" alt="Free gallery 1 1 of pics" src="https://cdnh.example.com/images/mini/111/198/1986223183.jpg?se=1646123719&ss=ae7f157355b3929e45ed7bbe9923eb1c"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View Gallery 1" href="/photo/1894873412/"><img class="gal_thumb" alt="Free Pics Gallery 1 2 of pics" src="https://cdnh.example.com/images/mini/109/189/1894873412.jpg?se=1646123719&ss=5428161f964b796b070d593a1a9766e5"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View Gallery 1" href="/photo/98075857/"><img class="gal_thumb" alt="Free Pics Gallery 1 3 of pics" src="https://cdnh.example.com/images/mini/108/980/98075857.jpg?se=1646123719&ss=ef8e4e29c3ffb0384f772122eb1dde73"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View Gallery 1" href="/photo/1957776812/"><img class="gal_thumb" alt="Free Pics Gallery 1 4 of pics" src="https://cdnh.example.com/images/mini/111/195/1957776812.jpg?se=1646123719&ss=ece6a38a3a982156dea6ba2d56ba2c1e"></a></td><!--</div>-->
</tr>
</table>
</td>
<td align="center" valig="top">
<div class="avatar" style="height: 118px; width: 100px;"><a class="gal_title" style="font-size: 11px;" href="/profile/User2">User2</a><br />
<a class=link3 href="/profile/User2"><img alt="User2's profile" style="border: solid 1px #CCCCCC;" width="90" height="68" src="https://cdnh.example.com/images/thumb/107/190/1904213141.jpg?se=1646122316&ss=539cad588fc95070e9f071e075c92083"></a><div class="opt" style="clear: left; width: 80%;"><div class="random icon"></div><div class="country iconCountry" style="background:url(/images/country/GB.gif 0 0 no-repeat;"></div><div class="sendmail"><img border=0 src="/img/pm.gif"></div><div class="clear"></div></div><div class="subscribers" style="clear: left;"><645 fans></div></div>
</td>
<td align="left" valign="top" style="font-size: 10px;" nowrap>
</td>
</tr>
<tr id="10180365" bgcolor="#E5E5E5" style="border-top: dotted 1px #000000;">
<td width="70%">
<img style="margin-top: -6px;" align="absmiddle" src="/img/arrow-r.gif">
<a title="View gallery 2's" class="gal_title" href="/gallery.php?gid=10180365"><i><b>gallery 2's</b></i></a>
</td>
<td><center> 9 </td>
<td><center>
<img alt="High Definition" src="/img/huge_img.gif">
</td>
<td nowrap><center> 2022-02-28 </td>
</tr>
<tr valign="top">
<td colspan="3">
<table><tr>
<!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View gallery 2's" href="/photo/1497090477/"><img class="gal_thumb" alt="Free Pics gallery 2's 1 of pics" src="https://cdnh.example.com/images/mini/111/149/1497090477.jpg?se=1646123719&ss=8b9080bfc00940efaedb6d20802d8194"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View gallery 2's" href="/photo/1224351282/"><img class="gal_thumb" alt="Free Pics gallery 2's 2 of pics" src="https://cdnh.example.com/images/mini/108/122/1224351282.jpg?se=1646123719&ss=8b1a588d762dfedd9b3255a0e80d0a1b"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View gallery 2's" href="/photo/1868885026/"><img class="gal_thumb" alt="Free Pics gallery 2's 3 of pics" src="https://cdnh.example.com/images/mini/108/186/1868885026.jpg?se=1646123719&ss=d8acaa7d781a55654e685dac1db4e628"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View gallery 2's" href="/photo/1175638940/"><img class="gal_thumb" alt="Free Pics gallery 2's 4 of pics" src="https://cdnh.example.com/images/mini/111/117/1175638940.jpg?se=1646123719&ss=81c93da5afd1572bc5a6c0d5f4982a8f"></a></td><!--</div>-->
</tr>
</table>
</table>
</body>
</html>
I am hoping to use the alt attribute of the img element to identify low and medium quality images. In the src they are referred to as "low quality" and "medium quality", but to the user they are simply "small" and "medium".
So, I begin the script with a query to select all img elements, then out of this selection, select only the img elements that possess the alt attribute. Finally, if the alt attribute matches either low or "medium" then hide the results by setting "display:none;".
img > center means "center elements that are direct children of an img element. Your markup has none. –
Andy nailed it. My elements were listed in the wrong order.
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
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 have image of a pawn on a board.
The image has onclick function that when you press on it you should recive an alert.
The problem is that above the image there is canvas that hides the functionality of the onclick.
When I put the mouse mouse cursor (using Chrome's magnifying galss) you can see that the canvas is on top of the pawn's images:
With canvas:
JSFIDDLE: when click pawn nothing happens
Without canvas:
JSFIDDLE: when click pawn receive alert
How can I keep the canvas and push the pawn image to front in order for the onclick function to work?
CSS:
td {
width: 100px;
height: 90px;
text-align: left;
vertical-align: top;
border: 1px solid black;
position: relative;
}
table
{
position: fixed;
left:9px;
top:8px;
}
tr:nth-child(even) td:nth-child(odd), tr:nth-child(odd) td:nth-child(even)
{
background:#00A2E8;
}
td span {
position: absolute;
bottom: 0;
}
#myCanvas {
z-index: 10;
position:absolute;
font:bold;
color:red;
}
HTML:
<body>
<div id="board" value="5">
<table oncontextmenu="return false">
<tbody>
<tr>
<td class="" cellnumber="21" row="4" col="0"><span>21</span></td>
<td class="" cellnumber="22" row="4" col="1"><span>22</span>
<br><br><p class="SnakesAndLadders" from="22" to="6">Snake to 6 </p></td>
<td class="" cellnumber="23" row="4" col="2"><span>23</span></td>
<td class="" cellnumber="24" row="4" col="3"><span>24</span></td>
<td class="" cellnumber="25" row="4" col="4"><span>25</span></td>
</tr>
<tr>
<td class="" cellnumber="16" row="3" col="0"><span>16</span></td>
<td class="" cellnumber="17" row="3" col="1"><span>17</span></td>
<td class="" cellnumber="18" row="3" col="2"><span>18</span></td>
<td class="" cellnumber="19" row="3" col="3"><span>19</span></td>
<td class="" cellnumber="20" row="3" col="4"><span>20</span></td></tr>
<tr>
<td class="" cellnumber="11" row="2" col="0"><span>11</span></td>
<td class="" cellnumber="12" row="2" col="1"><span>12</span></td>
<td class="" cellnumber="13" row="2" col="2"><span>13</span></td>
<td class="" cellnumber="14" row="2" col="3"><span>14</span></td>
<td class="" cellnumber="15" row="2" col="4"><span>15</span>
<br><br><p class="SnakesAndLadders" from="15" to="24">Ladder to 24 </p>
</td>
</tr>
<tr>
<td class="" cellnumber="6" row="1" col="0"><span>6</span></td>
<td class="" cellnumber="7" row="1" col="1"><span>7</span></td>
<td class="" cellnumber="8" row="1" col="2"><span>8</span></td>
<td class="" cellnumber="9" row="1" col="3"><span>9</span></td>
<td class="" cellnumber="10" row="1" col="4"><span>10</span></td>
</tr>
<tr>
<td class="" cellnumber="1" row="0" col="0"><span>1</span>
<img src = "http://s23.postimg.org/ynlvim1x3/image.png" onclick="doSomething()">
</td>
<td class="" cellnumber="2" row="0" col="1"><span>2</span></td>
<td class="" cellnumber="3" row="0" col="2"><span>3</span></td>
<td class="" cellnumber="4" row="0" col="3"><span>4</span></td>
<td class="" cellnumber="5" row="0" col="4"><span>5</span></td>
</tr>
</table>
<canvas id="myCanvas" width="600" height="500"></canvas>
<canvas id="myCanvas2" width="600" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(50, 45);
context.lineTo(500, 450);
context.stroke();
context.stroke();
function doSomething()
{
alert("Ping");
}
</script>
If the canvas is doing nothing other than drawing lines, then just tell the browser not to listen for events on the canvas:
#myCanvas{
pointer-events: none;
}
Demo: http://jsfiddle.net/m1erickson/La292q67/5/
Like this? jsfiddle.net/hrLo5a3b/
Just moved canvas out of the table and removed z-index. Looks like your example but pawn reacts on alert.
EDIT (Can't make comments yet so will put it here in my post):
Don't forget that pointer-events does not work in IE 10 and earlier versions. Also does not work on links in IE11.
You can solve this using z-index (CSS property). Set the element with the onclick as z-index:2 and the canvas as z-index:1.
This only works on positioned elements though, so you'll have to work with that.
You just need a position and z-index on the imnage http://jsfiddle.net/La292q67/3/
for the image I add class .pingit
.pingit{
position: relative;
z-index: 99999;
}
I have a problem to automatically adjust a table in a div if the user adds collones or lines in the matrix. Even if its size exceeds, I wish he still full in my "container div" by setting a smaller scale. Is it possible to resize only my table keeping the size of my container ? Always keeping my table in the center ?
Here is my css used:
CSS
.container{
background-image: url(image/block_surveillance_content.gif);
background-position: bottom right;
padding-bottom: 10px;
width: 320px;
height:400px;
}
.matrice{
height:100%;
width:100%;
}
HTML
<div id="block" class="container">
<table id="dataArray" class="matrice">
<tr>
<td></td>
<td>
<asp:Table runat="server" ID="matrixColumnLabel" ></asp:Table>
</td>
</tr>
<tr>
<td>
<asp:Table runat="server" ID="matrixLineLabel" style="position:relative;margin:6px"></asp:Table>
</td>
<td>
<asp:Table runat="server" ID="tableMatrice" CellPadding="0" CellSpacing="0" style="margin:6px"></asp:Table>
</td>
</tr>
</table>
</div>
Thanks a lot