MultiChat gets covered up by flash, <object> and <embed>
| Project: | CHAT Users and Design Integrated (BoWoB) |
| Version: | 6.x-8.5 |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
| Issue tags: | <embed>, <object>, bowob, flash, wmode |
Jump to:
Problem: MultiChat (ie Bowob Facebook Chat) get's covered by flash elements using the or tag on your page (ie Youtube, Vimeo, Blip.tv, DemocracyNow embed codes).
At first I thought this was a z-index issue, but it turns out it's not. In fact it is a wmode issue. Apparently wmode or window mode is a parameter that can be set in embeded flash content. The big problem is that by default youtube gives you embed code like this.
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/1XC_vXz3U7g&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/1XC_vXz3U7g&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
You would need to manually add wmode="transparent" to the tag to prevent it from overlapping your multi chat bar.
This is a big problem since I can not expect my users to do this, so the question I had to answer is "How can I force wmode="transparent" on all and tags"
Solution: I've created a working solution. Just create this as a javascript file and embed it in your site. It's not sexy code but it get's the job done.
var Q_change_wmode = {
replace_embed: function(embd) {
if(embd.getAttribute('name')!='ASP_sct0323_p') {
var rplc;
if(embd.outerHTML) {
var html = embd.outerHTML;
if(html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i))
rplc = html.replace(/wmode\s*=\s*('|")window('|")/i,"wmode='transparent'");
else rplc = html.replace(/<embed\s/i,"<embed wmode='transparent' ");
embd.insertAdjacentHTML('beforeBegin',rplc);
embd.parentNode.removeChild(embd);
} else {
rplc = embd.cloneNode(true);
if(!rplc.getAttribute('wmode') || rplc.getAttribute('wmode')=='Window')
rplc.setAttribute('wmode','transparent');
embd.parentNode.replaceChild(rplc,embd);
}
}
}
,replace_objct: function(objct) {
if(objct.getAttribute('name')!='ASP_sct0323_p') {
var rplc;
if(objct.outerHTML) {
var html = objct.outerHTML;
if(html.match(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")[a-zA-Z]+('|")\s*\/?\>/i))
rplc = html.replace(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")window('|")\s*\/?\>/i,"<param name='wmode' value='transparent' />");
else rplc = html.replace(/<\/object\>/i,"<param name='wmode' value='transparent' />\n</object>");
var chldrn = objct.childNodes;
for(n=0; n<chldrn.length; n++) {
if(chldrn[n].getAttribute('name').match(/flashvars/i)) {
rplc = html.replace(/<param\s+name\s*=\s*('|")flashvars('|")\s+value\s*=\s*('|")[^'"]*('|")\s*\/?\>/i,"<param name='flashvars' value='"+chldrn[n].getAttribute('value')+"' />");
}
}
objct.insertAdjacentHTML('beforeBegin',rplc);
objct.parentNode.removeChild(objct);
}
}
}
,add_event: function(objct,type,fnctn) {
if (objct.addEventListener) {
objct.addEventListener(type,fnctn,false); return true;
} else if (objct.attachEvent) {
var rtrn = objct.attachEvent('on'+type,fnctn); return rtrn;
} else {
objct.onclick = fnctn;
}
}
,start: function() {
var embds = document.getElementsByTagName('embed');
for(i=0; i<embds.length; i++) {
if(embds[i].getAttribute('Q_wmode_exception')!='true')
Q_change_wmode.replace_embed(embds[i]);
}
var objcts = document.getElementsByTagName('object');
for(i=0; i<objcts.length; i++) {
if(objcts[i].getAttribute('Q_wmode_exception')!='true')
Q_change_wmode.replace_objct(objcts[i]);
}
}
,attach: function() {
Q_change_wmode.add_event(window,'load',Q_change_wmode.start);
}
}
Q_change_wmode.attach();For the minimalist here is the same code compressed
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 7={u:9(a){1(a.5(\'4\')!=\'v\'){3 b;1(a.h){3 c=a.h;1(c.k(/2\\s*=\\s*(\'|")[a-w-x]+(\'|")/i))b=c.e(/2\\s*=\\s*(\'|")l(\'|")/i,"2=\'f\'");g b=c.e(/<m\\s/i,"<m 2=\'f\' ");a.y(\'z\',b);a.o.A(a)}g{b=a.L(j);1(!b.5(\'2\')||b.5(\'2\')==\'M\')b.N(\'2\',\'f\');a.o.O(b,a)}}},B:9(a){1(a.5(\'4\')!=\'v\'){3 b;1(a.h){3 c=a.h;1(c.k(/<8\\s+4\\s*=\\s*(\'|")2(\'|")\\s+6\\s*=\\s*(\'|")[a-w-x]+(\'|")\\s*\\/?\\>/i))b=c.e(/<8\\s+4\\s*=\\s*(\'|")2(\'|")\\s+6\\s*=\\s*(\'|")l(\'|")\\s*\\/?\\>/i,"<8 4=\'2\' 6=\'f\' />");g b=c.e(/<\\/p\\>/i,"<8 4=\'2\' 6=\'f\' />\\n</p>");3 d=a.P;q(n=0;n<d.r;n++){1(d[n].5(\'4\').k(/t/i)){b=c.e(/<8\\s+4\\s*=\\s*(\'|")t(\'|")\\s+6\\s*=\\s*(\'|")[^\'"]*(\'|")\\s*\\/?\\>/i,"<8 4=\'t\' 6=\'"+d[n].5(\'6\')+"\' />")}}a.y(\'z\',b);a.o.A(a)}}},C:9(a,b,c){1(a.D){a.D(b,c,Q);E j}g 1(a.F){3 d=a.F(\'R\'+b,c);E d}g{a.S=c}},G:9(){3 a=H.I(\'m\');q(i=0;i<a.r;i++){1(a[i].5(\'J\')!=\'j\')7.u(a[i])}3 b=H.I(\'p\');q(i=0;i<b.r;i++){1(b[i].5(\'J\')!=\'j\')7.B(b[i])}},K:9(){7.C(l,\'T\',7.G)}}7.K();',56,56,'|if|wmode|var|name|getAttribute|value|Q_change_wmode|param|function|||||replace|transparent|else|outerHTML||true|match|window|embed||parentNode|object|for|length||flashvars|replace_embed|ASP_sct0323_p|zA|Z|insertAdjacentHTML|beforeBegin|removeChild|replace_objct|add_event|addEventListener|return|attachEvent|start|document|getElementsByTagName|Q_wmode_exception|attach|cloneNode|Window|setAttribute|replaceChild|childNodes|false|on|onclick|load'.split('|'),0,{}))Request: Muti-chat is useless if you can't see it. I would love to see this be added to the module as an option to turn on and off. Unfortunately it took me a whole day to create a working solution. If anything it should be in documentation.
Leave your feedback and code improvements below.
#1
My first sentence is supposed to read
Problem: MultiChat (ie Bowob Facebook Chat) get's covered by flash elements using the
<object>or<embed>tag on your page (ie Youtube, Vimeo, Blip.tv, DemocracyNow embed codes).#2
Good job animelion.
It is true that the "covered" fact is a big problem.
But I think that this solution is not good and valid for all the websites, so it won't be included in the module.
#3
#4
animelion / bowob
I to have this problem with flash objects, can one of you tell me where to place the above fix, what to call the js file and where to site it in?
It is something that lets the side down bowob, i have a very content rich site and navigating to a page without a flash video is plainly annoying!
I can provide more info on my site if needed and screen shots - would like to get this issue resolved
Thanks in advance
#5
You can solve it with the parameter "wmode" in your flash insertions.
Add it manually in each flash movie, or use the automated script of animelion.
I haven't checked the animelion's script, I recommend use the manually insertion.
#6
Hey bowob
Manual insertion isnt an option as we have multiple users of the site and none of them are website savvi so it has to be plug and play stuff - can you advise on animilions script and how to use it? Im not sure what to call the js file or where to site it or place the script? Any advice would be massively appreciated!
Nipponkoi
#7
Dont worry, we've scrapped the chat room, directors decision............. thanks anyway