I''m trying to create an <img> within a <div> using
Prototype (1.6).
I''m preloading the image - then trying to get the real dimensions
using the Image width and height properties and using those to
center the image in the containing <div>.
The problem is the width and height both come back as 0 so the
image is offset from its proper position.
BUT if I reload the page the width and height are properly reported
and the image is centered.
The minimal test case is:
http://craic.com/js_image_problem/js_image.html
And the problem occurs in Firefox, IE and Safari
The relevant Javascript/prototype code is:
// Preload an image
var imageName = ''circle_1.png'';
var image = new Image();
image.src = imageName;
// Setup a square ''panel'' <div> that the image will
be placed in
var width = 200;
var panel = $(''panel'');
panel.setStyle({position: ''relative'',
border: ''1px solid #000000'',
width: width + ''px'',
height: width + ''px''});
// Create a <img> element
var div = document.createElement(''img'');
div = $(div);
div.setAttribute(''src'', imageName);
// Append it to the parent panel div
panel.appendChild(div);
// Try and get the real image dimensions from the Image object
// but this gives 0, 0 first time around
// BUT... reload the page and it works...
var left = (width - image.width) / 2;
var top = (width - image.height)/ 2;
// update the img to center it in the panel
div.setStyle({position: ''absolute'',
left: left + ''px'',
top: top + ''px'',
display: ''inline''
});
This looks like some image preload problem - so I''m
guessing a JavaScript issue, rather than Prototype,
but I can''t figure it out. Suggestions would be greatly
appreciated. (and apologies for when it turns out I''m
missing something obvious..)
thanks
--Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
You said you''re "preloading" the image ... is the loading
finished
before your script starts? From your simplified test case, the answer
is no. ... Even so, you''re not cloning or using your preloaded image,
you''re creating a new one (if the problem persists after doing a
proper pre-load, check the client/server cache settings).
It''s clear the image isn''t loaded when you check for
height/width.
You can confirm this theory by running the following in your titlebar
(er.. javascript console) after the image has loaded:
javascript: alert($$(''img'')[0].height);
Either way, if all you need is height/width for *layout* you may not
(probably should not) need to use Javascript at all. Here''s a simple
CSS bit that''ll do it (but won''t position absolute, like I
noticed
you were doing--is absolute really essential?). There are other ways
to do it (e.g. force image to stay "inline"--default for most
browsers, then "text-align:center" the div), choose one that woeks
for you. You may wish to rewrite the selector to avoid "classitis".
.myImageClass {
display: block;
margin-left:auto;
margin-right:auto;
}
.myDivClass {
text-align: center;
}
TAG
On Nov 26, 2007, at 4:22 PM, Rob Jones wrote:
>
> I''m trying to create an <img> within a <div> using
Prototype (1.6).
>
> I''m preloading the image - then trying to get the real dimensions
> using the Image width and height properties and using those to
> center the image in the containing <div>.
>
> The problem is the width and height both come back as 0 so the
> image is offset from its proper position.
>
> BUT if I reload the page the width and height are properly reported
> and the image is centered.
>
> The minimal test case is:
> http://craic.com/js_image_problem/js_image.html
>
> And the problem occurs in Firefox, IE and Safari
>
> The relevant Javascript/prototype code is:
> // Preload an image
> var imageName = ''circle_1.png'';
> var image = new Image();
> image.src = imageName;
>
> // Setup a square ''panel'' <div> that the image
will be placed in
> var width = 200;
> var panel = $(''panel'');
> panel.setStyle({position: ''relative'',
> border: ''1px solid #000000'',
> width: width + ''px'',
> height: width + ''px''});
>
>
> // Create a <img> element
> var div = document.createElement(''img'');
> div = $(div);
> div.setAttribute(''src'', imageName);
>
> // Append it to the parent panel div
> panel.appendChild(div);
>
> // Try and get the real image dimensions from the Image object
> // but this gives 0, 0 first time around
> // BUT... reload the page and it works...
> var left = (width - image.width) / 2;
> var top = (width - image.height)/ 2;
>
> // update the img to center it in the panel
> div.setStyle({position: ''absolute'',
> left: left + ''px'',
> top: top + ''px'',
> display: ''inline''
> });
>
>
> This looks like some image preload problem - so I''m
> guessing a JavaScript issue, rather than Prototype,
> but I can''t figure it out. Suggestions would be greatly
> appreciated. (and apologies for when it turns out I''m
> missing something obvious..)
>
> thanks
> --Rob
>
>
>
> >
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
To check if the image is loaded you could try this piece of
javascript:
function loaded(elm) {
var elm = $(elm);
if(elm.complete) {
elm.fire(''element:loaded'');
} else {
setTimeout(function(elm) { loaded(elm); }, 100);
}
}
document.observe(''element:loaded'', function(ev) {
var elm = ev.element();
console.log(''Height: ''+elm.getHeight()+''px, Width:
''+elm.getWidth()
+''px'');
});
I know it is far from optimal, but it works (at least for images,
haven''t tried other elements). I checked it in Firefox, IE6 & IE7..
it
all works.
Greetz,
Wizz
On 27 nov, 01:51, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org>
wrote:> You said you''re "preloading" the image ... is the
loading finished
> before your script starts? From your simplified test case, the answer
> is no. ... Even so, you''re not cloning or using your preloaded
image,
> you''re creating a new one (if the problem persists after doing a
> proper pre-load, check the client/server cache settings).
>
> It''s clear the image isn''t loaded when you check for
height/width.
> You can confirm this theory by running the following in your titlebar
> (er.. javascript console) after the image has loaded:
>
> javascript: alert($$(''img'')[0].height);
>
> Either way, if all you need is height/width for *layout* you may not
> (probably should not) need to use Javascript at all. Here''s a
simple
> CSS bit that''ll do it (but won''t position absolute, like
I noticed
> you were doing--is absolute really essential?). There are other ways
> to do it (e.g. force image to stay "inline"--default for most
> browsers, then "text-align:center" the div), choose one that
woeks
> for you. You may wish to rewrite the selector to avoid
"classitis".
>
> .myImageClass {
> display: block;
> margin-left:auto;
> margin-right:auto;
>
> }
>
> .myDivClass {
> text-align: center;
>
> }
>
> TAG
>
> On Nov 26, 2007, at 4:22 PM, Rob Jones wrote:
>
>
>
> > I''m trying to create an <img> within a <div>
using Prototype (1.6).
>
> > I''m preloading the image - then trying to get the real
dimensions
> > using the Image width and height properties and using those to
> > center the image in the containing <div>.
>
> > The problem is the width and height both come back as 0 so the
> > image is offset from its proper position.
>
> > BUT if I reload the page the width and height are properly reported
> > and the image is centered.
>
> > The minimal test case is:
> >http://craic.com/js_image_problem/js_image.html
>
> > And the problem occurs in Firefox, IE and Safari
>
> > The relevant Javascript/prototype code is:
> > // Preload an image
> > var imageName = ''circle_1.png'';
> > var image = new Image();
> > image.src = imageName;
>
> > // Setup a square ''panel'' <div> that
the image will be placed in
> > var width = 200;
> > var panel = $(''panel'');
> > panel.setStyle({position: ''relative'',
> > border: ''1px solid
#000000'',
> > width: width +
''px'',
> > height: width +
''px''});
>
> > // Create a <img> element
> > var div = document.createElement(''img'');
> > div = $(div);
> > div.setAttribute(''src'', imageName);
>
> > // Append it to the parent panel div
> > panel.appendChild(div);
>
> > // Try and get the real image dimensions from the Image
object
> > // but this gives 0, 0 first time around
> > // BUT... reload the page and it works...
> > var left = (width - image.width) / 2;
> > var top = (width - image.height)/ 2;
>
> > // update the img to center it in the panel
> > div.setStyle({position: ''absolute'',
> > left: left +
''px'',
> > top: top +
''px'',
> > display: ''inline''
> > });
>
> > This looks like some image preload problem - so I''m
> > guessing a JavaScript issue, rather than Prototype,
> > but I can''t figure it out. Suggestions would be greatly
> > appreciated. (and apologies for when it turns out I''m
> > missing something obvious..)
>
> > thanks
> > --Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
@Tom: The CSS solution is certainly better, íf you only wanted to align it horizontally... CSS sucks at aligning things vertically though : ''( On 27 nov, 11:09, Wizz <woutaw...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> To check if the image is loaded you could try this piece of > javascript: > > function loaded(elm) { > var elm = $(elm); > if(elm.complete) { > elm.fire(''element:loaded''); > } else { > setTimeout(function(elm) { loaded(elm); }, 100); > } > > } > > document.observe(''element:loaded'', function(ev) { > var elm = ev.element(); > console.log(''Height: ''+elm.getHeight()+''px, Width: ''+elm.getWidth() > +''px''); > > }); > > I know it is far from optimal, but it works (at least for images, > haven''t tried other elements). I checked it in Firefox, IE6 & IE7.. it > all works. > > Greetz, > > Wizz > > On 27 nov, 01:51, Tom Gregory <t...-PGZyUNKar/Q@public.gmane.org> wrote: > > > You said you''re "preloading" the image ... is the loading finished > > before your script starts? From your simplified test case, the answer > > is no. ... Even so, you''re not cloning or using your preloaded image, > > you''re creating a new one (if the problem persists after doing a > > proper pre-load, check the client/server cache settings). > > > It''s clear the image isn''t loaded when you check for height/width. > > You can confirm this theory by running the following in your titlebar > > (er.. javascript console) after the image has loaded: > > > javascript: alert($$(''img'')[0].height); > > > Either way, if all you need is height/width for *layout* you may not > > (probably should not) need to use Javascript at all. Here''s a simple > > CSS bit that''ll do it (but won''t position absolute, like I noticed > > you were doing--is absolute really essential?). There are other ways > > to do it (e.g. force image to stay "inline"--default for most > > browsers, then "text-align:center" the div), choose one that woeks > > for you. You may wish to rewrite the selector to avoid "classitis". > > > .myImageClass { > > display: block; > > margin-left:auto; > > margin-right:auto; > > > } > > > .myDivClass { > > text-align: center; > > > } > > > TAG > > > On Nov 26, 2007, at 4:22 PM, Rob Jones wrote: > > > > I''m trying to create an <img> within a <div> using Prototype (1.6). > > > > I''m preloading the image - then trying to get the real dimensions > > > using the Image width and height properties and using those to > > > center the image in the containing <div>. > > > > The problem is the width and height both come back as 0 so the > > > image is offset from its proper position. > > > > BUT if I reload the page the width and height are properly reported > > > and the image is centered. > > > > The minimal test case is: > > >http://craic.com/js_image_problem/js_image.html > > > > And the problem occurs in Firefox, IE and Safari > > > > The relevant Javascript/prototype code is: > > > // Preload an image > > > var imageName = ''circle_1.png''; > > > var image = new Image(); > > > image.src = imageName; > > > > // Setup a square ''panel'' <div> that the image will be placed in > > > var width = 200; > > > var panel = $(''panel''); > > > panel.setStyle({position: ''relative'', > > > border: ''1px solid #000000'', > > > width: width + ''px'', > > > height: width + ''px''}); > > > > // Create a <img> element > > > var div = document.createElement(''img''); > > > div = $(div); > > > div.setAttribute(''src'', imageName); > > > > // Append it to the parent panel div > > > panel.appendChild(div); > > > > // Try and get the real image dimensions from the Image object > > > // but this gives 0, 0 first time around > > > // BUT... reload the page and it works... > > > var left = (width - image.width) / 2; > > > var top = (width - image.height)/ 2; > > > > // update the img to center it in the panel > > > div.setStyle({position: ''absolute'', > > > left: left + ''px'', > > > top: top + ''px'', > > > display: ''inline'' > > > }); > > > > This looks like some image preload problem - so I''m > > > guessing a JavaScript issue, rather than Prototype, > > > but I can''t figure it out. Suggestions would be greatly > > > appreciated. (and apologies for when it turns out I''m > > > missing something obvious..) > > > > thanks > > > --Rob--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Tom''s CSS solution won''t work for my app - I''ve built a JavaScript library for drawing basic ''diagram-style'' graphics and placing images at specific coordinates in the drawing panel is a part of that. I can actually workaround the issue in Firefox and Safari by placing the image while keeping it hidden, then using Element getDimensions, repositioning it and making it visible - but that doesn''t work in IE for some reason The fundamental issue is wanting to work with the image object before it has loaded. So the element.complete approach may do the trick. thanks --Rob --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---