login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Navigatie > navpanel

navpanel

Auteur: haytjes - 18 september 2005 - 15:41 - Gekeurd door: nemesiskoen - Hits: 6577 - Aantal punten: 3.70 (5 stemmen)



tegenwoordig wordt er veel gesproken over ajax en meestal zitten er daar dan eye-candy's in, zoals navpanel (Navigation Panel). Als je wilt weten hoe dat er precies uit zie, kijk bij voorbeeld. Met dit script kan je dus navpanel toevoegen aan jouw site.

Zo moet je het aanroepen:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id='test'>
  2. 	<div>titel</div>
  3. 	<div>body</div>
  4. 	<div>titel</div>
  5. 	<div>body</div>
  6. </div>
  7. <script>navpanel(document.getElementById('test'));</script>


Ik heb het net gemaakt en er kunnen nog fouten in zitten, 'k zal ze er dan uithalen en hier de verbeterde versie op zetten.

[edit]
'k ben nog een paar dingen vergeten te zeggen:
Als je op de 1ste titel, <div style-all=''> zet, wordt de style (die daar staat) op alle titels toegepast.
Als je dan op de 2de titel <div style-all=''> zet, wordt de style (die daar staat) op alle body's toegepast.

De 1,3,5,7,9,n <div>= Titels
De 2,4,6,8,10,n <div>= Body's

Code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. 	// Made by Haytjes (http://www.alasal.be)
  3.  
  4. 	function navpanel(obj)
  5. 	{
  6. 		j = obj.childNodes.length;
  7. 		obj.style.cursor = 'default';
  8. 		x=0;
  9. 		for(i=0;i<j;i++)
  10. 		{
  11. 			if(obj.childNodes[i].tagName) // FF unknown tags
  12. 			{
  13. 				if(x%2 == 0)
  14. 				{
  15. 					if(x!=0) obj.childNodes[i].style.borderTop = obj.style.borderTop;
  16. 					if(x==0)
  17. 					{
  18. 						(!obj.childNodes[i].style.height)?height="20px":height=obj.childNodes[i].style.height;
  19. 						style_0_add="";
  20. 						style_0 = "";
  21. 						if(obj.childNodes[i].getAttribute("style-all"))
  22. 								style_0_add=obj.childNodes[i].getAttribute("style-all");
  23. 					}
  24. 					if(obj.childNodes[i].getAttribute("style"))
  25. 							style_0=obj.childNodes[i].getAttribute("style")+";";
  26. 					obj.childNodes[i].style.cssText = style_0+style_0_add;
  27. 					obj.childNodes[i].style.height = height;
  28. 					obj.childNodes[i].style.overflow = "hidden";
  29. 					eval("obj.childNodes[i].onclick = function(){navpanel_click(obj,"+(x+1)+");};");
  30. 				}
  31. 				else
  32. 				{
  33. 					if(x==1)
  34. 					{
  35. 						style_1_add="";
  36. 						style_1 = "";
  37. 						if(obj.childNodes[i].getAttribute("style-all"))
  38. 								style_1_add=obj.childNodes[i].getAttribute("style-all");
  39. 					}
  40. 					if(obj.childNodes[i].getAttribute("style"))
  41. 							style_1=obj.childNodes[i].getAttribute("style")+";";
  42. 					obj.childNodes[i].style.cssText = style_1+style_1_add;
  43. 					obj.childNodes[i].style.display='none';
  44. 					obj.childNodes[i].style.borderTop = obj.style.borderTop;
  45. 					obj.childNodes[i].style.overflow = "auto";
  46. 				}
  47. 				x++;
  48. 			}
  49. 		}
  50. 		obj.setAttribute("navpanel_t",x/2);
  51. 		obj.setAttribute("navpanel_t_h",height);
  52. 		navpanel_click(obj,1);
  53. 	}
  54. 	function navpanel_click(obj,id)
  55. 	{
  56. 		j = obj.childNodes.length;
  57. 		x=0;
  58. 		for(i=0;i<j;i++)
  59. 		{
  60. 			if(obj.childNodes[i].tagName) // FF unknown tags
  61. 			{
  62. 				if(x == id)
  63. 				{
  64. 					obj.childNodes[i].style.display ='block';
  65. 					obj.childNodes[i].style.height = 
  66. 						obj.style.height.substr(0,obj.style.height.length-2) - 
  67. 						obj.getAttribute("navpanel_t_h").substr(0,obj.getAttribute("navpanel_t_h").length-2) *
  68. 						obj.getAttribute("navpanel_t") - 
  69. 						obj.style.borderTopWidth.substr(0,obj.style.borderTopWidth.length-2) *
  70. 						(obj.getAttribute("navpanel_t")); // damned 'px'
  71. 				}
  72. 				else if(x%2!=0)
  73. 					obj.childNodes[i].style.display='none';
  74. 				x++;
  75. 			}
  76. 		}
  77. 	}
  78. </script>
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (2)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.04s