I have a price grid that uses relative
positioning to move a field around, beneath a box with: overflow: hidden;. In this is field, there are absolute-positioned boxes containing prices. When this box is hovered, the matching values above and left of the will change color. In order to achieve this, a class is toggled using jQuery. This initially works.
However, after the grid is moved, the class change doesn't affect the block above the grid anymore. In the Chrome console, i can see the class being added, but it's css-styling isn't applied. No other styles for the element have changed.
I am 100% sure there is no other style-rule influencing the element, it just stops responding to the change in class after the DOM has been altered.
Can i 'refresh' the DOM somehow?
Edit:
I've tried to get the relevant code only:
Adding the cell in the first place:
$("#price_dates_cells").append("<div id='"+weekday[theBeginDate.getDay()]+"-"+theBeginDate.getDate()+"-"+(theBeginDate.getMonth()-1)+"' class='datecell' style='left: "+( Math.floor( difference / ( 3600 * 24 * 1000) ) * ( cellwidth ) )+"px'>"+weekday[theBeginDate.getDay()]+"<br>"+theBeginDate.getDate()+" "+yearmonth[theBeginDate.getMonth()]+"</div>");
Toggle the class:
var str_element = "#"+weekday[Bdate.getDay()]+"-"+Bdate.getDate()+"-"+(Bdate.getMonth()-1);
$(str_element).toggleClass("red");
and the movement that seems to cause the problem:
$('#price_grid').animate({"top": (( ( horizontalMovement ) * cellheight)) }, 'fast', 'linear');
