sIFR werkt niet
Ik ben opnieuw bezig mijn website op te fleuren. En nu heb ik, wat mij betreft, een hartstikke leuk design gemaakt. Nu wil ik alleen nog dat de kopjes en de menu opties een mooiere lettertype krijgen d.m.v. sIFR.
In eerste instantie heb ik gewoon de laatste versie gedownload (2.0.7) en ben met de documentatie aan de slag gegaan. Toen ik klaar was en het uitprobeerde, kreeg ik gewoon geen resultaat. Nou, goed, ik probeerde te debuggen (niets...). Dus ging toen maar op zoek naar een andere versie. Gevonden, gedownload en de stappen weer gevolgd. Alles veranderd en het zou echt moeten werken, maar opnieuw doet het niets. Hier werkt zelfs de debug()-functie niet, dus ik begrijp niets van wat er nu gebeurt.
Ik heb drie javascript bestanden voor sIFR:
- een met zeg maar het framework;
- een met de config;
- een met de debug.
Die laatste werkt al niet, enfin, dat maakt niet uit, maar de andere twee wel. In de config heb ik de nodige dingen aangepast naar mijn eigen eisen (het is nog niet alles, de menu knoppen moeten er nog bij, maar ik wil eerst dat dit werkt):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
var redring = { src: '/redring1969.swf' };
sIFR.activate(redring);
sIFR.replace(redring, {
selector: 'h1',
css: '.sIFR-root { sWmode:"transparent"; color: #000000; }'
});
sIFR.replace(redring, {
selector: 'h2',
css: '.sIFR-root { sWmode:"transparent"; color: #000000; }'
});
sIFR.activate(redring);
sIFR.replace(redring, {
selector: 'h1',
css: '.sIFR-root { sWmode:"transparent"; color: #000000; }'
});
sIFR.replace(redring, {
selector: 'h2',
css: '.sIFR-root { sWmode:"transparent"; color: #000000; }'
});
Ik heb niets veranderd in het frameworkbestand, dus daar hoeven we eigenlijk niet naar te kijken. In mijn index.php staan bovenaan de volgende bestanden 'geïnclude':
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<link rel="stylesheet" href="body.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="js-sIFR/sifr-css.css" type="text/css" />
<script type="text/javascript" src="js-sIFR/sifr.js" type="text/css"></script>
<script type="text/javascript" src="js-sIFR/sifr-debug.js" type="text/css"></script>
<script type="text/javascript" src="js-sIFR/sifr-config.js" type="text/css"></script>
<link rel="stylesheet" href="js-sIFR/sifr-css.css" type="text/css" />
<script type="text/javascript" src="js-sIFR/sifr.js" type="text/css"></script>
<script type="text/javascript" src="js-sIFR/sifr-debug.js" type="text/css"></script>
<script type="text/javascript" src="js-sIFR/sifr-config.js" type="text/css"></script>
En helemaal onderaan, na alle HTML output staan nog wat replacements:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
//<![CDATA[
if(typeof sIFR == "function"){
sIFR.bHideBrowserText = true;
sIFR.replaceElement("h1", named({sFlashSrc: "js-sIFR/redring1969.swf", sColor: "#ffba00", sWmode:"transparent"}));
sIFR.replaceElement("h2", named({sFlashSrc: "js-sIFR/redring1969.swf", sColor: "#ffba00", sWmode:"transparent"}));
sIFR.debug();
};
//]]>
</script>
//<![CDATA[
if(typeof sIFR == "function"){
sIFR.bHideBrowserText = true;
sIFR.replaceElement("h1", named({sFlashSrc: "js-sIFR/redring1969.swf", sColor: "#ffba00", sWmode:"transparent"}));
sIFR.replaceElement("h2", named({sFlashSrc: "js-sIFR/redring1969.swf", sColor: "#ffba00", sWmode:"transparent"}));
sIFR.debug();
};
//]]>
</script>
En dan hebben we nog de css:
Body.css (stukje):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div#container div#container-left h1 {
border-bottom: 1px dashed #d7d7d7;
padding: 5px;
margin: 0 0 0 15px;
color: #ffba00;
font-size: 18px;
}
div#container div#container-right h2 {
border-bottom: 1px dashed #d7d7d7;
padding: 5px 5px 13px 5px;
margin: 0 0 0 15px;
color: #ffba00;
font-size: 12px;
}
border-bottom: 1px dashed #d7d7d7;
padding: 5px;
margin: 0 0 0 15px;
color: #ffba00;
font-size: 18px;
}
div#container div#container-right h2 {
border-bottom: 1px dashed #d7d7d7;
padding: 5px 5px 13px 5px;
margin: 0 0 0 15px;
color: #ffba00;
font-size: 12px;
}
sifr.css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
@media screen {
.sIFR-flash {
visibility: visible !important;
margin: 0;
padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-replaced div.sIFR-fixfocus {
margin: 0pt;
padding: 0pt;
overflow: auto;
letter-spacing: 0px;
float: none;
}
}
@media print {
.sIFR-flash {
display : none !important;
height : 0;
width : 0;
position : absolute;
overflow : hidden;
}
.sIFR-alternate {
visibility : visible !important;
display : block !important;
position : static !important;
left : auto !important;
top : auto !important;
width : auto !important;
height : auto !important;
}
}
@media screen {
.sIFR-active h1 {
font-family: Tahoma;
visibility: hidden;
color: #ffba00;
font-size: 18px;
}
.sIFR-active h2 {
font-family: Tahoma;
visibility: hidden;
color: #ffba00;
font-size: 12px;
}
}
.sIFR-flash {
visibility: visible !important;
margin: 0;
padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-replaced div.sIFR-fixfocus {
margin: 0pt;
padding: 0pt;
overflow: auto;
letter-spacing: 0px;
float: none;
}
}
@media print {
.sIFR-flash {
display : none !important;
height : 0;
width : 0;
position : absolute;
overflow : hidden;
}
.sIFR-alternate {
visibility : visible !important;
display : block !important;
position : static !important;
left : auto !important;
top : auto !important;
width : auto !important;
height : auto !important;
}
}
@media screen {
.sIFR-active h1 {
font-family: Tahoma;
visibility: hidden;
color: #ffba00;
font-size: 18px;
}
.sIFR-active h2 {
font-family: Tahoma;
visibility: hidden;
color: #ffba00;
font-size: 12px;
}
}
Het bestand redring1969.swf heb ik gemaakt zoals het moest via de documentatie: het bestand sifr-cs3-and-up.fla openen, daar de textbox dubbel beklikken en daarvan het lettertype veranderen (hier in 'Redring 1969'). Toen heb ik hem geëxporteerd als film .swf en opgeslagen als redring1969.
In het begin, toen ik nog niet met de flash bezig was maar alleen de js bestanden had geïnclude, verdwenen de h1 en h2 tags nog, maar toen ik er eenmaal mee aan de gang ging gebeurde dat ook niet meer....
Iemand die me kan helpen?
Edit: net nog even in bij de replacements het pad naar de flash file veranderd naar js-sIFR/redring1969.swf, hij zit namelijk in js-sIFR terwijl dit wordt afgedraaid in index.php dat een map hoger zit.
Gewijzigd op 01/01/1970 01:00:00 door Jesper Diovo
ps 2.0.7 is de beste versie tot nu toe en die moet perfect werken
sifr3:
http://wiki.novemberborn.net/sifr3/How+to+use
sifr2:
http://wiki.novemberborn.net/sifr/How+to+use
@PHP Newbie: de website is hier: http://www.dzjemo.nl/new/index.php
Edit: nou vooruit, ik heb nu alles helemaal opnieuw gedaan. Alle bestanden verwijderd en sIFR 3.0 Beta1 gedownload en via dit geconfigureerd. Nog steeds geen resultaat ;-).
Toch begin ik steeds meer te denken dat het flashbestand het gewoon niet doet, al zou - als sIFR het wel doet - de tekst verborgen moeten worden, wat ook niet gebeurd. Het enige wat ik met het flashbestand 'sifr.fla' doe is: dubbelklik op het witte scherm, er komt 'Bold Italic Normal' te voorschijn. Ook hier dubbelklik ik op. Ik verander het lettertype naar 'redring 1969' en typ ipv Bold Italic Normal een 'a' - zoals in de documentatie staat. Ik ga dan naar bestand > exporteren > film exporteren en sla hem op als redring1969.swf. Volgens de documentatie zou ik dan nog een heel menu moeten krijgen om allerlei instellingen te setten, maar die krijg ik niet. Kan aan mijn flash versie liggen (adobe flash cs3 professional?).
Ik begrijp er steeds minder van, stom ook dat hij geen errors geeft...
Gewijzigd op 01/01/1970 01:00:00 door Jesper Diovo
3 is nog in een beta.
Hierbij kun je de sifr.fla openen, dubbelklikken op de stage, lettertype aanpassen en exporteren (wel zorgen dat de customize_me.as en de dont_customize_me.as bestanden in dezelfde map staan).
Zet sifr.js in je map en gebruik de css en javascript code zoals ze in het voorbeeld staan. Dit moet gewoon werken
Edit: kan het er ook aan liggen dat dit bij mij null aangeeft?
Edit2: Oh, we hebben beeld!! Nu zie ik op de plek van de h1 en h2 alleen maar witte balken, en zegt firefox dat de films niet geladen konden worden. Een duidelijkere fout. Wat is er aan het handje? :-)
Edit3: het werkt!!!!! Alleen heb ik nog geen transparente achtergrond, maar das een kwestie van een parameter aanmeten. Het hele probleem lag dus gewoon bij mij, ik had geen flash player...... *shame on me*
Edit4: Oké, bijna alles lukt. Er is alleen een ding die me nog dwars zit. Bij de h2 kopjes is die van "laatste artikelen" kleiner dan die van "referenties", terwijl beiden font-size: 12px; hebben. Waarom is referenties hier zo groot?
Edit5: Oh, dat lag aan de paddings, oké nu ik er dit van gemaakt heb ziet er redelijk mooi uit :-).
Gewijzigd op 01/01/1970 01:00:00 door Jesper Diovo
Code (php)
1
2
3
2
3
<script type="text/javascript" src="js-sIFR/sifr.js" type="text/css"></script>
<script type="text/javascript" src="js-sIFR/sifr-debug.js" type="text/css"></script>
<script type="text/javascript" src="js-sIFR/sifr-config.js" type="text/css"></script>
<script type="text/javascript" src="js-sIFR/sifr-debug.js" type="text/css"></script>
<script type="text/javascript" src="js-sIFR/sifr-config.js" type="text/css"></script>
Hier staat type="text/css" en dat hoort daar niet in volgens mij.
Ik heb nu versie 2.0.7 gebruikt, en het werkt uitstekend :-).