Hover over particular div element?
Hover over particular div element?
ChrisG
Posts: 29Questions: 0Answers: 0
Alrighty so I'm trying to add a 1-5 star rating system directly into my table. So far I have it displaying the 5 stars as follows:
[code]
[/code]
The ratings_stars style looks like this:
[code]
.ratings_stars {
background: url('star_blank.png') no-repeat;
float: left;
height: 28px;
padding: 2px;
width: 32px;
}
[/code]
Finally the original code for hovering and clicking on these elements is this:
[code]
$(document).ready(function() {
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
//send ajax request to rate.php
$('.ratings_stars').bind('click', function() {
var id=$(this).parent().attr("id");
var num=$(this).attr("class");
var poststr="id="+id+"&stars="+num;
$.ajax({url:"rate.php",cache:0,data:poststr,success:function(result){
document.getElementById(id).innerHTML=result;}
});
});
});
[/code]
So how would I go about converting that code into something that lets the hover/click functions work inside datatables?
[code]
[/code]
The ratings_stars style looks like this:
[code]
.ratings_stars {
background: url('star_blank.png') no-repeat;
float: left;
height: 28px;
padding: 2px;
width: 32px;
}
[/code]
Finally the original code for hovering and clicking on these elements is this:
[code]
$(document).ready(function() {
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
//send ajax request to rate.php
$('.ratings_stars').bind('click', function() {
var id=$(this).parent().attr("id");
var num=$(this).attr("class");
var poststr="id="+id+"&stars="+num;
$.ajax({url:"rate.php",cache:0,data:poststr,success:function(result){
document.getElementById(id).innerHTML=result;}
});
});
});
[/code]
So how would I go about converting that code into something that lets the hover/click functions work inside datatables?
This discussion has been closed.
Replies
Allan
My hover/click scripts work fine outside of the datatable but it just isn't doing anything once inside.
$('#example tbody').on( 'mouseover', 'div', function () {
...
} );
$('#example tbody').on( 'mouseout', 'div', function () {
...
} );
[/code]
Allan
I was actually wanting to only hover over a particular div class but I actually figured that out on a guess that it was like 'div.class' and that worked. :)
Allan