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

Add img to td after td clicked

I have a table with one row, with one cell, that has a text. the text is in the center of the td.
while clicking the td, I want to add an image after the text. I don't want that the text will be moved, but will be stay in the same place.
this is my jsfiddle:
http://jsfiddle.net/alonshmiel/L7qn3/1/
in this jsfiddle, the text moves left.
<table>
<tr>
<td style="border:1px solid red; width:100px; text-align:center;" onclick="func(this);">
sfh
</td>
</tr>
</table>
thank you all!

The only way to do this is by giving the text a fixed margin instead of centring it. That way the text will stay centred when new content is added.
<td style="border:1px solid red; width:100px;" onclick="func(this);">
<span style="margin-left:38px;">sfh</span>
</td>
Here's the example JSFiddle

You need to place script tag before the table, otherwise browser can't find the function since function is declared afterwards..
Here is working example FIDDLE
<script>
function func(elem) {
elem.innerHTML += "<img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCAAQABADASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAQMEBf/EACQQAAEDBAEDBQAAAAAAAAAAAAECAwQFERIhABQiQRNCUWGR/8QAFQEBAQAAAAAAAAAAAAAAAAAABAX/xAAfEQEAAgEEAwEAAAAAAAAAAAABAxECACExQRITMlH/2gAMAwEAAhEDEQA/AN5ymSaWUmTSXZkhBbV0rSgSpJJuTYK0Mdj75fVYMZ9TcRlKDLDTq0qjxgEOY37dW3dCvBvccEOXGrMNmFPkNR32UlZmvLClObPZux93z44qfVKUoejFjP8ARpxcS0X8SlwZbF8tEKH5xskGUkmOZnSdUVXfe69fmoGM5HF6iOxfpcvJbsONjHhTZs5Nf//Z'>"
}
</script>
<table>
<tr>
<td style="border:1px solid red; width:100px; text-align:center;" onclick="func(this);">
sfh
</td>
</tr>
</table>

Align and Format Multiple Elements Dynamically Added to Table Row

I'm trying to make a greasemonkey userscript where I add a div through an ajax request to a table. The table repeats this pattern around 700 times:
<table id="table01" >
<tr class = "row0">
<td rowspan = "2" >
<img src = "url" >
</td>
<td> text1 </td>
<td style = "text-align: right;" > text2 </td>
</tr>
<tr class = "row1">
<td> text3 </td>
<td style = "text-align: right;" > text4 </td>
</tr>
...
...
...
</table>
I can't manage to insert the div and and set the css alignment to make it look like in the image:
http://s24.postimg.org/wastsl5it/Sin_t_tulo.png
How can I do it using javascript or jquery?
thanks in advance

See the output here:
jsFiddle
My solution is to work with percentages. The width of the page is 100% percent. When the elements reach 100% percent, it will force the next element wrap around into a position below. And use float, not text-align: right. I set everything to float:left, and set the width so that elements will wrap around to the next line.
<table id="table01" >
<tr class = "row0">
<div style="width:20%; float:left; border: solid thin purple">
<img src = "url" >
</div>
<div style="width:79%; float:left">
<div style="width:49%; float:left; border: solid thin"> text1 </div>
<div style = "width: 49%; float:left; border: solid thin red"> text2 </div>
<div style="width: 98%; float:left; border: solid thin blue">Center</div>
<div style = "width: 48%; float:left; border: solid thin green"> text3 </div>
<div style = "width: 48%; float:left; border: solid thin orange"> text4 </div>
</div>
</tr>
<tr class = "row0">
<div style="width:20%; float:left">
<img src = "url" >
</div>
<div style="width:80%; float:left">
<div style="width:50%; float:left"> text1 </div>
<div style = "width: 50%; float:left" > text2 </div>
<div style="width: 100%">Center</div>
<div style = "width: 50%; float:left"> text3 </div>
<div style = "width: 50%; float:left"> text4 </div>
</div>
</tr>
</table>
Note that the <div> you were having trouble with, is set to a width of 100% percent. So it will take up all of it's section. Also, realize that the <div> set to 100% percent does NOT take up 100% percent of the page. It takes up 100% percent of the <div> that it is inside of. That is the other thing you need to know. The widths are relative to the element that they are inside of.
With borders added, so you can actually see how everything lays out, the widths need to be smaller, because the borders take up space. So, 100% width with a border added is more than 100% percent. So you have to change the width to something smaller, 99% percent maybe.

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

How to change table background onmouseover?

I have tabs one says 'Search' and the other says 'Tags'
Search is the default tab so it has a grey rounded edge table background while 'Tags' has a white rounded edge background.
I want to be able to put the mouse over 'Tags' and the background to change from white to grey. How is this done?
Here is the HTML code:
<div class="roundedcornr_box_407494">
<div class="roundedcornr_top_407494"><div></div></div>
<div class="roundedcornr_content_407494">
<font color="#ffffff" size="2" face="helvetica">
Search
</font>
</div>
<div class="roundedcornr_bottom_407494"><div></div></div>
</div>
</td>
</tr>
</table>
</td>
<td>
<div style="margin-left:10px;" />
<center>
<table height="20" width="30" cellpadding="0" cellspacing="0">
<tr>
<td>
<center>
<div class="roundedcornr_box_235759">
<div class="roundedcornr_top_235759"><div></div></div>
<div class="roundedcornr_content_235759">
<font color="#585858" size="2" face="helvetica">
Tags
</font> </div>
<div class="roundedcornr_bottom_235759"><div></div></div>
</div>
</center>
</td>
</tr>
</table>
And CSS:
.roundedcornr_box_407494 {
background: #bdbdbd;
}
.roundedcornr_top_407494 div {
background: url(roundedcornr_407494_tl.png) no-repeat top left;
}
.roundedcornr_top_407494 {
background: url(roundedcornr_407494_tr.png) no-repeat top right;
}
.roundedcornr_bottom_407494 div {
background: url(roundedcornr_407494_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_407494 {
background: url(roundedcornr_407494_br.png) no-repeat bottom right;
}
.roundedcornr_top_407494 div, .roundedcornr_top_407494,
.roundedcornr_bottom_407494 div, .roundedcornr_bottom_407494 {
width: 100%;
height: 5px;
font-size: 1px;
}
.roundedcornr_content_407494 { margin: 0 5px; }
Thanks!
James

With :hover.
Sample:
http://jsfiddle.net/stKn3/

With Css
table:hover
{
background-color:gray;
}
or
table tr:hover
{
background-color:gray;
}

I think its better to have a single images as background(with corners #as you trying to do) of the tabs And changing the background image on mouseover event. Instead of splitting them and merging the pieces together again by div tags.
Follow these examples :
http://www.codefoot.com/javascript/script_image_textarea_mouseover.html
http://www.codebelly.com/javascript/backimagechange.html

Try this
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<td>Some data</td>
</TR>
OR
<table onMouseover="this.bgColor='#EEEEEE'" onMouseout="this.bgColor='#FFFFFF'">
</table>
EDIT:
Try this complete HTML.
<html>
<body>
<table >
<tr onMouseover="this.bgColor='#EEEE00'" onMouseout="this.bgColor='#FFFFFF'">
<td>
Some Data on table's first row
</td>
</tr>
</table>
</body>
</html>
It needs some modifications to use on your code. Try it on your own.