Jump to content

Script Combinations

Tandino

By Tandino
in JavaScript

Recommended Posts

Tandino Newbie

Tandino

Posted
Posted

I have tweaked some scripts I found regarding showing and hiding divs on a page. My goal is to have invisible divs when the page loads, then upon clicking a link, having them appear. so far I have two scripts that work, but only independantly of each other. I tried to combine them but with no success. can anyone offer any help?here are the two scripts I've been working with:

	 <html>	 <head>	 <script>	 function opacity(id, opacStart, opacEnd, millisec) {		 //speed for each frame		 var speed = Math.round(millisec / 100);		 var timer = 0;	 		 //determine the direction for the blending, if start and end are the same nothing happens		 if(opacStart > opacEnd) {			 for(i = opacStart; i >= opacEnd; i--) {				 setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));				 timer++;			 }		 } else if(opacStart < opacEnd) {			 for(i = opacStart; i <= opacEnd; i++)				 {				 setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));				 timer++;			 }		 }	 }	 	 //change the opacity for different browsers	 function changeOpac(opacity, id) {		 var object = document.getElementById(id).style; 		 object.opacity = (opacity / 100);		 object.MozOpacity = (opacity / 100);		 object.KhtmlOpacity = (opacity / 100);		 object.filter = "alpha(opacity=" + opacity + ")";	 }	 	 function shiftOpacity(id, millisec) {		 //if an element is invisible, make it visible, else make it visible		 if(document.getElementById(id).style.opacity == 0) {			 opacity(id, 0, 99, millisec);		 } else {			 opacity(id, 99, 0, millisec);		 }	 }	 </script>	 </head>      	 <body>	 <div id="target">This division should switch on/off by the click of the link</div>	 <a href="java script:shiftOpacity('target', 500)">show/hide</a> 	 	 	 <div style="position:relative; width:300px" 	   onclick="document.getElementById('appearing').style.display='block'" 	   onclick="document.getElementById('appearing').style.display='none'">	   	   <b>Link</b><br/>	   	   <div id="appearing" style="position:relative; display:none" >	   The text is invisible until you click on "link"	   </div>	 	 </div> </body>	 </html>

How can I combine them to get an on/off switch that toggles a fading div?

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

to get the div "appearing" to work try this<div style="position:relative; width:300px; padding: 10px;"> <a href="#" onclick="runthis();" ><b>Link</b></a> <div id="appearing" style="position:relative; display:none" > The text is invisible until you click on "link" </div> </div> <script type="text/javascript"> function runthis() { var x = document.getElementById('appearing').style; if (x.display == "none") { x.display="block"; } else { x.display="none"; } } </script>

Link to comment
Share on other sites
casper3912 Newbie

casper3912

Posted
Posted

Tandino, i'm working on something similar, fading the divs sound better then just making them appear and disappear. do you mind if i use those functions? i probably will modify them and combine them with what i already wrote. casper.

Link to comment
Share on other sites
Tandino Newbie

Tandino

Posted
  • Author
Posted

Whoever said "teachers don't teach, they only show you the way was right. You all got me thinking in the right track. I think I am close to the solution. I also added a timeout in function fadeinout(). before that was in there it was disappearing too quickly. the following code works, but there is an annoying flashing that happens before the first fade in... any ideas?Casper, feel free to use the code, then if you make changes, we can compare when we're done.

<html><head><script>function opacity(id, opacStart, opacEnd, millisec) {	//speed for each frame	var speed = Math.round(millisec / 100);	var timer = 0;	//determine the direction for the blending, if start and end are the same nothing happens	if(opacStart > opacEnd) {		for(i = opacStart; i >= opacEnd; i--) {			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));			timer++;		}	} else if(opacStart < opacEnd) {		for(i = opacStart; i <= opacEnd; i++)			{			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));			timer++;		}	}}//change the opacity for different browsersfunction changeOpac(opacity, id) {	var object = document.getElementById(id).style; 	object.opacity = (opacity / 100);	object.MozOpacity = (opacity / 100);	object.KhtmlOpacity = (opacity / 100);	object.filter = "alpha(opacity=" + opacity + ")";}function shiftOpacity(id, millisec) {	//if an element is invisible, make it visible, else make it visible	if(document.getElementById(id).style.opacity == 0) {		opacity(id, 0, 99, millisec);	} else {		opacity(id, 99, 0, millisec);	}}function fadeinout(id) {	//if element is visible, make it invisible, else make it visible	if(document.getElementById('target').style.display == 'block') {		shiftOpacity(id, 500);		setTimeout( "document.getElementById('target').style.display='none';", 500);	} else {		document.getElementById('target').style.display='block';		shiftOpacity(id, 1000);	}}</script></head><div style="position:relative; width:300px">    <a href="#" onclick="java script:fadeinout('target')">Link</a><br/>    <div id="target" width="300px" style="position:relative; display:none" >  The text is invisible until you click on "link"  </div>  This shows how other content on the page will be affected by the changing divs...</div> </body></html>

Link to comment
Share on other sites
Tandino Newbie

Tandino

Posted
  • Author
Posted

I got the flicker to go away too. I set the initial opacity of the fading element to 0 in the CSS. unfortunately IE doesn't yet recognize the opacity property, but luckily they have something analogous. I added the following to my CSS sheet:

#target { 	opacity: 0.0;	filter: alpha(opacity=0);	-moz-opacity:0.0;	}

Link to comment
Share on other sites
Tandino Newbie

Tandino

Posted
  • Author
Posted

More confusion: I tried adding another function, with a timeout().it should do the following:1. If object is invisible, make it visible, then after 3000ms make it invisible again.2. If object is visible, clear the timeout() function and make it invisible.instead, what happens is if you click on the visible object, it disappears and after a few moments reappears only to disappear again. It is clear that the timeout is not being cancelled. I tried every combination I could think of, but i can't get it to work! How should I properly close the clearTimeout()?

function timerfade(id, millisec) {	if(document.getElementById(id).style.opacity == 0) {		opacity(id, 0, 99, millisec);		setTimeout("opacity('cv2', 99, 0, 700);", 3000);	}  else {		clearTimeout();		opacity(id, 99, 0, millisec);	}}

Link to comment
Share on other sites
Tandino Newbie

Tandino

Posted
  • Author
Posted
You need to send the ID of the timeout to clear to the clearTimeout function. setTimeout will return an ID, you need to send that ID to clearTimeout so that it knows which timeout to clear.
 function timerfade(id, millisec) {	 var t;	 if(document.getElementById(id).style.opacity == 0) {		 opacity(id, 0, 99, millisec);		 t = setTimeout("opacity('cv2', 99, 0, 700);", 3000);	 }  else {		 clearTimeout(t);		 opacity(id, 99, 0, millisec);	 } }

I set it up with a variable and an id, but it still doesn't seem to work. :)

Link to comment
Share on other sites
Tandino Newbie

Tandino

Posted
  • Author
Posted
Make the variable global, i.e. declare it outside the function instead.
var t; function timerfade(id, millisec) {	  ...

Works perfectly! literally "thinking outside the box" ...or the function :)thank you!
Link to comment
Share on other sites
casper3912 Newbie

casper3912

Posted
Posted

i'll show you how i'm using your functions, they make what i'm doing alot better.what i have is a list, a user clicks on a link in the list and the current section fades away and the new one fades in to view. I can have sections inside of sections as well. so a section can have its own menu and subsections that can appear and disappear. i'm currently having only one problem, "parent.getAttribute is not a function" on line 37 The divs uses a naming scheme.div1, div2, div3 are all siblings; div1div1,div1div2 are also siblings and children of div1; div1div1, div2div1 are cousins etc.for a while i was having a problem when going from a more nested section to an 'uncle' section or such, utilizing the naming scheme let me eliminate that problem.thanks for the functions to use, they make it a better user experience. 

/*global vars*/var currentDiv;var Appear;/* ABSTRACT-prepareInternalnav and showSection()AddEventsHides and shows different sections of a site.-----------------------------INDEX*//*modified from the book "Dom Scripting" by Jeremy Keith */function prepareInternalnav() {	var navs = document.getElementsByName("ProductNav");	var OpenerDiv = readCookie('SectionID');	eraseCookie('SectionID');	for (var j=0; j <navs.length; j++) {		var links = navs[j].getElementsByTagName('a');		navs[j].getElementsByTagName('li')[0].setAttribute('className','FirstLI');		for (var i=0; i <links.length; i++) {			var sectionId = links[i].getAttribute('href').split('#')[1];			if(!document.getElementById(sectionId)) continue;			 if(j == 0 && i == 0 && document.getElementById(sectionId)== document.getElementById(sectionId).parentNode.getElementsByTagName('div')[0] && !OpenerDiv){			document.getElementById(sectionId).style.display = 'block';			}else{				document.getElementById(sectionId).style.display = 'none';				links[i].parentNode.className ='';			}			links[i].destination = sectionId;			links[i].onclick = showSection;		}	}			if ( document.getElementById(OpenerDiv)!= null && document.getElementById(OpenerDiv)!=''){					document.getElementById(OpenerDiv).style.display = 'block';					var Parent = document.getElementById(OpenerDiv).parentNode;					while (Parent.getAttribute('id') != 'content' || Parent.getAttribute('id') !='ProductForm'){						Parent.style.display = 'block';						Parent = Parent.parentNode;					}			}}	addLoadEvent(prepareInternalnav);	function showSection(e){	e = e?e:window.event;  var obj = e.srcElement?e.srcElement:e.target;  obj = (obj.nodeType == 1)?obj:obj.parentNode;  var id = obj.destination  	var Divs = document.getElementById(id).parentNode.getElementsByTagName('div');	for (var i=0; i <Divs.length; i++) {		if (Divs[i].style.display != 'none' && Divs[i].id != 'CheckOut') {			currentDiv =Divs[i];			if(id == Divs[i].getAttribute('id')) { continue;}			Divs[i].style.opacity = .99;			Divs[i].style.MozOpacity = .99;			Divs[i].style.KhtmlOpacity = .99;			Divs[i].style.filter = "alpha(opacity=99)";			shiftOpacity(currentDiv.getAttribute('id'), 499);		 }if(Divs[i].getAttribute('id') == id ) {			Appear = Divs[i];			Divs[i].style.opacity = 0;			Divs[i].style.MozOpacity = 0;			Divs[i].style.KhtmlOpacity = 0;			Divs[i].style.filter = 'alpha(opacity=0)';			setTimeout('while (currentDiv.id.match(/Div/g).length > Appear.id.match(/Div/g).length){currentDiv.style.display=\'none\';currentDiv = currentDiv.parentNode;}currentDiv.style.display=\'none\';',499);			setTimeout('Appear.style.display = \'block\';shiftOpacity(Appear.getAttribute(\'id\'),500)',500)	 		}					}		return false;	}

Link to comment
Share on other sites
casper3912 Newbie

casper3912

Posted
Posted

curse IE, i developed this in firefox. In IE everything is still accessible, but the script doesn't do anything...hmmm does IE not support the 'getElementsByName()' ability perhaps?, i'm trying to figure out why its not working in IE and how to get around it. i'll do my research..argh, curses to IE.

Link to comment
Share on other sites
casper3912 Newbie

casper3912

Posted
Posted

This helps

/*http://www.dreamincode.net/code/snippet293.htm*/function getElementsByName_iefix(tag, name) {	 	 var elem = document.getElementsByTagName(tag);	 var arr = new Array();	 for(i = 0,iarr = 0; i < elem.length; i++) {		  att = elem[i].getAttribute("name");		  if(att == name) {			   arr[iarr] = elem[i];			   iarr++;		  }		 } 	return arr;}

Link to comment
Share on other sites
griffinmt Newbie

griffinmt

Posted
Posted
This helps
/*http://www.dreamincode.net/code/snippet293.htm*/function getElementsByName_iefix(tag, name) {	 	 var elem = document.getElementsByTagName(tag);	 var arr = new Array();	 for(i = 0,iarr = 0; i < elem.length; i++) {		  att = elem[i].getAttribute("name");		  if(att == name) {			   arr[iarr] = elem[i];			   iarr++;		  }		 } 	return arr;}

Couldn't you just add the id='...' as well as using name='...' That way you could fall back to just using getElementById which seems to work everywhere.
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Only one element in the document can have a specified ID, however, multiple elements can have the same name. You must keep in mind, though, that only certain elements allow the name attribute.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...