We Keep Coding

put the image in the entire cell

I want to show multiple tables in a web page with header and the image displayed inside the table cell.
To achieve that i have created one table and used <div> tag to assign the width and height of the <td>.
Please find the code below
<table width="100%" height="100%"><tr><td>
<div style="position:absolute;border: 1px solid black;width:200px;height:200px";>
<section>
<header style="background: gray;width:198.5px;text-align: center">Header1</header>
</section>
<img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="tableDemo2" />
</div></td>
<td>
<div style="position:absolute;border: 1px solid black;width:200px;height:200px";>
<section>
<header style="background: gray;width:198.5px;text-align: center">Header2</header>
</section><br><br>
<br><br> <img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</div></td>
</tr></table>
I want to display that image in the whole cell of <td>. The header section should be displayed follwed by the image in the whole space. Please suggest what code do i need to add to make it work. Currently i could not able to set properly the image inside the border of the <td>. Or is there any good approach to achieve this.
jsfiddle:http://jsfiddle.net/4S6gR/103/
I want to achieve this using html/css.

After looking at you fiddle I think you meant you want the image to cover rest of the area in the cell other than header.
If so:
Check this Fiddle
Added a new div to cover the div, gave a height to the header 18px, as was rendered by browser and then gave height of 182px to the div containing image.

I want to display that image in the whole cell of td.
Forget img tags, there is a way easier way.
<td style="background-image:url('asd.jpg');">

you should use th instead of formatting inside td with div to create header, also you'll need to remove the height width from header
.mytable{
width:100%;
height:100%;
}
.mytable header{
background: gray;
text-align: center;
}
.mytable img, header{
width:200px;
}
.mytable td img{
display:block;
}
<table class="mytable">
<tr>
<th>
<section>
<header>Header1</header>
</section>
</th>
<th>
<section>
<header>Header2</header>
</section>
</th>
</tr>
<tr>
<td>
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</td>
<td>
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</td>
</tr>
</table>

replace value with image on load javascript

I create a table
I want to change the status column with a green image if 778. and a red image if 779.
this is my html form code
<td> {{$penalty}} </div>
<td> {{$Total)}} </div>
<td> <span id="status">{{$status}}</span> </div>
So, if people open the webpage, they will not see the status column with number again, but become an image.
var status = document.getElementById("status").innerHTML;
if(status == 778){
$('#status').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png');
}else{
$('#status').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png');
}
Any javascript idea?
thanks in advance.

Your html is invalid, because:
id needs to be unique, not repeated in each row - use a class instead.
You're closing <td> elements with </div> tags.
Assuming you fix that, you then have the problem that your JS is trying to set the src of a <span> element, but you need an <img>. It is simple enough to insert the appropriate images using the :contains() selector and the .html() method:
$(document).ready(function() {
$('.status:contains(778)').html("<img title='778' src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png'>");
$('.status:contains(779)').html("<img title='779' src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png'>");
});
img { height: 30px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr><td>{{$penalty}}</td><td>{{$Total)}}</td><td> <span class="status">778</span></td></tr>
<tr><td>{{$penalty}}</td><td>{{$Total)}}</td><td> <span class="status">779</span></td></tr>
<tr><td>{{$penalty}}</td><td>{{$Total)}}</td><td> <span class="status">778</span></td></tr>
</table>
I've set each <img> element's title attribute to either 778 or 779 so the user can see the values if they hover the mouse over the images. Note that using .html() will overwrite the text of the <span> with the <img>. If you want the numbers to be displayed beside the images then use .append() or .prepend() instead of .html(). If you want the images as background with the number on top of the image then do something with CSS like in O_Z's answer.

If you can use CSS it's better then script.
<style>
.im{
background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png") no-repeat;
display:inline-block;
height:10px;
width:10px;
background-size: contain;
}
.im[status="778"]{
background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png") no-repeat;
background-size: contain;
}
</style>
<table>
<tr>
<td> {{$penalty}} </td>
<td> {{$Total)}} </td>
<td> <span id="status" >{{$status}}</span> <span class="im" status="{{$Total)}}"></span> </td>
</tr>
</table>
I added a property status="{{$Total)}}" to the span which affects the CSS. This way you will not have on load issues, and it will work faster.
Here is the fiddle:https://jsfiddle.net/ngdtfuej/
Just change the status property from 778 to something else,click the fiddle run, and see how red becomes green (or reverse it if U like).

Use ng-src with ternary operator
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.elems = [{
penalty: 0,
total: 100,
status: 778
}, {
penalty: 0,
total: 200,
status: 779
}, {
penalty: 0,
total: 300,
status: 778
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="myApp" ng-controller="myCtrl">
<tr>
<th>Penalty</th>
<th>Total</th>
<th>Status</th>
</tr>
<tr ng-repeat="el in elems">
<td>{{el.penalty}}</td>
<td>{{el.total}}</td>
<td> <span class="status">
<img ng-src="{{el.status==778?'https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Button_Icon_Green.svg/200px-Button_Icon_Green.svg.png':'https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/200px-Button_Icon_Red.svg.png'}}" alt="">
</span>
</td>
</tr>
</table>
Fiddle Demo

CSS Javascript Help needed

I'm currently working on a project where I can only change the css to adjust anything on the site. I have a table which has js calling the image which is 125px x 125px and has a style hardcoded into the html to scale image to 125px × 125px (scaled to 66px × 95px). What I am looking for is to at least square it up to 66px x 66px? style="height:95px;width:66px;border-width:0px;" The issue I am having is the id ctl00_MainCartDisplay_Image_21313_208_0 is unique to the product being called, so when we tried
#ctl00_MainCartDisplay_Image_21313_208_0 img {height:50 !important;}
worked great, remove _21313_208_0 and now nothing? Any help would be great, the Code below and Thanks
style="height:95px;width:66px;border-width:0px;"
<table class="SCNVSCProductSubTable" cellspacing="0" cellpadding="3" border="0" style="width:200px;border-collapse:collapse;">
<tr>
<td valign="top" style="width:66px;"><input type="image"
name="ctl00$MainCartDisplay$Image_21313_208_0"
id="ctl00_MainCartDisplay_Image_21313_208_0" src="../art/NoImage66x95.jpg"
onclick="javascript:WebForm_DoPostBackWithOptions(new
WebForm_PostBackOptions("ctl00$MainCartDisplay$Image_21313_208_0", "", false, "", "ProductDetail.aspx?CatalogueID=208&ProductID=21313", false, false))" style="height:95px;width:66px;border-width:0px;" />
</td>
<td align="left" valign="top"> </td>
</tr>
</table>

You can use attribute selectors to select the elements where the id begins with a specific string. Doesn't work for IE8 and below though.
http://www.w3.org/TR/css3-selectors/#attribute-substrings
CSS
[id^="ctl00_MainCartDisplay_Image"] {
height:50 !important;
}

Javascript function not able to grab height css attribute

I have the following site:
http://www.pachamber.org/www/advocacy/index.php
When a user clicks the 'General Commerce' href tag towards the bottom, it should slide out the hidden contents. All of the other tags work correctly except this one.
The function behaves unexpectedly only in IE. It looks to be fine in Chrome and FF. When debugging the function, it seems not not grab the height attribute from the div:
<div id="general" style="display: none; height: 30px; overflow: hidden">
The height attribute is showing as 1px on this line:
this.height = parseInt(this.obj.style.height);
Here is the snippit of HTML and the function call:
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td colspan="2" style="width: 100%;">
<div class="subheading2" style="border-bottom: thin solid gray; cursor: pointer; color: #000099" onClick="doSlideOut('general');"><a name="general"></a>General Commerce</div>
</td>
</tr>
</table>
<div id="general" style="display: none; height: 30px; overflow: hidden">
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="53%">
• <a href="gc/testimony/index.php" >Testimony & Comments</a>
</td>
<td width="47%"> </td>
</tr>
</table>
</div>
Any ideas what I am missing?
Thanks.

Beware of id and name attribute when using getElementById in Internet Explorer describes the stupid behaviour of IE which causes the problem of yours.
If there are two elements with the same value for id and name (in your case its the div with id general-commerce and the link General Commerce) IE will grab one of both of them when using getElementById.
The solution would be to change either the name-attribute of the link or the id of the div-container.

One thing I saw was and error in your script.
Errors like these break JS from running properly.
Check out one of my websites to see how to do this with jQuery (look at the links under "Our Curriculum").
$('.lgroup').on('click', function () {
if ($(this).hasClass('directLink')) {
return true
} else {
$('.links').slideUp();
$('.lgroup').removeClass('lactive');
if ($(this).next().css('display') == 'block') {
$(this).next().slideUp()
} else {
$(this).addClass('lactive').next().slideDown()
}
}
});

dynamically change css class using js

I'm having a problem while trying to dynamically change a table cell's styling class using JavaScript.
The following issue happens on FF, I opened the page on other browsers too and it worked fine.
I have a html page that contains a 4x4 table. I would like when I click on a cell, to zoom it in and when I click on it again to zoom it out. I defined 2 CSS classes, one for the normal size cell and one for the zoomed cell. I am using JS to change the CSS class when a cell is clicked.
The issue on FF is that when changing from zoomClass to normalClass all the cells to the right of the clicked cell are shifted to the right...
I can't find a solution or a workaround for this problem, if somebody has any ideas please post them here.
Next, I will attach the html, css and js files.
Thanks :)
util.js
function zoom(id) {
if (document.getElementById(id).className == "zoomClass") {
document.getElementById(id).className = "normalClass";
} else {
document.getElementById(id).className="zoomClass";
}
}
calendar.css
table, td, th, tr {
border-color:#D2D3D4;
border-style:solid;
border-width:2px;
}
#main_table {
border-spacing:1px;
height:450px;
margin-left:auto;
margin-right:auto;
position:relative;
top:30px;
width:850px;
}
td.normalClass {
padding:0;
font-size:4px;
color:#3333FF;
}
td.zoomClass {
display:inline;
position:absolute;
width:320px;
height:240px;
z-index:100;
font-size:18px;
}
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/calendar.css" media="screen" />
<script type="text/javascript" src="js/util.js"></script>
</head>
<body>
<div>
<div>
<table id="main_table">
<tr>
<td id="1" onclick="zoom(1)" align="right" valign="top" class="normalClass"></td>
<td id="2" onclick="zoom(2)" align="right" valign="top" class="normalClass"></td>
<td id="3" onclick="zoom(3)" align="right" valign="top" class="normalClass"></td>
<td id="4" onclick="zoom(4)" align="right" valign="top" class="normalClass"></td>
</tr>
<tr>
<td id="6" onclick="zoom(6)" align="right" valign="top" class="normalClass"></td>
<td id="7" onclick="zoom(7)" align="right" valign="top" class="normalClass"></td>
<td id="8" onclick="zoom(8)" align="right" valign="top" class="normalClass"></td>
<td id="9" onclick="zoom(9)" align="right" valign="top" class="normalClass"></td>
</tr>
<tr>
<td id="10" onclick="zoom(10)" align="right" valign="top" class="normalClass"></td>
<td id="11" onclick="zoom(11)" align="right" valign="top" class="normalClass"></td>
<td id="12" onclick="zoom(12)" align="right" valign="top" class="normalClass"></td>
<td id="13" onclick="zoom(13)" align="right" valign="top" class="normalClass"></td>
</tr>
<tr>
<td id="14" onclick="zoom(14)" align="right" valign="top" class="normalClass"></td>
<td id="15" onclick="zoom(15)" align="right" valign="top" class="normalClass"></td>
<td id="16" onclick="zoom(16)" align="right" valign="top" class="normalClass"></td>
<td id="17" onclick="zoom(17)" align="right" valign="top" class="normalClass"></td>
</tr>
</table>
</div>
</body>
</html>

Unfortunately "position" doesn't work on table cells. You could try putting a div inside the table cell and positioning that.
Edit: Something like this should do the trick:
td.normalClass div {
display: none;
}
td.zoomClass div {
display: block;
position: absolute;
width: 320px;
height: 240px;
}
Make sure the div is the first thing in the td and it'll be positioned at the td's top left corner. You might need to play with relative positioning on the td if you need to change the top and left values further.

This is how tables work. I possible I would try and do the same thing using divs and then you should be able to deal with the problem using position:absolute so the expanded div will overlay the others. This could work the same for a table cell.

A few comments on your code, if I may. I would keep the layout in the CSS file and not in the HTML, so I'd remove all of those align="right" and valign="top". Also, you can reference the cells in your table much more efficiently. Then you won't have to set the class for each cell.
#main_table td{
padding:0;
font-size:4px;
color:#3333FF;
}
I would also keep all of the behaviour of the page in a separate script file (Javascript). So no more onclick="zoom(x)" at every cell. You can use event binding to do that.
Also, if you use event binding, you can just "read" the id of the clicked cell, so you don't have to pass that value in statically in the call of the zoom function.
Lastly: I can highly recommend using jQuery to do this kind of DOM manipulation as it's a lot easier, the code is shorter and more readable and your scripts work across browsers pretty much out of the box.
I don't have a solution for this specific problem but using jQuery it's quite easy to insert a new DOM element, a div for instance, with the content of the clicked cell, float over the table and simulate the zoom effect. That div would be be absolutely positionable and can be styled a lot better than the cell the user clicked on.