Jquery применения CSS для загрузки Div - PullRequest
Новая
       4

Jquery применения CSS для загрузки Div

1 голос
/ 11 сентября 2009

У меня проблема с динамическим применением css к загруженному div с помощью функции load(). Загружаемый HTML-файл найден и вставлен, и я могу использовать команду закрытия. Однако CSS, который я пытаюсь применить, не регистрируется. Кажется, все работает хорошо, за исключением динамического CSS. Я думаю, что у меня может быть что-то не так или неправильная функция:

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>

Ответы [ 2 ]

2 голосов
/ 11 сентября 2009

Поместите CSS для применения в обратный вызов для .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();
        });
});
2 голосов
/ 11 сентября 2009

Вы устанавливаете свойства CSS не в то время. Вам нужно применить свойства CSS после завершения загрузки, используя функцию обратного вызова метода load (). 

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