JavaScript - Edit Styles With Input?

I have my code set up so whenever I hover over a picture it changes the background image and I want it so that when I leave the picture the background changes back to a black background but the background just stays as the image. I cant find out why its not changing back when I leave, it looks like everything should work.

Code:

var bgImage = new Array()
		bgImage[0] = "url(../Pictures/RM/Iker.jpg)";
		bgImage[1] = "url(../Pictures/RM/Arbeloa.jpg)";
		 
		
		parseInt(event.clientX) - parseInt(movingDiv.style.left)
		
		function into(whoseCalling)
		{
			num =(document.getElementById(whoseCalling).id).substr(3);
		    document.getElementById(whoseCalling).style.borderStyle = "double";
			document.getElementById(whoseCalling).style.borderTopColor = "blue";
			document.getElementById(whoseCalling).style.borderBottomColor = "red";
			document.getElementById(whoseCalling).style.borderLeftColor = "yellow";
			document.getElementById(whoseCalling).style.borderRightColor = "green";
			document.getElementById(whoseCalling).style.borderWidth = "8px";
			
			
			for (i=0; i<30; i++)
			{
				document.getElementById("img" + i).style.opacity = ".1";
			}
			document.getElementById(whoseCalling).style.opacity = "1";
			document.body.style.backgroundImage = bgImage[num]
		}
		function out(whoseCalling)
		{
			document.getElementById(whoseCalling).style.borderStyle = "solid";
			document.getElementById(whoseCalling).style.borderColor = "red";
			document.getElementById(whoseCalling).style.borderWidth = "3px";
			document.body.style.backgroundColor = "black";
			
			for (i=0; i<30; i++)
			{
				document.getElementById("img" + i).style.opacity = "1";
			}
		}

Hey guys, so i have a table, and it displays 6 rows, and the content inside of those rows. But i need to make it so that the middle row, has a border so it appears it is highlighted. Here is what i have

Code:

function timer() {
time=parseInt(player.getCurrentTime())
if (time%5==0&&oldtime!=time){
rows[1].innerHTML=rows[(time/5)+ -1].innerHTML
rows[2].innerHTML=rows[(time/5)+ 0].innerHTML
rows[3].innerHTML=rows[(time/5)+ 1].innerHTML
rows[4].innerHTML=rows[(time/5)+ 2].innerHTML
rows[5].innerHTML=rows[(time/5)+ 3].innerHTML
oldtime=time
		}
	}

I would like to have a text link do 2 things:
1. Change #box1.style1 to class="style2" (from style1)
2. Change #box2.style2 to class="style1" (from style2)
So the text link would not change its own style, but change the class of 2 different divs

Your help on this is very much appreciated. Thank you

Would this work? or do I got the wrong function commands?

How would I alter this to make it work, been staring at the screen for 8 hours.....









var myInDesign = app
var myDocument = app.activeDocument
var myDocName = myDocument.name



app.findParagraphStyle.caseSensitive = false;
app.findParagraphStyle.wholeWord = false;
app.findCharacterStyle.wholeWord = false;
app.findCharacterStyle.caseSensitive = false;



app.findParagraphStyle.findWhat = "SN.outabout.DAY-Gray";
app.changeParagraphStyle.changeTo = "SN.Holiday-Day_of_the_week";
app.documents.item(0).changeParagraphStyle();




app.findParagraphStyle.findWhat = "SN.outabout.DATE";
app.changeParagraphStyle.changeTo = "SN.Holiday-Month_and_Day";
app.documents.item(0).changeParagraphStyle();




app.findParagraphStyle.findWhat = "SN.listingsLT";
app.changeParagraphStyle.changeTo = "SN.Holiday-Paragraph";
app.documents.item(0).changeParagraphStyle();




app.findCharacterStyle.findWhat = "SN.listingsBOLD";
app.changeCharacterStyle.changeTo = "SN.Holiday-Title_Paragraph";
app.documents.item(0).changeCharacterStyle();



//myInCopy = CreateObject("InCopy.Application.CS3") //Not sure if this would work, just crafting idea's.
//var myDocument = myInCopy.ActiveDocument
//var mySelection = myInCopy.Selection.Item(1)
//var myStory = MySelection.ParentStory
//var myText = myStory.Paragraphs.Item(1)
//myStory.CheckOut
//myText.ApplyParagraphStyle myDocument.ParagraphStyles.Item("zAPPROVED"), True
//myStory.CheckIn





Can I just do this with like a Nested If, then Statement?

var myDoc = app.documents[0]
var mySel = app.selection[0]
var myStory = mySel.parentStory; // Now we are pointing to the entire story
var myHolidayStyle1 = "Holiday-Day_of_the_week" // Header 'day of the week'
var myHolidayStyle2 = "Holiday-Month_and_date" // Header 'month and day'
var myHolidayStyle3 = "Lead Paragraph" // Lead Paragraph 'default paragraph style'


myStory.paragraphs[0].appliedParagraphStyle = myHolidayStyle1; //Header 'day of the week' and Month and day.
myStory.paragraphs[1].appliedParagraphStyle = myHolidayStyle2; // Header 'month of the day'
myStory.paragraphs[2].appliedParagraphStyle = myHolidayStyle3; // Lead Paragraph 'default paragraph style'
//.appliedParagraphStyle = myDoc.paragraphStyles.item (myHolidayStyle1);
//mySel.paragraphs[-1].insertionPoints[-1].paragraphs[0];

//Loops to change all the paragraphs to Paragraph body to ever paragraph (only problem is its limited to the entire page.)
for (loop=0; loop<myStory.paragraphs.length; loop++)
myStory.paragraphs[loop].appliedParagraphStyle = myHolidayStyle3;


// Something simple to check if text 'drops out' of a certain text frame.
currTextFrame = app.selection[0].parentTextFrames[0];
currPar = currTextFrame.paragraphs[0];
while (currPar && currPar.parentTextFrames[0] == currTextFrame) {
currPar.appliedParagraphStyle = someStyle;
currPar = currTextFrame.paragraphs.nextItem(currPar);
}


// Script for starting Spell Check
var WshShell = app.menus.item(0);
var WshShell2 = WshShell.submenus.item(1);
var WshShell3 = WshShell2.submenus.item(1);
var WshShell4 = WshShell3.menuItems.item(0);
WshShell4.associatedMenuAction.invoke();

Would this work, do I got a pretty generalized idea of how it should be written.



I want this script to apply data that comes in from a export that is imported into Indesign. Basically Holidaystyle1 and 2 are already preset in data from a program called Linear. But the day, month, and date, will change. So I hoping there is a way from the script above to make 1 and 2 be at the top of the page, and style 3 be the paragraph style that leads in the text until the next articles are reach that start with like say 'Friday' and 'November 12', and the routine repeats itself again, until there is no-more data. (**edit** Is there a way to tell the script to put a line break or empty line between Style 0 and style 1?)

I hope this make sense.

I would love for the script to do all the data at once, and at the end, I put a spell check function that checks to make sure the spelling and grammar are correct, before the script finally ends.

Hi, I'm a javascript idiot, and I need a script to change two styles in two different elements based on the status of 2 radio buttons. Basically, I have 2 forms...#formTest and #formTest2. When radio button "search" value "1" is selected I need the display style for #formTest to be "block" and the display style for #formTest2 to be "none". When radio buton "search" value "2" is selected, I need the opposite to occur. (#formTest display style ="none" and #formTest2 display style="block")

I have very buggy code which produces similar changes, but does other bad things, so won't work. Basically, the first selection change displays both forms, which after the first selection change works fine, unless you click anywhere else, in which case both forms are not displayed. I know I should use a function in the head and call it with an onselect or onclick event. I just don't know how.

I appreciate any help anyone can offer me!

My ugly (nonfunctional code is below)

Search by Make:&nbsp;&nbsp;<input name="search" type="radio" value="1" onclick="document.getElementById('testForm').style.display='block';" onchange="document.getElementById('testForm').style.display='none';" checked="checked" />
<br />
Search by Category:&nbsp;<input name="search" type="radio" value="2" onclick="document.getElementById('testForm2').style.display='block';" onchange="document.getElementById('testForm2').style.display='none';" />


Thanks Again

hopefully this is what I need to fix a problem with my code too.

I have a JS that resizes a few div widths on my page but when i also have the styles in a seperate file the JS does not work.

this is my original code that works when i use the following line in my html.

Code:

function Div(id,hw,ud) {
						var div=document.getElementById(id);
						 if (hw == "h"){
										 var h=parseInt(div.style.height)+ud;
											 if (h>=150){
											  div.style.height = h + "px";
											  //alert(hw + h);
											 }
							 } else if (hw == "w"){
													 var w=parseInt(div.style.width)+ud;
															 if (w>=150){
		  div.style.width = w + "px";
			  var inputdiv=document.getElementById('txt_message');
			  var inputw=parseInt(inputdiv.style.width)+ud;
			  inputdiv.style.width = inputw + "px";
		 }
}
						var chat_div = document.getElementById('div_chat');
						chat_div.scrollTop = chat_div.scrollHeight;
						}

Code:

<div id="div_chat" style="height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555;"></div>

if i was to use the following instead
Code:

<div id="div_chat"></div>

with
Code:

#div_chat { height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555; }

in my CSS file then the JS is fired (i added an alert() to my code to check this) but the widths are not changed.

what changes should i make to my codes to make this work so i can have the styles in my CSS file instead of the main HTML file.



edit: just thought you may need this part too so you can see what the call looks like.

Code:

<div>
resize chat log&nbsp;<img src="resize_d.gif" width="21" height="9" onclick="Div('div_chat','h',20);" alt="height +">&nbsp;
<img src="resize_u.gif" width="21" height="9" onclick="Div('div_chat','h',-20);" alt="height -">&nbsp;&nbsp;
<img src="resize_r.gif" width="21" height="9" onclick="Div('div_chat','w',20);" alt="width +">&nbsp;
<img src="resize_l.gif" width="21" height="9" onclick="Div('div_chat','w',-20);" alt="height -">
</div>

further edit: i have just tried the following JS but this time i get the following error...

Webpage error details

Message: Invalid procedure call or argument

on the following line

Code:

div.currentStyle["width"] = w + "px";

I'm fairly new to JS so sorry in advance if this is a stupid question!

I have a textarea which uses ckeditor to make it a wysiwyg. I also have a bit of JS which watches the ckeditor and when a user types into it, whatever they type appears in a div elsewhere on the page.

My ckeditor allows the text to be bold, italic, underlined and resized. When I apply styles to the text in the ckeditor textarea, I want them to reflected in the div which updates. At the moment only underline and resizing the text works. Choosing bold or italic does nothing the text updates ok, but no bold or italic.

I've been told: "Ckeditor is using strong for bold, em for italics. My guess is that the browser or framework you are using doesn't apply bold and italics styles to those tags. You'll have to do that yourself."

I've tested on several browsers, I checked in FF Opera Safari Chrome IE8 & IE9 and its the same in all them. Underline works, resize works but neither bold or italic do. (Interestingly in IE7 bold and italic do work as well as the size and underline! What's going on with that?!?)

So I assume it is the framework? Can anyone tell me if this is right and if so, how do I go about doing that myself?

heres the JS I'm using to update the div:

Code:

<label for="editor1">Background Story</label>
<textarea id="editor1" name="editor1">This is sample text</textarea>
<div id="story"></div>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
timer = setInterval('updateDiv()',100);
function updateDiv(){
var editorText = CKEDITOR.instances.editor1.getData();
$('#story').html(editorText);
}</script>

Having so much trouble with this entire slideshow... but this is the most recent development. For some reason the opacity change and border styles are not being added to the current thumbnail div that is selected, controlled by this code:

Code:

var current = 0;

function swapimg( show ){

	var piece = new Array();
piece[0] = '../assets/images/windycity/windycity01.gif';
	title[0] = '[ Winners Paint the Town Red. Loosers Supply the Blood. ]';

	piece[1] = '../assets/images/windycity/windycity02.gif';
	title[1] = '[ One way or another they’re leaving on wheels. ]';

document.getElementById( 'featured' ).src = piece[show];
	document.getElementById( 'featured' ).alt = title[show];

for( i = 0; i < meta.length; i++ ){
		document.getElementById( 'item' + i ).style.opacity = '.5';
		document.getElementById( 'item' + i ).style.border = 'solid 2px #2b2b2d';
		
	}
	document.getElementById( 'item' + ( show ) ).style.opacity = '.99';
	document.getElementById( 'item' + ( show ) ).style.border = 'solid 2px #0597af';
	
	current = ( show );

And this is the html that it should be controlling:

Code:

<div class="thumbs">
    <div class="listimg"><span onclick="swapimg(0);" ><img id="item0" src="../assets/images/windycity/windycity01_thumb.jpg"  alt="" style="opacity: .99; border:solid 2px #0597af"/></span></div>
    
    <div class="listimg"><span onclick="swapimg(1);" > <img id="item1" src="../assets/images/windycity/windycity02_thumb.jpg"  alt="" /></span></div> 
    <div class="listimg"><a href="javascript:swapimg(2);" ><img id="item2" src="../assets/images/windycity/windycity03_thumb.jpg"  alt="" /></a></div>
    </div>

Any help would be great- I've been staring at this so long all the code has jumbled together in my head, and as soon as I tackle one problem I find another! Thanks!

Hi,

i want to set an input value to the same value as the input selected from another input on the same form

so when the user selects input 1
i want the hidden input2 to get the same value

im guessing i use onsubmit because its hidden so there wont be a focus or blur

this would be part of the input

Code:

onsubmit="(this.value = this.othervalue)"

othervalue being the other input name="othervalue"

is that the correct syntax

I have this idea that I want to do basically a "state capture" of a web page through javascript.

Basically, a user will click a button, and the script will run, capturing all objects and their styles in a way that can be recreated later without referencing external CSS files and images.

The script could export HTML or JS, but obviously all images would have to be data urls and all styles would have to be inline/hard coded.

Does anyone know of a tool that do this or have any advice on where I would start? I'm thinking it would be very useful for a bug report submission on an application I'm working on.

Sure, the user can upload a screenshot, but I'm trying to save them the step (and basically have a screenshot on every bug report). JS cannot do an actual image capture, so I think a full dom export would be just as good.

Any ideas would be fantastic.

How does one get inline styles placed by javascript to work in Google Chrome? Works in Firefox and Opera, I know that Chrome is receiving the correct data by using alerts, but it is not putting the style object in the HTML.

I have a neat js wyswyg editor that works great. However I can only use existing controls.

I would like to add a drop-down style menu where I can define a unique css style for each option.

Any suggestions?

JS Code:
Code:

TINY={};

function T$(i){return document.getElementById(i)}
function T$$$(){return document.all?1:0}

TINY.editor=function(){
	var c=[], offset=-30;
	c['cut']=[1,'Cut','a','cut',1];
	c['copy']=[2,'Copy','a','copy',1];
	c['paste']=[3,'Paste','a','paste',1];
	c['bold']=[4,'Bold','a','bold'];
	c['italic']=[5,'Italic','a','italic'];
	c['underline']=[6,'Underline','a','underline'];
	c['strikethrough']=[7,'Strikethrough','a','strikethrough'];
	c['subscript']=[8,'Subscript','a','subscript'];
	c['superscript']=[9,'Superscript','a','superscript'];
	c['orderedlist']=[10,'Insert Ordered List','a','insertorderedlist'];
	c['unorderedlist']=[11,'Insert Unordered List','a','insertunorderedlist'];
	c['outdent']=[12,'Outdent','a','outdent'];
	c['indent']=[13,'Indent','a','indent'];
	c['leftalign']=[14,'Left Align','a','justifyleft'];
	c['centeralign']=[15,'Center Align','a','justifycenter'];
	c['rightalign']=[16,'Right Align','a','justifyright'];
	c['blockjustify']=[17,'Block Justify','a','justifyfull'];
	c['undo']=[18,'Undo','a','undo'];
	c['redo']=[19,'Redo','a','redo'];
	c['image']=[20,'Insert Image','i','insertimage','Enter Image URL:','http://'];
	c['hr']=[21,'Insert Horizontal Rule','a','inserthorizontalrule'];
	c['link']=[22,'Insert Hyperlink','i','createlink','Enter URL:','http://'];
	c['unlink']=[23,'Remove Hyperlink','a','unlink'];
	c['unformat']=[24,'Remove Formatting','a','removeformat'];
	c['print']=[25,'Print','a','print'];
	function edit(n,obj){
		this.n=n; window[n]=this; this.t=T$(obj.id); this.obj=obj; this.xhtml=obj.xhtml;
		var p=document.createElement('div'), w=document.createElement('div'), h=document.createElement('div'),
		l=obj.controls.length, i=0;
		this.i=document.createElement('iframe'); this.i.frameBorder=0;
		this.i.width=obj.width||'500'; this.i.height=obj.height||'250'; this.ie=T$$$();
		h.className=obj.rowclass||'teheader'; p.className=obj.cssclass||'te'; p.style.width=this.i.width+'px'; p.appendChild(h);
		for(i;i<l;i++){
			var id=obj.controls[i];
			if(id=='n'){
				h=document.createElement('div'); h.className=obj.rowclass||'teheader'; p.appendChild(h)
			}else if(id=='|'){
				var d=document.createElement('div'); d.className=obj.dividerclass||'tedivider'; h.appendChild(d)
			}else if(id=='font'){
				var sel=document.createElement('select'), fonts=obj.fonts||['Verdana','Arial','Georgia'], fl=fonts.length, x=0;
				sel.className='tefont'; sel.onchange=new Function(this.n+'.ddaction(this,"fontname")');
				sel.options[0]=new Option('Font','');
				for(x;x<fl;x++){
					var font=fonts[x];
					sel.options[x+1]=new Option(font,font)
				}
				h.appendChild(sel)
			}else if(id=='size'){
			   
				var sel=document.createElement('select'), sizes=obj.sizes||[1,2,3,4,5,6,7], sl=sizes.length, x=0;
				sel.className='tesize'; 
				sel.onchange=new Function(this.n+'.ddaction(this,"fontsize")');
				for(x;x<sl;x++){
					var size=sizes[x];
					sel.options[x]=new Option(size,size)
				}
				h.appendChild(sel)
				
			}else if(id=='colorb'){
        var sel=document.createElement('select'),
        colors=obj.colors||[['Black','black'],['Green','green','0.9em'],['Blue','blue','0.7em']],
        cl=colors.length, x=0;
         sel.className='tecustom';
                
       sel.onchange=new Function(this.n+'.ddaction(this,"forecolor")');
        for(x;x<cl;x++){
                var colord=colors[x];
                
                sel.options[x]=new Option(colord[0],colord[1])
                
                                     }
        h.appendChild(sel)
        
}			else if(id=='style'){
				var sel=document.createElement('select'),
				styles=obj.styles||[['Style',''],['Bordo','<u>'],['Header 1','<h1>'],['Header 2','<h2>'],['Header 3','<h3>'],['Header 4','<h4>'],['Header 5','<h5>'],['Header 6','<h6>']],
				sl=styles.length, x=0;
				sel.className='testyle'; sel.onchange=new Function(this.n+'.ddaction(this,"formatblock")');
				for(x;x<sl;x++){
					var style=styles[x];
					sel.options[x]=new Option(style[0],style[1])
				}
				h.appendChild(sel)
			}else if(c[id]){
				var div=document.createElement('div'), x=c[id], func=x[2], ex, pos=x[0]*offset;
				div.className=obj.controlclass;
				div.style.backgroundPosition='0px '+pos+'px';
				div.title=x[1];
				ex=func=='a'?'.action("'+x[3]+'",0,'+(x[4]||0)+')':'.insert("'+x[4]+'","'+x[5]+'","'+x[3]+'")';
				div.onclick=new Function(this.n+(id=='print'?'.print()':ex));
				div.onmouseover=new Function(this.n+'.hover(this,'+pos+',1)');
				div.onmouseout=new Function(this.n+'.hover(this,'+pos+',0)');
				h.appendChild(div);
				if(this.ie){div.unselectable='on'}
			}
		}
		this.t.parentNode.insertBefore(p,this.t); this.t.style.width=this.i.width+'px';
		w.appendChild(this.t); w.appendChild(this.i); p.appendChild(w); this.t.style.display='none';
		if(obj.footer){
			var f=document.createElement('div'); f.className=obj.footerclass||'tefooter';
			if(obj.toggle){
				var to=obj.toggle, ts=document.createElement('div');
				ts.className=to.cssclass||'toggle'; ts.innerHTML=obj.toggletext||'source';
				ts.onclick=new Function(this.n+'.toggle(0,this);return false');
				f.appendChild(ts)
			}
			if(obj.resize){
				var ro=obj.resize, rs=document.createElement('div'); rs.className=ro.cssclass||'resize';
				rs.onmousedown=new Function('event',this.n+'.resize(event);return false');
				rs.onselectstart=function(){return false};
				f.appendChild(rs)
			}
			p.appendChild(f)
		}
		this.e=this.i.contentWindow.document; this.e.open();
		var m='<html><head>', bodyid=obj.bodyid?" id=\""+obj.bodyid+"\"":"";
		if(obj.cssfile){m+='<link rel="stylesheet" href="'+obj.cssfile+'" />'}
		if(obj.css){m+='<style type="text/css">'+obj.css+'</style>'}
		m+='</head><body'+bodyid+'>'+(obj.content||this.t.value);
		m+='</body></html>';
		this.e.write(m);
		this.e.close(); this.e.designMode='on'; this.d=1;
		if(this.xhtml){
			try{this.e.execCommand("styleWithCSS",0,0)}
			catch(e){try{this.e.execCommand("useCSS",0,1)}catch(e){}}
		}
	};
	edit.prototype.print=function(){
		this.i.contentWindow.print()
	},
	edit.prototype.hover=function(div,pos,dir){
		div.style.backgroundPosition=(dir?'34px ':'0px ')+(pos)+'px'
	},
	edit.prototype.ddaction=function(dd,a){
		var i=dd.selectedIndex, v=dd.options[i].value;
		this.action(a,v)
	},
	edit.prototype.action=function(cmd,val,ie){
		if(ie&&!this.ie){
			alert('Your browser does not support this function.')
		}else{
			this.e.execCommand(cmd,0,val||null)
		}
	},
	edit.prototype.insert=function(pro,msg,cmd){
		var val=prompt(pro,msg);
		if(val!=null&&val!=''){this.e.execCommand(cmd,0,val)}
	},
	edit.prototype.setfont=function(){
		execCommand('formatblock',0,hType)
	},
	edit.prototype.resize=function(e){
		if(this.mv){this.freeze()}
		this.i.bcs=TINY.cursor.top(e);
		this.mv=new Function('event',this.n+'.move(event)');
		this.sr=new Function(this.n+'.freeze()');
		if(this.ie){
			document.attachEvent('onmousemove',this.mv); document.attachEvent('onmouseup',this.sr)
		}else{
			document.addEventListener('mousemove',this.mv,1); document.addEventListener('mouseup',this.sr,1)
		}
	},
	edit.prototype.move=function(e){
		var pos=TINY.cursor.top(e);
		this.i.height=parseInt(this.i.height)+pos-this.i.bcs;
		this.i.bcs=pos
	},
	edit.prototype.freeze=function(){
		if(this.ie){
			document.detachEvent('onmousemove',this.mv); document.detachEvent('onmouseup',this.sr)
		}else{
			document.removeEventListener('mousemove',this.mv,1); document.removeEventListener('mouseup',this.sr,1)
		}
	},
	edit.prototype.toggle=function(post,div){
		if(!this.d){
			var v=this.t.value;
			if(div){div.innerHTML=this.obj.toggletext||'source'}
			if(this.xhtml&&!this.ie){
				v=v.replace(/<strong>(.*)<\/strong>/gi,'<span style="font-weight: bold;">$1</span>');
				v=v.replace(/<em>(.*)<\/em>/gi,'<span style="font-weight: italic;">$1</span>')
			}
			this.e.body.innerHTML=v;
			this.t.style.display='none'; this.i.style.display='block'; this.d=1
		}else{
			var v=this.e.body.innerHTML;
			if(this.xhtml){
				v=v.replace(/<span class="apple-style-span">(.*)<\/span>/gi,'$1');
				v=v.replace(/ class="apple-style-span"/gi,'');
				v=v.replace(/<span style="">/gi,'');
				v=v.replace(/<br>/gi,'<br />');
				v=v.replace(/<br ?\/?>$/gi,'');
				v=v.replace(/^<br ?\/?>/gi,'');
				v=v.replace(/(<img [^>]+[^\/])>/gi,'$1 />');
				v=v.replace(/<b\b[^>]*>(.*?)<\/b[^>]*>/gi,'<strong>$1</strong>');
				v=v.replace(/<i\b[^>]*>(.*?)<\/i[^>]*>/gi,'<em>$1</em>');
				v=v.replace(/<u\b[^>]*>(.*?)<\/u[^>]*>/gi,'<span style="text-decoration:underline">$1</span>');
				v=v.replace(/<(b|strong|em|i|u) style="font-weight: normal;?">(.*)<\/(b|strong|em|i|u)>/gi,'$2');
				v=v.replace(/<(b|strong|em|i|u) style="(.*)">(.*)<\/(b|strong|em|i|u)>/gi,'<span style="$2"><$4>$3</$4></span>');
				v=v.replace(/<span style="font-weight: normal;?">(.*)<\/span>/gi,'$1');
				v=v.replace(/<span style="font-weight: bold;?">(.*)<\/span>/gi,'<strong>$1</strong>');
				v=v.replace(/<span style="font-style: italic;?">(.*)<\/span>/gi,'<em>$1</em>');
				v=v.replace(/<span style="font-weight: bold;?">(.*)<\/span>|<b\b[^>]*>(.*?)<\/b[^>]*>/gi,'<strong>$1</strong>')
			}
			if(div){div.innerHTML=this.obj.toggletext||'wysiwyg'}
			this.t.value=v;
			if(!post){
				this.t.style.height=this.i.height+'px';
				this.i.style.display='none'; this.t.style.display='block'; this.d=0
			}
		}
	},
	edit.prototype.post=function(){
		if(this.d){this.toggle(1)}
	};
	return{edit:edit}
}();

TINY.cursor=function(){
	return{
		top:function(e){
			return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY
		}
	}
}();

Html code:
Code:

<script type="text/javascript" src="tinyeditor.js"></script>
<body>
<textarea id="input" style="width:400px; height:200px"></textarea>
<script type="text/javascript">
new TINY.editor.edit('editor',{
	id:'input',
	width:584,
	height:175,
	cssclass:'te',
	controlclass:'tecontrol',
	rowclass:'teheader',
	dividerclass:'tedivider',
	controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
			  'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
			  'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',
			  'font','size','style','|','image','hr','link','unlink','|','cut','copy','paste','print'],
	footer:true,
	fonts:['Verdana','Arial','Georgia','Trebuchet MS'],
	xhtml:true,
	cssfile:'style.css',
	bodyid:'editor',
	footerclass:'tefooter',
	toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'},
	resize:{cssclass:'resize'}
});
</script>
</body>

Css code:
Code:

body {
	margin: 0;
	font: 12px Verdana,Arial;
	background-color: #FFFFFF;
}
#input {border:none; margin:0; padding:0; font:14px 'Courier New',Verdana; border:0}
.te {
	border: 1px solid #bbb;
	padding: 0 1px 1px;
	font: 12px Verdana,Arial;
	margin: 0px;
	background-color: #FFFFFF;
}

.te iframe {border:none}
.teheader {height:31px; border-bottom:1px solid #bbb; background:url(images/header-bg.gif) repeat-x; padding-top:1px}
.teheader select {float:left; margin-top:5px}
.tefont {margin-left:12px}
.tesize {margin:0 3px}
.testyle {margin-right:12px}
.tedivider {float:left; width:1px; height:30px; background:#ccc}
.tecontrol {
	float: left;
	width: 34px;
	height: 30px;
	cursor: pointer;
	background-image: url(images/icons.png);
}
.tecontrol:hover {background-color:#fff; background-position:30px 0}
.tefooter {height:32px; border-top:1px solid #bbb; background:#f5f5f5}
.toggle {float:left; background:url(images/icons.png) -34px 2px no-repeat; padding:9px 13px 0 31px; height:23px; border-right:1px solid #ccc; cursor:pointer; color:#666}
.toggle:hover {background-color:#fff}
.resize {float:right; height:32px; width:32px; background:url(images/resize.gif) 15px 15px no-repeat; cursor:s-resize}
.tecustom {
	margin: 0 3px;
	}

		
editor {
	cursor: text;
	margin: 5px
}

Hi guys, it's a bit of a large question but I've been messing around with code for a while, and nothing seems to work...

Basically, I need to make, a 'dynamic theme changer'. Basically what I need to do is have several drop down boxes, each one with some colours available as options. When you select one, it automatically (without refreshing the page) updates a certain element's style.

For example, if you selected green as one colour and red as another, the element linked to the first drop-down would turn green, and the element linked to the second drop-down would turn red, and so on so forth.

It then needs to have a 'save' button, which saves the settings, and adds a cookie with the style details so that when they visit the page again it's still personalized.

There also needs to be a cancel button which discards all changes.

I know it's a large question but I'm ripping my hair out over this one! =P

Your help is much appreciated.

I have a form where I want certain fields to be visible only if the user clicks a checkbox on the form.

Specifically, when Presented_to_Goverment_EntityCheckbox0 is checked, these fields should appear.

Code:

DropDownList ID="GovEntity"
	Officials_Last_NameTextBox0
	Officials_First_NameTextBox0
	Officials_TitleTextBox0

I created two different styles, show below; one makes the fields visible and one hides them
Code:

	<style type="text/css">
	.hideit {
	visibility: hidden;
	overflow: hidden;
	position: absolute;
	}
	.showit {
	visibility: visible;
	overflow: visible;
	position: static;
}


	</style>

Then I surrounded the fields with a div ID'ed as wdiv

Code:

<div class="hideit" id="wdiv">
                                        Type Government Entity:
                                        <asp:TextBox ID="Type_Government_EntityTextBox" 

runat="server" 
                                            Text='<%# Bind("Type_Government_Entity") %>' />
                                        <br />
                                        Officials Last Name:
                                        <asp:TextBox ID="Officials_Last_NameTextBox" 

runat="server" style="display:none"
                                            Text='<%# Bind("Officials_Last_Name") %>' />
                                        <br />
                                        Officials_First_Name:
                                        <asp:TextBox ID="Officials_First_NameTextBox" 

runat="server" 
                                            Text='<%# Bind("Officials_First_Name") %>' />
                                        <br />
                                        Officials_Title:
                                        <asp:TextBox ID="Officials_TitleTextBox" 

runat="server" 
                                            Text='<%# Bind("Officials_Title") %>' />
                                        <br />
                                        </div>

I am using the following javascript to change the styles in response to an onclick event.

Code:

<script language="javascript" type="text/javascript">
               

function changeDiv(wdiv) {	thediv = document.getElementById(wdiv);	

if(thediv.className == 'hideit'){		

thediv.className = 'showit';	} else if (thediv.className == 'showit'){		

thediv.className = 'showit';		}}
</script>

I call the Javascript in this line

Code:

 <asp:CheckBox ID="Presented_to_Goverment_EntityCheckBox" onClick="ChangeDiv(wdiv)" 

runat="server" />                                
                                        <br />

However nothing happens when I click the checkbox and if I look in Firefox's error console it says ChangeDiv is not defined. Thanks.