Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Style preview script

    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
    Code:
    <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>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Something like this?
    Code:
    <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>

  • #3
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •