Marc A. Posted June 14, 2006 Share Posted June 14, 2006 If you've used sIFR, you know it's easy to specify the particular element which will receive the happy replacing. But, if I want to change the appearance of a child element, I'm having a bit of trouble determining how, mainly in the javascript. For instance, this works perfectly: <script type="text/javascript"> if(typeof sIFR == "function"){ sIFR.replaceElement("h1", named({sFlashSrc: "century.swf"})); }; </script> <h1>Hello World</h1> The above makes "Hello World" appear using sIFR in the Centurty Gothic font. But... I'm wondering how I could rewrite the javascript so that I could change something in a child element. For instance: <h1>Hello <span>World</span></h1> I'd like to somehow say, "make any text within <span></span> become orange". I attempted to use this, but with no luck: <script type="text/javascript"> if(typeof sIFR == "function"){ sIFR.replaceElement("h1>span", named({sColor: "#ff9900"})); }; </script> Any ideas? Link to comment https://www.neowin.net/forum/topic/470003-sifr-help/ Share on other sites More sharing options...
0 Mark Otto Posted June 14, 2006 Share Posted June 14, 2006 Having "h1 span" should work just fine, but if you prefer, you can assign the span a class or an ID. For instance, you could have this: <script type="text/javascript"> if(typeof sIFR == "function"){ sIFR.replaceElement("h1 #logo", named({sColor: "#ff9900"})); sIFR.replaceElement("h1.spanclass", named({sColor: "#ff9900"})); sIFR.replaceElement("h2.heading #thisitem", named({sColor: "#ff9900"})); }; </script> Link to comment https://www.neowin.net/forum/topic/470003-sifr-help/#findComment-587605316 Share on other sites More sharing options...
0 Marc A. Posted June 14, 2006 Author Share Posted June 14, 2006 Hmm, thank you for the reply, though I can't seem to make it work. Here is my full code I'm using, I wonder if it's the fact that I know nothing about .js and maybe it's being written improperly? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;html xmlns="http://www.w3.org/1999/xhtml">;head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>sIFR test</title> <style type="text/css" media="print"> @import url("sIFR-print.css"); </style> <style type="text/css" media="screen"> @import url("sIFR-screen.css"); </style> <script type="text/javascript" src="sifr.js"></script>t;script type="text/javascript"> if(typeof sIFR == "function"){ sIFR.replaceElement("h1", named({sFlashSrc: "century.swf"})); sIFR.replaceElement("h1 span", named({sColor: "#ff9900"})); }; </script> </head> <body> <h1>Hello <span>World</span></h1> </body> </html> Link to comment https://www.neowin.net/forum/topic/470003-sifr-help/#findComment-587605359 Share on other sites More sharing options...
0 Mark Otto Posted June 14, 2006 Share Posted June 14, 2006 Well, not to be rude, but did you read the documentation fully? Everything is explained well in there. At any rate, I'm here to help ;). Move your sIFR replacements to the bottom of your HTML, right before the closing body tag (this is because the sIFR removes your normal CSS controlled headings and replaces them, after the page loads the initial text in those headers). Additionally, make sure that your h1 and h1 span are defined in your CSS correctly. The correct page setup goes like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;html xmlns="http://www.w3.org/1999/xhtml">;head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>sIFR test</title> <style type="text/css" media="print"> @import url("sIFR-print.css"); </style> <style type="text/css" media="screen"> @import url("sIFR-screen.css"); </style> <script type="text/javascript" src="sifr.js"></script>t;/head> <body> <h1>Hello <span>World</span></h1> <script type="text/javascript"> if(typeof sIFR == "function"){ sIFR.replaceElement("h1", named({sFlashSrc: "century.swf"})); sIFR.replaceElement("h1 span", named({sColor: "#ff9900"})); }; </script> </body> </html> Also, with my sIFR, I like to make sure all the arguments are written out, even if they are null. This sort of helps with remembering what you can do with the sIFR and the order of those arguments. Here is one of my sIFR replacements: sIFR.replaceElement("h2", "myriadpro.swf", "#84BC4E", "#84BC4E", "#4D3B2D", null, 0, 0, 0, 0); This fits the following argument structure: sIFR.replaceElement("Heading Element", "Flash File Source", "Color", "LinkColor", "LinkHoverColor", "BackgroundColor", padding top, padding right, padding bottom, padding left); Note the paddings have no quotation marks. That should fix any problems you might have then. Link to comment https://www.neowin.net/forum/topic/470003-sifr-help/#findComment-587605383 Share on other sites More sharing options...
0 Marc A. Posted June 14, 2006 Author Share Posted June 14, 2006 Thanks a million for that reply, I'm definitely getting closer. I tried your quoted code and it didn't seem to do anything, so I created the following <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;html xmlns="http://www.w3.org/1999/xhtml">;head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>sIFR test</title> <style type="text/css" media="print"> @import url("sIFR-print.css"); </style> <style type="text/css" media="screen"> @import url("sIFR-screen.css"); </style> <script type="text/javascript" src="sifr.js"></script>t;/head> <body> <h1>Hello <span>World</span></h1> <script type="text/javascript"> if(typeof sIFR == "function"){ sIFR.replaceElement("h1", "century.swf", "#ff9900"); sIFR.replaceElement("h1 span", "century.swf", "#cc3300"); }; </script> <!-- ("Heading Element", "Flash File Source", "Color", "LinkColor", "LinkHoverColor", "BackgroundColor", padding top, padding right, padding bottom, padding left) --> </body> </html> The above gives me the following attached image: Link to comment https://www.neowin.net/forum/topic/470003-sifr-help/#findComment-587605484 Share on other sites More sharing options...
0 Mark Otto Posted June 14, 2006 Share Posted June 14, 2006 Ah, crap, sorry about that. I wasn't thinking clearly there. With sIFR at this point, you cannot have multiple colors on one element. The span trick doesn't work because the JavaScript says "Hey, I need to make a H1 sIFR replacement and after that, I need an H1 span sIFR replacement!" In otherwords, it's created two sIFR replacements where one should be created. I had heard of a workaround, but never tried it. Google for multi colored sIFR and you should get some more answers on it. Otherwise, talk to the writer of novemberborn.net, currently the biggest developer on the sIFR team. Sorry I couldn't be more help! Link to comment https://www.neowin.net/forum/topic/470003-sifr-help/#findComment-587605511 Share on other sites More sharing options...
0 Marc A. Posted June 14, 2006 Author Share Posted June 14, 2006 Awesome, thanks for your help. I learned more from you than I have in the past 5 hours of wrapping my head around this sIFR stuff. Link to comment https://www.neowin.net/forum/topic/470003-sifr-help/#findComment-587605828 Share on other sites More sharing options...
Question
Marc A.
If you've used sIFR, you know it's easy to specify the particular element which will receive the happy replacing.
But, if I want to change the appearance of a child element, I'm having a bit of trouble determining how, mainly in the javascript.
For instance, this works perfectly:
<script type="text/javascript"> if(typeof sIFR == "function"){ sIFR.replaceElement("h1", named({sFlashSrc: "century.swf"})); }; </script> <h1>Hello World</h1>The above makes "Hello World" appear using sIFR in the Centurty Gothic font.
But...
I'm wondering how I could rewrite the javascript so that I could change something in a child element. For instance:
I'd like to somehow say, "make any text within <span></span> become orange".
I attempted to use this, but with no luck:
<script type="text/javascript"> if(typeof sIFR == "function"){ sIFR.replaceElement("h1>span", named({sColor: "#ff9900"})); }; </script>Any ideas?
Link to comment
https://www.neowin.net/forum/topic/470003-sifr-help/Share on other sites
6 answers to this question
Recommended Posts