change css with AJAX

ldtiw

Hi,

Im creating a profile type site and trying to create a profile template layout genorator type thing.

Im wating to have input fields where the hex values are entered/selected and i want the css on the page to change to the value.

so if i have a text input where the background is changed to #CCCCCC it is automatically changed.

And if they choose #CC0000 as their border color it is atumatically changed on the page.

i then need to allow them to save the css info into the database like:

How would i do something like that? I found a script online somewhere that used onkeydown/up and ajax get to echo the result on the page, but i cant find it anymore!

Any help would be greatly appreciated.

Thanks,
Danny

jmack159

how about this:
http://www.realeditor.com/editor/
built for myspace, but should be easy to tweak. found it on ajaxian

ManWithNoName

I assume you have visited http://w3schools.com/ajax/default.asp – always a good place to start, and, of course, Goggled the Internet until your eyes bled and begged for mercy.

You should find a similar “up/down/echo” scripts at w3schools (e.g. http://w3schools.com/php/php_ajax_suggest.asp).

bpat1434

Moving to a more appropriate forum.....

Oh, and basically for showing the results at-present is really a manipulation of the onFocus and onBlur events. When the onBlur event is triggered, you'd want to call a function to update that particular style.

Here's a short demo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

  <script type="text/javascript" language="JavaScript"><!-- // --><![CDATA[
  function applyBGStyle(input, div) {
	var color = input.value;
	var obj = document.getElementById(div);

obj.style.backgroundColor = color;
  }

  function applyBorderStyle() {
	var obj = document.getElementById(arguments[4]);
	var styles = document.getElementById(arguments[0]).value+document.getElementById(arguments[1]).value+' '+document.getElementById(arguments[2]).value+' '+document.getElementById(arguments[3]).value;

obj.style.border = styles;
  }
  // ]]></script>
 </HEAD>

 <BODY>
  <div id="wrapper" style="padding:10px;">
	<div id="inner" style="margin:20px;">This is some place-holder text</div>
  </div>
  <hr />

  <label for="iWrapBack">Outer Wrapper Background Color:</label>
  <input type="text" name="wrapBG" id="iWrapBack" onBlur="javascript:applyBGStyle(this, 'wrapper');" value="#ffffff" /><br />

  <label for="iInnerBack">Inner Background Color:</label>
  <input type="text" id="iInnerBack" onBlur="javascript:applyBGStyle(this, 'inner');" value="#ffffff" />

  <fieldset>
	<legend>Wrapper Border</legend>
	<label for="iWrapBW">Wrapper Border Width:</label>
	<input type="text" name="wrapBordWidth" id="iWrapBW" onBlur="javascript:applyBorderStyle('iWrapBW', 'iWrapBM', 'iWrapBS', 'iWrapBC', 'wrapper');" /> <select name="wrapBordMeasure" id="iWrapBM" onChange="javascript:applyBorderStyle('iWrapBW', 'iWrapBM', 'iWrapBS', 'iWrapBC', 'wrapper');">
		<option value="px">Pixel(s)</option>
		<option value="pt">Point(s)</option>
	</select><br />

<label for="iWrapBS">Wrapper Border Style:</label>
<select name="wrapBordStyle" id="iWrapBS" onChange="javascript:applyBorderStyle('iWrapBW', 'iWrapBM', 'iWrapBS', 'iWrapBC', 'wrapper');">
	<option value="solid">Solid</option>
	<option value="dashed">Dashed</option>
	<option value="dotted">Dotted</option>
</select><br />

<label for="iWrapBC">Wrapper Border Color:</label>
<input type="text" name="wrapBorderColor" id="iWrapBC" value="#ffffff" onBlur="javascript:applyBorderStyle('iWrapBW', 'iWrapBM', 'iWrapBS', 'iWrapBC', 'wrapper');"  />
  </fieldset>

  <fieldset>
	<legend>Inner Border</legend>
	<label for="iInnerBW">Inner Border Width:</label>
	<input type="text" name="InnerBordWidth" id="iInnerBW" onBlur="javascript:applyBorderStyle('iInnerBW', 'iInnerBM', 'iInnerBS', 'iInnerBC', 'inner');" /> <select name="InnerBordMeasure" id="iInnerBM" onChange="javascript:applyBorderStyle('iInnerBW', 'iInnerBM', 'iInnerBS', 'iInnerBC', 'inner');">
		<option value="px">Pixel(s)</option>
		<option value="pt">Point(s)</option>
	</select><br />

<label for="iInnerBS">Inner Border Style:</label>
<select name="InnerBordStyle" id="iInnerBS" onChange="javascript:applyBorderStyle('iInnerBW', 'iInnerBM', 'iInnerBS', 'iInnerBC', 'inner');">
	<option value="solid">Solid</option>
	<option value="dashed">Dashed</option>
	<option value="dotted">Dotted</option>
</select><br />

<label for="iInnerBC">Inner Border Color:</label>
<input type="text" name="InnerBorderColor" id="iInnerBC" value="#ffffff" onBlur="javascript:applyBorderStyle('iInnerBW', 'iInnerBM', 'iInnerBS', 'iInnerBC', 'inner');"  />
  </fieldset>
 </BODY>
</HTML>

Hope that helps 😉