Here is my query:
I am currently using jQuery to manipulate the height of DOM elements based on various factors such as browser window height and parent elements. Below is an example of how I am achieving this:
$('.multiPanelContainer .panelContainer').each(function() { $(this).css('height', document.body.offsetHeight - $(this).offset().top - 13 + 'px') })
Although this method works well, it encounters issues when new DOM elements are introduced through AJAX calls after the page has loaded. I have previously used live() to bind event handlers to new elements, but in this case, I simply want to update the CSS of these new elements. Is there a way to automatically apply the above code to future matches of the selector? Perhaps by binding the jQuery function to the AJAX postback on the front end instead of the back-end?
Some background information:
The current scenario is not ideal. I am working with an ASP.NET application that was initially designed for IE6/IE7 compatibility and heavily relies on IE css 'expression()' statements. While I did not make this decision, the owners now want the application to work on Chrome, which does not support these selectors. The suggested solution from my director was to convert these statements into the jQuery format shown above and include them in a js file linked in the master page. I have concerns about splitting the design between css and js for maintainability reasons, but I may have limited control over this decision.