Hi,
I have been fighting a terrible problem.
The situation that I have is: I have a column with text (#content p)
and next to it an anchor with image.
Images can be portrait or landscape and ratio is not fixed. They just
have to fit in 400x400px square.
My task is to make the text column which stays on the left of image
adjust its width depending on image orientation. At the same time the
#bighthumb has to self-adjust its width too, so they fill the #content
space nicely.
==================
In HTML I have:
-----------------
<div id="content">
<p>
blah blah blah blah .... some long enough text...
</p>
<a href="images/01.jpg" id="bigthumb"><img src="thumb/
400-01.jpg" alt="keyword" /><br />Image caption</a>
</div>
... and just before the </body> i have:
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></
script>
<script src="js/theme.js" type="text/javascript"></script>
</body>
=================
JS code:
----------
var photo_w; // photo width
var photo_h; // photo height
var side_padding = 10; // the offset of the prev/next buttons from the
image edges
$(window).load(function() {
var pic = $("#bigthumb>img");
pic.removeAttr("width");
pic.removeAttr("height");
photo_w = pic.width();
photo_h = pic.height();
$("#content>p").css("width", parseInt($("#content").css("width"),
10) - photo_w - 62);
if (photo_h > photo_w) {
$("#bigthumb").css("height","402px").css("width", photo_w + 2);
$("#bigthumb>img").css("height","400px");
}
else {
$("#bigthumb").css("width","402px");
$("#bigthumb>img").css("width","400px");
}
});
=============
And CSS:
----------
#content {
float: right;
width: 718px;
}
#content p {
text-align:justify;
float:left;
width: 256px; // the default width for landscape-oriented images
padding: 10px 0 10px 20px;
}
#bigthumb {
float:right;
margin: 20px 20px 0 20px;
text-align:right;
}
#bigthumb img {
margin-bottom: 5px;
border: 1px solid #999;
}
==============
What happens is: Yes, everything works as expected. Landscape-images
(with default <p> width = 256px) work just perfect. The problem is
that when a page with portrait-oriented image loads - first (while
loading) it displays the <p> width default (256px) width. And right
after everything is loaded - the paragraph JUMPS to its new width.
This is very unpleasant effect which I would like to avoid. Using
animate() is unsatisfactory too... Things were even worse when i hade
the JS includes in the <head>, so that is the reason I moved it to
document end.
I would highly appreciate some help because I am quite new in jQuery!
Is there a way to have the css width set before the paragraph appears
in the browser?
(Please have in mind that having text flowing around image (generic
css float technique) is not an option for the task. They must be in
separate columns.)
