CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede robson Nybegynder
10. december 2007 - 12:03 Der er 12 kommentarer og
1 løsning

Cross browser - side fade

Hej

Jeg skal have lavet en fade funktion på et website :)

Hele min siden skal fades ind!

Jeg har fundet frem til at dette i IE kan gøres med

<meta http-equiv=Page-Enter content=blendTrans(duration=0.5)>

MEN det skal også fungere i Firefox, Safari og så mange andre browsere som muligt :)

Nogle der har en god ide??
Avatar billede roenving Novice
10. december 2007 - 14:10 #1
Du kan fade alle elementer, så du kan sætte et element, der rummer alt andet på din side, og så benytte dig af teknikken her: http://roenving.users.whitehat.dk/WD5Opacity.html
Avatar billede robson Nybegynder
10. december 2007 - 15:02 #2
Fed funktion :)
Men jeg kan ikke umiddelbart få det til at fungere på mit side indhold... Jeg har en div opbygget side og jeg har forsøgt at lægge startOpChange på både div taggen og body taggen - uden held :(
Burde funktionen fungere på min div tag??
Avatar billede robson Nybegynder
10. december 2007 - 15:07 #3
...forresten så har jeg lagt funktions kaldet i body onload - se herunder

<body onload="initFade();">
<div id="test">
    <div>test tekst</div>
    <div>Div 1</div>
    <div>Div 2</div>
    <div><img src="images/etfoto.jpg" /></div>
</div>
</body>

function initFade() {
    var oDiv = document.getElementById("test");
    startOpChange(oDiv,50,2)
}

(din kode ligger naturligvis i head!!)
Avatar billede roenving Novice
11. december 2007 - 00:09 #4
-- og du har selvfølgelig også funktionen i script-tags ?o]

-- får du fejl (og kan du lægge et link ?-)
Avatar billede robson Nybegynder
11. december 2007 - 08:51 #5
Jeg har oprettet en test side - se http://eksperten.ft-test.dk/

Jeg kalder din funktion 3 gange - onload, mouseover på overordnet div, mouseover på image - jeg kan kun få det til at virke på image...
Avatar billede roenving Novice
11. december 2007 - 17:04 #6
Det er fordi din div ikke 'har layout', et M$-begreb, som kræves opfyldt for at filtre virker, prøv f.eks. at sætte width:100%; på diven !-)
Avatar billede robson Nybegynder
12. december 2007 - 08:43 #7
SUPER :) det var lige det der skulle til! Det er testet i IE 6.0, IE 7.0, Firefox 2.0, og Safari Mac. Den endelige kode bliver altså:

<html>
<head>

<script language="javascript" type="text/javascript">

var OpC = new Array();
var ie,moz,css3; function startOpChange(elm,end,tim){
  ie = !!elm.filters;
  moz = elm.style.MozOpacity != undefined;
  css3 = elm.style.opacity != undefined;
  if (!ie && !moz && !css3)return;
  var idx = OpC.length;
  for(var i=0;idx>i;i++){
    if(OpC[i][0]==elm){
      clearInterval(OpC[i][4]);
      idx = i;
      break;
    }
    OpC[idx] = new Array();
  }
  if(idx==0)OpC[idx] = new Array();
 
  if(ie)actOp=elm.filters.alpha.opacity;
  else if(css3)actOp=(elm.style.opacity*100);
  else actOp=(elm.style.MozOpacity*100);
  if (actOp!=end){
    OpC[idx][0]=elm;
    OpC[idx][1]=actOp;
    OpC[idx][2]=end;
    OpC[idx][3]=(end>actOp)?1:-1;
    var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));
    OpC[idx][4]=setInterval("opChange("+idx+")",delayTime);
  }
}

function opChange(idx){
  OpC[idx][1]+=OpC[idx][3];
  if (ie)OpC[idx][0].filters.alpha.opacity=OpC[idx][1];
  else if(css3)OpC[idx][0].style.opacity=Math.min(0.99,OpC[idx][1]/100);
  else OpC[idx][0].style.MozOpacity=Math.min(0.99,OpC[idx][1]/100);
  if (OpC[idx][1]==OpC[idx][2]){
    clearInterval(OpC[idx][4]);
    return;
  }
}

function initFade() {
    var oDiv = document.getElementById("test");
    startOpChange(oDiv,100,1);
}

</script>

</head>
<body onload="initFade();">
<div id="test" style="width:100%;filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;" onmouseover="startOpChange(this,50,1);">
    <div><h1>Fade test</h1></div>
    <div><img src="http://www.eksperten.dk/img/elogo.png" onmouseover="startOpChange(this,100,1);" align="left" style="filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut lectus sit amet lorem consequat congue. Etiam vulputate fringilla erat. Nam ultrices erat vitae felis. Mauris porttitor. Donec ultrices velit ut neque. Curabitur commodo sem nec ligula. Suspendisse lobortis erat dictum lacus. Vivamus dapibus. Nulla sodales sapien sed mauris.</div>
</div>
</body>
</html>
Avatar billede robson Nybegynder
12. december 2007 - 08:44 #8
Smid en svar roenving så jeg kan give dig nogle velfortjente points :)  tak for hjælpen!
Avatar billede robson Nybegynder
12. december 2007 - 11:45 #9
Lige et mindre spørgsmål... jeg kunne godt tænke mig at sætte hastigheden på faden op! Når jeg ændre funktionskaldet til startOpChange(oDiv,100,5) så sættes hastigheden ned, men så vidt jeg kan se kan jeg ikke benytte komma tal her - fx 0.5
Hvordan opnår jeg dette?

I Safari er faden ulidelig langsom... :(
Avatar billede roenving Novice
13. december 2007 - 00:20 #10
-- det sidste problem kender jeg godt, men har ikke umiddelbart nogen løsningsmuligheder, jeg gætter på, at det er browserens native javascript-eksekveringshastighed på setTimeout/-Interval, der i hvert fald ikke kan komme længere ned end omkring 30 millisekunder i de tests, jeg har lavet ...

-- om der kan laves en tilpasning, der sætter opacity-ændringen op pr. interval, har jeg ikke haft tid til at teste !-)

-- els velbekomme '-)
Avatar billede roenving Novice
13. december 2007 - 00:21 #11
-- hov, du skal også huske at bruge en gyldig doctype, så de fleste browsere fortolker så meget som muligt css ens:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
...
Avatar billede robson Nybegynder
13. december 2007 - 08:46 #12
ok - jeg prøver at teste lidt på hastigheden... :)

Tak for hjælpen roenving!!
Avatar billede roenving Novice
13. december 2007 - 15:52 #13
-- og jeg takker for point ;~}
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript 4 24/06/202422:50 26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript 6 04/06/202416:23 05/06/202414:23
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 20:15 SSD m2 med eller uden køleprofil og hvilken slags? Af mo- i PC
I dag 19:51 My Cloud Home (hjemme server) Af Erik Hovedskou i Webservere
I dag 16:37 Overførsel af Metadata, EXIF Af Calle5463 i Andet software
I dag 10:58 Erfaring med skift fra Yousee bredbånd til Fibernet? Af nu_igen i Internetforbindelser
I dag 04:49 Nulstille en Nokia CO2 Af LmL i Mobiltelefoner
White papers
Flere white papers »


Premium
Teaser billede
Det blev kaldt den største bromance i tech-verden - men er forholdet mellem OpenAI og Microsoft nu ved at smuldre?
Læs mere »
Romersk gud træder ind i datacentrene: Denne form for køling skal sikre fremtidens AI
Hos DSV er Thomas Zakarias ikke en del af it-afdelingen og flere vil følge i fodsporene spår CISO'en
Én ERP-boss sætter selv Satya Nadella til vægs, når det kommer til AI-begejstring
Se alle »
Computerworld
Teaser billede
Elbilejere ramt af server-nedbrud - kunne pludselig ikke starte deres biler
Læs mere »
Test: Her er et af de smarteste smart-tv på markedet lige nu
Populært ur-mærke ramt af omfattende ransomware-angreb: Ser ingen mulighed for genopretning
Elon Musk taber retssag til Post Nord
Se alle »
CIO
Teaser billede
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Læs mere »
Læs CIO'ens fem gode råd: Sådan lykkedes Atea med at opgradere 1.400 medarbejdere til Windows 11 på rekordtid
Kæmpe konsulenthus investerede 10 milliarder i at bygge sin egen AI-platform – nu bruges den af 96 procent af de ansatte
Kristian Hjort-Madsen har som ny CDO i Norlys to helt centrale opgaver
Se alle »
Job & Karriere
Teaser billede
Pludselig exit fra Schultz kom som en overraskelse for Merete Søby: Derfor stoppede samarbejdet
Læs mere »
Merete Søby fratræder med omgående virkning som CEO for Schultz efter blot tre måneder på posten
Professor: "Det er på høje tid at opløse virksomhedernes it-afdelinger"
Kom tæt på Danmarks nye digitaliserings-minister: 33-årige Caroline Stage Olsen er tidligere tobaks-lobbyist - har været aktiv i politik siden hun var helt ung
Se alle »
White paper
Teaser billede
Cyberstatus 2024: Her er truslerne – og her forbereder virksomhederne sig
Læs mere »
Nemmere overblik, styring og omkostningskontrol i dit multicloud-miljø
Sæt turbo på din cloudperformance og minimér risikoen for DDoS-angreb
Informationshåndtering på frontlinjen: Sådan optimerer du med automatisering
Se alle »

IT-JOB
Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »