Geek Answers Handbook

Resizing columns after loading HTML content in a DIV

I ventured into all and all reports of problems with resizing columns, div properties, and many other things! In any case, this very VERY simple piece of code pushes me to the wall, and I wonder if I can’t answer?

<script type="text/javascript"> $(document).ready(function () { $("#text").load("<%= Model.FileLocation %>"); $.fn.colorbox.resize(); }); </script> <div id="text"></div>

Above is the code (which, I think, should work like a charm). I tried using $ .get and set the resizing in the callback using timeouts and separating things with functions.

I also confirmed that nothing is broken, the text is loading (executing a warning with $ ("# text"), because the message shows me the loaded text. I can also specify the width and / or height for resizing, and they work, but I I can not do this based on the loaded content.

Sorry for the long post ... any ideas why in the world this thing will not change?

+4
source share
2 answers

Thanks to the one who read and tried to find the reason why this did not work, I finally found a workaround.

It seems that for some reason, even putting resize() in a successful callback, it still got the call too soon. I was able to open firebug and manually enter the colorbox.resize() function on the command line, and after loading it worked fine even if the call failed.

So i did it

 $(document).ready(function () { jQuery.ajaxSettings.async = false; $('#text').load('<%= Model.FileLocation %>'); $.fn.colorbox.resize(); });

Setting async in ajax to false made it call in turn, and now it works fine and loads very quickly.

+2
source

Try to wait for the content to load.

 <script type="text/javascript"> $(document).ready(function () { $("#text").load("<%= Model.FileLocation %>", function() { $.fn.colorbox.resize(); }); }); </script> <div id="text"></div>
+4
source

More articles:


All Articles