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):
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; }'
});
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':
<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>
En helemaal onderaan, na alle HTML output staan nog wat replacements:
<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>
En dan hebben we nog de css:
Body.css (stukje):
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;
}
sifr.css:
@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;
}
}
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.