jquery .css() problem ...help please

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?

Perhaps the jquery code runs before the images are loaded, so the browser doesn't know what their size is yet. — Pointy
– Pointy, Commented Feb 7, 2010 at 21:29
antpaw, I can't use css directlt as the outer width and outer height are not known beforehand. This is a small tagging of photos.So you never know beforehand which size of foto is loaded. — MR.GEWA
– MR.GEWA, Commented Feb 8, 2010 at 10:51

wsanville · Accepted Answer · 2010-02-07 21:32:27Z

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.

answered Feb 7, 2010 at 21:32

wsanville

37.6k8 gold badges78 silver badges102 bronze badges

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

2 Comments

MR.GEWA Over a year ago

I cant make fixed the width and heigh of the image, as the images are very different. There can be a limit on maximums but they are notfixed I will try first answer now

MR.GEWA Over a year ago

Thank you for the hint. I have got with php the image size and set it up dinamically. So now it's working

Tatu Ulmanen · Accepted Answer · 2010-02-08 07:21:15Z

1

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>');
});

edited Feb 8, 2010 at 7:21

answered Feb 7, 2010 at 21:32

Tatu Ulmanen

125k34 gold badges190 silver badges185 bronze badges

2 Comments

bobince Over a year ago

This will fail if the image is already loaded by document-ready, which is very likely for a second page load. You could instead bind to load on document, which fires when the document including all images has loaded.

MR.GEWA Over a year ago

Anyway thank you Tatu... I have just checked your web-site.. The CSS plugin for icons are great...

Collectives™ on Stack Overflow

jquery .css() problem ...help please

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related