...

View Full Version : Style preview script



oztinks
04-23-2004, 03:22 AM
Hi,
I am trying to make a CSS preview script I have a very large form where the user selects the style attributes: color, font ...
So far my script partially works but I cant get it to change the value of height and width and not sure how to format the font property code.
Is there a way to compact this code? There are around 200 fields in this form defining each will make the script very long

Ohh I'm sure you will guess but I am a newb so have no idea what I am doing
:) and am very grateful for any suggestions


This is what I have so far


<html>
<head>
<script language="JavaScript" type="text/javascript">function sample_go()
{
<!-- Not sure how to code this to show submitted values-->
document.getElementById("element").style.cssText = 'font-size: 20pt; font-family: "Courier New", Courier, monospace; font-weight : bold;';
<!-- Yay works perfect -->
document.getElementById("element").style.backgroundColor = document.form2.element_bg.options[document.form2.element_bg.selectedIndex].value;
document.getElementById("element").style.color = document.form2.element_font_col.options[document.form2.element_font_col.selectedIndex].value;
document.getElementById("element").style.textDecoration = document.form2.element_text_dec.options[document.form2.element_text_dec.selectedIndex].value;
<!-- Works if I have fixed size but wont return submitted value using <input type="text" name="element_width" onClick="sample_go()"> -->
document.getElementById("element").style.width = document.form2.element_width.options[document.form2.element_width.selectedIndex].value;
document.getElementById("element").style.height = '100%';
<!-- not working at all -->
document.getElementById("element").style.border = '5px';
document.getElementById("element").style.cssBorder = 'thin solid Aqua';
}
</script>
</head>
<body>
<form name="form2"> Font Family
<select name="element_font" class="font" onChange="sample_go()">
<option value="">Body Default</option>
<option value="Arial,Verdana,Helvetica,sans-serif">Arial,Verdana,Helvetica,sans-serif</option>
<option value="Verdana,Helvetica,Arial,sans-serif">Verdana,Helvetica,Arial,sans-serif</option>
<option value="Comic Sans MS,Verdana,Helvetica,sans-serif">Comic Sans MS,Verdana,Helvetica,sans-serif</option>
<option value="Times New Roman,Georgia,Courier,serif">Times New Roman,Georgia,Courier,serif</option>
</select><br/>Font Size
<select name="element_font_size" onChange="sample_go()">
<option value="">Body Default</option>
<option value="8px">8px</option>
<option value="9px">9px</option>
<option value="10px">10px</option>
<option value="11px">11px</option>
<option value="12px">12px</option>
</select><br/>Element Background
<select name="element_bg" onChange="sample_go()">
<option value="">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#808080">Color 1 (#808080)</option>
<option value="#A6A6A6">Color 2 (#A6A6A6)</option>
</select><br/>Element font color
<select name="element_font_col" onChange="sample_go()">
<option value="">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#808080">Color 1 (#808080)</option>
<option value="#A6A6A6">Color 2 (#A6A6A6)</option>
</select><br/>Text Decoration
<select name="element_text_dec" onChange="sample_go()">
<option value="underline">Underline</option>
<option value="none">None</option>
</select><br/>Width
<input type="text" name="element_width" onClick="sample_go()" />
</form>
<div id="element"> Preview of Element
</div>
</body>
</html>

glenngv
04-23-2004, 06:33 AM
Something like this?


<html>
<head>
<style type="text/css">
div {
border:5px solid Aqua;
}
</style>
<script language="JavaScript" type="text/javascript">
function sample_go()
{
var frm2 = document.form2;
var previewPane = document.getElementById(frm2.element_to_change.options[frm2.element_to_change.selectedIndex].value);

//font size
previewPane.style.fontSize = frm2.element_font_size.options[frm2.element_font_size.selectedIndex].value;

//font family
previewPane.style.fontFamily = frm2.element_font.options[frm2.element_font.selectedIndex].value;

//bacground color
previewPane.style.backgroundColor = frm2.element_bg.options[frm2.element_bg.selectedIndex].value;

//text color
previewPane.style.color = frm2.element_font_col.options[frm2.element_font_col.selectedIndex].value;

//text decoration
previewPane.style.textDecoration = frm2.element_text_dec.options[frm2.element_text_dec.selectedIndex].value;

//element width (use try-catch to catch invalid width value)
try{
previewPane.style.width = frm2.element_width.value;
}
catch(e){
//ignore
}

//element height
try{
previewPane.style.height = frm2.element_height.value;
}
catch(e){
//ignore
}
}
</script>
</head>
<body>
<form name="form2"> Font Family
<select name="element_font" class="font" onChange="sample_go()">
<option value="">Body Default</option>
<option value="Arial,Verdana,Helvetica,sans-serif">Arial,Verdana,Helvetica,sans-serif</option>
<option value="Verdana,Helvetica,Arial,sans-serif">Verdana,Helvetica,Arial,sans-serif</option>
<option value="Comic Sans MS,Verdana,Helvetica,sans-serif">Comic Sans MS,Verdana,Helvetica,sans-serif</option>
<option value="Times New Roman,Georgia,Courier,serif">Times New Roman,Georgia,Courier,serif</option>
</select><br/>Font Size
<select name="element_font_size" onChange="sample_go()">
<option value="">Body Default</option>
<option value="8px">8px</option>
<option value="9px">9px</option>
<option value="10px">10px</option>
<option value="11px">11px</option>
<option value="12px">12px</option>
</select><br/>Element Background
<select name="element_bg" onChange="sample_go()">
<option value="">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#808080">Color 1 (#808080)</option>
<option value="#A6A6A6">Color 2 (#A6A6A6)</option>
</select><br/>Element font color
<select name="element_font_col" onChange="sample_go()">
<option value="">None</option>
<option value="#FFFFFF">White</option>
<option value="#000000">Black</option>
<option value="#808080">Color 1 (#808080)</option>
<option value="#A6A6A6">Color 2 (#A6A6A6)</option>
</select><br/>Text Decoration
<select name="element_text_dec" onChange="sample_go()">
<option value="none">None</option>
<option value="underline">Underline</option>
</select><br/>Width
<input type="text" name="element_width" onblur="sample_go()" />
<br/>Height
<input type="text" name="element_height" onblur="sample_go()" />
<br/>Element to change
<select name="element_to_change" onchange="sample_go()">
<option value="element">Element 1</option>
<option value="element2">Element 2</option>
<option value="element3">Element 3</option>
</select>
</form>
<div id="element"> Preview of Element
</div>
<div id="element2"> Preview of Element 2
</div>
<div id="element3"> Preview of Element 3
</div>
</body>
</html>

oztinks
04-23-2004, 09:09 AM
WOW that is great!

Though I would like to change the border properties dynamically as well :)

I can't use the same selections for all my previews the fields all have different names cause the form is processed by a php script which returns the values as a CSS file

if I make an element a link is it possible to apply a dynamic hover style as well?

Thanks for your time and help



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum