Reputation: 873
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?
Upvotes: 1
Views: 2489
Reputation: 124868
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>');
});
Upvotes: 1
Reputation: 37516
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.
Upvotes: 1