469,610 Members | 1,649 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,610 developers. It's quick & easy.

Whats wrong with this JavaScript ?

<head><title>Test</title> <style>body{font-Family="courier new";}
</style>
<script language="javaScript">
function changeTxt() {
document.getElementById("b").style.fontFamily="Ver dana";
document.getElementById("b").style.fontSize ="25px";
}
function writeCode() { var NewLine = "NewLine ?"
var css = document.getElementById("b").style.fontFamily;
css = "font-Family:" + css
var code = "&lt;STYLE&gt;" + "body {" + css + "; "
code = code + "}" + NewLine; + "&lt;/STYLE&gt;";
document.getElementById("Source").innerHTML = code;}
</script>
<script language="vbScript">function NewLine: NewLine = "vbCrLf":
end function</script></head>
<body id="b">
<input type="button" value="Change Txt" onClick="changeTxt();">
Testing ...<br>
<textarea id="Source" cols="56" rows="4" wrap="OFF"></textarea>
<input type="button" value="Get Source" onClick="writeCode();">
</body></html>
Jul 23 '05 #1
2 1651
Benny Pedersen wrote:
<html>
<head><title>Test</title> <style>body{font-Family="courier new";}
<style type="text/css">
You might need to capitalize 'Courier New', I'm not sure about this but
whenever I've seen it used it's been capitalized. Maybe someone else
here knows the rule.
</style>
<script language="javaScript">
<script type="text/javascript">
function changeTxt() {
document.getElementById("b").style.fontFamily="Ver dana";
document.getElementById("b").style.fontSize ="25px";
}
I think it might be faster to just lookup by document.body, also if you
use a local var I believe it will be faster:
var db = document.body;
function writeCode() { var NewLine = "NewLine ?"
In javascript use '\n'
http://www.jennifermadden.com/162/ex...ineBreaks.html
var css = document.getElementById("b").style.fontFamily;
css = "font-Family:" + css
var code = "&lt;STYLE&gt;" + "body {" + css + "; "
code = code + "}" + NewLine; + "&lt;/STYLE&gt;";
document.getElementById("Source").innerHTML = code;}
I used textarea.value, innerHTML didn't seem necessary here.
</script>
<script language="vbScript">function NewLine: NewLine = "vbCrLf":
end function</script></head>
<body id="b">
<input type="button" value="Change Txt" onClick="changeTxt();">
Testing ...<br>
<textarea id="Source" cols="56" rows="4" wrap="OFF"></textarea>
<input type="button" value="Get Source" onClick="writeCode();">
</body></html>


Here's my version, I don't know why it doesn't pick up the body
font-family before it is set in the function. Maybe someone else can
comment on this.

<head>
<style type="text/css">
body {
font-family: 'Times New Roman';
}
</style>

<script type="text/javascript">
function changeTxt(b) {
var db = document.body;
db.style.fontFamily = "Verdana";
db.style.fontSize = "25px";
}

function writeCode() {
var css = document.body.style.fontFamily;
css = "font-Family:" + css;
var pagecode = '<style type="text/css">\nbody {\n ' + css +
'\n}\n</style>';
document.getElementById('text1').value = pagecode;
}
</script>
</head>

<body>
<input type="button" value="Change Body Text Font Family"
onClick="changeTxt();"> &nbsp;
<p>This is some sample body text...</p>
<p>
<textarea id='text1' cols="56" rows="7" wrap="OFF">
Page CSS will be displayed here.
</textarea>
<input type="button" value="Display Page CSS" onClick="writeCode();">

Mike

Jul 23 '05 #2
mscir <ms***@access4less.com.net.org.uk> wrote in message news:<10*************@corp.supernews.com>...
Benny Pedersen wrote:


[snip]...

Many Thanks :-)
I will study your answer.

BTW. I also got some replys in the WSH group.

Benny, ( http://2dos.homepage.dk )
PS. Below is what Im doing:
(My Script is now many miles long, so below is
only a very little snip of it ...)

<html><head><title>Testing</title><style>
#z1 {z-Index:1; position:absolute;}
..H {width:140px;} /* Used before select */
select{width:120px;} /* Width for small... */
..WW {width:244px;} /* Width for big... */
span.H{font-Weight:bold; text-Transform:capitalize;}
hr {border:gray 1px dotted; height:3px;}
..Brdr {border:gray 1px double;}</style>
<script language="javaScript">
var AttTo = "";
function writeCode(CallFromFunc) {
var arr, i, what, cssVal, code, prefix, AttToWhat;
AttToWhat = (AttTo=="BodyAttachment")?"body":"#"+AttTo;
switch(CallFromFunc) {
case "changeText()":
arr = "1-9,Family,Size,Style,Height,Decoration,Weight,";
arr+= "Variant,Transform,color";
arr = arr.split(/,/);
for(i = 1; i < arr.length; i++) {
what = arr[i];
if(what == "color")
{ cssVal ="document.getElementById(AttTo).style.";
cssVal =eval(cssVal+ what);
arr[i] = "\r\n\t " + what + ":" + cssVal + ";";
}else
{ switch(what) {
case "Height": prefix = "line"; break;
case "Transform": prefix = "text"; break;
case "Decoration": prefix = "text"; break;
default: prefix = "font";
}
cssVal ="document.getElementById(AttTo).style.";
cssVal+= prefix + what;
cssVal = eval(cssVal);
arr[i]="\r\n\t "+prefix+"-"+what+":"+cssVal+";";
}
}
break;
default: alert('funct:\nwriteCode\nswitch(CallFromFunc)');
}
if(arr[1]) {//code = "<style>";
code = "\r\n\t" + AttToWhat + " {";
for(i = 1; i < 10; i++) {code += arr[i];}
code += "\r\n\t}"; //code += "\r\n</style>";
document.getElementById("Source").innerText = code;
} }
function changeText() {var i, v;
var obj = document.getElementById(AttTo);
obj.style.fontFamily = s01.options[s01.selectedIndex].value;
obj.style.fontSize = s02.options[s02.selectedIndex].value;
obj.style.fontStyle = s03.options[s03.selectedIndex].value;
obj.style.lineHeight = s04.options[s04.selectedIndex].value;
obj.style.textDecoration= s05.options[s05.selectedIndex].value;
obj.style.fontWeight = s06.options[s06.selectedIndex].value;
obj.style.fontVariant = s07.options[s07.selectedIndex].value;
obj.style.textTransform = s08.options[s08.selectedIndex].value;
obj.style.color = s09.options[s09.selectedIndex].value;
writeCode('changeText()');
}
function SelectedId(func) {
switch(true) {
case n117.checked: AttTo = "BodyAttachment"; break;
case n118.checked: AttTo = "Head1Attachment"; break;
default: alert('hmmm?');
}
func = func.split(/ /);
for(var i = 0; i < func.length; i++) {
eval(func[i]); //alert("func is "+func[i]);
}
}
</script></head>
<body id="BodyAttachment" onLoad="SelectedId('');">
<textarea id="Source" cols="40" rows="11" wrap="OFF"></textarea><br>
<div id="z1" class="Brdr">Att:
<input id="n117" type="radio" name="5_11_122" checked><label
for="n117">Body</label>
<input id="n118" type="radio" name="5_11_122"><label
for="n118">Head1</label>
</div><p>&nbsp;</p>
<h1 id="Head1Attachment">Css-explorer</h1>
<hr><br><span class="H">1: fontFamily: </span>
<select class="WW" name="s01" onChange="SelectedId('changeText()');">
<option value="Times">0, serif: Times</option>
<option value="Georgia">1, serif: Georgia</option>
<option value="Palatino Linotype">2, serif: Palatino Lino</option>
<option value="Bookman Old Style">3, serif: Bookman Old</option>
<option value="Verdana">4, sans: Verdana</option>
<option value="Century Gothic">5, sans: Century Gothic</option>
<option value="Arial">6, sans: Arial</option>
<option value="System">7, sans: System</option>
<option value="Lucida Console">8, mono sans: Lucida Con..</option>
<option value="Fixedsys">9, mono sans: Fixedsys</option>
<option value="Courier New">10, mono serif: Courier New</option>
<option value="Courier">11, mono serif: Courier</option>
<option value="Comic Sans MS">12: Comic Sans MS</option>
<option value="Script">13: Script</option>
<option value="Monotype Corsiva">14: Monotype Corsiva</option>
</select>
<br><span class="H">2: size: </span>
<select name="s02" onChange="SelectedId('changeText()');">
<option value="14">14</option>
<option value="16"selected>16</option>
<option value="18">18</option>
<option value="32">32</option>
<option value="52">52</option>
</select>
<br><span class="H">3: style: </span>
<select name="s03" onChange="SelectedId('changeText()');">
<option value="normal" selected>normal</option>
<option value="italic">italic</option>
</select>
<br><span class="H">4: line-height: </span>
<select name="s04" onChange="SelectedId('changeText()');">
<option value="normal">normal</option>
<option value="16px">16px</option>
<option value="22px">22px</option>
<option value="40px">40px</option>
</select>
<br><span class="H">5: decoration: </span>
<select name="s05" onChange="SelectedId('changeText()');">
<option value="overline">overline</option>
<option value="underline overline">underline overline</option>
<option value="line-through">line-through</option>
<option value="none" selected>none</option>
</select>
<br><span class="H">6: weight: </span>
<select name="s06" onChange="SelectedId('changeText()');">
<option value="normal" selected>normal</option>
<option value="bold">bold</option>
</select>
<br><span class="H">7: variant: </span>
<select name="s07" onChange="SelectedId('changeText()');">
<option value="normal" selected>normal</option>
<option value="small-caps">small-caps</option>
</select>
<br><span class="H">8: transform: </span>
<select name="s08" onChange="SelectedId('changeText()');">
<option value="none">none</option>
<option value="capitalize">Capitalize</option>
<option value="lowercase">Lowercase</option>
<option value="uppercase">Uppercase</option>
</select>
<br><span class="H">9: color: </span>
<select name="s09" onChange="SelectedId('changeText()');">
<option value="#ffe">#ffe</option>
<option value="black"selected>Black</option>
<option value="gray">gray</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="lightGreen">Light Green</option>
<option value="yellow">Yellow</option>
</select>
</body>
</html>
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by iz0nlee | last post: by
3 posts views Thread by Chris Geerdink | last post: by
62 posts views Thread by TheShadow1 | last post: by
3 posts views Thread by mahsa | last post: by
2 posts views Thread by Paul | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.