[Javascript] Content Manager

[Glenn E. Lanier, II]

> From: tedd
> Sent: Wednesday, August 09, 2006 9:30 AM

> Does anyone have any references/code for a *very simple* content 
> manager -- please allow me to explain.
 
> What I am looking for is a way to edit a paragraph on a web site. 
> Perhaps a toggle icon where in one position (i.e., arrow pointing 
> down) the paragraph is non-editable text and click the icon (arrow 
> pointing toward the paragraph) and the paragraph becomes editable -- 
> like changing the "readonly" attribute of <textarea> tag via js.
 
> Does anyone have anything like that?

tedd,

What I've done in situations like this is to have two divs, each with an id
(divView, divEdit), and use JavaScript to make one visible or not based on
the a href selected.

I don't know if this will work in your situation -- or if this is even
considered the "preferred" way to do this (would love to hear if not
(especially with an example of how it should be done)).

--- HTML FILE ---
<p>
<a href="javascript:ViewSection('Requirements');">View Requirements</a> 
<a href="javascript:EditSection('Requirements');">Edit Requirements</a>  
<a href="javascript:HideSection('Requirements');">Hide Requirements</a>

</p>
<div id="divViewRequirements">
<p>View the text here</p>
</div>
<div id="divEditRequirements">
<textarea name="txtRequirements" id="txtRequirements" rows="10"
cols=60"><p>View the text here</p></textarea>
</div>


--- INCLUDE JS ---
function ViewSection(sSection)
{
	var sEditDivID = 'divEdit' + sSection;
	var sViewDivID = 'divView' + sSection;

	ShowItem(sViewDivID);
	HideItem(sEditDivID);
}


function EditSection(sSection)
{
	var sEditDivID = 'divEdit' + sSection;
	var sViewDivID = 'divView' + sSection;

	ShowItem(sEditDivID);
	HideItem(sViewDivID);
}

function HideSection(sSection)
{
	var sEditDivID = 'divEdit' + sSection;
	var sViewDivID = 'divView' + sSection;

	HideItem(sEditDivID);
	HideItem(sViewDivID);
}

	function toggle(elem)
	{
		if ( (elem.style.display == "") || (elem.style.display ==
"block"))
		{
			Hide(elem);
		}
		else
		{
			Show(elem);
		}
	}
	function Hide(elem)
	{
			elem.style.display = 'none';
	}
	function Show(elem)
	{
		elem.style.display = 'block';
	}
	

	function ShowItem(sName)
	{
		var elem = document.getElementById(sName);
		Show(elem);
	}

	function HideItem(sName)
	{
		var elem = document.getElementById(sName);
		Hide(elem);
	}
	
	function ToggleItem(sName)
	{
		toggle(document.getElementById(sName));
	}


--G