$img1.load(function()
{
$(this).each(function()
{
if($(this).height() > $h) $(this).height($h);
================
if(check if it the item you want to clone){
$tbl1.clone().prependTo($td2);
}
================
});
});
----
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Sat, Jan 17, 2009 at 10:20 PM, David .Wu <chan1...@gmail.com> wrote:
>
> I mean, I want to clone the image to another place with the image
> resize finished, for example
> I load three images by ajax
>
> 1.jpg height 200px
> 2.jpg height 350px
> 3.jpg height 400px
>
> and my restriction is 180, therefore, images will resize to my rule
> successfully, and I want to clone it in another table at the same
> page, so I use jQuery clone function, the first three images resize
> successful but the clone one become the origin size, I guess it clone
> the image before it's resized, so how do I do the clone function after
> the resize function truly be executed.
>
> On 1月18日, 上午1時07分, jQuery Lover <ilovejqu...@gmail.com> wrote:
>> Didn't get exactly what you meant, but if you want to do something
>> when loading has finished then put it into the load() function.
>>
>> .load(function(){
>> // your code
>>
>> });
>>
>> ----
>> Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
>>
>> On Sat, Jan 17, 2009 at 9:53 PM, David .Wu <chan1...@gmail.com> wrote:
>>
>> > I got one more question, actually I need to clone the result of $td1
>> > into another $td2, how to do it after the load function "finish".
>>
>> > $img1.load(function()
>> > {
>> > $(this).each(function()
>> > {
>> > if($(this).height() > $h) $(this).height($h);
>> > });
>> > });
>>
>> > $tbl1.clone().prependTo($td2);
>>
>> > On 1月18日, 上午12時43分, "David .Wu" <chan1...@gmail.com> wrote:
>> >> aha, I understand, it's work, thanks :)
>>
>> >> $img1.load(function()
>> >> {
>> >> $(this).each(function()
>> >> {
>> >> if($(this).height() > $h) $(this).height($h);
>> >> });
>>
>> >> });
>>
>> >> On 1月17日, 下午9時21分, jQuery Lover <ilovejqu...@gmail.com> wrote:
>>
>> >> > If the image is not loaded by the time you call .height() function it
>> >> > returns 0. Since your code is run right after the ajax request is
>> >> > completed browser has no idea what is the size of that images.
>>
>> >> > Tip: You could bind a .load() event to your images and change the size
>> >> > of that particular image on its load.
>>
>> >> > ----
>> >> > Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
>>
>> >> > On Sat, Jan 17, 2009 at 5:34 PM, David .Wu <chan1...@gmail.com> wrote:
>>
>> >> > > My process is
>> >> > > 1. load images from other php file
>> >> > > 2. put the response thing into a div
>> >> > > 3. check all image sizes
>> >> > > 4. resize image if the size over the restriction
>>
>> >> > > the problem is sometimes images resize failed, how to make sure the
>> >> > > resize process work.
>>
>> >> > > html code
>> >> > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>> >> > > "http://
>> >> > >www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>> >> > > <html xmlns="http://www.w3.org/1999/xhtml";>
>> >> > > <head>
>> >> > > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
>> >> > > <title>demo</title>
>> >> > > <style>
>> >> > > <!--
>> >> > > div#slide
>> >> > > {
>> >> > > width:100px;
>> >> > > height:50px;
>> >> > > overflow:hidden;
>> >> > > }
>> >> > > div#slide ul
>> >> > > {
>> >> > > margin:0px;
>> >> > > padding:0px;
>> >> > > list-style:none;
>> >> > > }
>> >> > > div#slide li
>> >> > > {
>> >> > > float:left;
>> >> > > }
>> >> > > -->
>> >> > > </style>
>> >> > > <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
>> >> > > </head>
>>
>> >> > > <body>
>> >> > > <div id="slide"></div>
>> >> > > <script language="javascript">
>> >> > > <!--
>> >> > > $(document).ready(function()
>> >> > > {
>> >> > > $.ajax(
>> >> > > {
>> >> > > url:'ajax.php',
>> >> > > type:'get',
>> >> > > cache:false,
>> >> > > success:function(data)
>> >> > > {
>> >> > > /*
>> >> > > data will response html
>> >> > > <ul>
>> >> > > <li><img
>> >> > > src="1.jpg"></li>
>> >> > > <li><img
>> >> > > src="2.jpg"></li>
>> >> > > <li><img
>> >> > > src="3.jpg"></li>
>> >> > > </ul>
>> >> > > */
>> >> > > $('div#slide').html(data);
>> >> > > },
>> >> > > complete:function()
>> >> > > {
>> >> > > $h = 40; /* images hight restriction */
>> >> > > /* resize the image */
>> >> > > $('div#slide img').each(function()
>> >> > > {
>> >> > > if($(this).height() > $h)
>> >> > > $(this).height($h);
>> >> > > });
>> >> > > }
>> >> > > });
>> >> > > });
>> >> > > //-->
>> >> > > </script>
>> >> > > </body>
>> >> > > </html>
