DHTML + Mozilla


  • xEPROMx
  • 1104 Aufrufe 3 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • DHTML + Mozilla

    nabend zusammen ,

    habe mir über die tage ne kleine HP gebastelt .
    Leider musste ich nun feststellen das mein DHTML - Nagationsmenü(deep-tree)
    leider nicht auf Mozilla (auch Firefox) reagiert !
    :flag:
    Im IE 6.0 geht alles wunderbar .....

    weiß von euch jemand zufällig ne möglichkeit ,
    das ich die navigation auch mit Mozilla sehen kann?

    habe das ganze momentan noch lokal aufm rechner ....deshalb kein link!
    EDIT : htt*://eprom.dyn.ee <-nicht immer Online !!!!
    hier der Coode:

    HTML-Quellcode

    1. --
    2. '*********************************************************************************
    3. ' COMobjects.NET Deep Tree Script(c) Fedor Skvortsov, COMobjects.NET. November, 2001
    4. ' Mailto: [email]fed@comobjects.net[/email]
    5. ' WWW: [url]http://comobjects.net[/url]
    6. '*********************************************************************************
    7. -->
    8. <html>
    9. <head>
    10. <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    11. <style type="text/css">
    12. a
    13. {
    14. color: #003399;
    15. text-decoration: none;
    16. }
    17. a:hover
    18. {
    19. color: red;
    20. text-decoration: none;
    21. }
    22. .load
    23. {
    24. font-size: 11px;
    25. background-color:infobackground;
    26. border-width:1px;
    27. border-color:black;
    28. border-style:solid;
    29. width:10px;
    30. }
    31. LI
    32. {
    33. margin-left:-25px;
    34. list-style-type:none;
    35. list-style-image:none;
    36. font-family:verdana;
    37. font-size:8pt;
    38. }
    39. .treenode
    40. {
    41. margin-left:3px;
    42. font-size: 8pt;
    43. border-width:1px;
    44. border-color:White;
    45. border-style:solid;
    46. }
    47. .treenodesel
    48. {
    49. font-size: 8pt;
    50. margin-left: 3px;
    51. border-width:1px;
    52. border-color:Navy;
    53. border-style:solid;
    54. }
    55. .treenodeover {
    56. margin-left:3px;
    57. font-size: 8pt;
    58. border-width:1px;
    59. border-color:White;
    60. border-style:solid;
    61. }
    62. .treenodeselover
    63. {
    64. font-size: 8pt;
    65. margin-left: 3px;
    66. border-width:1px;
    67. border-color:Blue;
    68. border-style:solid;
    69. }
    70. </style>
    71. <script language="jscript">
    72. //Root Tree
    73. var sRootTree = "TOC/Root.xml"
    75. //Images
    76. var sImagesPath = "Images/";
    77. var sImageNone = sImagesPath + "none.gif";
    78. var sImagePlus = sImagesPath + "plus.gif";
    79. var sImageMinus = sImagesPath + "minus.gif";
    80. //Styles
    81. var sNodeLoadingClass = "load";
    82. var sNodeClass = "treenode";
    83. var sNodeOverClass = "treenodeover";
    84. var sNodeSelClass = "treenodesel"
    85. var sNodeSelOverClass = "treenodeselover"
    86. //Text
    87. var sCancelLoad = "Loading...";
    89. //XML Document which contains tree
    90. var oXML;
    91. //Base href for current loading node
    92. var sBaseHref;
    93. //Selected node
    94. var oSelNode;
    95. //Curent loading node. Only one node can be being loading at one moment!*/
    96. var loadingNode;
    98. //Show loading node [Loading...]
    99. function showLoadingNode(Node){
    100. var oDiv;
    101. oDIV = document.createElement("<div>");
    102. oDIV.className = sNodeLoadingClass;
    103. oDIV = Node.appendChild(oDIV);
    104. oDIV.innerText = sCancelLoad;
    105. oDIV.onclick = cancelLoad;
    106. }
    108. //Hide loading node
    109. function hideLoadingNode(Node){
    110. try{
    111. if (Node.childNodes.length>1){
    112. oDIV = Node.childNodes(1);
    113. Node.removeChild(oDIV);
    114. }
    115. }
    116. catch(x){}
    117. }
    119. //This function builds tree.
    120. //Parameter sourceNode is a XML source node, resultNode is a produced HTML node,
    121. //expanded specifies whether display resultNode expanded or not.
    123. function buildTree(sourceNode, resultNode, expanded){
    124. var oLI, oUL, oIMG, oA, oNOBR, i, oNodeAttributes;
    125. var sIcon, sName, sHref, sTarget, sSrc;
    126. //Create container for child nodes
    127. oUL = document.createElement("<ul>");
    128. oUL = resultNode.appendChild(oUL);
    129. //if node expanded then display container
    130. if (expanded=="true"){
    131. oUL.style.display="block";
    132. }
    133. else{
    134. oUL.style.display="none";
    135. }
    136. //Run over nodes in XML source
    137. for (i=0;i<sourceNode.childNodes.length;i++){
    138. //Set obligatory values
    139. oNodeAttributes = sourceNode.childNodes(i).attributes;
    140. sIcon = oNodeAttributes.getNamedItem("icon").value;
    141. sName = oNodeAttributes.getNamedItem("name").value;
    142. //Set optional values
    143. if (oNodeAttributes.getNamedItem("href")!= null){
    144. sHref = oNodeAttributes.getNamedItem("href").value;
    145. }
    146. else{
    147. sHref = "";
    148. }
    149. if (oNodeAttributes.getNamedItem("target")!=null){
    150. sTarget = oNodeAttributes.getNamedItem("target").value;
    151. }
    152. else{
    153. sTarget = ""
    154. }
    155. //Create node
    156. oLI = document.createElement("<li>");
    157. oLI = oUL.appendChild(oLI);
    158. oNOBR = document.createElement("<nobr>");
    159. oNOBR = oLI.appendChild(oNOBR);
    160. //Create action image
    161. oIMG = document.createElement("<img>");
    162. oIMG.border = 0;
    163. //If src attribute is not empty, add custom attribute to the result node
    164. if (oNodeAttributes.getNamedItem("src")!=null){
    165. sSrc = oNodeAttributes.getNamedItem("src").value;
    166. }
    167. else{
    168. sSrc = "";
    169. }
    170. oLI.setAttribute("src", sSrc);
    171. //If src attribute is not empty or amount of the child nodes is not equals zero
    172. if (sSrc!="" || sourceNode.childNodes(i).childNodes.length>0){
    173. //If sub nodes was not loaded
    174. if (sSrc!=""){
    175. oLI.setAttribute("LoadedChildren", "false");
    176. }
    177. //If sub nodes are already loaded
    178. else{
    179. oLI.setAttribute("LoadedChildren", "true");
    180. }
    181. oIMG.src = sImagePlus;
    182. oLI.setAttribute("Expanded", "false");
    183. //Set action image event handler
    184. oIMG.onclick = actionOnClick;
    185. }
    186. else{
    187. oIMG.src = sImageNone;
    188. }
    189. //Create icon image
    190. oIMG = oNOBR.appendChild(oIMG);
    191. oIMG = document.createElement("<img>");
    192. oIMG.border = 0;
    193. oIMG.src = sImagesPath + sIcon + ".gif";
    194. oIMG = oNOBR.appendChild(oIMG);
    195. oA = document.createElement("<a>");
    196. if (sHref!=""){
    197. oA.href = sBaseHref + sHref;
    198. //Set event handler for node
    199. oA.onclick = nodeOnClick;
    200. oA.onmouseover = nodeOnMouseOver;
    201. oA.onmouseout = nodeOnMouseOut;
    202. }
    203. if (sTarget!=""){
    204. oA.target = sTarget;
    205. }
    206. oA.innerText = sName;
    207. oA.title = sName;
    208. oA.className = "treenode";
    209. oA = oNOBR.appendChild(oA);
    210. if (sourceNode.childNodes(i).childNodes.length>0)
    211. {
    212. //Assembly subtree
    213. buildTree(sourceNode.childNodes(i), oLI, "false")
    214. }
    215. }
    216. //Add custom attributes to resultNode which specifies whether node loaded children or not and
    217. //whether is was expanded or not
    218. resultNode.setAttribute("LoadedChildren", "true")
    219. resultNode.setAttribute ("Expanded", expanded);
    220. }
    221. //ÍÀ×ÈÍÀÉ ÏÐÎÂÅÐßÒÜ ÇÄÅÑÜ, ÍÅ ÇÀÁÓÄÜ ÓÄÀËÈÒÜ
    222. //This function handle OnClick event on action image
    223. //ÊÎÍ×ÀÉ ÏÐÎÂÅÐßÒÜ ÇÄÅÑÜ, ÍÅ ÇÀÁÓÄÜ ÓÄÀËÈÒÜ
    224. function actionOnClick(){
    225. var oNode
    226. oNode = event.srcElement;
    227. event.cancelBubble = true;
    228. //If node is already expanded we collapse it
    229. if (oNode.parentNode.parentNode.getAttribute ("Expanded")=="true"){
    230. oNode.parentNode.parentNode.childNodes(1).style.display = "none";
    231. oNode.parentNode.parentNode.childNodes(0).childNodes(0).src = sImagePlus;
    232. oNode.parentNode.parentNode.setAttribute ("Expanded", "false")
    233. }
    234. //If node is collapsed expand it
    235. else{
    236. //If children nodes are already loaded, just expand it
    237. if (oNode.parentNode.parentNode.getAttribute("LoadedChildren")=="true"){
    238. oNode.parentNode.parentNode.childNodes(1).style.display = "block";
    239. oNode.parentNode.parentNode.childNodes(0).childNodes(0).src = sImageMinus;
    240. oNode.parentNode.parentNode.setAttribute ("Expanded", "true")
    241. }
    242. //Children nodes are not loaded yet, we need to load it
    243. else{
    244. //If the other nodes are loaded at the current time, we should stop it
    245. if (loadingNode!=null){
    246. hideLoadingNode(loadingNode);
    247. }
    248. //Set new node
    249. loadingNode = oNode.parentNode.parentNode;
    250. //Show loading node
    251. showLoadingNode(loadingNode);
    252. //Assembly subtree
    253. oXml.load(loadingNode.getAttribute("src"));
    254. }
    255. }
    256. }
    258. //This function handles OnClick event on link
    259. function nodeOnClick(){
    260. var oNode
    261. oNode = event.srcElement;
    262. event.cancelBubble = true;
    263. if (oSelNode!=null)
    264. {
    265. oSelNode.childNodes(0).childNodes(2).className = sNodeClass;
    266. }
    267. oSelNode = oNode.parentNode.parentNode;
    268. oSelNode.childNodes(0).childNodes(2).className = sNodeSelOverClass;
    269. //Add your code to handle this event
    270. }
    272. //This function handles OnMouseOver event on link
    273. function nodeOnMouseOver(){
    274. var oNode
    275. oNode = event.srcElement;
    276. event.cancelBubble = true;
    277. window.status = oNode.innerText;
    278. if (oNode.className==sNodeSelClass){
    279. oNode.className = sNodeSelOverClass;
    280. }
    281. else{
    282. oNode.className = sNodeOverClass;
    283. }
    284. //Add your code to handle this event
    285. }
    287. //This function handles OnMouseOut event on link
    288. function nodeOnMouseOut(){
    289. var oNode
    290. oNode = event.srcElement;
    291. event.cancelBubble = true;
    292. window.status = "";
    293. if (oNode.className==sNodeSelOverClass){
    294. oNode.className = sNodeSelClass;
    295. }
    296. else{
    297. oNode.className = sNodeClass;
    298. }
    299. //Add your code to handle this event
    300. }
    302. //This function handles OnClick event on loading node
    303. function cancelLoad(){
    304. var oNode
    305. oNode = event.srcElement;
    306. hideLoadingNode(oNode.parentElement);
    307. loadingNode = null;
    308. }
    311. function initPage(){
    312. oSelNode = null;
    313. //set loadingNode to the tree container
    314. loadingNode = document.all("Tree");
    315. oXml = new ActiveXObject("Microsoft.XMLDOM");
    316. //Change this property to false if you are working in synchronous mode
    317. oXml.async = true;
    318. //set handler for xml data loading event
    319. oXml.onreadystatechange = onLoadXml;
    320. //load root xml data source
    321. oXml.load(sRootTree);
    322. }
    324. //This function parses and builds tree when XML data source has been loaded
    325. function onLoadXml(){
    326. //test if xml was fully loaded (COMPLETED(4))
    327. if (oXml.readyState==4){
    328. hideLoadingNode (loadingNode);
    329. //test if xml is well formed and contains other than documentElement nodes
    330. if ((oXml.parseError.reason=="") && (oXml.documentElement.childNodes.length>0)){
    331. if (loadingNode!=document.all("Tree")){
    332. loadingNode.childNodes(0).childNodes(0).src = sImageMinus;
    333. }
    334. //Set sBaseHref which specifies the baseline URL
    335. sBaseHref = oXml.documentElement.attributes.getNamedItem("base").value;
    336. //Building treeview starts with documentElement of XML and loading node
    337. //We expand only one level of deep treeview, so we just pass "true" value in this call
    338. buildTree(oXml.documentElement, loadingNode, "true");
    339. }
    340. else
    341. {
    342. //If subtree loading have been failed, change action image to none and remove event handler
    343. loadingNode.childNodes(0).childNodes(0).src = sImageNone;
    344. loadingNode.childNodes(0).childNodes(0).onclick = null;
    345. }
    346. //Actions with loading node are finished, so set it to null
    347. loadingNode = null;
    348. }
    349. }
    350. </script>
    351. <base target="Hauptframe">
    352. </head>
    353. <body onload="initPage();" bgcolor="#FFFFFF">
    354. <div id="Tree" style="margin-left:-20px;">
    355. </div>
    356. </body>
    357. </html>
    Alles anzeigen
    PROFIL
    LAST UPLOADS:
    ZAPPING,
    BABY BOY,KOPS,Musical Mixxor

    bin bis 5.12 unterwegs........