Create an account

Very important

  • To access the important data of the forums, you must be active in each forum and especially in the leaks and database leaks section, send data and after sending the data and activity, data and important content will be opened and visible for you.
  • You will only see chat messages from people who are at or below your level.
  • More than 500,000 database leaks and millions of account leaks are waiting for you, so access and view with more activity.
  • Many important data are inactive and inaccessible for you, so open them with activity. (This will be done automatically)


Thread Rating:
  • 1032 Vote(s) - 3.48 Average
  • 1
  • 2
  • 3
  • 4
  • 5
html, css and pure js for tree view

#1
This is quite simple but I'm quite new with JavaScript. Here is the problem I'm facing.
I would like to have this tree view:

Route (index.html)
|--Tree 1 (tree1.html)
|--Child 1 (tree1child1.html)
|--Tree 2 (tree2.html)
|--Child 1 (tree2child1.html)


Each html will point to toggle.js to generate the tree view. My problem with the .js is: if I click on the Tree 2, Child 1 - it will show the correct page but pointing to the Tree 1, Child 1 selections as the child has same name. This is the script that I use.

function toggle(id) {
ul = "ul_" + id;
img = "img_" + id;
ulElement = document.getElementById(ul);
imgElement = document.getElementById(img);
if (ulElement) {
if (ulElement.className == 'closed') {
ulElement.className = "open";
imgElement.src = "./menu/opened.gif";
} else {
ulElement.className = "closed";
imgElement.src = "./menu/closed.gif";
}
}
} // toggle()

function searchUp(element, tagName) {
// look through the passed elements
var current = element;
do {
current = current.parentNode;
} while (current.nodeName != tagName.toUpperCase() && current.nodeName != "BODY");

return current.nodeName != tagName.toUpperCase() ? null : current;
}



function getAnchor(elements, searchText, exclude) {
// look through the passed elements
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML == searchText) {
if (exclude == null || exclude.innerHTML != elements[i].parentElement.innerHTML) {
// return the anchor tag
return elements[i];
}
}
if (elements[i].children != null) {
var a = getAnchor(elements[i].children, searchText, exclude);
if (a != null) {
return a;
}
}
}

return null;
}


function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}

function select(tree) {
// NOTE: we need to escape the tree string to replace chevrons with their html equivalent in order to match generic strings correctly
var items = document.getElementById('menu').children; // .getElementsByTagName("a");
var anchor = getAnchor(items, htmlEntities(tree[0]), null);
var ul = searchUp(anchor, "ul");
for (var i = 1; i < tree.length; i++) {
anchor = getAnchor(ul.children, htmlEntities(tree[i]), anchor.parentElement);
ul = searchUp(anchor, "ul");
}

if (anchor != null) {
anchor.className = 'selected';
if (ul.className != 'open') {
toggle(ul.id.substr(3));
}
}
} // select()


Reply



Forum Jump:


Users browsing this thread:
1 Guest(s)

©0Day  2016 - 2023 | All Rights Reserved.  Made with    for the community. Connected through