I need to make a radio button behave like a check box being able to check/unchecked. the problem is because the script is activated by the click event which colors the label.
HTML code
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td>16:00-17.30</td>
<td><label for="date_last07">19.Deployment event - matchmaking session</label></td>
<td colspan="5"> </td>
</tr>
</table>
<input style="display:none;" id="date_last07" name="date_last01" type="radio" value="07" />
JS code
$(document).ready(function(){
$("input[name='date_last01']").click(function() {
var test = $(this).val();
$("label[for='date_last"+test+"']").css("background-color", "yellow");
$("input[name='date_last01']").prop('checked', false);
$("input[name='date_last01']").prop('checked', true);
});
});
CSS code
tr {
height: 1px;
}
td{
height: 100%;
}
label{
display: block;
min-height: 100%; /* for the latest browsers which support min-height */
height: auto !important; /* for newer IE versions */
height: 100%; /* the only height-related attribute that IE6 does not ignore */
}
label:hover {
cursor:pointer;
}
fiddle: http://jsfiddle.net/upR8t/
Related
I'm trying to add a popup when a td is mousedover. Each row has multiple td's and the popup should only work on the first one. This works as long as mouseout is in the same column. That is, if I move the mouse up and down, the popup appears and disappears as expected. But if I move the mouse horizontally into the next td, the popup doesn't disappear. I created a jsfiddle for this but the popup isn't working. The console is saying the javascript function isn't defined but it works fine here so I must have something wrong in the jsfiddle setup. Here's the code I am using. Td's are being used because this is the code I was given. Can anyone see what is needed to get the popup to hide no matter how the mouse moved?
EDITED to solve the problem.
<style>
#pop-description{
display : none;
position : absolute;
z-index : 99999;
left : 0px;
padding : 10px;
background : #3AB9AE;
border : 1px solid #9a9a9a;
margin : 0px;
}
</style>
<script>
$(document).ready(function(){
function ShowDescription(id) {
var position = $('.class-desc-'+id).position();
var desc = $('#desc-'+id).val();
$('#pop-description').css('top', position.top);
$('#pop-description').text(desc);
//$('#pop-description').toggle();
$('.class-desc-'+id).mouseenter(function() {
$('#pop-description').css('display', 'block');
}).mouseleave(function() {
$('#pop-description').css('display', 'none');
});
}
});
</script>
<div style="display:relative;"><div id="pop-description" style="display:none;"></div></div>
<table>
<tr>
<td class="class-desc-0" onmouseOver="ShowDescription('0');">title</td>
<td>Address</td>
<td>State</td>
<input type="hidden" name="desc-0" value="first test" id="desc-0">
</tr>
<tr>
<td class="class-desc-1" onmouseOver="ShowDescription('1');">title</td>
<td>Address</td>
<td>State</td>
<input type="hidden" name="desc-1" value="second test" id="desc-1">
</tr>
<tr>
<td class="class-desc-2" onmouseOver="ShowDescription('2');">title</td>
<td>Address</td>
<td>State</td>
<input type="hidden" name="desc-2" value="third test" id="desc-2">
</tr>
</table>
I think you are overthinking it. Here is what I would do. I would use jQuery as demonstrated below.
Trigger the action you need on mouseenter
Initiate the opposite action on mouseleave
$(function() {
$(".toggle").mouseenter(function() {
// Your code goes below: initiate first action
$(this).addClass("showOff");
}).mouseleave(function() {
// Your code goes below: Initiate opposite action
$(".toggle").removeClass("showOff");
});
});
div {
cursor: pointer;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
transition: all 2s;
}
.showOff {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
transition: all 2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle">Hove over me</div>
Note: In your case, you show the popup on mouseenter and hide it on mouseleave
Why not just using hover ? Like
class-desc:hover .popup{
display: block;
}
I am learning html and I want that when we move the mouse into the picture, the elephant will be not shown any more. Instead there is a box (without border) with same size, inside the box there is certain text with blue background.
How should I change my code?
https://fiddle.jshell.net/66j07kyg/
Try this :
$(document).ready(function() {
$("td").mouseenter(function(){
$("img").css({display:"none"});
$(".txt").show();
$(this).css({verticalAlign:"top",backgroundColor:"blue"})
}).mouseleave(function(){
$("img").css({display:"block"});
$(".txt").hide();
$(this).css({backgroundColor:""})
})
})
img {
width: 200px;
height: 200px;
}
td {
width: 200px;
height: 200px;
}
.txt {
display: none;
color: #fff;
}
<table align='center'>
<tr>
<td>
<img src="http://gdbaif.com/images/animal-clipart/animal-clipart-02.jpg"/>
<span class="txt">This is some text</span>
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
I'm trying to emulate hovering over an element with a mouse, using jQuery.
This is different from adding :hover to the element; I want something similar in function to using $(element).click(), however doing $(element).hover() doesn't work for me.
The element in question is (as far as I can see) using the jQuery UI datepicker with a tooltip on hover; for a live example, see an AirBnB listing, click the "dates" calendar input on the right hand side and hover over an available date.
I want to trigger the hover over each available date to get the price to hover above, although doing:
$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable)').each(function(){
$(this).hover()
})
or simply
$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable)')[0].hover()
doesn't work for me, nor does using mouseover(). Any idea how I can replicate this behaviour?
You should try trigger-ing the event:
$("element").trigger('mouseenter');
Also look at this post on SO, looks very similar to yours.
Well, you can do this just with CSS, here's a simplified example:
.td-hover td {
position: relative;
width: 1em;
border: 1px solid #ddd;
}
.on-hover {
display: none;
position: absolute;
top: -1.5em;
left: -1em;
background: #eee;
border: 1px solid black;
}
.td-hover td:hover .on-hover {
display: inline-block;
}
<table class="td-hover">
<tbody>
<tr>
<td>1<span class="on-hover">one</span></td>
<td>2<span class="on-hover">two</span></td>
<td>3<span class="on-hover">three</span></td>
<td>4<span class="on-hover">four</span></td>
<td>5<span class="on-hover">five</span></td>
<td>6<span class="on-hover">six</span></td>
<td>7<span class="on-hover">seven</span></td>
</tr>
<tr>
<td>8<span class="on-hover">eight</span></td>
<td>9<span class="on-hover">nine</span></td>
<td>10<span class="on-hover">ten</span></td>
<td>11<span class="on-hover">eleven</span></td>
<td>12<span class="on-hover">twelve</span></td>
<td>13<span class="on-hover">thirteen</span></td>
<td>14<span class="on-hover">fourteen</span></td>
</tr>
</tbody>
</table>
But if you insist on using JavaScript instead, just use jQuery's hover to add/remove a class:
$(".td-hover td").hover(
function() {
$(this).find(".on-hover").addClass("showing");
},
function() {
$(this).find(".on-hover.showing").removeClass("showing");
}
);
.td-hover td {
position: relative;
width: 1em;
border: 1px solid #ddd;
}
.on-hover {
display: none;
position: absolute;
top: -1.5em;
left: -1em;
background: #eee;
border: 1px solid black;
}
.on-hover.showing {
display: inline-block;
}
<table class="td-hover">
<tbody>
<tr>
<td>1<span class="on-hover">one</span></td>
<td>2<span class="on-hover">two</span></td>
<td>3<span class="on-hover">three</span></td>
<td>4<span class="on-hover">four</span></td>
<td>5<span class="on-hover">five</span></td>
<td>6<span class="on-hover">six</span></td>
<td>7<span class="on-hover">seven</span></td>
</tr>
<tr>
<td>8<span class="on-hover">eight</span></td>
<td>9<span class="on-hover">nine</span></td>
<td>10<span class="on-hover">ten</span></td>
<td>11<span class="on-hover">eleven</span></td>
<td>12<span class="on-hover">twelve</span></td>
<td>13<span class="on-hover">thirteen</span></td>
<td>14<span class="on-hover">fourteen</span></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Right now I'm doing a td.click() and then window.location = td.find('a').attr('href') but it doesn't work if I'm clicking to make a new tab.
And I can't programmatically click the <a>.
Any ideas?
Feel free to fork this fiddle http://jsfiddle.net/uDQPr/
You could make the <a> fill up the entire cell. That way, you won't need any additional JavaScript to handle the click event. Adding target="_blank" to your <a> link will make it always open in a new tab (or a new window, for browsers that don't support tabs). Working example at http://jsfiddle.net/vTyAc/2/.
Here's the table code:
<table>
<tr>
<td>
Apple
</td>
<td>
YouTube
</td>
</tr>
</table>
And the CSS:
td {
border: 1px solid;
}
a {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
padding: 10px
}
a:hover {
text-decoration: underline;
}
This question already has answers here:
Cols, colgroups and css ":hover" pseudoclass
(5 answers)
Closed 7 years ago.
How can I change the background column of an html table column when the mouse is over it?
Preferably with css only.
This can be done using CSS with no Javascript.
I used the ::after pseudo-element to do the highlighting. z-index keeps the highlighting below the <tds> in case you need to handle click events. Using a massive height allows it to cover the whole column. overflow: hidden on the <table> hides the highlight overflow.
Demo: http://jsfiddle.net/ThinkingStiff/2XeYe/
Output:
CSS:
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
HTML:
<table>
<tr>
<th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
</tr>
<tr>
<th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>
<tr>
<th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>
<tr>
<th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>
<tr>
<th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>
I have a more simple solution (Live example: http://jsfiddle.net/q3HHt/1/)
HTML:
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
table, td {
border: 1px solid black;
}
td {
width: 40px;
height: 40px;
}
.highlighted {
background-color: #348A75;
}
jQuery:
$('td').hover(function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
var t = parseInt($(this).index()) + 1;
$('td:nth-child(' + t + ')').removeClass('highlighted');
});
Live example: http://jsfiddle.net/q3HHt/1/
Only works for cells or rows, sorry.
e.g.
td {
background-color: blue;
}
td:hover {
background-color: red;
}
There are JavaScript solutions available but nothing in CSS right now will do what you want because of the limitations of selectors.
td /* all cells */
{
background-color: blue;
}
tr /* all rows */
{
background-color: pink;
}
/* nothing for all columns */
Just to extends Muhammads answer (https://stackoverflow.com/a/11828637/1316280), if you want to highlight the cols only in the actual table, change the jquery-code-part to:
this jsfiddle is specific for only the actual table
jQuery
$('td').hover(function() {
var t = parseInt($(this).index()) + 1;
$(this).parents('table').find('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
var t = parseInt($(this).index()) + 1;
$(this).parents('table').find('td:nth-child(' + t + ')').removeClass('highlighted');
});
jsFiddle: http://jsfiddle.net/q3HHt/123/
I do not think there is a clean HTML + CSS way to do this. Javascript is an alternative, for example the jQuery tableHover plugin
I had a similar problem where I had too many columns to display on screen. VIA PHP, I turned each row into a 1 x column table. So, n rows = n tables. I then nested each table within a master table. Doing so allowed me to call td:hover from my stylesheet. Since each td held a table, it has the same effect of highlighting the a column when I mouse over it.
You can try experimenting with <col> tag and col:hover { background: red; } style, but I doubt that it will work. Anyway, this definitely won't work in older versions of MSIE, so you will need javascript in order to do this.
You can highlight the whole row with pure CSS using:
tr td {background-color: red;}
tr:hover td {background-color: blue;}
Achieving this effect for a column is impossible with this approach, as cell (td) is a child of a row (tr), not a column.
To make it work in IE7+, make sure to add doctype declaration (what you should always do anyway:)).