Jump to content

sIFR and JavaScipt


Eivo

Recommended Posts

I creating a website in which I need method of letting the user preview their text input in nonstandard fonts.I found sIFR and it looks like it could be a good option. But I need to be able to update the text inside the flash file. I have tried a few ways of doing this but nothing seems to work that I can find. Has anyone done this, or know a way to do this?Thanks.

Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en">	<head>		<title>sIFR</title>		<link rel="stylesheet" href="all.css" type="text/css" media="all" />		<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />		<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />		<script src="sifr.js" type="text/javascript"></script>		<script src="sifr-addons.js" type="text/javascript"></script>		<script type="application/javascript" language="javascript">			function do_sIFR(){				sIFR.replaceElement(named({sSelector:"h1#text_number_1", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"}));			};			function value_changer() {				var f = document.getElementById("text_number_1");				var g = document.getElementById("tn1_value");				var g2 = g.value;				f.innerHTML = g2;				do_sIFR();			}		</script>	</head>	<body onload="do_sIFR()">		<div id="container">			<div>				<form>					<label for="tn1_value">Text Value</label>					<input type="text" name="tn1_value" id="tn1_value" onkeyup="value_changer()" />				</form>			</div>			<h1 id="text_number_1">Hello World</h1>		</div>	</body></html>

This is the code I tried, but isn't working as anticipated (though I thought it should have :) ). Any tips on this? Thanks.

Link to comment
Share on other sites

I think you're going to get performance problems running sIFR every time someone presses a key, sIFR is a pretty expensive operation. A preview button might be more appropriate. But, from what I see, the do_sIFR function calls a method called replaceElement. I'm betting that removes the old element, the h1. So your value_changer function is going to need to remove the Flash object, add the h1 if it got removed (check on that, but I bet document.getElementById("text_number_1") is undefined), add the text content to the h1, and then call the sIFR replacement again. It would probably also be a good idea to use Firebug to inspect the content of the page while different things are happening to see what's going on, and check for errors.

Link to comment
Share on other sites

I cleaned up the page a little. Here is what I wrote...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en">	<head>		<title>sIFR</title>		<link rel="stylesheet" href="all.css" type="text/css" media="all" />		<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />		<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />		<script src="sifr.js" type="text/javascript"></script>		<script src="sifr-addons.js" type="text/javascript"></script>		<script type="application/javascript" language="javascript">			function do_sIFR(){				sIFR.replaceElement(named({sSelector:"h1#display_area", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"}));			};			function value_changer() {				var a = document.getElementById("display_area");				var b = document.getElementById("new_value");				var c2 = b.value;				a.innerHTML = c2;				do_sIFR();			};		</script>	</head>	<body onload="do_sIFR()">		<div id="container">			<div>				<form>					<label for="new_value">Text Value</label>					<input type="text" name="new_value" id="new_value" />					<input type="button" name="preview_button" id="preview_button" value="Preview" onmouseup="value_changer()" />				</form>			</div>			<h1 id="display_area">Hello World</h1>		</div>	</body></html>

According to FireBug, loading the page up in FireFox gives me this...

<html class="sIFR-hasFlash" lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>	<title>sIFR</title>		<link media="all" type="text/css" href="all.css" rel="stylesheet">...CSS...</link>		<link media="screen" type="text/css" href="sIFR-screen.css" rel="stylesheet">...CSS...</link>		<link media="print" type="text/css" href="sIFR-print.css" rel="stylesheet">...CSS...</link>		<script type="text/javascript" src="sifr.js">...JavaScript...</script>		<script type="text/javascript" src="sifr-addons.js">...JavaScript...</script>		<script language="javascript" type="application/javascript">			function do_sIFR(){				sIFR.replaceElement(named({sSelector:"h1#display_area", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"}));			};			function value_changer() {				var a = document.getElementById("display_area");				var b = document.getElementById("new_value");				var c2 = b.value;				a.innerHTML = c2;				do_sIFR();			};		</script>	</head>	<body onload="do_sIFR()">		<div id="container">			<div>				<form>					<label for="new_value">Text Value</label>					<input id="new_value" type="text" name="new_value"/>					<input id="preview_button" type="button" onmouseup="value_changer()" value="Preview" name="preview_button"/>				</form>			</div>			<h1 id="display_area" class="sIFR-replaced">				<embed class="sIFR-flash" height="65" width="700" src="vandenkeere.swf" quality="best" flashvars="txt=Hello World&textalign=center&offsetTop=6&textcolor=#000000&hovercolor=#CCCCCC&linkcolor=#000000&w=700&h=65" wmode="" bgcolor="#FFFFFF" sifr="true" type="application/x-shockwave-flash" style="width: 700px; height: 65px;"/>				<span class="sIFR-alternate">Hello World</span>			</h1>		</div>	</body></html>

So the <h1> tag is still present. After I execute the value_changer() function, I get this...

<html class="sIFR-hasFlash" lang="en" xmlns="http://www.w3.org/1999/xhtml">	<head>		<title>sIFR</title>		<link media="all" type="text/css" href="all.css" rel="stylesheet">...CSS...</link>		<link media="screen" type="text/css" href="sIFR-screen.css" rel="stylesheet">...CSS...</link>		<link media="print" type="text/css" href="sIFR-print.css" rel="stylesheet">...CSS...</link>		<script type="text/javascript" src="sifr.js">...JavaScript...</script>		<script type="text/javascript" src="sifr-addons.js">...JavaScript...</script>		<script language="javascript" type="application/javascript">			function do_sIFR(){				sIFR.replaceElement(named({sSelector:"h1#display_area", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"}));			};			function value_changer() {				var a = document.getElementById("display_area");				var b = document.getElementById("new_value");				var c2 = b.value;				a.innerHTML = c2;				do_sIFR();			};		</script>	</head>	<body onload="do_sIFR()">		<div id="container">			<div>				<form>					<label for="new_value">Text Value</label>					<input id="new_value" type="text" name="new_value"/>					<input id="preview_button" type="button" onmouseup="value_changer()" value="Preview" name="preview_button"/>				</form>			</div>			<h1 id="display_area" class="sIFR-replaced">Test</h1>		</div>	</body></html>

So in the <h1> tag, it replaces all the HTML is the input with what I give it. But it doesn't look like it is calling the do_sIFR(); function at all.In the end, the sIFR loads when the pages loads in the browser, but when I enter text and call the value_changer(); , the sIFR is replaced by regular text.I noticed that the sIFR added a class to the <h1>. Would that mess with the JavaScript finding it by the id?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...