I need to highlight a table row (exluding the table head), but I can not use CSS hover. I must use JavaScript onMouseOver and onMouseOut events. The JavaScript must be contained in an external file.
I am already using the external JavaScript file to print the date in the footer. For some reason onMouseOver and onMouseOut are not calling "trackTableHighlight" or "highlightTableRow". What am I doing wrong?
Here is test.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<script src="test.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h1>Test</h1>
</header>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
<div class="main">
<div class="middle-content">
<br>
<table class="stripe_table">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody onMouseOver="trackTableHighlight(event, '#8888FF')" onMouseOut="highlightTableRow(0)">
<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>
</tbody>
</table>
</div>
<footer>
<p>
Today is:
<script>printDate();</script>
</p>
</footer>
</div>
</div>
</body>
</html>
Here is test.js:
function printDate()
{
document.write(Date());
}
function trackTableHighlight(mEvent, highlightColor)
{
if (!mEvent)
mEvent=window.event;
// Internet Explorer
if (mEvent.srcElement)
{
highlightTableRow( mEvent.srcElement, highlightColor);
}
// Netscape and Firefox
else if (mEvent.target)
{
highlightTableRow( mEvent.target, highlightColor);
}
}
function highlightTableRow(myElement, highlightColor)
{
var i=0;
// Restore color of the previously highlighted row
for (i; i<savedStateCount; i++)
{
restoreBackgroundStyle(savedStates[i]);
}
savedStateCount=0;
while (myElement &&
((myElement.tagName && myElement.tagName!="TR") || !myElement.tagName))
{
myElement=myElement.parentNode;
}
if (!myElement || (myElement && myElement.id && myElement.id=="header") )
return;
if (myElement)
{
var tableRow=myElement;
if (tableRow)
{
savedStates[savedStateCount]=saveBackgroundStyle(tableRow);
savedStateCount++;
}
var tableCell=findNode(myElement, "TD");
var i=0;
while (tableCell)
{
if (tableCell.tagName=="TD")
{
if (!tableCell.style)
{
tableCell.style={};
}
else
{
savedStates[savedStateCount]=saveBackgroundStyle(tableCell);
savedStateCount++;
}
tableCell.style["backgroundColor"]=highlightColor;
tableCell.style.cursor='default';
i++;
}
tableCell=tableCell.nextSibling;
}
}
}
Here is test.css:
html {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(to bottom, #FFFFFF, #4F6D93) no-repeat;
color: #666666;
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
header {
background-color: #000033;
color: #FFFFFF;
height: 60px;
text-align: center;
padding-top: 15px;
}
nav {
font-weight: bold;
padding: 20px;
float: left;
width: 160px;
}
nav ul {
list-style-type:none;
margin: 0px;
padding-left: 0px;
font-size: 1.2em;
}
h1 {
font-family: "Times New Roman", Georgia, Serif;
margin-top: 0px;
}
footer {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: "Times New Roman", Georgia, Serif;
padding: 20px;
}
#wrapper {
margin: auto;
width: 80%;
background-color: #90C7E3;
min-width: 960px;
max-width: 2048px;
box-shadow: 3px 3px 3px #333333;
position: relative;
}
.middle-content {
padding-left: 1%;
padding-right: 1%;
padding-bottom: 1%;
}
.main {
background-color: #FFFFFF;
border: 3px solid white;
margin-left: 190px;
padding-left: 30px;
margin-bottom: 5%;
}
table {
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
width: 80%;
text-align: center;
}
table, th, td {
border: 2px solid #90C7E3;
}
th, td {
padding: 15px;
}
th {
background: #000033;
color: white;
}
td:nth-child(2) {
text-align: left;
}
Here is a little test in jsfiddle: https://jsfiddle.net/a2Lxqxqe/2/ (I'm not sure about browser compatibility issues but you can see it working just fine in Chrome):
document.addEventListener("DOMContentLoaded", function(event) {
var tr = document.getElementsByTagName("tr");
for (var i = 0; i < tr.length; i++) {
tr[i].addEventListener("mouseover", function() {
this.style.backgroundColor = "#8888FF";
});
tr[i].addEventListener("mouseout", function() {
this.style.backgroundColor = "transparent";
});
}
});
function printDate() {
document.write(Date());
}
Instead of addEventListener you can use attachEvent() if you need support for: IE8 and below and/or Opera 6 and below. Here is a little reference to this: http://www.w3schools.com/jsref/met_document_addeventlistener.asp
I wrapped the code in document.addEventListener("DOMContentLoaded", function(event){ ... }) so the code executes after the DOM is loaded, if not you'll get an error when hovering.
Related
I know there are lots of similar questions but I can't get it to work and hope you can help me.
I have a nested list of items. Mostly simple hrefs but some are links which should call a copy-to-clipboard function and display a success message in as span afterwards.
The message should be displayed above the link and centered. On a desktop with high resolution there is no problem. On mobile,unfortunately showing the span uses space and moves the hrefs + the position is anywhere but above and in the middle.
Using data-tooltip class templates didn't work for me because they normally use "hover". In my case the span should only be displayed after clicking the link and shouldn't mess up the other elements.
function CopyToClipboard(id) {
// do copy stuff here
// [...]
// showing tooltip
var span_element = document.getElementById(id).parentElement.querySelector('span');
if(span_element != null) {
span_element.style.display = "inline";
setTimeout( function() {
span_element.style.display = "none";
}, 2000);
}
}
body {
margin-left: 0px;
}
ul {
padding-left: 20px;
}
div.container {
margin: 10px;
width: 98%;
word-break: break-all;
}
.custom-tooltip {
padding: 4px;
background-color: grey;
color: #fff;
position: relative;
bottom: 2em;
right: 5em;
display: none;
}
<html lang="de" class=" heujtnrdy idc0_345">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.90">
<link rel="stylesheet" href="index_tmp.css">
<script type="text/javascript" src="index_tmp.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<span>Layer 1</span>
<ul>
<li>
<span>Layer 2</span>
<ul>
<li>
<span>Layer 3</span>
<ul>
<li>
<div>
<table>
<tr>
<td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-- Update 05.02.2023 --
Here my modified CSS, based on granite's alternative solution. This looks like this:
.modal {
display: none;
position: fixed;
padding-top: 50%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
text-align: center;
justify-content: center;
}
.modal-content {
background-color: grey;
border: 0.5px solid grey;
border-radius: 3px;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.0em;
font-family: monospace;
font-weight: 700;
bottom: 1em !important;
position: fixed;
}
As a secondary option (via modal):
Html: 2 lines code.
CSS: 7 extra lines code.
JS: 10 extra lines code.
Just need to get the JS CopyToClipboard to link up.
<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>
.modal {
display: none;
position: fixed;
padding-top: 25%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #eff;
text-align:center;
margin: 0 auto;
padding: 3px;
width:4em;
}
var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
modal.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I made a table in HTML, and I added a delete button so that it deletes the last recorded row in the table.
The delete button works but when I refresh the page the edits are gone, and everything is back to the original state.
How can I make it so that when the user edits the page it changes permanently?
This is a demo: http://jsfiddle.net/objcLfxd/#&togetherjs=9ai74rb5DH
If that doesn't work:
body {
background-color: #ffffff;
font-family: candara, monospace;
text-align: center;
font-weight: bold;
margin-top: 5px;
text-transform: uppercase;
height: 600px;
width: 1000px;
color: #1b1186;
}
#DELETE {
background-color: #1b1186;
width: 250px;
color: white;
margin-top: 50px;
}
#DELETE:hover {
background-color: #ff4625;
cursor: pointer;
}
button {
background-color: #1b1186;
border-radius: 0px;
border: 0px #cccccc;
font-family: candara, monospace;
font-weight: bold;
margin-top: 15px;
color: #ffffff;
text-align: center;
font-size: 18px;
padding: 10px;
width: 200px;
transition: all 1s;
cursor: pointer;
text-transform: uppercase;
display: inline-block;
text-decoration: none;
}
button:hover {
background-color: #fff06d;
color: black;
padding-right: 25px;
padding-left: 25px;
}
table {
border: 5px, #1b1186
}
<!DOCTYPE html>
<html>
<head>
<button type="button" onclick="window.location.href='userhome.html';">Home</button>
<button type="button" onclick="window.location.href='settings.html';">Settings</button>
<button type="button" onclick="window.location.href='userhome.html';">Add Hours</button>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
var table = $('#HOURTABLE').DataTable();
$('#HOURTABLE tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
});
</script>
</head>
<body onload="checkEdits()">
<table id="HOURTABLE" contenteditable="true" class="display" style="width:100%">
<thead>
<tr>
<th>Session</th>
<th># Hours</th>
<th>Date</th>
<th>Organization</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>4</th>
<th>4/5/2020</th>
<th>Tutoring</th>
<th>It was fun</th>
</tr>
<tr>
<th>2</th>
<th>67</th>
<th>4/8/2020</th>
<th>Tutoring</th>
<th>It was interesting</th>
</tr>
</tbody>
<tfoot>
</tfoot>
<br>
<button ondblclick="row()">
Delete Row
</button>
<script>
var x = document.getElementById("HOURTABLE").rows.length;
function row() {
// delete row (index-0).
document.getElementById("HOURTABLE").deleteRow(1);
}
</script>
</table>
</body>
</html>
first, if you want to show dynamic content you must use database, there is no other way.
second, if you want to make your content change in real-time you must use firebase, websocket or any other technology
In this example I am using the localstorage, and I have created some functions so that you can handle the data.
<html>
<head>
<button type="button" onclick="window.location.href='userhome.html';">Home</button>
<button type="button" onclick="window.location.href='settings.html';">Settings</button>
<button type="button" onclick="window.location.href='userhome.html';">Add Hours</button>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="HOURTABLE" contenteditable="true" class="display" style="width:100%">
<thead>
<tr>
<th>Session</th>
<th># Hours</th>
<th>Date</th>
<th>Organization</th>
<th>Description</th>
</tr>
</thead>
<tbody class="body-container">
</tbody>
<tfoot>
</tfoot>
<br>
<button ondblclick="deleteRowSelected()">Delete Row</button>
<script>
function getData() {
let local = localStorage.getItem('data');
if (local == null) {
local = setData();
}
return JSON.parse(local);
}
function setData(data = null) {
if (data == null) {
data =
[
{
session: 1,
hours: 4,
date: '4/5/2020',
organization: 'Tutoring',
description: 'It was fun'
},
{
session: 2,
hours: 67,
date: '4/8/2020',
organization: 'Tutoring',
description: 'It was interesting'
}
];
}
const textData = JSON.stringify(data);
localStorage.removeItem('data');
localStorage.setItem('data', textData);
return textData;
}
function generateRow(row) {
return `
<tr data-session="${row.session}">
<th>${row.session}</th>
<th>${row.hours}</th>
<th>${row.date}</th>
<th>${row.organization}</th>
<th>${row.description}</th>
</tr>`;
}
function deleteRow(session) {
const data = getData();
let newArray = [];
data.forEach(element => {
if (element.session !== session) {
newArray.push(element);
}
})
console.log(newArray);
setData(newArray);
load();
}
function load() {
const data = getData();
const container = $('.body-container');
container.html('');
if (container.length > 0) {
data.forEach(row => {
container.append(generateRow(row));
})
} else {
container.appent('<tr>empty</tr>');
}
}
var x = document.getElementById("HOURTABLE").rows.length;
function deleteRowSelected() {
const row = $('.body-container').find('tr.selected');
if (row.length == 0) {
alert('you must select a row');
} else {
row.remove();
deleteRow(row.data('session'));
}
}
$(document).ready(function () {
var table = $('#HOURTABLE').DataTable();
$('#HOURTABLE tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
load();
});
</script>
</table>
</body>
</html>
The following example assumes you are using PHP and that a PHP Script, called delsessions.php, is setup on your Web Server. This script will accept an Array of IDs via HTTP POST. It will then update a SQL Database and remove rows from a table associated with the Session IDs passed to it.
This also assumes there is script or API that provides the table data from the same Database table.
$(function() {
var table = $('#HOURTABLE').DataTable();
function href(el) {
window.location.href = $(el).data("href");
}
function delRows() {
var sessions = [];
$(".selected").each(function(i, el) {
sessions.push($(el).children().eq(0).text());
})
table.rows(".selected").remove().draw();
console.log("Delete Sessions", sessions);
$.post("delsessions.php", {
ids: sessions
});
}
$(".btn[data-href]").click(function(e) {
e.preventDefault();
href(this);
});
$(".delete-row").click(delRows);
$('#HOURTABLE tbody').on('click', 'tr', function() {
$(this).toggleClass("selected");
});
});
body {
background-color: #ffffff;
font-family: candara, monospace;
text-align: center;
font-weight: bold;
margin-top: 5px;
text-transform: uppercase;
height: 600px;
width: 1000px;
color: #1b1186;
}
#DELETE {
background-color: #1b1186;
width: 250px;
color: white;
margin-top: 50px;
}
#DELETE:hover {
background-color: #ff4625;
cursor: pointer;
}
button {
background-color: #1b1186;
border-radius: 0px;
border: 0px #cccccc;
font-family: candara, monospace;
font-weight: bold;
margin-top: 15px;
color: #ffffff;
text-align: center;
font-size: 18px;
padding: 10px;
width: 200px;
transition: all 1s;
cursor: pointer;
text-transform: uppercase;
display: inline-block;
text-decoration: none;
}
button:hover {
background-color: #fff06d;
color: black;
padding-right: 25px;
padding-left: 25px;
}
table {
border: 5px, #1b1186
}
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<button class="home btn" data-href="userhome.html">Home</button>
<button class="settings btn" data-href="settings.html">Settings</button>
<button class="add-hours btn" data-href="userhome.html">Add Hours</button>
<button class="delete-row btn">Delete Row</button>
<table id="HOURTABLE" contenteditable="true" class="display" style="width:100%">
<thead>
<tr>
<th>Session</th>
<th># Hours</th>
<th>Date</th>
<th>Organization</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>4</th>
<th>4/5/2020</th>
<th>Tutoring</th>
<th>It was fun</th>
</tr>
<tr>
<th>2</th>
<th>67</th>
<th>4/8/2020</th>
<th>Tutoring</th>
<th>It was interesting</th>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
When the user selects, via click the various Rows and clicks "Delete Row" button, the Datatable will be updated, removing those rows, and the IDs for those rows will be posted to the PHP. The script will then delete the relative rows from the database. When the User returns to the site or reloads the site, the database table will no longer contain the rows and will not present them when constructing the HTML table.
There is no way you can do that without a back-end like PHP, node.js, firebase...
You can do a hack using localStorage but changes will remain only while user dosn't delete browser data.
I'm a student and new so I'm sorry if my formatting is off. I am having a problem with my while loop not executing the main functions inside the loop. I'm not sure what I'm doing wrong. I am making a tic tac toe game with a mario theme and a fair amount is working but my while loop runs through itself until it hits 'i = 9' and it seems to increase my marioCount to 9 as well but my goal was to have it alternate between classes when I click on a new box and that doesn't work. I always get bowser. Please help if possible and go easy on me, i'm a beginner. Thanks in advance.
$(document).ready(function() {
var $quare = $('.square');
var $brd = $('.board');
var $tart = $('#start');
var $bmario = $('#mario');
var $bbowser = $('#bowser');
var $cchar = $('#cchar');
var clickedSquare = 0;
var bowserCount = 0;
marioCount = 0;
$cchar.hide();
$bmario.hide();
$bbowser.hide();
$brd.hide();
$tart.on('click', function revealButton() {
$bmario.show();
$bbowser.show();
$cchar.show();
})
$bmario.on('click', function() {
$brd.show();
$bbowser.hide();
var i = 0
while (i < 9) {
if(marioCount % 2 === 0) {
$quare.on('click', function() {
$(this).addClass('smario clicked');
})
} else {
$quare.on('click', function() {
$(this).addClass('sbowser clicked');
})
}
marioCount++
i++
}
})
})
This is the HTML for my game
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mario Tic Tac Toe</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="allBody">
<div id="header">
<div id="title">Tic Tac Toe</div>
</div>
<div id="startDiv">
<button class="button" id="start">Start Game</button>
</div>
<div id="cchar">Pick Your Character</div>
<div id="choose">
<button class="button" id="mario"></button>
<button class="button" id="bowser"></button>
</div>
<div class="board">
<table class="tabl">
<!-- <tbody id="tbody"> -->
<tr id="row1">
<td class="square " id="square1"></td>
<td class="square vmiddle" id="square2"></td>
<td class="square" id="square3"></td>
</tr>
<tr id="row2">
<td class="square hmiddle" id="square4"></td>
<td class="square vmiddle hmiddle" id="square5"></td>
<td class="square hmiddle" id="square6"></td>
</tr>
<tr id="row3">
<td class="square" id="square7"></td>
<td class="square vmiddle" id="square8"></td>
<td class="square" id="square9"></td>
</tr>
<!-- </tbody> -->
</table>
<!-- Game Here -->
</div>
<div id="info">...</div>
</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Here's the CSS for the game
html {
background: url(http://i1.kym-cdn.com/photos/images/original/000/939/881/cf4.png) no-repeat center center fixed;
background-size: cover;
}
#title {
text-align: center;
color: yellow;
font-size: 50px;
}
#startDiv {
text-align: center;
margin: 0 auto;
}
#choose {
text-align: center;
margin: 0 auto;
}
#mario {
background: url("../images/Mario_super_cool.jpg");
background-size: cover;
height: 35px;
width: 35px;
}
#bowser {
background: url("../images/Bowser.jpg");
background-size: cover;
height: 35px;
width: 35px;
}
#cchar {
color: yellow;
text-align: center;
font-size: 30px;
}
#start {
text-align: center;
margin: 0 auto;
border-radius: 15px;
color: yellow;
font-size: 35px;
}
.smario {
background: url("../images/Mario_super_cool.jpg");
background-size: cover;
height: 125px;
width: 125px;
}
.sbowser {
background: url("../images/Bowser.jpg");
background-size: cover;
height: 125px;
width: 125px;
}
.board {
}
table {
margin: auto;
background: rgba(171, 39, 7, 0.5);
}
.square {
float: left;
font-family: 'Londrina Shadow', cursive;
font-size: 50px;
height: 125px;
margin: 0px;
text-align: center;
vertical-align: middle;
width: 125px;
}
.vmiddle {
border-left: 5px solid yellow;
border-right: 5px solid yellow;
opacity: 1.4;
}
.hmiddle {
border-top: 5px solid yellow;
border-bottom: 5px solid yellow;
}
You don't need a loop here. Have a look at this code.
$(".square").on("click", function () {
if (!$(this).hasClass("clicked")) { // do something if this square hasn't been clicked
if (marioCount % 2 === 0) {
$(this).addClass("smario clicked");
} else {
$(this).addClass('sbowser clicked');
}
marioCount++;
}
});
Replace "< 9" with "< 10", since you are essentially saying "do this while i is 8 or less, but NOT 9", instead of what you want, "do this while i is 9 or less, but NOT 10".
I have a cross-browser compatibility problem.
Here is a jsfiddle of my code.
Essentially, the desired effect is for the squares to be opacity="0.5" onmouseout and opacity ="1" onmouseover. The squares, once clicked, redirect to a page.
The code works as desired on Chrome, but on IE 11 the background images doesn't show up. Also I noticed the opacity function for onmouseout/onmouseover doesn't work.
<html>
<head>
<script>
function bigImg(x) {
x.style.opacity = "1";
}
function normalImg(x) {
x.style.opacity = "0.5";
}
</script>
<style type="text/css">
table.imagetable {
font-family: verdana, arial, sans-serif;
font-size:11px;
color:#FFFFFF;
border-width: 3px;
border-color: #FFFFFF;
table-layout: fixed;
}
table.imagetable th {
border-width: 3px;
padding: 3px;
border-style: solid;
border-color: #FFFFFF;
border-spacing: 3px;
width: 200px;
height: 200px;
}
table.imagetable td {
border-width: 3px;
padding: 3px;
border-style: solid;
border-color: #FFFFFF;
border-spacing: 3px;
width: 200px;
height: 200px;
}
table.imagetable td:hover {
cursor: pointer;
cursor: hand;
}
#app1 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue.png");
}
#app2 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue2.png");
}
#app3 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue3.png");
}
#app4 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue4.png");
}
#app5 {
background-image: url("http://gprgeo#www.gprairborne.com/images/airborne/blue5.png");
}
</style>
</head>
<table class="imagetable">
<tr>
<td id="app1" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
<td id="app2" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
<td id="app3" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
</tr>
<tr>
<td id="app4" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
<td id="app5" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
</tr>
</table>
</html>
EDIT:
Ok so everything is working properly now, the path to the images is blocked since they are provided from a website under construction and requires login. IE 11 had a problem with such even when logged in on the browser, chrome didn't. See the below jsfiddle for working desired effect.
http://jsfiddle.net/nP7pd/4/
I have a table with expand/collapse javascript acting on the class value assigned to tr.
See below html code.
This all works fine in Chrome, but in IE when I expand and then collapse the www row, I get additional unwanted lines in the xxx and zzz rows. The lines look like they are borders (see css td border-style definition). It looks as if the borders of the collapsed and hidden rows are still shown (non-button rows are a little less high than the button rows, apparently because of standard button padding and border widths).
Why is this, and how can I prevent this from occurring?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<style type="text/css">
body, p {
background-color: white;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
color: black;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
table {
border: solid black 1pt;
border-collapse: collapse;
padding: 0;
border-spacing: 0;
}
th {
background: rgb(255, 255, 153);
border-style: solid;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
vertical-align: top;
}
td {
border-style: dotted dotted none none;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-style: normal;
font-family: Verdana;
font-size: 10pt;
vertical-align: top;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
input.buttonSeq {
color: blue;
background: ffffcc;
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
</style>
<script type="text/javascript" language="javascript">
//expand and collapse tr functions based on class
function ToggleTRbyClass(clss){
var trs = document.getElementsByTagName('tr');
for (var i=0; i!=trs.length; i++) {
if (trs[i].className == clss) {
if ( trs[i].style.display == "none")
{
trs[i].style.display = "table-row"
}
else {
trs[i].style.display = "none"
}
}
}
return true;
}
</script>
</head>
<body>
<br><br>
<table style="table-layout:fixed word-break:break-all">
<col width="120">
<thead>
<tr>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('www'); return true;" onMouseOver="this.style.cursor='hand'" value="www"></div>
</td>
</tr>
<tr style="display:none" class="www">
<td>element1</td>
</tr>
<tr style="display:none" class="www">
<td>element2</td>
</tr>
<tr style="display:none" class="www">
<td>element3</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('xxx'); return true;" onMouseOver="this.style.cursor='hand'" value="xxx"></div>
</td>
</tr>
<tr style="display:none" class="xxx">
<td>element4</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('zzz'); return true;" onMouseOver="this.style.cursor='hand'" value="zzz"></div>
</td>
</tr>
<tr style="display:none" class="zzz">
<td>element5</td>
</tr>
</tbody>
</table><br></body>
</html>
You need to specify a doctype as the first line in your markup. Without a doctype, IE will render in quirks mode, which is essentially the IE 5.5 rendering engine. Quirks mode greatly effects the box model and Javascript support, among other things.
Example:
<!doctype html>
Specifying the doctype will make your example work as it does in Firefox.
Edit:
The grey background comes from the following rule, which is technically wrong (you need to specify the # symbol when using hex colors:
input.buttonSeq {
color: blue;
background: ffffcc; /* change this to #ffffcc */
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
Rather than setting the display to "table-row", set it to "" so that the default behaviour comes back. Older versions of IE don't support table-row and need block instead.
If your CSS overrides the default (ie. if you used it to hide a class of rows from the start), try:
try {tr.style.display = "table-row";}
catch(e) {tr.style.display = "block";}
And add a DOCTYPE, like wsanville said.