Avatar billede elskermad.dk Nybegynder
26. oktober 2008 - 18:28 Der er 16 kommentarer og
1 løsning

Indsættelse af flashobjekt ødelægger hele layoutet i Firefox

Hej Eksperter!

Hvordan kan det være at siden bliver fuldstændig ødelagt i Firefox når jeg forsøger at lægge en flashtop ind via swfobjekt-fikset så den ikke får en "kant"?

Siden er dubuy.dk

Objektkildekoden er (og resten kan ses i toppen af sidens kildekode):

if(typeof deconcept == "undefined") var deconcept = {};
if(typeof deconcept.util == "undefined") deconcept.util = {};
if(typeof deconcept.SWFObjectUtil == "undefined") deconcept.SWFObjectUtil = {};
deconcept.SWFObject = function(swf, id, w, h, ver, c, quality, xiRedirectUrl, redirectUrl, detectKey) {
    if (!document.getElementById) { return; }
    this.DETECT_KEY = detectKey ? detectKey : 'detectflash';
    this.skipDetect = deconcept.util.getRequestParameter(this.DETECT_KEY);
    this.params = {};
    this.variables = {};
    this.attributes = [];
    if(swf) { this.setAttribute('swf', swf); }
    if(id) { this.setAttribute('id', id); }
    if(w) { this.setAttribute('width', w); }
    if(h) { this.setAttribute('height', h); }
    if(ver) { this.setAttribute('version', new deconcept.PlayerVersion(ver.toString().split("."))); }
    this.installedVer = deconcept.SWFObjectUtil.getPlayerVersion();
    if (!window.opera && document.all && this.installedVer.major > 7) {
        // only add the onunload cleanup if the Flash Player version supports External Interface and we are in IE
        // fixes bug in some fp9 versions see http://blog.deconcept.com/2006/07/28/swfobject-143-released/
        if (!deconcept.unloadSet) {
            deconcept.SWFObjectUtil.prepUnload = function() {
                __flash_unloadHandler = function(){};
                __flash_savedUnloadHandler = function(){};
                window.attachEvent("onunload", deconcept.SWFObjectUtil.cleanupSWFs);
            }
            window.attachEvent("onbeforeunload", deconcept.SWFObjectUtil.prepUnload);
            deconcept.unloadSet = true;
        }
    }
    if(c) { this.addParam('bgcolor', c); }
    var q = quality ? quality : 'high';
    this.addParam('quality', q);
    this.setAttribute('useExpressInstall', false);
    this.setAttribute('doExpressInstall', false);
    var xir = (xiRedirectUrl) ? xiRedirectUrl : window.location;
    this.setAttribute('xiRedirectUrl', xir);
    this.setAttribute('redirectUrl', '');
    if(redirectUrl) { this.setAttribute('redirectUrl', redirectUrl); }
}
deconcept.SWFObject.prototype = {
    useExpressInstall: function(path) {
        this.xiSWFPath = !path ? "expressinstall.swf" : path;
        this.setAttribute('useExpressInstall', true);
    },
    setAttribute: function(name, value){
        this.attributes[name] = value;
    },
    getAttribute: function(name){
        return this.attributes[name] || "";
    },
    addParam: function(name, value){
        this.params[name] = value;
    },
    getParams: function(){
        return this.params;
    },
    addVariable: function(name, value){
        this.variables[name] = value;
    },
    getVariable: function(name){
        return this.variables[name] || "";
    },
    getVariables: function(){
        return this.variables;
    },
    getVariablePairs: function(){
        var variablePairs = [];
        var key;
        var variables = this.getVariables();
        for(key in variables){
            variablePairs[variablePairs.length] = key +"="+ variables[key];
        }
        return variablePairs;
    },
    getSWFHTML: function() {
        var swfNode = "";
        if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) { // netscape plugin architecture
            if (this.getAttribute("doExpressInstall")) {
                this.addVariable("MMplayerType", "PlugIn");
                this.setAttribute('swf', this.xiSWFPath);
            }
            swfNode = '<embed type="application/x-shockwave-flash" src="'+ this.getAttribute('swf') +'" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'" style="'+ (this.getAttribute('style') || "") +'"';
            swfNode += ' id="'+ this.getAttribute('id') +'" name="'+ this.getAttribute('id') +'" ';
            var params = this.getParams();
            for(var key in params){ swfNode += [key] +'="'+ params[key] +'" '; }
            var pairs = this.getVariablePairs().join("&");
            if (pairs.length > 0){ swfNode += 'flashvars="'+ pairs +'"'; }
            swfNode += '/>';
        } else { // PC IE
            if (this.getAttribute("doExpressInstall")) {
                this.addVariable("MMplayerType", "ActiveX");
                this.setAttribute('swf', this.xiSWFPath);
            }
            swfNode = '<object id="'+ this.getAttribute('id') +'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+ this.getAttribute('width') +'" height="'+ this.getAttribute('height') +'" style="'+ (this.getAttribute('style') || "") +'">';
            swfNode += '<param name="movie" value="'+ this.getAttribute('swf') +'" />';
            var params = this.getParams();
            for(var key in params) {
            swfNode += '<param name="'+ key +'" value="'+ params[key] +'" />';
            }
            var pairs = this.getVariablePairs().join("&");
            if(pairs.length > 0) {swfNode += '<param name="flashvars" value="'+ pairs +'" />';}
            swfNode += "</object>";
        }
        return swfNode;
    },
    write: function(elementId){
        if(this.getAttribute('useExpressInstall')) {
            // check to see if we need to do an express install
            var expressInstallReqVer = new deconcept.PlayerVersion([6,0,65]);
            if (this.installedVer.versionIsValid(expressInstallReqVer) && !this.installedVer.versionIsValid(this.getAttribute('version'))) {
                this.setAttribute('doExpressInstall', true);
                this.addVariable("MMredirectURL", escape(this.getAttribute('xiRedirectUrl')));
                document.title = document.title.slice(0, 47) + " - Flash Player Installation";
                this.addVariable("MMdoctitle", document.title);
            }
        }
        if(this.skipDetect || this.getAttribute('doExpressInstall') || this.installedVer.versionIsValid(this.getAttribute('version'))){
            var n = (typeof elementId == 'string') ? document.getElementById(elementId) : elementId;
            n.innerHTML = this.getSWFHTML();
            return true;
        }else{
            if(this.getAttribute('redirectUrl') != "") {
                document.location.replace(this.getAttribute('redirectUrl'));
            }
        }
        return false;
    }
}

/* ---- detection functions ---- */
deconcept.SWFObjectUtil.getPlayerVersion = function(){
    var PlayerVersion = new deconcept.PlayerVersion([0,0,0]);
    if(navigator.plugins && navigator.mimeTypes.length){
        var x = navigator.plugins["Shockwave Flash"];
        if(x && x.description) {
            PlayerVersion = new deconcept.PlayerVersion(x.description.replace(/([a-zA-Z]|\s)+/, "").replace(/(\s+r|\s+b[0-9]+)/, ".").split("."));
        }
    }else if (navigator.userAgent && navigator.userAgent.indexOf("Windows CE") >= 0){ // if Windows CE
        var axo = 1;
        var counter = 3;
        while(axo) {
            try {
                counter++;
                axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+ counter);
//                document.write("player v: "+ counter);
                PlayerVersion = new deconcept.PlayerVersion([counter,0,0]);
            } catch (e) {
                axo = null;
            }
        }
    } else { // Win IE (non mobile)
        // do minor version lookup in IE, but avoid fp6 crashing issues
        // see http://blog.deconcept.com/2006/01/11/getvariable-setvariable-crash-internet-explorer-flash-6/
        try{
            var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
        }catch(e){
            try {
                var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
                PlayerVersion = new deconcept.PlayerVersion([6,0,21]);
                axo.AllowScriptAccess = "always"; // error if player version < 6.0.47 (thanks to Michael Williams @ Adobe for this code)
            } catch(e) {
                if (PlayerVersion.major == 6) {
                    return PlayerVersion;
                }
            }
            try {
                axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
            } catch(e) {}
        }
        if (axo != null) {
            PlayerVersion = new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));
        }
    }
    return PlayerVersion;
}
deconcept.PlayerVersion = function(arrVersion){
    this.major = arrVersion[0] != null ? parseInt(arrVersion[0]) : 0;
    this.minor = arrVersion[1] != null ? parseInt(arrVersion[1]) : 0;
    this.rev = arrVersion[2] != null ? parseInt(arrVersion[2]) : 0;
}
deconcept.PlayerVersion.prototype.versionIsValid = function(fv){
    if(this.major < fv.major) return false;
    if(this.major > fv.major) return true;
    if(this.minor < fv.minor) return false;
    if(this.minor > fv.minor) return true;
    if(this.rev < fv.rev) return false;
    return true;
}
/* ---- get value of query string param ---- */
deconcept.util = {
    getRequestParameter: function(param) {
        var q = document.location.search || document.location.hash;
        if (param == null) { return q; }
        if(q) {
            var pairs = q.substring(1).split("&");
            for (var i=0; i < pairs.length; i++) {
                if (pairs[i].substring(0, pairs[i].indexOf("=")) == param) {
                    return pairs[i].substring((pairs[i].indexOf("=")+1));
                }
            }
        }
        return "";
    }
}
/* fix for video streaming bug */
deconcept.SWFObjectUtil.cleanupSWFs = function() {
    var objects = document.getElementsByTagName("OBJECT");
    for (var i = objects.length - 1; i >= 0; i--) {
        objects[i].style.display = 'none';
        for (var x in objects[i]) {
            if (typeof objects[i][x] == 'function') {
                objects[i][x] = function(){};
            }
        }
    }
}
/* add document.getElementById if needed (mobile IE < 5) */
if (!document.getElementById && document.all) { document.getElementById = function(id) { return document.all[id]; }}

/* add some aliases for ease of use/backwards compatibility */
var getQueryParamValue = deconcept.util.getRequestParameter;
var FlashObject = deconcept.SWFObject; // for legacy support
var SWFObject = deconcept.SWFObject;

På forhånd tak :)
Avatar billede thesurfer Nybegynder
26. oktober 2008 - 18:45 #1
Din DIV som kommer til at indeholde flash'en, hedder "top"..

Prøv at omdøbe "top" til "toptest", samt rette din CSS-klasse fra "#top" til "#toptest".

Min test med at ændre ID fra "top" til noget andet virker fint i Opera, hvor der også var en "fejl".. jeg mistænker Internet Explorer for (endnu engang) at tage røven på folk..
Avatar billede olebole Juniormester
26. oktober 2008 - 18:45 #2
<ole>

Får du ikke en fejl i FF? Jeg får:

Fejl: uncaught exception: [Exception... "Object cannot be created in this context"  code: "9" nsresult: "0x80530009 (NS_ERROR_DOM_NOT_SUPPORTED_ERR)"  location: "http://www.dubuy.dk/ Line: 787"]

- og så er det vel bare at begynde en debugging deromkring, selvom det kan være besværligt, når man har mange/lange importerede scripts  =)

Da du har valgt at bruge noget nær et halvt kommunebibliotek til at tage sig af sidens funktionalitet, må du selv lede  ;o)

/mvh
</bole>
Avatar billede thesurfer Nybegynder
26. oktober 2008 - 18:48 #3
Hmm... Jeg ville næsten æde min gamle hat (hvis jeg havde en) på at du sidder med Internet Explorer 7.. næsten.. :-)
Avatar billede olebole Juniormester
26. oktober 2008 - 18:49 #4
Hvorfor i øvrigt sætte Flash-filer ind med JS? Det lææææææænge siden, MS kom med en sikkerhedsopdatering, som fiksede dét problem. Det er kun på meget dårligt opdaterede PC'er, det skulle give problemer idag. Dem er der heldigvis ikke så mange af mere, da langt de fleste webbrugere har fundet ud af, hvor vigtigt det er, at holde maskinen sikkerhedsopdateret ... ikke mindst, da flere og flere får netbank, e-box, m.m.
Avatar billede jokkejensen Novice
26. oktober 2008 - 19:08 #5
Hvis du tænker på, at når du asynkront går ind og henter kurv.php, at css så ikke passer til markup og skubber alt det andet indhold ned, eller - "indkøbskurven er tom" skubber kategori vælgeren ned. Så har det intet med SWF-object at gøre...

Min FF fanger en fejl i google analytics sciptet på bunden af siden:
uncaught exception: Operation is not supported (NS_ERROR_DOM_NOT_SUPPORTED_ERR)
[Break on this error] document.write(unescape('%3Cscript src="...pe="text/javascript"%3E%3C/script%3E'));

Men hele linien blander vist også " og ' sammen, og det er vist slet ikke valid xml.

document.write(unescape('%3Cscript src="' + gaJsHost + 'google-analytics.com/ga.js" type="text/javascript"%3E%3C/script%3E'));

bør være:
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

Som skrevet af google.

/J
Avatar billede elskermad.dk Nybegynder
26. oktober 2008 - 19:12 #6
der fløj godt nok mange fine ord afsted i de indlæg, men tak for dem :)

jeg vil da gerne være interesseret i at undgå at bruge sådan et js-script, men hvordan skal koden så se ud ganske simpelt?
Avatar billede jokkejensen Novice
26. oktober 2008 - 19:14 #7
hmm linien fungere vist fint, ved ikke lige med det JS så..

Men design fejlen i FF er pga #kurv

/J
Avatar billede w13 Novice
26. oktober 2008 - 19:17 #8
Som Olebole siger, er kanter på Flash-elementer ikke længere et problem.

For en gyldig Flash-kode, se: http://www.alistapart.com/articles/flashsatay
Avatar billede olebole Juniormester
26. oktober 2008 - 19:22 #9
- og da document.write er helt og aldeles utænkelig i kombination med XHTML - og du formodentlig gerne vil fortsætte med at bruge Google Analytics - burde du måske overveje at skifte til en mere hensigtsmæssig og bedre understøttet markup-version  =)
Avatar billede elskermad.dk Nybegynder
26. oktober 2008 - 19:28 #10
ja det vil jeg gerne, og har også forsøgt... har forsøgt at lægge den ind i noget ren javascript, men lykkedes mig ikke...

jeg har nu lagt flashen op uden js-scriptet, men det volder mig stadig samme problem..

hvordan siger du at fejlen med #kurv er?
Avatar billede elskermad.dk Nybegynder
26. oktober 2008 - 19:49 #11
hvis man klikker ind på http://www.dubuy.dk/information/ hvor flashbanneret ikke er i toppen så gør den ikke bøvl af sig så det der undrer mig
Avatar billede w13 Novice
26. oktober 2008 - 20:06 #12
Nu har jeg ikke læst så meget i dette indlæg, men problemet er vel bare, at teksten "Indkøbskurven er tom" rykkes ned pga. Flash-elementet, som andre også har nævnt. Og dette skubber til de andre elementer.

Som du selv siger, er flashbanneret ikke i toppen på information, så det må være problemet.
Avatar billede elskermad.dk Nybegynder
26. oktober 2008 - 20:21 #13
selvfølgelig, bare mig der ikke forstår at forstå hjælpen :)

super nu virker det som det skal, og tror også jeg er kommet uden at tilknytte googles med markupkode...

så var der kun noget med #kurv ?

smider i nogen svar?
Avatar billede ssv Nybegynder
27. oktober 2008 - 00:19 #14
Jeg ved ikke med jer, men flashobjektet f*cker fuldstændig op hos mig i IE 7.0 :-)
Avatar billede elskermad.dk Nybegynder
27. oktober 2008 - 12:38 #15
det gør den så også ved mig kan jeg se :) må have hængt i cachen
Avatar billede elskermad.dk Nybegynder
03. december 2009 - 13:35 #16
smider I svar?
Avatar billede thesurfer Nybegynder
03. december 2009 - 23:17 #17
Ingen points til mig, tak.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester