JavaScript - Changing Css Styles Automatically With Javascript Drop-downs

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";
			}
		}

How are you guys?

Is there a possible thing?
I've got 16 pages, one for each of 16 days.
Then I've got index page. Where will be mine usual stuff but I want to add 16 visible buttons and under each button will be its content, let say for example a picture with some text. I need automatically when user open mine index for example 3rd to show 3rd picture with some text. Is that possible?
To be more specific. I need some content to be automatically changed from 1st of January 2010 to 17th of January 2010.

I work at a college radio station and our brand new website just went live, but we're having one particular issue...

We have a set list of shows that air each day, and on the site we have a marquee tag on the homepage that scrolls through showing each show and its broadcast time. Right now we're stuck changing this schedule each day by hand, but it's tough considering we're all college students ourselves and sometimes our own schedules simply don't allow the time.

Is there a code that would allow this kind of a daily update to happen automatically?

The format for the schedule is such:
4 - 5 pm // "Show 01"
5 - 6 pm // "Show 02"
6 - 8 pm // "Show 03"
8 - 10 pm // "Show 04"
10 - 12 am // "Show 05"

Any help would be very much appreciated!

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 am very new to Javascript and I have been able to get the menu to close and open, but I can't figure out how to start it up automatically closed at first.

I've tried setting ids and values, but nothing seems to work! Please help me out!

Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Lab 5_3</title>
<script type="text/javascript">
function collapseItem(whichitem)
{
	if (document.getElementById(whichitem).style.display == "none")
	{
		document.getElementById(whichitem).style.display = "block";
	}
	else
	{
		document.getElementById(whichitem).style.display = "none";
	}
}
</script>
</head>
<body>
<p><a href="#" onClick="collapseItem('category1')">Menu 1</a></p>
<div id="category1">
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
  </ul>
</div>
</body>
</html>

I saw this on the web the other day and didn't mark the page I found it on. How do I change an image based on what selection is made in a drop down?

Kathy

I am developing a web application based on a Java servlet. The servlet outputs html and javascript codes and receives some result from a thread, which works behind the servlet.
Thus, html and javascript codes dynamically varies.

While result equals null (a thread is not completed), it shows "Currently processing," and refreshes Code:

<div id="load"> - </div>

every second automatically.
After receiving some results, it should stop automatic refreshing and show "Done."

I wrote source codes described below. It shows "Done" after getting some results, but does not stop refreshing.
However, when I manually refresh the page (Ctrl-R), the script is loaded and reloading is stopped.

How can I pull javascript codes automatically?

Code:

<head>
<script type=\"text/javascript\">
var auto_refresh = setInterval(
function start()
{
$('#load').load('./Page' + ' #load');
}, 1000);
</script>           
</head>

<div id="load">
if (result == null) {
    // the variable result is received from a behind thread every second. 
    // while a thread is processed
    <p>Currently processing. <p>
    
} else {
    // a thread is completed

    // try to stop reloading
    <script type=\"text/javascript\">
    clearInterval(auto_refresh);
    </script> 

    <p>Done. <p>
} 
</div>

Hello guys, im working on another little project for my team here, and the way our system works is in order to change a persons password, there is a certain link that has to be accessed...for example...if i want to change a persons password, lets say

UserID: t-test100
current pass: 911

and i want to change the password to 999 instead of 911...there is a link that needs to sorta load the profile in the background first in order to do the password change, i got the password change page down to a T and it works like a charm, but ONLY when the link is accessed, so for example, this is how the link would look like

https://www.***.com/Sps/jsp/MyChange...?uid=t-test100

as soon as that URL is accessed, my code that i made for the password reset, works, but if i open a fresh window (where no cookies have been logged) and i go directly to my page where i have the script to change the password, it will come back with an error, but when i go to that URL and then back to my script and run it again, it works fine....SOOOO...back to my question...how would i be able to make it so that i have an extra link on my site that i can add to go to https://www.***.com/Sps/jsp/MyChange...?uid=t-test100 URL in a new window...but i want it so that when i click the link, it opens up the URL and closes the window after 1 second...or less...just so that it loads the URL in the background and thats it basically what i need to do, just for it to open for a split second, for the browser to register that i've visited the URL for that particular username, and then so that when i try to change the password, it goes through.

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.

all i have to do is the image to change automatically based on the option you selected from the drop down list.
here is the code, any help is appreciable. thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img{
height:95px;
width:95px;
display:block;
margin-top:10px;
}
#caption{
font-family:Verdana,tahoma,arial;
font-size:8pt;
text-align:left;
display:block;
width:250px;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var caption=['Default Image Caption',
'begonia',
'daffodils',
'mixture',
'natural',
'purple',
'red flower',
'sunflower',
'tulip',
'two flowers'], // This will be your images caption
bp='..\images', //base url of your images
imgnum=9, //Number of your images. This should match on your comboboxes options.
thumb=document.getElementById('thumb'), //id of your image that will be changing
description=document.getElementById('caption'), //id of your caption
combobox=document.getElementById('selection'); // id of your combobox.

combobox.onchange=function()
{
thumb.src=bp+'Picture'+this.value+'.jpg';
description.innerHTML=caption[this.value];
}
}
</script>
</head>
<body>
<label>Please Change the pictu </label>
<select id="selection">
<option>Change Picture</option>
<option value="1">begonia</option>
<option value="2">daffodils</option>
<option value="3">mixture</option>
<option value="4">natural</option>
<option value="5">purple</option>
<option value="6">red flower</option>
<option value="7">sunflower</option>
<option value="8">tulip</option>
<option value="9">two flowers</option>
</select>
<br>
<img src="..\images" alt="mypic" id="thumb">
<span id="caption">Caption for the default Image</span>
</body>
</html>
thanks again

Hi coders,

I need to achieve two things upon making a selection from a drop down field:

1) Changing the background picture of a cell.
2) Changing the size of a uploaded foreground picture within the same cell.


Code:

<select name=ADDITIONALINFO> 
<option value="25 x 25">25 x 25</option> 
<option value="35 x 35">35 x 35</option> 
<option value="45 x 45">45 x 45</option> 
<option value="55 x 55">55 x 55</option> 
</select>

Any guidance how to achieve this is appreciated.

Hello All.

I'm trying to create a file upload page with pre-uploading preview, and using JS to change the images src upon selecting a local file. this works great, but unfortunatelly only for some image files, even though files were taken by the same camera,the same size, and created on the same date. I can't figure out for the life of me what is going on. The Code :

<script>
function changeImage(newSrc)

var str = newSrc.toLowerCase();
cImg=document.getElementById("chngImg");
cImg.src=str;

</script>


<HTML>
<BODY BGCOLOR="#FFFFFF">
<FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="UploadScript1.asp" rel="nofollow" target="newWnd">
File 1:<INPUT TYPE=FILE NAME="FILE1" onchange="changeImage(this.value);">
<INPUT TYPE=SUBMIT VALUE="Upload!">
</FORM>

<div><img src="oren1.jpg" id="chngImg"></div>

</BODY>

</HTML>

Best Regards
Oren Pildus

Is it possible to use Javascript to dynamically change the PHP file used for an include?

For example, if I have a php doc like

Code:

<html>
  <body>
    <div>other stuff</div>
    <div>
      <?php include('onefile.php'); ?>
    </div>
    <div>more other stuff</div>
  </body>
</html>

I can get Javascript to remove the included stuff, but I can't figure out how to change the <?php include('onefile.php'); ?> into <?php include('otherfile.php'); ?>.

What would be the best way to do that?

hi i am totally frustrated !!
i have been using this on my webpage.
http://www.barelyfitz.com/projects/tabber/

if u see under the advanced section there is a code for changing tabs dynamically.

Code:

document.getElementById('mytab1').tabber.tabShow(0);

this doesn't work.
basically i have a webpage internet.htm. which has a menubar with loads of menu items.
if i click one of the submenu items this code should change the dynamic tabs in admin.htm. the code i have defined for the submenu click is:
Code:

<li><a href="admin.htm" onClick="document.getElementById('Admin').tabber.tabShow(0)" >Forms</a></li>

the full code is:


Code:

<ul id="QualityMenuBar" class="MenuBarHorizontal">
                  <li><a class="MenuBarItemSubmenu" href="#"><strong>Admin</strong></a>
                    <ul>

                    
                      <li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(0)" >Forms</a></li>
                      <li><a href="AdminDocuments.htm"  >Guidance</a></li>
                      <li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(2)" >Organisation Chart</a></li>
                      <li><a href="AdminDocuments.htm">Plans</a></li>
                      <li><a href="AdminDocuments.htm">Procedures</a></li>
                    </ul>
                  </li>

this is what the admindocuments.htm contains, based on the website link i have borrowed the code from.

Code:

<div class="tabber" id="admin">

     <div class="tabbertab">
	  <h2>Forms</h2>
   
<script type="text/javascript" src="adminForms.js"></script>

     </div>


      <div class="tabbertab">
	  <h2>Guidance</h2>

       
	<script type="text/javascript" src="adminGuidance.js"></script>
     </div>


     <div class="tabbertab">
	  <h2>Org. Chart</h2>
	<script type="text/javascript" src="adminOrg.js"></script>
     </div>
     
     
       <div class="tabbertab">
	  <h2>Plans</h2>
	<script type="text/javascript" src="adminPlans.js"></script>
     </div>
     
     
       <div class="tabbertab">
	  <h2>Procedures</h2>
	 <script type="text/javascript" src="adminProc.js"></script>
     </div>

</div>

whenever i click the submenu they all point to the first tab only. it doesn't change inspite of the code.
what am i doing wrong here?

please advice.
Many thanks.

Hey

I got two text boxes one for start date and second for end date in that i want to fill text boxes according to Quarter of a year, as like if i put 1-4-2012 in first text box then in second text box values should be automatically 30-6-2012.
So now tell me please how to do this ???????

Regards
rajboy13
Contact me @ = rajboy13@gmail.com