How can I access an element from outside iframe

[oSerX]

Hello,

I have a main php file including 4 iframes. From inside of one iframe
I want to access an ID element defined in the main php file.

using Javascript I can use
"top.document.getElementByID('ID_of_the_element_I_want_to_acces').style.opacity=
"

, but ... I want to use scriptaculous effects to do EffectOpacity on
this element outside the current iframe ...

i cannot do " .. onclick="new Effect.Opacity('element ID', { from: 1,
to: 0.4, duration: 0.7});"

please help me ... how can I make Effect.Opacity to point to an
element in the main php file ??

Thank you.

[Johan Arensman]

Hello,

I believe this is possible by first creating a reference to the element, extending it and then modifying it:
// get the element and extend it with prototype's $() method:
var element = $(top.document.getElementById('my_element'));
// now apply the effect to the element:
new Effect.Opacity(element, { from: 1, to: 0.4, duration: 0.7});

I don't have the time to test it right now but I think this should work.

var element = top.document.getElementById('id');

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[oSerX]

I did what you told me ... it's working perfectly in Safari 4 and IE8,
but ...

in GoogleChrome i get the following message in the console "Uncaught
TypeError: Object [object HTMLDivElement] has no method 'getOpacity'".
- error in effects.js:line 357 ( "from: this.element.getOpacity() ||
0.0," ). If i modify this to "this.element.style.opacity" it's
working perfectly ...

in prototype.js GetOpacity method is defined "
...
getStyle: function(element, style) {
element = $(element);
style = style == 'float' ? 'cssFloat' : style.camelize();
var value = element.style[style];
if (!value || value == 'auto') {
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css[style] : null;
}
if (style == 'opacity') return value ? parseFloat(value) : 1.0;
return value == 'auto' ? null : value;
},

getOpacity: function(element) {
return $(element).getStyle('opacity');
},
"

so ... is seems to me there is a problem with prototype.js and google
chrome ... am I right ?

[oSerX]

I think I solved the problem ... not sure yet ... Yesterday I
compressed prototype.js using bananascript. I think it did something
wrong inside the source code. Now it seems ok in Google Chrome also...
at lease until now.

[levan]

You can create a js function in the parent file, something like
function myOpacity(){ new Effect.Opacity('element ID', { from: 1,

to: 0.4, duration: 0.7});}

when you need the opacity to execute, just call the function from de
iframe this way

parent.myOpacity();

hope this helps.