jquery .css() problem ...help please

Question

Hi , I have a such code just entering start part for you

$(document).ready(function(){
    //Dynamically size wrapper div based on image dimensions
    $("#tag-wrapper").css({width: $("#show_img").outerWidth(), height: $("#show_img").outerHeight()});

    //Append #tag-target content and #tag-input content
    $("#tag-wrapper").append('<div id="tag-target"></div><div id="tag-input"></div>');

Idea is that the css properties should immediately take place when the page is loaded. But... When I enter first time to the page, it doesnt work, when I refresh the page it works like it should. Any Idea how I can fix that?

Answer 1

Your code will work if show_img has a width and height set. I believe the reason why it is not working for you is because $(document).ready is called when the DOM is loaded and before the page contents. So at that point in time show_img has not been loaded yet, so it can not get the width and height unless you explicitly set it.

Answer 2

The images are probably not loaded when you try to take the width and height, so you must bind a function to the load event of the document, which will ensure that all images are loaded before executing:

$(document).load(function() {
    $('#tag-wrapper').css({
        width: $('#show_img').outerWidth(),
        height: $('#show_img').outerHeight()
    }).append('<div id="tag-target"></div><div id="tag-input"></div>');
});