Page 1 of 1

Access a frame's styleSheets object?

Posted: Wed Apr 30, 2008 9:01 am
by JAB Creations
The following script was written mostly by me though critical parts should be credited to Mark Wilton-Jones.

Any way it works perfectly fine except that I'd like to add support for frames. I know that in general you access a frame via parent.frame_name. I however am not sure how to access a frame's document.styleSheets object.

I can work the if frame/no frame if/else in, I just need to know where and how to apply it?

Code: Select all

function change_rule(selector,property,value){var css_file_name = 'style';if (document.styleSheets){for (var oSsDmCt = 0; oSsDmCt < document.styleSheets.length; oSsDmCt++){if (document.styleSheets[oSsDmCt].href.indexOf(css_file_name) + 1)// || document.styleSheets[oSsDmCt].href.indexOf('style-broadband-images.css') + 1){var oStyleSheet;oStyleSheet = document.styleSheets[oSsDmCt]; break;}}if (!oStyleSheet) {oStyleSheet = document.styleSheets[document.styleSheets.length-1];}}if (document.getElementById('coloreditor')){var selector = document.forms['coloreditor'].step_one.value;var property = document.forms['coloreditor'].step_two.value;var value = '1';if (property == 'background-color') {if (document.forms['coloreditor'].step_three_1.value != 'transparent') {var value = '#' + document.forms['coloreditor'].step_three_1.value;} else {var value = document.forms['coloreditor'].step_three_1.value;}}else if (property == 'background-image') {if (document.forms['coloreditor'].step_three_1.value != 'transparent') {var value = 'url(\''+path+ 'themes/general/background-'+document.forms['coloreditor'].step_three_2.value+'.gif\')';}else {var value = 'none';}}else if (property == 'border-color') {if (document.forms['coloreditor'].step_three_3.value != 'transparent') {var value = '#' + document.forms['coloreditor'].step_three_3.value;} else {var value = document.forms['coloreditor'].step_three_3.value;}}else if (property == 'color') {if (document.forms['coloreditor'].step_three_4.value != 'transparent') {var value = '#' + document.forms['coloreditor'].step_three_4.value;} else {var value = document.forms['coloreditor'].step_three_4.value;}}}var new_rule = selector + ' {' + property + ':' + value + ';}'; oStyleSheet.insertRule(new_rule,oStyleSheet.cssRules.length);window.hasAddedNewRule = true;} 

Re: Access a frame's styleSheets object?

Posted: Wed Apr 30, 2008 4:05 pm
by VladSun
parent.frame_name.document.styleSheets ?

Re: Access a frame's styleSheets object?

Posted: Thu May 01, 2008 2:49 am
by JAB Creations
After rereading what I originally posted I should have made clear that I obviously attempted many things along that line unsuccessfully. I'm still looking for ideas.

Re: Access a frame's styleSheets object?

Posted: Thu May 01, 2008 8:03 am
by JAB Creations
This works with additional coding to compensate for frames...

Code: Select all

oStyleSheet = parent.frame_name.document.styleSheets[oSsDmCt];

Re: Access a frame's styleSheets object?

Posted: Thu May 01, 2008 8:23 am
by VladSun
Huh?!? I can't see the difference between my code and yours ...

Re: Access a frame's styleSheets object?

Posted: Thu May 01, 2008 9:01 am
by JAB Creations
Actually you were right to begin with. The issue was I did not realize it because well err...uh...yeah. :| I had to do some interesting changes including creating an limited call-back of the same function in a limited loop to support the frames adding a fourth parameter (frame) so if frames were detected it would apply the changes and before the function ended it would call itself again. It would then apply the changes (as you suggested and I implemented) and at the end only execute the changes for the particular frame defined by the parameter as called for the itself though in it's last execution. It's obviously not an infinite loop as the last application to the last frame does not self-call itself. It was very interesting to work on! :mrgreen: Thanks!