Question

I’m trying to update the css (the css is located in my main.css) of divs that do not exist on my main html file but do in the files i am injecting. Is this possible? if so how?

ok so here is what I have in my main html file

<div id="container">
<div id="page">
    <!placeholder>
</div></div>

sorry about the bad formatting i just can’t get the tabs and new lines to work with the code input system on this site.

next is what I have for main.css

#container {
position: fixed;
margin-right: 0px;
overflow-x: hidden;
overflow-y: scroll;}
#page {
position: absolute;
width: 100%;
height: 1600px;
z-index: 10;
border-left: 1px solid #CCCCCC;}
#recposts {
position: absolute;
left:0;
top:1200px;}
.child {
height: 400px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
z-index: 11;
background-color: #EDEDED;
width: 100%;
padding-right: 10px;}

alright and now what I’m injecting

<div id ="page">    
<div id="recposts" class="child">
    <h1> Recent Posts  </h1> 
</div></div>

So I need to be able to edit the position top of #recposts and the height of .child.

I fixed my issue the problem was that I wasn’t editing the css on the html load. I put the function into the .load() and now it works.

Answer 1

Your question is unclear, from what I understood, you can solve it using Jquery live() api.
http://api.jquery.com/live/

You can change whatever you want to the newly added items by using Jquery live() api.

You can trigger a function call after insertion, by using jquery’s DOM change() api .
http://api.jquery.com/change/

eg :

$('#container').change(function() {
  $('#page').css("height",200);
});

EDIT: Since the change() api will not work on divs, here’s the correct version

$('#container').bind("DOMSubtreeModified", function() {
  $('#page').css("height",200);
});