Clear the contents of div.

Question

Bob Arctor 0 Newbie Poster

15 Years Ago

Hello all,

I have a page where the user clicks a link, one of several, and some text is displayed.
The code I have does exactly that.
My question is how do I show only the the current text inside the div container ?
I've had a look at clearing innerHTML and div's. I just cannot seem to implement this.
Help appreciated.

Regards.

<script text/javascript>
	function ChangeOne() {
	
	document.getElementById("text1").innerHTML = '<p>Text 1</p>';
    }
	
	function ChangeTwo() {
	
	document.getElementById("text2").innerHTML = '<p>Text 2</p>';
    }


    ...

</script>

<div id="content">
	
	<div id="text1"></div>
	<div id="text2"> </div>
        ...
            
</div>



<a href="#" onclick="ChangeOne();">Link to text 1</a><br />

<a href="#" onclick="ChangeTwo();">Link to text 2</a><br />

    ...

javascript

3 Contributors
6 Replies
515 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by Bob Arctor

Airshow 416 WiFi Lounge Lizard

15 Years Ago

Bob Arctor,

Something like this maybe?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
{}
</style>

<script text/javascript>
//http://www.daniweb.com/forums/thread194841.html

function showText(x, txt) {
	var number_of_text_divs = 3;
	for(var i=1; i<=number_of_text_divs; i++){
		var container = (document.getElementById) ? document.getElementById("text"+i) : document.all["text"+i];
		if(i==x) { container.innerHTML = txt; }
		else { container.innerHTML = ''; }
	}
	return false;
}
</script>
</head>

<body>
<div id="content">
	<div id="text1">&nbsp;</div>
	<div id="text2">&nbsp;</div>
	<div id="text3">&nbsp;</div>
</div>
<a href="" onclick="return showText(1, 'text1');">Link to text 1</a><br />
<a href="" onclick="return showText(2, 'text2');">Link to text 2</a><br />
<a href="" onclick="return showText(3, 'text3');">Link to text 3</a><br />
</body>
</html>

Airshow

essential 84 Posting Shark

15 Years Ago

Here's another example, that allow's you to inject elements inside the targeted div and also lets you clear the whole injected content, by clicking on the same link again.

Comes with a single function ChangeText() .

All codes is as follows:

<html>
<head>
<title>Test Page</title>
<script type="text/javascript">

function ChangeText( ids ) {

   ids = (( document.getElementsById ) ? document.getElementById( ids ) : (( document.all ) ? document.all[ ids ] : document.layers[ ids ] ));

   txt = "<p>Text " + String( ids.id.match(/\d+/g)[ 0 ] ) + "</p>\n";
   ids.innerHTML = (( ids.innerHTML.length >= 1 ) ? "" : txt );
}
 </script>
</head>
<body>
<div id="content">
<div id="text1"></div>
<div id="text2"></div>
<div id="text3"></div>
<div id="text4"></div>
<div id="text5"></div>
      
</div>



<a href="javascript:void(ChangeText('text1'));">Link to text 1</a><br />

<a href="javascript:void(ChangeText('text2'));">Link to text 2</a><br />
<a href="javascript:void(ChangeText('text3'));">Link to text 3</a><br />
<a href="javascript:void(ChangeText('text4'));">Link to text 4</a><br />
<a href="javascript:void(ChangeText('text5'));">Link to text 5</a><br />
</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2009-05-31T08:58:01+00:00

Airshow 416 WiFi Lounge Lizard

15 Years Ago

Oooh, toggle action. I like it Ess.

Airshow

Bob Arctor 0 Newbie Poster · Answer 2 · 2009-05-31T16:06:48+00:00

Oooh, toggle action. I like it Ess.
Airshow

Yes, I'm intrigued. Unfortunately I cannot get the code you kindly provided to work. What am I not doing ? I can't seem to associate the text with the link ?

@airshow. Thank you. That's just what I was looking for. That will save me hours of frustration. I just could not figure how to 'clean up' the script activity. Can that be applied to an image src ? Do the same general rules apply ?
Each link has an image associated also with some JavaScript on the id. It's quite a nice understated effect.

document.write("<style type='text/css'>#fade {visibility:hidden;}</style>");
		
		function loadPhoto() {
			imageid = 'fade';
			image = document.getElementById(imageid);
			setOpacity(image, 0);
			image.style.visibility = 'visible';
			fadeIn(imageid,0);
			}
			
		function setOpacity(obj, opacity) {
			opacity = (opacity == 100)?99.999:opacity;
		  
			// ieWin
			obj.style.filter = "alpha(opacity:"+opacity+")";
			// safari<1.2, konqueror
			obj.style.KHTMLOpacity = opacity/100;
			// older Mozilla and firefox
			obj.style.MozOpacity = opacity/100;
			// safari 1.2, newer firefox and mozilla, CSS3
			obj.style.opacity = opacity/100;
			}

		function fadeIn(objId,opacity) {
			if (document.getElementById) {
				obj = document.getElementById(objId);
				if (opacity <= 100) {
					setOpacity(obj, opacity);
					opacity += 10;
					window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
					}
				}
			}
		 //Commented out to avoid conflict see body tag.
		//window.onload = function() {loadPhoto()}

<div id="photoholder">
          <img src="/img/linkimage.jpg" alt="image" id="fade" />
        </div>

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2009-06-01T01:08:28+00:00

Bob,

Yup, you can do similar with images. For absolutely minimal code writing, you can use one of the javascript libraries such as Jquery which has several effects like this built in. I'm not a Jquery expert but people say good things about it (and other libs) here on Daniweb. The only problem with libs is learning them in addition to your basic javascript. The good thing is their instant, well tested, cross-browser capabilities.

My D.I.Y. code below takes your functions setOpacity() and fadeIn(), and builds them (with a few mods) into a constructor which can be applied, by id, to an img on the page (after the img has been constructed). It's a bit more involved than simply showing/hiding text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<html>
<head>
<title>Airshow :: Untitled</title>
<script text/javascript>
//http://www.daniweb.com/forums/thread194841.html

function Fader(objId, initOpacity) {
	objId = (!objId) ? '' : objId;
	initOpacity = (!initOpacity) ? 0 : initOpacity;
	var oStep, oCurrent, ref, tim = null;
	this.targetOpacity = null;
	var obj = (document.getElementById) ? document.getElementById(objId) : document.all[objId];
	var init = function(opacity){ setOpacity(opacity); return oCurrent = opacity; }
	var setOpacity = function(opacity) {
		if (!obj || opacity == NaN || opacity === null) { return false; }
		opacity = Math.max(0, Math.min(99.999, parseInt(opacity)));
		obj.style.filter = "alpha(opacity:" + opacity + ")";// ieWin
		obj.style.KHTMLOpacity = opacity/100;// safari<1.2, konqueror
		obj.style.MozOpacity = opacity/100;// older Mozilla and firefox
		obj.style.opacity = opacity/100;// safari 1.2, newer firefox and mozilla, CSS3
	};
	var getOpacity = function() {
		if (!obj) { return false; }
		return (obj.style.KHTMLOpacity) ? (obj.style.KHTMLOpacity * 100) : (obj.style.MozOpacity) ? (obj.style.MozOpacity * 100) : (obj.style.opacity) ? (obj.style.opacity * 100) : null;

	};
	this.fade = function(steps){
		if (!obj) { return false; }
		oCurrent = Math.max( 0, Math.min( 100, ( parseInt(getOpacity()) || oCurrent ) ) );
		oStep = (this.targetOpacity - oCurrent) / steps;
		this.fadeIt();
	};
	this.fadeIt = function(){
		clearTimeout(tim);
		oCurrent += oStep;
		if( (oStep>0 && oCurrent<this.targetOpacity) || (oStep<0 && oCurrent>this.targetOpacity) ) {
			setOpacity(oCurrent);
			tim = setTimeout('Fader.g['+ref+'].fadeIt()', 100);
		}
		else{ setOpacity(this.targetOpacity); }
	}
	this.targetOpacity = init(initOpacity);
	if(!Fader.g) { Fader.g = []; }
	ref = Fader.g.length;
	Fader.g.push(this);//Makes "this" instance callable from global scope.
}

function fade(x) {
	for (var i=0; i<faders.length; i++){
		if (faders[i]) {
			faders[i].targetOpacity = (i==x && faders[i].targetOpacity == 0) ? 100 : 0;
			faders[i].fade(10);
		}
	}
	return false;
}

var faders = [];
onload = function(){
	faders[0] = new Fader('img0', 100);
	faders[1] = new Fader('img1', 0);
	faders[2] = new Fader('img2', 0);
	faders[3] = new Fader('img3', 0);
}
</script>
</head>

<body>

<div id="content">
	<div><img id="img0" src="http://www.daniweb.com/alphaimages/logo/logo.gif" width="221" height="50" /><span id="msg0"></span></div>
	<div><img id="img1" src="http://www.daniweb.com/alphaimages/logo/logo.gif" width="221" height="50" /><span id="msg1"></span></div>
	<div><img id="img2" src="http://www.daniweb.com/alphaimages/logo/logo.gif" width="221" height="50" /><span id="msg2"></span></div>
	<div><img id="img3" src="http://www.daniweb.com/alphaimages/logo/logo.gif" width="221" height="50" /><span id="msg3"></span></div>
</div>

<a href="" onclick="return fade(0);">Link to text 1</a><br />
<a href="" onclick="return fade(1);">Link to text 2</a><br />
<a href="" onclick="return fade(2);">Link to text 3</a><br />
<a href="" onclick="return fade(3);">Link to text 4</a><br />

</body>
</html>

Maybe someone would be kind enough to post a jquery equivalent and you will see how much more economical the code is.

Hope this helps

Airshow

Bob Arctor 0 Newbie Poster · Answer 4 · 2009-06-01T14:17:56+00:00

Bob,
Hope this helps
Airshow

Airshow - Yes it does.
More than enough to be getting on with.
Thanks.