Jquery applying css to load div

Question

I am having an issue applying css dynamically to a loaded div using the load() function. The html being loaded is found, and it is inserted, and I can use a close command. However the css I am trying to apply is not being registered. Everything seems to work fine minus the dynamic css. I think I may have something wrong or an incorrect function here:

Jquery:

$(document).ready(function() {
    //Find & Open
    $(".projectThumb").click(function(){
        htmlName = $(this).find("img").attr("name");
        $("#popupContainer").load(htmlName + ".html");
        });

    //Apply CSS
    $(".projectPopup").css({"position": "absolute", "background": "#000", "top": "10%", "left": "10px"});

    //Close property
    $("a.close").live("click", function(){
        $("#popupContainer").empty();
        });
});

test.php:

<div id="content">
    <div class="projectThumb">
      <img src="/img/aeffect_button_static.gif" name="aeffect" />
      <p class="title">title</p>
    </div>
</div>
<div id="popupContainer"></div>

aeffect.html:

<div class="projectPopup" id="aeffect">
  <a class="close">Close &times;</a>
  <p class="description">Description</p>
</div>

Vincent Ramdhanie · Accepted Answer · 2009-09-10 23:40:17Z

3

You are setting the CSS properties at the wrong time. What you need to do is apply the CSS properties after the load completes using the callback function of the load() method.

 $("#popupContainer").load(htmlName + ".html", {}, function(){
     $(".projectPopup").css({"position": "absolute", "background": "#000", "top": "10%", "left": "10px"});
 });

answered Sep 10, 2009 at 23:40

Vincent Ramdhanie

103k23 gold badges143 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

antonanton Over a year ago

Awesome, I guess it has to load inline with the popup. Thanks for this!

Vincent Ramdhanie Over a year ago

The element projectPopup does not exist when the page first loads and the $(document).ready() executes when the page loads. At that time it finds no element that matches $(".projectPopup"). After the AJAX load() method runs the element propejctPopUp now exist so thats why it works when accessed from the callback function.

Lance Rushing · Accepted Answer · 2009-09-10 23:41:06Z

2

Put the apply CSS in the callback for the .load()

$(document).ready(function() {
    //Find & Open
    $(".projectThumb").click(function(){
        htmlName = $(this).find("img").attr("name");   
        $("#popupContainer").load(htmlName + ".html", null, function(){
            //Apply CSS
            $("projectPopup").css({"position": "absolute", "background": "#000", "top": "10%", "left": "10px"});

        });




    //Close property
    $("a.close").live("click", function(){
        $("#popupContainer").empty();
        });
});

answered Sep 10, 2009 at 23:41

Lance Rushing

7,6504 gold badges31 silver badges34 bronze badges

Collectives™ on Stack Overflow

Jquery applying css to load div

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related