Question

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.