We Keep Coding

Contextual menu on mouseover

I'm facing a little problem with my code :
<style>
.btn_remove{
position:absolute;
right:-25px;
}
.test:hover > table{
background-color:#708ab3;
}
</style>
<a href="page/ABC" class="test" ng-mouseenter="showRemove = true" ng-mouseleave="showRemove = false">
<div class="btn_remove" ng-show="showRemove"><img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/></div>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>mercedes class a</td>
<td>70'000</td>
</tr>
<tr>
<td><i>Nice car</i></td>
<td>Color: Red</td>
</tr>
</table>
</a>
So as you can see I have a table into a <a href>. When I pass my mouse over the table it calls the class .test:hover > table and also set the angular variable showRemove = true which will then show the absolute div on the right of the table.
My problem is when I mouse over the absolute div, it has the href from the parent (page/ABC).
If I try to write
<div class="btn_remove" ng-show="showRemove"><img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/></div>
then nothing is working because the first link isn't closed.
How could i manage to get :
Mouseover on table = background change + link (page/ABC) + show remove image on the right.
Mouseover on remove image = JS function to be called or whatever but do not be part of the parent link.
Mouseout of table or remove image = remove "remove image" and remove background change.
All this without using jquery. JS or angular, but i guess it's mostly div and css.
Solution:
<style>
.test{
position:absolute;
right:-25px;
visibility:hidden;
}
.wrapper:hover table{
background-color:#708ab3;
}
.wrapper:hover .test
{
visibility:visible;
}
</style>
<div class="wrapper">
<div class="test"><img src="../../gfx/btn_remove.png" height="28" width="26" border="0"/></div>
<a href="table link">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>Mercedes Class A</td>
<td>70'000</td>
</tr>
<tr>
<td><i>Nice car</i></td>
<td>Red</td>
</tr>
</table>
</a>
</div>
<hr/>

Glad to hear you got it working.
for reference you can add javascript:; to the href of an anchor to make it not do anything.
You can select a child element on hover using:
.parent:hover .child
{
the hover styles for the child
}
here is the fiddle for anyone else who needs to select a child element on hover jsfiddle.net/jE7J6

Html/Css Force wrap number displayed in Chrome

I want to force wrap text even number fit to the width I defined.
<tr style="font-size:22px" id="id_step">
<td valign="top" style="width: 1190px">
<img src="file://#step_image" width="140" style="float: right"/>
<strong>#step_no</strong>
#step_text
</td>
</tr>
When I replace #step_text by 111111111111111111111111111111111111111111111111111111111111111110000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000444444444444444444444444444444444444444444444444444444444444444444444444444444444499999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999
It can't be wrappep. Can you help me, please?

Write:
td{word-break:break-word;}
DEMO here.

Use this style like below :
css
word-break: break-all
use Inline styles like below
<td style="word-break: break-all">

You can try white-space:nowrap in :
<td valign="top" style="width: 1190px; white-space:nowrap;">

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()
}
}
});

Auto max height table in table

<table id="one">
<tr>
<td>
<table id="two">
<tr><td>qqq</td> <td>www</td> </tr>
</table>
</td> <td>12 <br /> 34 <br />56 </td>
</tr>
<tr>
<td> </td> <td> aaa</td>
</tr>
<table>
#one td {
border: solid 1px red;
}
#two {
background-color: green
}
LIVE EXAMPLE: http://jsfiddle.net/QMQ3R/3/
I would like - td with qqq and www have auto max height in table#one tr td.
How can I make it? 12, 34, 56 are generated with PHP. There can be for example 10 BR

It's funny, set #one td and #two to height: 100% and it works in Firefox, not Chrome. Set an arbitrary number (like 1px) to #one td and it works in Chrome, not Firefox. Set the height on #one td to 0 and it works in Firefox and Chrome, not IE. That's hacky though and I don't like it. Here's the (hacky but working) example anyway:
http://jsfiddle.net/QMQ3R/8/
Nested tables SUCK, try not to use them. They aren't valid in HTML5. Also, don't duplicate IDs.

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.