/***************************************************************************** It is adviced to place the sIFR JavaScript calls in this file, keeping it separate from the `sifr.js` file. That way, you can easily swap the `sifr.js` file for a new version, while keeping the configuration. You must load this file *after* loading `sifr.js`. That said, you're of course free to merge the JavaScript files. Just make sure the copyright statement in `sifr.js` is kept intact. *****************************************************************************/ // Make an object pointing to the location of the Flash movie on your web server. // Try using the font name as the variable name, makes it easy to remember which // object you're using. As an example in this file, we'll use Futura. var optima = { src: 'http://www.twenty2dental.com/flash/optima.swf' }; /*var visage = { src: 'http://www.duccioconcepts.com/floodcontrol/flash/visage.swf' };*/ // Now you can set some configuration settings. // See also . // One setting you probably want to use is `sIFR.useStyleCheck`. Before you do that, // read . // sIFR.useStyleCheck = true; // Next, activate sIFR: sIFR.activate(optima); // If you want, you can use multiple movies, like so: // // var futura = { src: '/path/to/futura.swf' }; // var garamond = { src '/path/to/garamond.swf' }; // var rockwell = { src: '/path/to/rockwell.swf' }; // // sIFR.activate(futura, garamond, rockwell); // // Remember, there must be *only one* `sIFR.activate()`! // Now we can do the replacements. You can do as many as you like, but just // as an example, we'll replace all `

` elements with the Futura movie. // // The first argument to `sIFR.replace` is the `futura` object we created earlier. // The second argument is another object, on which you can specify a number of // parameters or "keyword arguemnts". For the full list, see "Keyword arguments" // under `replace(kwargs, mergeKwargs)` at // . // // The first argument you see here is `selector`, which is a normal CSS selector. // That means you can also do things like '#content h1' or 'h1.title'. // // The second argument determines what the Flash text looks like. The main text // is styled via the `.sIFR-root` class. Here we've specified `background-color` // of the entire Flash movie to be a light grey, and the `color` of the text to // be red. Read more about styling at . /* sIFR.replace(gill, { selector: 'h3', css: '.sIFR-root { background-color: #F9F9F9; color: #FFFFFF; }' }); */ /*sIFR.replace(warnock, { selector: 'p', css: [ '.sIFR-root { text-align: center; font-weight: bold; color: #666666; }' ,'a { text-decoration: underline; color: #9966FF; }' ,'a:link { color: #9966FF; }' ,'a:hover { color: #CCCCCC; }' ] }); sIFR.replace(rockwell, { selector: 'ul', css: [ '.sIFR-root { text-align: left; color: #000000; }' ,'a { text-decoration: underline; color: #9966FF; }' ,'a:link { color: #9966FF; }' ,'a:hover { color: #CCCCCC; }' ] }); */ /*sIFR.replace(trajan, { selector: 'h1', css: '.sIFR-root { background-color: #FFFFFF; color: #FF0000; }' }); */ /*sIFR.replace(rockwell, { selector: 'h1' ,css: [ '.sIFR-root { text-align: center; font-weight: bold; }' ,'a { text-decoration: none; }' ,'a:link { color: #000000; }' ,'a:hover { color: #CCCCCC; }' ] });*/ /*ratios: [8, 1.42, 9, 1.33, 12, 1.35, 15, 1.3, 19, 1.28, 27, 1.27, 28, 1.25, 32, 1.26, 33, 1.24, 34, 1.25, 48, 1.24, 52, 1.23, 53, 1.24, 73, 1.23, 76, 1.22, 77, 1.23, 81, 1.22, 82, 1.23, 1.22]*/ /*sIFR.replace(visage, { selector: 'em.sub_em', css: [ '.sIFR-root { font-size:14px; font-weight:normal; color:#70738F; font-style:italic; }' ], wmode: 'transparent' });*/ sIFR.replace(optima, { selector: '#image_details h6', css: [ '.sIFR-root { font-size:1.2em; font-weight:normal; color:#457E7E; font-style:normal; letter-spacing:0.25;}' ], wmode: 'transparent' }); sIFR.replace(optima, { selector: '#image_details h5', css: [ '.sIFR-root { font-size:1.2em; font-weight:normal; color:#457E7E; font-style:normal; letter-spacing:0.25;}' ], wmode: 'transparent' }); sIFR.replace(optima, { selector: '#team_main_content h5', css: [ '.sIFR-root { font-size:1.2em; font-weight:normal; color:#457E7E; font-style:normal; letter-spacing:0.25;}' ], wmode: 'transparent' }); sIFR.replace(optima, { selector: '#image_details h3', css: [ '.sIFR-root { font-size:2em; font-weight:normal; color:#457E7E; font-style:normal; letter-spacing:0.25;}' ], wmode: 'transparent' }); sIFR.replace(optima, { selector: '#image_details h4', css: [ '.sIFR-root { font-size:1.5em; font-weight:normal; color:#457E7E; font-style:normal; letter-spacing:0.25; margin-bottom:10px; }' ], wmode: 'transparent' }); sIFR.replace(optima, { selector: 'h2', css: [ '.sIFR-root { font-size:1.1em; font-weight:normal; color:#FFFFFF; font-style:normal; letter-spacing:0.25; margin-bottom:10px; }' ], wmode: 'transparent' }); /*sIFR.replace(optima, { selector: '#for_dentists #main_content #team_main_content h4.treatment_list_head', css: [ '.sIFR-root { font-size:1.7em; font-weight:normal; color:#457E7E; font-style:normal; letter-spacing:0.25;}' ], wmode: 'transparent' });*/ sIFR.replace(optima, { selector: '#team_menu h4.treatment_list_head', css: [ '.sIFR-root { font-size:1.7em; font-weight:normal; color:#FFFFFF; font-style:normal; letter-spacing:0.25;}' ], wmode: 'transparent' }); sIFR.replace(optima, { selector: '#team_main_content h5.treatment_list_head', css: [ '.sIFR-root { font-size:1.4em; font-weight:normal; color:#457E7E; font-style:normal; letter-spacing:0.25; margin-top:20px}' ], wmode: 'transparent' }); sIFR.replace(optima, { selector: 'h4.treatment_list_head', css: [ '.sIFR-root { font-size:1.7em; font-weight:normal; color:#457E7E; font-style:normal; letter-spacing:0.25;}' ], wmode: 'transparent' }); sIFR.replace(optima, { selector: 'h3.treatment_list_head', css: [ '.sIFR-root { font-size:2em; font-weight:normal; color:#457E7E; font-style:normal; letter-spacing:0.25;}' ], wmode: 'transparent' }); sIFR.replace(optima, { selector: 'h3.page_head', css: [ '.sIFR-root { font-size:2.8em; font-weight:normal; color:#FFFFFF; font-style:normal; letter-spacing:0.25; margin-bottom:10px; }' ], wmode: 'transparent' }); sIFR.replace(optima, { selector: 'h4', css: [ '.sIFR-root { font-size:1.8em; font-weight:normal; color:#97713A; font-style:normal; letter-spacing:0.25; margin-bottom:10px; }' ], wmode: 'transparent' }); /*Ratio Calculation The font size does not correspond directly to the height of the Flash movie. The relation between the font size, the number of lines and the height of the Flash movie is called the ratio. By defining ratios you'll stop the Flash movies from abruptly resizing, or at least you'll be able to lessen the impact. The ratios are specific for each font, but luckily sIFR can calculate them for you. Make sure you've loaded sifr-debug.js into your X/HTML page -- after sifr.js and before sifr-config.js (the file-loading order is important). Then, assuming this is how you replace the elements: sIFR.replace({ src: 'gothic.swf', selector: 'h1' }); Comment that out and do the following to get the ratios for gothic.swf (as of revision 229): sIFR.debug.ratios({ src: 'gothic.swf', selector: 'h1' }); When the ratios have been calculated there'll be a prompt with the ratios. Copy the text so you can add it: sIFR.replace({ src: 'gothic.swf', selector: 'h1', ratios: […paste here…] }); */ /*sIFR.replace(gill, { selector: 'h4', css: [ '.sIFR-root { font-size:1.3em; font-weight:normal; color:#111644; }' ], wmode: 'transparent' }); */ /* sIFR.replace(rockwell, { selector: 'h1' ,css: [ '.sIFR-root { text-align: center; font-weight: bold; }' ,'a { text-decoration: none; }' ,'a:link { color: #000000; }' ,'a:hover { color: #CCCCCC; }' ] });*/