I am using this to point a seperate td's in a table. And the id(dynid) are created dynamically so i need to change the position to absolute when user hover on a td. And i tries the below one but its not wroks
$('#selectTable tr td #td'+dynid).hover(
function () {
$(this).css("position","absolute");
}
);
Thanks in advance
You are looking for an element within the td element, but you want the td element with a certain id. There is whitespace. You need td#id instead of td #id.
dynid = 2; // Test
$('#selectTable tr td#td' + dynid).hover(
function () {
$(this).css("position","absolute");
}
);
A sample with background-color
http://jsfiddle.net/FKhbd/
You may want to define a second handler, if the hover ends. Something like this:
$('#selectTable tr td#td' + dynid).hover(
function () {
$(this).css("position","absolute");
},
function () {
$(this).css("position","relative");
}
);
Probably your selector is wrong: '#selectTable tr td #td'+dynid should become '#selectTable tr td#td'+dynid. You'd also be wise to toggle on and off a css class that sets position: absolute like so:
$("#selectTable td").hover(function () {
$(this).addClass("pos-abs"); // focus
}, function () {
$(this).removeClass("pos-abs"); // blur
});
See http://api.jquery.com/hover/
Related
I want to remove the row where the text is not found, when checkbox unchecked . If checkbox checked, then the table needs to return to its original state . What can you recommend?
function keySearch() {
$('#search').keyup(function (e) {
var search = $(this).val();
$('td').removeClass('found');
$('td').each(function (index, element) {
if ($(element).html() == search) {
$(element).addClass('found');
}
if (!$('#checkbox').prop('checked', true)) {
$(element).parent().hide();
}
else
{
$(element).parent().show();//how replace remove row?
}
});
});
}
Instead of using JavaScript to show and hide the rows, you could use it to add or remove a .checked CSS class on the parent table. Then set up the .found class so that it only hides the rows if the .checked class is present. You'll need to add the .found class to the rows instead of the cells for this to work. Just add .parent() before .addClass('found') in your code. Also, get rid of the code below your first if statement.
Here's what the CSS would look like:
table.checked > * > tr.found {
display: none;
}
Some additional code will be needed to make the checkbox work. Here's how to do it with plain ol' JavaScript (sorry, I don't use jQuery much):
document.querySelector('#checkbox').addEventListener('click', function(e) {
if(e.target.checked)
document.querySelector('#table').classList.add('checked');
else
document.querySelector('#table').classList.remove('checked');
});
(This assumes that your table has an id of 'table').
Thus far I've figured out most of the code I need to select a radio button inside of a <tr> when the row is clicked & to change the color of the <tr> when it's clicked, but I need to be able to change the color back & change the color of a new <tr> if the user selects a different one. Right now it just keeps changing the color of the rows, but doesn't change them back. Code is below:
<script>
var prevTr;
$('tr').click(
function() {
$('input[type=radio]',this).attr('checked','checked');
$(this).addClass('selectedtr');//css('background-color', 'Green');
prevTr = $(this).id;
$("#"+prevTr).removeClass('selectedtr');
}
);
...
Remove the selectedtr class from all tr elements first, then add it to the current one:
$('tr').click(
function() {
$('input[type=radio]',this).prop('checked','checked');
$(this).siblings().removeClass('selectedtr');
$(this).addClass('selectedtr');
}
);
Edit - I don't think David Thomas's answer is quite what you're looking for, but I do think the siblings() select would be more efficient than selecting all tr elements.
Another Edit
In reference to your comment: prop should be used instead of attr. Here's a fiddle:
http://jsfiddle.net/xQyAV/
I would use css:
binput[type=radio]:hover {
//here edits
//the setting back happens automaticly
}
I'd suggest:
$('input[type=radio]').change(function (){
var self = this,
row = $(self).closest('tr');
row.addClass('trSelected').siblings().removeClass('reselected');
});
I think it only needs to remove the class before remembering the current identifier:
$(function () {
var prevTr = false;
$('tr').click(function () {
if (prevTr) {
$("#" + prevTr).removeClass('selectedtr');
}
prevTr = $(this).id;
$('input[type=radio]', this).attr('checked', 'checked');
$(this).addClass('selectedtr');
});
});
In my program I have a class called "right-answer that I want in the td class but I am having real trouble with it.
This is where I add the "right word" class to "spellWord". But how to I add it to the "td" class instead.
var spellWord = $('.highlight-problem .drop-box');
if (!spellWord.filter(':not(.occupied)').length) {
var wordIsCorrect = 0;
spellWord.each(function () {
if ($(this).parents('td').data("letter") == $(this).find("div").data("letter")) {
console.log('letter is: ' + $(this).find("div").data("letter"))
wordIsCorrect++;
}
});
console.log(spellWord.length + ' , ' + wordIsCorrect);
if (spellWord.length == wordIsCorrect) {
spellWord.addClass('right-word');
$(right).css('visibility', 'visible');
$(wrong).css('visibility', 'hidden');
score.right++;
$('.score').html(score.right + "/2").show();
setTimeout(function() {
successSound.play();
}, 200);
I have tried things like.
spellWord.addClass('td').addClass('right-word');
and
$('.td').addClass('right-word');
But cannot seem to get it working. Fiddle: http://jsfiddle.net/smilburn/Dxxmh/93/
If the spellWord element is inside the td, use parent():
spellWord.parent().addClass('right-word');
Note that parent() will only give you the direct ancestor, use parents() instead if you nede to go higher.
closest(), siblings(), or find() may also be helpful, depending on where the td is in relation to the spellWord element.
Try .closest()
spellWord.closest('td').addClass('right-word');
td is the parent of the spellWord.. So you need to go to its td ancestor and then add the class
I want to convert this css behaviour into a jquery hover statement (because IE7/8 doesn't support css3). Basically when hovering over a row, I want the whole row to be highlighted except for the last cell.
#mysearchtable tr:hover td:not(:last-child)
{
background-color: #444444;
}
I've tried using this:
$("#mysearchtable tr td:not(:last-child)").hover(
function () { $(this).addClass('hoverclass') },
function () { $(this).removeClass('hoverclass') });
The problem with this is $(this) is only returning the actual cell that was hovered over. I can try and use $(this).parent() but that would give me the whole row. What I want is the highlight the whole row, except the last cell.
Would anyone know a solution?
Cheers.
Untested, but try:
$("#mysearchtable tr").hover(
function () { $(this).find("td:not(:last-child)").addClass('hoverclass') },
function () { $(this).find("td:not(:last-child)").removeClass('hoverclass') }
);
Here you can use this way. Jsfiddle demo
$("table td").not('td:last').hover(function() {
$(this).css('background-color','red');
});
i have a little javascript function that does something when one clicks on the element having onclick that function.
my problem is:
i want that, into this function, to set a font color fot the html element having this function onclick. but i don't suceed. my code:
<script type="text/javascript">
function selecteazaElement(id,stock){
document.addtobasket.idOfSelectedItem.value=id;
var number23=document.addtobasket.number;
number23.options.length=0;
if (stock>=6) stock=6;
for (i=1;i<=stock;i++){
//alert ('id: '+id+'; stock: '+stock);
number23.options[number23.options.length]=new Option(i, i);
}
}
</script>
and how i use it:
<li id = "product_types">
<a href="#" onclick='selecteazaElement(<?= $type->id; ?>,<?= $type->stock_2; ?>);'><?= $type->label; ?></a>
</li>
any suggestions? thanks!
i have added another function (jquery one) that does partially what i need. the new problem is: i want that background color to be set only on the last clicked item, not on all items that i click. code above:
$(document).ready(function() {
$('.product_types > li').click(function() {
$(this)
.css('background-color','#EE178C')
.siblings()
.css('background-color','#ffffff');
});
});
any ideas why?
thanks!
I would suggest
$(document).ready(function() {
$('.product_types > li').click(function() {
$('.product_types > li').css('background-color','#FFFFFF');
$(this).css('background-color','#EE178C');
});
});
Your element could have this code:
<li id = "product_types" onclick="selecteazaElement(this);" <...> </li>
To change the foreground color of that element:
function selecteazaElement(element)
{
element.style.foregroundColor="#SOMECOLOR";
}
If you want to change the background color on only the last element clicked, each element must have a different id. I'd suggest naming each one something like product_types1, product_types2, ..., product_typesN, and so on. Then have a reset function:
function Reset()
{
for (var i = 1; i <= N; i = i + 1)
{
document.getElementById('product_types'+i).style.backgroundColor="#RESETCOLOR";
}
}
When you call your selecteazaElement(this) function, first call the Reset function, then set the new element:
function selecteazaElement(element)
{
Reset();
element.style.backgroundColor="#SOMECOLOR";
}
This way all of the elements that start with product_types followed by a number will be reset to one particular color, and only the element clicked on will have the background changed.
The 'scope' of the function when invoked is the element clicked, so you should be able to just do:
function selecteazaElement(id,stock){
document.addtobasket.idOfSelectedItem.value=id;
var number23 = document.addtobasket.number;
number23.options.length=0;
if (stock>=6){
stock=6;
}
for (var i=1;i<=stock;i++){
//alert ('id: '+id+'; stock: '+stock);
number23.options[number23.options.length]=new Option(i, i);
}
// Alter 'this', which is the clicked element in this case
this.style.backgroundColor = '#000';
}
$(function() {
/*if product_types is a class of element ul the code below
will work otherwise use $('li.product_types') if it's a
class of li elements */
$('.product_types li').click(function() {
//remove this class that causes background change from any other sibling
$('.altBackground').removeClass('altBackground');
//add this class to the clicked element to change background, color etc...
$(this).addClass('altBackground');
});
});
Have your css something like this:
<style type='text/css'>
.altBackground {
background-color:#EE178C;
/* color: your color ;
foo: bar */
}
</style>
Attach a jQuery click event to '#product_types a' that removes a class from the parent of all elements that match that selector; then, add the class that contains the styles you want back to the parent of the element that was just clicked. It's a little heavy handed and can be made more efficient but it works.
I've made an example in jsFiddle: http://jsfiddle.net/jszpila/f6FDF/
try this instead:
//ON PAGE LOAD
$(document).ready(function() {
//SELECT ALL OF THE LIST ITEMS
$('.product_types > li').each(function () {
//FOR EACH OF THE LIST ITEMS BIND A CLICK EVENT
$(this).click(function() {
//GRAB THE CURRENT LIST ITEM, CHANGE IT BG, RESET THE REST
$(this)
.css('background-color','#EE178C')
.siblings()
.css('background-color','transparent');
});
});
});
If I am correct, the problem is that the click event is being binded to all of the list items (li). when one list item is clicked the event is fired on all of the list items.
I added a simple .each() to your code. It will loop through each of the list items and bind a event to each separately.
Cheers,
-Robert Hurst