SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with change in JS code

    I have a javascript for a tree view but i need to change it according to the requirement. Lets start with example with the treeview as follow:

    1 Door phone
    1.1 Ready Kits
    1.1.1 Audioset
    1.1.2 Videoset
    1.2 Audio Kits
    1.2.1 Elphone
    1.2.2 Video Door phone
    2 CCTV
    2.1 Camera
    2.1.1 Dome Camera
    2.1.2 IP Camera
    2.2 Others

    Now the thing is in the current treeview a single category is open at a time. like if 1.1.1 is open 1.1.2 will b closed and similarly if 1.1 is open...1.2 will b closed. But i want that when i click on 1(Door phone) ie Door phone...evry node should be opened instead of just one similary when i click on 2(CCTV), all its node should be opened.

    I hope it will be possible to achieve this and i would be helped. My succeeding post will be the javascript i need help with. Thanks

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mihirpatel83 View Post
    My succeeding post will be the javascript i need help with.
    still waiting

    ps...and don't forget to enclose your code in code tags - use the # button in the editor's toolbar

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    function jv_vmAccordionMenu(vmAccordionId, spanExpant, spanCollapse, accOptions, accHoverDelay, mouseHover) {
    if($(vmAccordionId)){
    $(vmAccordionId).accParentItems = [];
    for(var i = 0; i < $(vmAccordionId).childNodes.length; i++) {
    if($(vmAccordionId).childNodes[i].className.indexOf('parent') >= 0){
    $(vmAccordionId).accParentItems.push($(vmAccordionId).childNodes[i]);
    }
    }
    $(vmAccordionId).accTogglers = [];
    $(vmAccordionId).accElements = [];
    var startItem = -1;
    for(var i = 0; i < $(vmAccordionId).accParentItems.length; i++) {
    var accToggler = document.createElement("span");
    $(vmAccordionId).accParentItems[i].insertBefore(accToggler, $(vmAccordionId).accParentItems[i].firstChild);
    $(vmAccordionId).accTogglers.push(accToggler);
    $(vmAccordionId).accElements.push($(vmAccordionId).accParentItems[i].getElementsByTagName('ul')[0]);

    if ( $(vmAccordionId).accParentItems[i].className.indexOf('active') >= 0 ) {
    startItem = 0;
    }
    }
    if ( $(vmAccordionId).accParentItems.length > 0 ){
    $(vmAccordionId).Accordion = new Accordion($(vmAccordionId).accTogglers, $(vmAccordionId).accElements, $merge({
    opacity: false,
    alwaysHide: true,
    show: startItem,
    duration: 400,
    transition: Fx.Transitions.Bounce.easeOut,

    onActive: function(toggler, element){
    element.parentNode.parentNode.setStyle('height', 'auto');
    toggler.setAttribute("class","Collapse");
    },
    onBackground: function(toggler, element){
    element.parentNode.parentNode.setStyle('height', 'auto');
    element.setStyle('height', element.offsetHeight+'px');
    toggler.setAttribute("class","Expand");
    }

    }, accOptions)

    );
    }
    accTimer = null;
    if (!accHoverDelay) var accHoverDelay = 200;

    for(var i = 0; i < $(vmAccordionId).accParentItems.length; i++) {

    eval("function accOnclickFunc(){" +
    "return function(){ " +
    "if( $('"+vmAccordionId+"').accElements["+i+"].style.height == '0px' ) { " +
    "$('"+vmAccordionId+"').Accordion.display("+i+") " +
    "}" +
    "}" +
    "}");
    eval("function accOnMouseoverFunc(){" +
    "return function(){" +
    "if( $('"+vmAccordionId+"').accElements["+i+"].style.height == '0px' ){" +
    "accTimer = $('"+vmAccordionId+"').Accordion.display.delay("+accHoverDelay+", $('"+vmAccordionId+"').Accordion, "+i+");" +
    "}" +
    "}" +
    "}");
    eval("function accOnmouseoutFunc(){return function(){if($defined(accTimer)){$clear(accTimer);}}}");

    $(vmAccordionId).accParentItems[i].firstChild.nextSibling.onclick = accOnclickFunc();
    if (mouseHover==1) {
    $(vmAccordionId).accParentItems[i].firstChild.nextSibling.onmouseover = accOnMouseoverFunc();
    }
    $(vmAccordionId).accParentItems[i].firstChild.nextSibling.onmouseout = accOnmouseoutFunc();
    }

    for(var i = 0; i < $(vmAccordionId).accElements.length; i++) {
    $(vmAccordionId).accElements[i].setAttribute('id', vmAccordionId+'_'+i);
    jv_vmAccordionMenu(vmAccordionId+'_'+i, spanExpant, spanCollapse, accOptions, accHoverDelay, mouseHover)
    }

    }
    }

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're using JQuery and the code you posted seems to be making the code much more complicated than it needs to be.

    I would do something similar to this using just plain vanilla javascript:

    1) arrange all your tree nodes into divs and put each node inside its parent node in your html.

    2) give all the tree nodes the same class name

    3) when a node is clicked, fire an onclick function that gets all the child nodes with the class name in 2) for the node that was clicked

    4) set the display style for the child nodes in 3) to block

    5) when the node in 3) is clicked again, set the display style for the child nodes in 3) to none.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh man...Thanks for the reply bt i think i will need ages to understand and implement it. i will give you the live link where i need the change.

    http://www.webfactory.in/elcomsecuri...=210&Itemid=58

    at the above link, there is top menu from where i select Door phones or CCTV and whichever i select tat particular parent should be opened with all its child open. rite now its happening bt just one child remains open


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •