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;">

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

mouseout FadeOut trouble no JavaScript/jQuery applied

what could be the problem here? on the Products Tab when Hovering MouseOut? because i want
my mouseover menu to fadeout exactly when the transition of the text fadeouts too, please help, Thanks :) This is my Website for observing
cann.net78.net
by the way this is the code
<head>
<style type="text/css">
body{font-family:HelveticaLTStd-Light;}
table{font-size:80%}
a{color:#f0f0f0;text-decoration:none;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
a:hover{color:#006600;}
font-family:HelveticaLTStd-Light;
td.menu{background:#DEB887}
table.menu
{
font-size:100%;
color:#f0f0f0;
position:absolute;
visibility:hidden;
background:#558800;
opacity:0.9;
}
body {
background:url(wall.jpg) no-repeat fixed center;
}
table
{
border-collapse:collapse;
}
table, td, th
{
position:relative;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<div id="header">
<br>
<br><table border="0" align="center">
<tr>
<th align="left" width="430"><font color="cccccc" face="HelveticaLTStd-Light" size="15">C-Ann Trading</font><br>
<font color="#f0f0f0" size="5">and Computer Services </font> </th>
<th width="120" style="border-right:1px solid #000000;border-color:#cccccc"><br><font size="3">Home</font></th>
<th width="120" style="border-right:1px solid #000000;border-color:#cccccc"><br><font size="3">About Us</font></th>
<th width="120" onmouseover="showmenu('products')" onmouseout="hidemenu('products')" style="border-right:1px solid #000000;border-color:#cccccc"><br><font size="3" color="#f0f0f0">Products</font>
<table border="1" class="menu" id="products" width="150">
<tr><th align="left" class="menu">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspNotebooks</tr></th>
<tr><th align="left" class="menu">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspMonitors</tr></th>
<tr><th align="left" class="menu">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspComponents</tr></th>
<tr><th align="left" class="menu">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSoftwares</tr></th>
<tr><th align="left" class="menu">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspPeripherals</tr></th>
<tr><th align="left" class="menu">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspNetworking</tr></th>
<tr><th align="left" class="menu">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspStorage Devices</tr></th>

Honestly stop the use of <table> for doing such a dropdown menu. Make the use of nested <ul><li> markups, and give a pure css solution a shot.
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
If i may, and from what i see of the sourcecode of your website, maybe you should start over again from scratch with keeping in mind that html is a semantic markup language that helps (people and) bots to identify your content.
Try to think at your content as if you were writing a book, with a title, a summary, some paragraphs etc...
Make good use of that for a simple start : http://www.w3schools.com/html/html_basic.asp
You may find it more difficult at first sight, but you'll grow your skill and also you'll win some seo ranks which you may find useful.

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