[Moo] Issues with element.getComputedSize - Firefox o.k. - Safari fails

[mmjaeger]

Hello
I'm having an issue with the following code:

var tsize = this.thumbs[0].getDimensions({ computeSize: true, styles:
['margin', 'padding', 'border'] });
console.log('tsize: ' + tsize.totalWidth);
console.log('tsize: ' + tsize.totalWidth);

console.log('computed size: ' + this.thumbs[0].getComputedSize
().totalWidth);

in both cases, Firefox returns 95 which is correct while Safari
returns 0

I'm using 1.2.4 and 1.2.4.2 - Am I doing anything wrong or what's the
issue and how could I get the correct values?

Thanks

[anutron]

can you put an example of this failing on mooshell.net?

On Tue, Nov 3, 2009 at 9:45 PM, mmjaeger <[hidden email]> wrote:

Hello
I'm having an issue with the following code:

var tsize = this.thumbs[0].getDimensions({ computeSize: true, styles:
['margin', 'padding', 'border'] });
console.log('tsize: ' + tsize.totalWidth);
console.log('tsize: ' + tsize.totalWidth);

console.log('computed size: ' + this.thumbs[0].getComputedSize
().totalWidth);

in both cases, Firefox returns 95 which is correct while Safari
returns 0

I'm using 1.2.4 and 1.2.4.2 - Am I doing anything wrong or what's the
issue and how could I get the correct values?

Thanks

[mmjaeger]

Hello Aaron
Thanks for replying - I meanwhile figured out that for Safari to get
the same results as Firefox, I need to preload the image? Does that
make sense?

On Nov 4, 9:17 am, Aaron Newton <[hidden email]> wrote:

> can you put an example of this failing on mooshell.net?
>
>
>
> On Tue, Nov 3, 2009 at 9:45 PM, mmjaeger <[hidden email]> wrote:
>
> > Hello
> > I'm having an issue with the following code:
>
> > var tsize = this.thumbs[0].getDimensions({ computeSize: true, styles:
> > ['margin', 'padding', 'border'] });
> > console.log('tsize: ' + tsize.totalWidth);
> > console.log('tsize: ' + tsize.totalWidth);
>
> > console.log('computed size: ' + this.thumbs[0].getComputedSize
> > ().totalWidth);
>
> > in both cases, Firefox returns 95 which is correct while Safari
> > returns 0
>
> > I'm using 1.2.4 and 1.2.4.2 - Am I doing anything wrong or what's the
> > issue and how could I get the correct values?
>
> > Thanks

[Oskar Krawczyk]

You always need to preload the image if you want to get its size. If that works on Firefox, it's just a coincidence (caching).

___

Oskar Krawczyk
http://nouincolor.com

On Wed, Nov 4, 2009 at 18:20, mmjaeger <[hidden email]> wrote:

Hello Aaron
Thanks for replying - I meanwhile figured out that for Safari to get
the same results as Firefox, I need to preload the image? Does that
make sense?

On Nov 4, 9:17 am, Aaron Newton <[hidden email]> wrote:
> can you put an example of this failing on mooshell.net?
>
>
>

> On Tue, Nov 3, 2009 at 9:45 PM, mmjaeger <[hidden email]> wrote:
>
> > Hello
> > I'm having an issue with the following code:
>
> > var tsize = this.thumbs[0].getDimensions({ computeSize: true, styles:
> > ['margin', 'padding', 'border'] });
> > console.log('tsize: ' + tsize.totalWidth);
> > console.log('tsize: ' + tsize.totalWidth);
>
> > console.log('computed size: ' + this.thumbs[0].getComputedSize
> > ().totalWidth);
>
> > in both cases, Firefox returns 95 which is correct while Safari
> > returns 0
>
> > I'm using 1.2.4 and 1.2.4.2 - Am I doing anything wrong or what's the
> > issue and how could I get the correct values?
>
> > Thanks

[Thierry bela nanga]

Safari and google chrome run javascript faster than firefox on page load,

I my script I usually to this

 - add a delay of 6 - 10 second in script in the domready (may not work correctly on first page load)

 - and / or I set width / height of the elements in css

On Wed, Nov 4, 2009 at 7:50 PM, Oskar Krawczyk <[hidden email]> wrote:

You always need to preload the image if you want to get its size. If that works on Firefox, it's just a coincidence (caching).

___

Oskar Krawczyk
http://nouincolor.com

On Wed, Nov 4, 2009 at 18:20, mmjaeger <[hidden email]> wrote:

Hello Aaron
Thanks for replying - I meanwhile figured out that for Safari to get
the same results as Firefox, I need to preload the image? Does that
make sense?

On Nov 4, 9:17 am, Aaron Newton <[hidden email]> wrote:
> can you put an example of this failing on mooshell.net?
>
>
>

> On Tue, Nov 3, 2009 at 9:45 PM, mmjaeger <[hidden email]> wrote:
>
> > Hello
> > I'm having an issue with the following code:
>
> > var tsize = this.thumbs[0].getDimensions({ computeSize: true, styles:
> > ['margin', 'padding', 'border'] });
> > console.log('tsize: ' + tsize.totalWidth);
> > console.log('tsize: ' + tsize.totalWidth);
>
> > console.log('computed size: ' + this.thumbs[0].getComputedSize
> > ().totalWidth);
>
> > in both cases, Firefox returns 95 which is correct while Safari
> > returns 0
>
> > I'm using 1.2.4 and 1.2.4.2 - Am I doing anything wrong or what's the
> > issue and how could I get the correct values?
>
> > Thanks

--
http://tbela99.blogspot.com/

fax : [phone]

[anutron]

.... or attach your image measurements to the load event *of the image*.

If you want to wait for several images to load, see the Group class.

On Wed, Nov 4, 2009 at 11:14 AM, Thierry bela nanga <[hidden email]> wrote:

Safari and google chrome run javascript faster than firefox on page load,

I my script I usually to this

 - add a delay of 6 - 10 second in script in the domready (may not work correctly on first page load)

 - and / or I set width / height of the elements in css

On Wed, Nov 4, 2009 at 7:50 PM, Oskar Krawczyk <[hidden email]> wrote:

You always need to preload the image if you want to get its size. If that works on Firefox, it's just a coincidence (caching).

___

Oskar Krawczyk
http://nouincolor.com

On Wed, Nov 4, 2009 at 18:20, mmjaeger <[hidden email]> wrote:

Hello Aaron
Thanks for replying - I meanwhile figured out that for Safari to get
the same results as Firefox, I need to preload the image? Does that
make sense?

On Nov 4, 9:17 am, Aaron Newton <[hidden email]> wrote:
> can you put an example of this failing on mooshell.net?
>
>
>

> On Tue, Nov 3, 2009 at 9:45 PM, mmjaeger <[hidden email]> wrote:
>
> > Hello
> > I'm having an issue with the following code:
>
> > var tsize = this.thumbs[0].getDimensions({ computeSize: true, styles:
> > ['margin', 'padding', 'border'] });
> > console.log('tsize: ' + tsize.totalWidth);
> > console.log('tsize: ' + tsize.totalWidth);
>
> > console.log('computed size: ' + this.thumbs[0].getComputedSize
> > ().totalWidth);
>
> > in both cases, Firefox returns 95 which is correct while Safari
> > returns 0
>
> > I'm using 1.2.4 and 1.2.4.2 - Am I doing anything wrong or what's the
> > issue and how could I get the correct values?
>
> > Thanks

--
http://tbela99.blogspot.com/

fax : [phone]

[Rolf -nl]

@Aaron (& slightly off topic); with the Group classyou add events that
are available in the classes you add the group, right? I mean, for
Ajax calls you can use complete etc. In theory, what would happen if
you would group ajax and tween and ... classes or classes that don't
have that event?


On Nov 4, 8:23 pm, Aaron Newton <[hidden email]> wrote:

> .... or attach your image measurements to the load event *of the image*.
>
> If you want to wait for several images to load, see the Group class.
>
> On Wed, Nov 4, 2009 at 11:14 AM, Thierry bela nanga <[hidden email]>wrote:
>
>
>
> > Safari and google chrome run javascript faster than firefox on page load,
>
> > I my script I usually to this
>
> >  - add a delay of 6 - 10 second in script in the domready (may not work
> > correctly on first page load)
> >  - and / or I set width / height of the elements in css
>
> > On Wed, Nov 4, 2009 at 7:50 PM, Oskar Krawczyk <[hidden email]>wrote:
>
> >> You always need to preload the image if you want to get its size. If that
> >> works on Firefox, it's just a coincidence (caching).
>
> >> ___
>
> >> Oskar Krawczyk
> >>http://nouincolor.com
>
> >> On Wed, Nov 4, 2009 at 18:20, mmjaeger <[hidden email]> wrote:
>
> >>> Hello Aaron
> >>> Thanks for replying - I meanwhile figured out that for Safari to get
> >>> the same results as Firefox, I need to preload the image? Does that
> >>> make sense?
>
> >>> On Nov 4, 9:17 am, Aaron Newton <[hidden email]> wrote:
> >>> > can you put an example of this failing on mooshell.net?
>
> >>> > On Tue, Nov 3, 2009 at 9:45 PM, mmjaeger <[hidden email]> wrote:
>
> >>> > > Hello
> >>> > > I'm having an issue with the following code:
>
> >>> > > var tsize = this.thumbs[0].getDimensions({ computeSize: true, styles:
> >>> > > ['margin', 'padding', 'border'] });
> >>> > > console.log('tsize: ' + tsize.totalWidth);
> >>> > > console.log('tsize: ' + tsize.totalWidth);
>
> >>> > > console.log('computed size: ' + this.thumbs[0].getComputedSize
> >>> > > ().totalWidth);
>
> >>> > > in both cases, Firefox returns 95 which is correct while Safari
> >>> > > returns 0
>
> >>> > > I'm using 1.2.4 and 1.2.4.2 - Am I doing anything wrong or what's the
> >>> > > issue and how could I get the correct values?
>
> >>> > > Thanks
>
> > --
> >http://tbela99.blogspot.com/
>
> > fax : [phone]

[anutron]

if you group classes that don't have that event, the group event will never fire.

but if you have a bunch of images, you can group them and watch their load event.

On Wed, Nov 4, 2009 at 11:42 AM, Rolf -nl <[hidden email]> wrote:

@Aaron (& slightly off topic); with the Group classyou add events that
are available in the classes you add the group, right? I mean, for
Ajax calls you can use complete etc. In theory, what would happen if
you would group ajax and tween and ... classes or classes that don't
have that event?

On Nov 4, 8:23 pm, Aaron Newton <[hidden email]> wrote:
> .... or attach your image measurements to the load event *of the image*.
>
> If you want to wait for several images to load, see the Group class.
>

> On Wed, Nov 4, 2009 at 11:14 AM, Thierry bela nanga <[hidden email]>wrote:

>
>
>
> > Safari and google chrome run javascript faster than firefox on page load,
>
> > I my script I usually to this
>
> >  - add a delay of 6 - 10 second in script in the domready (may not work
> > correctly on first page load)
> >  - and / or I set width / height of the elements in css
>

> > On Wed, Nov 4, 2009 at 7:50 PM, Oskar Krawczyk <[hidden email]>wrote:

>
> >> You always need to preload the image if you want to get its size. If that
> >> works on Firefox, it's just a coincidence (caching).
>
> >> ___
>
> >> Oskar Krawczyk
> >>http://nouincolor.com
>

> >> On Wed, Nov 4, 2009 at 18:20, mmjaeger <[hidden email]> wrote:
>
> >>> Hello Aaron
> >>> Thanks for replying - I meanwhile figured out that for Safari to get
> >>> the same results as Firefox, I need to preload the image? Does that
> >>> make sense?
>
> >>> On Nov 4, 9:17 am, Aaron Newton <[hidden email]> wrote:
> >>> > can you put an example of this failing on mooshell.net?
>
> >>> > On Tue, Nov 3, 2009 at 9:45 PM, mmjaeger <[hidden email]> wrote:
>
> >>> > > Hello
> >>> > > I'm having an issue with the following code:
>
> >>> > > var tsize = this.thumbs[0].getDimensions({ computeSize: true, styles:
> >>> > > ['margin', 'padding', 'border'] });
> >>> > > console.log('tsize: ' + tsize.totalWidth);
> >>> > > console.log('tsize: ' + tsize.totalWidth);
>
> >>> > > console.log('computed size: ' + this.thumbs[0].getComputedSize
> >>> > > ().totalWidth);
>
> >>> > > in both cases, Firefox returns 95 which is correct while Safari
> >>> > > returns 0
>
> >>> > > I'm using 1.2.4 and 1.2.4.2 - Am I doing anything wrong or what's the
> >>> > > issue and how could I get the correct values?
>
> >>> > > Thanks
>
> > --
> >http://tbela99.blogspot.com/
>
> > fax : [phone]

[Rolf -nl]

Right. For images one could also use Asset.images to load them all and
then using the returned img elements to get the size, no? I mean when
- in case of images - would you use Group as far as loading if you
have Asset.images?

On Nov 4, 8:46 pm, Aaron Newton <[hidden email]> wrote:

> if you group classes that don't have that event, the group event will never
> fire.
>
> but if you have a bunch of images, you can group them and watch their load
> event.
>
>
>
> On Wed, Nov 4, 2009 at 11:42 AM, Rolf -nl <[hidden email]> wrote:
>
> > @Aaron (& slightly off topic); with the Group classyou add events that
> > are available in the classes you add the group, right? I mean, for
> > Ajax calls you can use complete etc. In theory, what would happen if
> > you would group ajax and tween and ... classes or classes that don't
> > have that event?
>
> > On Nov 4, 8:23 pm, Aaron Newton <[hidden email]> wrote:
> > > .... or attach your image measurements to the load event *of the image*.
>
> > > If you want to wait for several images to load, see the Group class.
>
> > > On Wed, Nov 4, 2009 at 11:14 AM, Thierry bela nanga <[hidden email]
> > >wrote:
>
> > > > Safari and google chrome run javascript faster than firefox on page
> > load,
>
> > > > I my script I usually to this
>
> > > >  - add a delay of 6 - 10 second in script in the domready (may not work
> > > > correctly on first page load)
> > > >  - and / or I set width / height of the elements in css
>
> > > > On Wed, Nov 4, 2009 at 7:50 PM, Oskar Krawczyk <
> > [hidden email]>wrote:
>
> > > >> You always need to preload the image if you want to get its size. If
> > that
> > > >> works on Firefox, it's just a coincidence (caching).
>
> > > >> ___
>
> > > >> Oskar Krawczyk
> > > >>http://nouincolor.com
>
> > > >> On Wed, Nov 4, 2009 at 18:20, mmjaeger <[hidden email]> wrote:
>
> > > >>> Hello Aaron
> > > >>> Thanks for replying - I meanwhile figured out that for Safari to get
> > > >>> the same results as Firefox, I need to preload the image? Does that
> > > >>> make sense?
>
> > > >>> On Nov 4, 9:17 am, Aaron Newton <[hidden email]> wrote:
> > > >>> > can you put an example of this failing on mooshell.net?
>
> > > >>> > On Tue, Nov 3, 2009 at 9:45 PM, mmjaeger <[hidden email]>
> > wrote:
>
> > > >>> > > Hello
> > > >>> > > I'm having an issue with the following code:
>
> > > >>> > > var tsize = this.thumbs[0].getDimensions({ computeSize: true,
> > styles:
> > > >>> > > ['margin', 'padding', 'border'] });
> > > >>> > > console.log('tsize: ' + tsize.totalWidth);
> > > >>> > > console.log('tsize: ' + tsize.totalWidth);
>
> > > >>> > > console.log('computed size: ' + this.thumbs[0].getComputedSize
> > > >>> > > ().totalWidth);
>
> > > >>> > > in both cases, Firefox returns 95 which is correct while Safari
> > > >>> > > returns 0
>
> > > >>> > > I'm using 1.2.4 and 1.2.4.2 - Am I doing anything wrong or what's
> > the
> > > >>> > > issue and how could I get the correct values?
>
> > > >>> > > Thanks
>
> > > > --
> > > >http://tbela99.blogspot.com/
>
> > > > fax : [phone]

[anutron]

If you didn't want to inject the images with javascript. If they were in your html source.

On Wed, Nov 4, 2009 at 12:04 PM, Rolf -nl <[hidden email]> wrote:

Right. For images one could also use Asset.images to load them all and
then using the returned img elements to get the size, no? I mean when
- in case of images - would you use Group as far as loading if you
have Asset.images?

On Nov 4, 8:46 pm, Aaron Newton <[hidden email]> wrote:
> if you group classes that don't have that event, the group event will never
> fire.
>
> but if you have a bunch of images, you can group them and watch their load
> event.
>
>
>

> On Wed, Nov 4, 2009 at 11:42 AM, Rolf -nl <[hidden email]> wrote:
>
> > @Aaron (& slightly off topic); with the Group classyou add events that
> > are available in the classes you add the group, right? I mean, for
> > Ajax calls you can use complete etc. In theory, what would happen if
> > you would group ajax and tween and ... classes or classes that don't
> > have that event?
>
> > On Nov 4, 8:23 pm, Aaron Newton <[hidden email]> wrote:
> > > .... or attach your image measurements to the load event *of the image*.
>
> > > If you want to wait for several images to load, see the Group class.
>
> > > On Wed, Nov 4, 2009 at 11:14 AM, Thierry bela nanga <[hidden email]
> > >wrote:
>
> > > > Safari and google chrome run javascript faster than firefox on page
> > load,
>
> > > > I my script I usually to this
>
> > > >  - add a delay of 6 - 10 second in script in the domready (may not work
> > > > correctly on first page load)
> > > >  - and / or I set width / height of the elements in css
>
> > > > On Wed, Nov 4, 2009 at 7:50 PM, Oskar Krawczyk <
> > [hidden email]>wrote:
>
> > > >> You always need to preload the image if you want to get its size. If
> > that
> > > >> works on Firefox, it's just a coincidence (caching).
>
> > > >> ___
>
> > > >> Oskar Krawczyk
> > > >>http://nouincolor.com
>
> > > >> On Wed, Nov 4, 2009 at 18:20, mmjaeger <[hidden email]> wrote:
>
> > > >>> Hello Aaron
> > > >>> Thanks for replying - I meanwhile figured out that for Safari to get
> > > >>> the same results as Firefox, I need to preload the image? Does that
> > > >>> make sense?
>
> > > >>> On Nov 4, 9:17 am, Aaron Newton <[hidden email]> wrote:
> > > >>> > can you put an example of this failing on mooshell.net?
>
> > > >>> > On Tue, Nov 3, 2009 at 9:45 PM, mmjaeger <[hidden email]>
> > wrote:
>
> > > >>> > > Hello
> > > >>> > > I'm having an issue with the following code:
>
> > > >>> > > var tsize = this.thumbs[0].getDimensions({ computeSize: true,
> > styles:
> > > >>> > > ['margin', 'padding', 'border'] });
> > > >>> > > console.log('tsize: ' + tsize.totalWidth);
> > > >>> > > console.log('tsize: ' + tsize.totalWidth);
>
> > > >>> > > console.log('computed size: ' + this.thumbs[0].getComputedSize
> > > >>> > > ().totalWidth);
>
> > > >>> > > in both cases, Firefox returns 95 which is correct while Safari
> > > >>> > > returns 0
>
> > > >>> > > I'm using 1.2.4 and 1.2.4.2 - Am I doing anything wrong or what's
> > the
> > > >>> > > issue and how could I get the correct values?
>
> > > >>> > > Thanks
>
> > > > --
> > > >http://tbela99.blogspot.com/
>
> > > > fax : [phone]