13. august 2007 - 00:06Der er
39 kommentarer og 1 løsning
Flash i en Div boks?
Hej jeg er gået igang med at prøve at lære lidt html/css, og jeg undrer mig over hva jeg skal gøre for at putte en .swf (flash animation) ind i en div boks? hvilket selvfølgelig er lavet i samme størrelse.
Undrer mig også om der er andre sider som fx html.dk hvor man ka få nogle hurtige tuts, omkring de mest basiske ting man skal vide?
for at din flash ikke skal blive "blokeret" i nogle udgaver af internet explorer så kan du bruge enten "swfobjekt" eller ufo.js" til at loade din flash
kan du bare en smule engelsk, så vælg "ufo.js" vejledningen begynder næsten halvejs nede af deres side, hvor de trin for trin beskriver hvordan du sætter en flash ind i en <div>
larsholmgaard_dk> "W3C valideret kode"? Så vidt jeg ved, er "SWFObject" overhovedet ikke valid, fordi den bruger "innerHTML", hvilket ikke er valid i nogen som helst doctype..
Mange tak for hurtig feedback, har valgt at bruge Gurly''s metode da den var mest effektiv. Måske ikke valideret men det funker, og jeg har jo ik andet en en simpel flash animation af sidens navn i min swf fil.
Desuden står dette i allerførste paragraf på siden jeg linkede til:
"SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.
* Pages sent as text/html, not application/xhtml+xml."
problemet er jeg fulgte informationen med SWFObject, og det virkede ikke. Da jeg prøvede ufo virkede det med det samme. Er ufo ikke valid eller hvad? Og hvilket konsekvenser har det?
Og til et andet spørgsmål jeg er nysgerring omkring, jeg fandt ud af at UFO ik virkede så godt da jeg skulle sætte en nr 2 flash animation ind. Den viser kun den ene, jeg er sikker på det fordi man skal ændre koden en smule problemet er bare jeg ik har den fjerneste ide hvordan? Hvis nogen har tid ville et mere uddybende svar være en stor hjælp.
Prøv at læse vejledningen på swfObject - det virker perfekt. Der står præcist, hvad du skal gøre også ved indsættelse af flere flashelementer på samme side:
Q. Can I use SWFObject to embed more than one SWF on an HTML page? A. Yes. Just give each SWF and each div or HTML element that will hold a SWF a unique Id.
- kan W3C kun validere HyperText Markup Language og Cascading Style Sheets
- er innerHTML under ingen omstændiger valid ifølgende nuværende standarder
Brugeren olebole har lagt mere erfaring på området, end jeg har, og kan sikkert komme med råd omkring emnet.
Så vidt jeg kan se, er UFO-scriptet mere validt, idet det faktisk prøver på at gøre det på den rigtige måde.. hvis det mislykkes, vil den bruge innerHTML..
Jeg har dog kun lige skimmet koden, og kan ikke fortælle jer, om det faktisk passer..
Rettelse (omformulering af W3C-validerings-sætningen):
Så vidt jeg ved:
- kan W3C ikke validere JavaScript.
- kan W3C kun validere (variationer af) HTML samt CSS og muligvis XML
- er innerHTML under ingen omstændiger valid ifølgende nuværende standarder
Brugeren olebole har lagt mere erfaring på området, end jeg har, og kan sikkert komme med råd omkring emnet.
Så vidt jeg kan se, er UFO-scriptet mere validt, idet det faktisk prøver på at gøre det på den rigtige måde.. hvis det mislykkes, vil den bruge innerHTML..
Jeg har dog kun lige skimmet koden, og kan ikke fortælle jer, om det faktisk passer..
Ok hvad betyder det når den er valid? at den er accepteret af en eller anden overordnet standard, som det i virkeligheden er bedøvende ligemeget med eller hvad? Jeg er ude på at lære at indsætte flash i hjemmesider, ikke at tilfredsstille en eller anden form for ligegyldig kodeks.
"Invalide" standarder er ofte invalide, fordi de gør tingene skidt, og i hvert fald bør man ikke satse på, de vil være særlig fremtidssikre. innerHTML gør da tricket på en nem måde, derfor er det også så udbredt, men det er lidt at springe over, hvor gærdet er lavest, og hvis du generelt i din kodning bekymrer dig om fejlsikre koder og ydeevne, så bør du nok forsøge at undgå det. Men skal det bare virke (eller umiddelbart virke), så kan du godt bruge innerHTML. Det er jo op til den enkelte programmør. Det er dog en bastardkode, som fungerer meget uhensigtsmæssigt, hvis man dykker ned i tekniske detaljer.
Begrebet "bastardkode" er i øvrigt noget, jeg lige har opfundet, så en søgning på google vil ikke gi' resultat. (Jeg har forsøgt!) =) Resten skulle der dog nok kunne findes dokumentation på i forskellige artikler rundt omkring på nettet.
ok dvs. ingen af løsningerne her er valide? Og jeg har kigget på koden fx Dreamweaver bruger når jeg indsætter en flash via det program og jeg sir bare ???. Jeg vil med glæde holde min hjemmeside valid men jeg vil også gerne forstå koden jeg sætter ind, som jeg nogenlunde gør med fx UFO og slet ik gør med nævnte "standard" metode i fx dreamweaver.
Jeg har ikke set koderne igennem, men UFO er vist umiddelbart mest validt, ja.
Det korrekte alternativ til innerHTML er ved brug af DocumentObject Model (DOM). Der opretter du tags'ene et for et. Eks. på oprettelse af et billede: -------------------------------------- newElement=document.createElement("img"); newElement.setAttribute("src","/images/billede.gif"); newElement.setAttribute("border","0"); newElement.setAttribute("width","200"); newElement.setAttribute("height","100"); newElement.setAttribute("alt","Dette er et billede"); document.getElementById("element-som-billedet-skal-oprettes-id").appendChild(newElement); -------------------------------------- I ovenstående kode bliver elementet først bare oprettet i "newElement" og senere "appended" (tilføjet) til indholdet af document.getElementById("element-som-billedet-skal-oprettes-id"). Det vil altså blive indsat som det nederste element.
På samme måde kan du også slette elementer ("noder"): document.getElementById("beholder").removeNode(document.getElementById("id"))
Indsætte før et andet element: document.getElementById("beholder").insertBefore(newElement,document.getElementById("id"))
Finde parent-elementet: document.getElementById("beholder").parentElement
Lige sålænge kodere ikke gider sætte sig ind i de standarder, som er gældende for webkodning - og derfor ikke koder i overensstemmelse med disse - ligeså længe skal grænsen for, hvornår vi får browsere i rimelig størrelse i stedet for de kæmpe klodser, vi slæber rundt på. Da det samtidig koster gigantiske millionbeløb i dollars at udvikle en ny version, når browserne skal være så utrolig tilgivende overfor dårlig kode, tager det idag alt for lang tid mellem deres fremkomst og udviklingen halter til stadighed uhælpeligt bagud.
Er man ligeglad med, om ens kode overholder de gældende standarder, kan man ikke tillade sig at brokke sig over browsernes kvalitet. Man er selv en meget væsentlig grund og fortjener ikke bedre.
Både af hensyn til andre og os selv, burde vi alle tage dette ansvar på os. Ikke at man behøver være fejlfri eller ekspert ... men det mindste, man kan gøre, er at anstrenge sig.
W3C's (X)HTML-validator validerer _kun_ markup-koden. Dén del af det at skrive XHTML kan man sætte chimpanser til ... at bruge XHTML er væsentlig meget mere end at lukke tags og escape attribut-værdier!
Om dokumentets markup-kode validerer er rystende ligegyldigt, hvis dokumentet bliver served forkert - eller hvis der ikke scriptes op mod en XML-DOM. HTML-scripting har _intet_ at gøre i et X(HT)ML-dokument - og innerHTML giver _absolut_ ingen mening i en XML-sammenhæng ... alene navnet taler vel for sig selv ;o)
innerHTML har aldrig været del af nogen officiel standard, men blev inført i IE4 og senere i en af de første Netscape 4 underversioner. På det tidspunkt var HTML ganske få år gammelt og innerHTML (sammen med outerHTML og innerText i IE) et tidligt bud på en måde, man kunne ændre dokumentets elementtræ. Et andet bud var NS4's to metoder til at loade hele HTML-dokumenter ind i et div - men ligesom ved iframe og NS' ilayer, så havde NS' 'loadede layers' altid sit eget dokument med eget elementtræ.
Da W3C i efteråret 98 kom med deres DOM Level 1, fik vi en helt ny måde at opfatte et HTML og dets elementer på. Den blev indført i IE 5.0, men først da NS 6.0 udkom, begyndte kodere så ganske småt at opdage DOM'en.
Efter W3C's DOM giver behandling af elementer som strenge i et (X)HTML-dokument ingen mening. Det gør elementets direkte JavaScript-properties - med ganske få undtagelser - heller ikke. Style-objektet er således en af de ganske få 'gamle' properties, der er tilladt. Du kan ikke sige: ELEMENT.id = "noget";
Der kom med DOM'en nogle andre, standardiserede objekter og metoder. Du kan sige: ELEMENT.setAttribute("id", "noget");
I er mere end velkomne til at skrive en perfekt validerende måde at implementere flash på en html-side. Det er jeg sikker på at resten af verden ville sætte pris på eftersom der, så vidt jeg ved, ikke findes bedre alternativer end swfObject og nu ufodimsen.
Her er et af de rigtig mange eksempler, der viser, hvorfor innerHTML også er noget skidt:
<script type="text/JavaScript"> function foo() { alert("Knappens tekst: " + oButton.firstChild.nodeValue) // 'oButton.firstChild' er tekstnoden i knappens indre document.body.innerHTML += "<br>Prøv lige knappen igen ..."; }
Alle referencer til og fra det dokument-fragment, hvis innerHTML sættes, mistes. Fragmentet overskrives, hvorfor knappen 'oButton' ikke længere eksisterer.
Man binder således let en tung klods om benet på sig selv ved at bruge innerHTML i sine koder. Det kan hurtigt blive ret uoverskueligt, hvad der kan lade sig gøre ved senere udvikling på dokumentet.
..og hvis man endeligt vil overholde standarden, og bruge udelukkende (X)HTML, kan man ikke længere få filen afspillet automatisk, pga en et patent som et universitet har..
Derfor understøtter browserne ikke længere "auto-afspilning"..
Hvis det ikke havde været for patentet, havde man nok ikke haft de problemer, som man har nu, med JavaScript og innerHTML til indsættelse af media..
Idag skal det - af de allerede nævnte årsager - naturligvis indsættes dynamisk, men selve element-strukturen holder.
Foreløbig vil jeg kikke lidt mere 'baglæns' på UFO og SWFObject ... så vil jeg overveje, om jeg begynder. Skal et nyt objekt tage hensyn til alle special-tilfælde, har jeg på fornemmelsen, der bliver lidt af et test-helvede :oP
altså i sidens head plaseres linien der loader ufo.js i sidens head indsætter du så to script, husk at give de to script hver sin ID i linien "UFO.create" og nede i sidens body indsætter du så bare de to <div id
så skriver de om swfobject > "and is forward compatible" hvordan kan noget være det når man ikke ved 100 % hvad der sker i fremtiden lev dog i nutiden, brug en af de 2 hacks der virker som tingene ser ud nu, og så spar bekømringerne til fremtiden. og lad være med at forvirre spørgere mere end højst nødvendigt c",)
- men det er jo ikke forbudt at håbe, ens medmennesker er påvirkelig af saglig argumentation og kan ændre mening i løbet af en tråd. Derfor ser jeg ikke noget sært i thesurfers antagelse om validiteten 32 indlæg nede i tråden :)
ja ok, men i fik ikke svaret spørger på følgende >
jeg er nysgerring omkring, jeg fandt ud af at UFO ik virkede så godt da jeg skulle sætte en nr 2 flash animation ind. Den viser kun den ene, jeg er sikker på det fordi man skal ændre koden en smule problemet er bare jeg ik har den fjerneste ide hvordan? Hvis nogen har tid ville et mere uddybende svar være en stor hjælp.
Det virker med UFO nu og da Gurly kom med den oprindelige info får han pointene, må dog indrømme jeg er lidt overrasket over mit simple spørgsmål ku starte en sådan diskussion. Så igen tak for al feedback, hellere alt for meget end for lidt ^^
Eksperten har en snart 10 år lang historie for at fungere mellem dårligt og elendigt - ikke mindst på grund af elendig kodning. Den begyndte som et lille hyggeprojekt for et par hobbykodere og eksploderede efterfølgende mellem hænderne på dem - og det er blevet til en ørkenvandring i lapninger. Brug Eksperten som standard for, hvordan man ikke bør kode ... såvel på fronten som på bagenden ;o)
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.