How can i access a css attribute from a .load()'ed page?

Question

I want to load an entire website in to my website. I have been able to do this with $(#preview).load("index.php") into my <div id="preview"></div>. What i have troubles accessing here is the background image which is a property of body. I tried making a div tag with a background-image attribute but when i removed the image from my body tag it didnt behave like i wanted to (was not filling the entire space).

My question is this. How can i access something from index.php that can let me either preview the site correctly or copy the attribute from somewhere into the preview background-image attribute?

my code now looks like this, after some extensive try-and-error (more like error-and-error and its getting more and more messy)

    $(document).ready(
        function() {    
            $("#check").click(
                function() {
                    var bgd;
                    $("#preview").load("index.php", 
                        function () {
                            bgd = $("#bg").css("background-image");
                        }
                    );
                    $("#preview").style.backgroundImage(bgd);
                }
            );
        }
    );

Where bg is the id of the div which works as a "substitute" body tag in index.php (aka with the same attributes as body)

Im either far from it, or ridiculously close. Thanks for every piece of advice i can get.

style and backgroundImage is not a jQuery method.. you should try .css('background-image',bgd) — wirey00
– wirey00, Commented Jan 17, 2013 at 22:45
jQuery.load's callback sends the response data as the first parameter, you'll want to grab that and inject it into your document before trying to modify it. — Jimmy Sawczuk
– Jimmy Sawczuk, Commented Jan 17, 2013 at 22:46

Mike Burnwood · Accepted Answer · 2013-01-17 22:46:42Z

1

   $(document).ready(
        function() {    
            $("#check").click(
                function() {
                    $.ajax({
                             url: 'index.php',
                             success: function(data){
                                 data = $('data').html();
                                 $('#preview').html(data);
                                 bg = $('data').find('#bg').css('background-image');
                                 $('#preview').css('background-image',bg);
                             }
                        });

                }
            );
        }
    );

answered Jan 17, 2013 at 22:46

Mike Burnwood

2791 gold badge2 silver badges15 bronze badges

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

3 Comments

wirey00 Over a year ago

.load() is asynchronous... move it into the success handler

freethejazz Over a year ago

You can still use load here. It helps you from having to parse and add the data to the target element by hand.

user1988593 Over a year ago

ow, didnt think about ajax. Tbh i dont even know what ajax do, i just read a bit up on jquery while skipping ajax on w3schools xD

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Two problems here. One with how you're accessing style properties and the other has to do with the asynchronous behavior of load().

Style problem

You'll need to use $("#preview").css('background-image',bgd). The first method you were using could still be kept around by accessing the non-jQuery wrapped element, like so:

$("#preview")[0].style.backgroundImage(bgd);

Async problem

The second issue is that .load() is an asynchronous call that returns immediately. The next line of code gets executed and bdg is (most likely) still undefined. Then when load() completes, the success handler gets executed and bdg gets set to the background of the loaded page, but it's too late!

Moving the $("#preview").css('background-image',bgd) into the success handler will rectify that problem:

   $(document).ready(
        function() {    
            $("#check").click(
                function() {
                    var bgd;
                    $("#preview").load("index.php", 
                        function () {
                            bgd = $("#bg").css("background-image");
                            $("#preview").css('background-image',bgd);
                        }
                    );
                }
            );
        }
    );

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 17, 2013 at 22:58

freethejazz

2,27516 silver badges19 bronze badges

1 Comment

user1988593 Over a year ago

Thanks for explaining this so good to me and made it easy to understand while still using my own code :) +1 to Jonathan F

Collectives™ on Stack Overflow

How can i access a css attribute from a .load()'ed page?

2 Answers 2

3 Comments

Style problem

Async problem

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Style problem

Async problem

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related