JavaScript - Onmousover Changing Styles

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

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.

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?

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!

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
}

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.

I have this script where people can pick a price and pick quataty. i want it to be only one price and let the person input quatity them selves, how can this be done?



Thanks in advance



Code:

<script type="text/javascript">
	function calculate_amount() {
		var subtotal = 0;
		var hamburger_subtotal = 0;
		var hamburger = document.myform.hamburger.value;
		var hamburger_qty = document.myform.hamburger_qty.value;
		var cheeseburger_subtotal = 0;
		var cheeseburger = document.myform.cheeseburger.value;
		var cheeseburger_qty = document.myform.cheeseburger_qty.value;		
		var pst = 0;
		var gst = 0;
		var total = 0;
		//etc...
		//var chicken_burger;
		//var fries;
		//var gravy;
		//var chili;
		if (hamburger > 0) {
			hamburger_subtotal = hamburger * hamburger_qty;			
		}
		subtotal = hamburger_subtotal;
		// myform -- depends on the name of your actual form, if it does not have one give it one.
		document.myform.display_hamburger_subtotal.value = hamburger_subtotal;
		if (cheeseburger > 0) {
			cheeseburger_subtotal = cheeseburger * cheeseburger_qty;
		}
		// myform -- depends on the name of your actual form, if it does not have one give it one.
		document.myform.display_cheeseburger_subtotal.value = cheeseburger_subtotal;		
		subtotal = subtotal + cheeseburger_subtotal;
		pst = .07 * subtotal;
		gst = .05 * subtotal;
		// you cannot add the values after you call toFixed, so do the total now!
		total = subtotal + pst + gst;
		total = total.toFixed(2);		
		subtotal = subtotal.toFixed(2);
		pst = pst.toFixed(2);
		gst = gst.toFixed(2);
		//  this is wrong var tax = foo * 1.07; 	
 
		document.myform.display_subtotal.value = subtotal;
		document.myform.display_pst.value = pst;
		document.myform.display_gst.value = gst;
		//total = subtotal += pst += gst;
 
 
		document.myform.display_total.value = total;
 
	}
	</script>
	// first off this all needs to be wrapped in form tags if you are going to post the values to something.
	// you need to look up how to name your items, you should have an input type=x with name=y and id=y
	<form name="myform">
	<table width="325">
    <tbody>
    <tr>
    <th width="144">item</th>
    <th width="75">price</th>
    <th width="92">quantity</th>
    <th width="101">sub-total</th>
    </tr>
    <tr align="middle">
    <td align="left">Hamberger</td>
			    <td><select id="hamburger" name="hamburger" onchange="calculate_amount()">
					<OPTION VALUE='2.99'>2.99</OPTION>
					<OPTION VALUE='3.99'>$.99</OPTION>
					<OPTION VALUE='4.99'>4.99</OPTION>
				</select>
	</td>
	 <td><select id="hamburger_qty" name="hamburger_qty" onchange="calculate_amount()">
					<OPTION VALUE='0'>0</OPTION>
					<OPTION VALUE='1'>1</OPTION>
					<OPTION VALUE='2'>2</OPTION>
					<OPTION VALUE='3'>3</OPTION>
					<OPTION VALUE='4'>4</OPTION>
					<OPTION VALUE='5'>5</OPTION>
					<OPTION VALUE='6'>6</OPTION>
					<OPTION VALUE='7'>7</OPTION>
					<OPTION VALUE='8'>8</OPTION>
					<OPTION VALUE='9'>9</OPTION>					
				</select>
	</td>
	<td><input type="text" id="display_hamburger_subtotal" name="display_hamburger_subtotal" size="10" disabled="disabled" /></td>
    </tr>
    <td align="left">Cheeseberger</td>
			    <td><select id="cheeseburger" name="cheeseburger" onchange="calculate_amount()">
					<OPTION VALUE='3.99'>3.99</OPTION>
					<OPTION VALUE='4.99'>4.99</OPTION>
					<OPTION VALUE='5.99'>5.99</OPTION>
				</select>
	</td>
	 <td><select id="cheeseburger_qty" name="cheeseburger_qty" onchange="calculate_amount()">
					<OPTION VALUE='0'>0</OPTION>
					<OPTION VALUE='1'>1</OPTION>
					<OPTION VALUE='2'>2</OPTION>
					<OPTION VALUE='3'>3</OPTION>
					<OPTION VALUE='4'>4</OPTION>
					<OPTION VALUE='5'>5</OPTION>
					<OPTION VALUE='6'>6</OPTION>
					<OPTION VALUE='7'>7</OPTION>
					<OPTION VALUE='8'>8</OPTION>
					<OPTION VALUE='9'>9</OPTION>					
				</select>
	</td>
	<td><input type="text" id="display_cheeseburger_subtotal" name="display_cheeseburger_subtotal" size="10" disabled="disabled" /></td>
    </tr>
    <tr align="middle">
    <td align="left">Chicken Burger</td>
    <td><input size="7" value="$4.99" /></td>
    <td><input size="3" /></td>
    <td><input size="10" /></td>
    </tr>
    </tbody>
    </table>
    <table width="324">
    <tbody>
    <tr>
    <th width="124">item</th>
    <th width="42">price</th>
    <th width="72">quantity</th>
    <th width="74">sub-total</th>
    </tr>
    <tr align="middle">
    <td align="left">French Fries</td>
    <td><input size="7" value="$2.99" /></td>
    <td><input size="3" /></td>
    <td><input size="10" /></td>
    </tr>
    <tr align="middle">
    <td align="left"><input type="checkbox" />
    gravy</td>
    <td><input size="7" value="$0.50" /></td>
    <td><input size="3" /></td>
    <td><input size="10" /></td>
    </tr>
    <tr align="middle">
    <td align="left"><input type="checkbox" />
    chilli</td>
    <td><input size="7" value="$1.99" /></td>
    <td><input size="3" /></td>
    <td><input size="10" /></td>
    </tr>
    </tbody>
    </table>
    <table align="right">
    <tbody>
    <tr>
    <td>subtotal</td>
    <td><input type="text" id="display_subtotal" name="display_subtotal" size="10" disabled="disabled" /></td>
    </tr>
    <tr>
    <td>pst 7%</td>
    <td><input type="text" id="display_pst" name="display_pst" size="10" disabled="disabled" /></td>
    </tr>
    <tr>
    <td>gst 5%</td>
    <td><input type="text" id="display_gst" name="display_gst" size="10" disabled="disabled" /></td>
    </tr>
    <tr>
    <td>total</td>
    <td><input type="text" id="display_total" name="display_total" size="10" disabled="disabled" /></td>
    </tr>
    <tr>
    <td colspan="2"><input type="button" value="total up order" />
    </td>
    </tr>
    </tbody>
    </table>
	</form>

Code:

<img src = "/images/boats/large/my-red-pepper---8019812411a.jpg" width = "690" height = "350" id = "main_image"  />    <div id = "gallery_thumbs">
    <img src = "/images/nav_left.png" alt = "Back" id = "nav_back"  />        <div id = "inner_thumbs">
        <div style="width:10000px" id="sliding_thumbs">
        <a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019812411a.jpg"  /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019712411a.jpg"  /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019412411a.jpg"  /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019312411a.jpg"  /></a>

<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019212411a.jpg"  /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019512411a.jpg"  /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019612411a.jpg"  /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/big_my-red-pepper---12411-main.jpg"  /></a>
        </div>
        </div>

Why isn't this working? document.getElementById('main_image').src=this.href;return false;
I originally had this:

Code:

$('#sliding_thumbs a').click(function()
    {
        $('#main_image').attr('src',this.href);
        return false;
    })

but that didn't work so I put the onclick inline and it still isn't working but I can't fathom why. I have confirmed that the #main_image is being detected correctly (by alerting the src) and that the this.href part contains the url of an image but nothing happens. There is no error and the large image doesn't load in the same window (so the return false part is working!)

hi all,

when key pressed, in IE i can use this code:

event.keyCode=somenumber;

and it works. Is this possible in Netscape - Firefox - ..... ?

I need to controll the input, I want to allow users to use only keys I want them to use.

Thanks

If you wanted to change an ids onclick would int you just do this

document.getElementById("").onclick = "";

Is there a way to do it?

Hi

I am opening a child window with the following href.

If it is a completly new window, it is opened and the focus shifts to it,
... but ...

if that href has been clicked on before and the window exists, the focus stays with the parent window and does NOT shift to the child

How can I make the focus shift ?

here is my href:


PHP Code:
echo "<a href='$Ad_detail' rel=\"external\" onclick=\"window.open (this.href, '$Ad_detail', 'height=800,width=960,scrollbars');  return false\" > 


I guess I need a "window. ??? focus();" in there somewhere - but I don't know what the ??? should be.

If you can help - many thanks