Loading ...
Sorry, an error occurred while loading the content.

Is it possible to change the root node image in the tree view?

Expand Messages
  • yui_query
    By default root node image will be + sign followed by line on the top, bottom and ride side of the image. I dont want line (two dots) on the top part of the
    Message 1 of 5 , Apr 27, 2008
    • 0 Attachment
      By default root node image will be + sign followed by line on the top,
      bottom and ride side of the image.
      I dont want line (two dots) on the top part of the image.
      tell me how to change the image only for the root node?
    • abhishek Reddy
      Iam using treeview from yahoo user interface. can any one tell me how to change the image of the root node..? i need t badly, thanks in advance yui_query
      Message 2 of 5 , Apr 27, 2008
      • 0 Attachment
        Iam using treeview from yahoo user interface.
        can any one tell me how to change the image of the root node..?
        i need t badly, thanks in advance

        yui_query <yui_query@...> wrote:
        By default root node image will be + sign followed by line on the top,
        bottom and ride side of the image.
        I dont want line (two dots) on the top part of the image.
        tell me how to change the image only for the root node?



        Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now.

      • fx_aeb
        Hi, You can change this CSS property: .ygtvtp { background:transparent url(treeview-sprite.gif) no-repeat scroll 0pt -6400px; } and also the .ygtvtm . So you
        Message 3 of 5 , Apr 28, 2008
        • 0 Attachment
          Hi,

          You can change this CSS property:

          .ygtvtp {
          background:transparent url(treeview-sprite.gif) no-repeat scroll 0pt
          -6400px;
          }

          and also the .ygtvtm . So you can add your own, which will change
          every image of your tree. (tips:You can use firebug to find which
          class correspond to which element)

          If you only want to change for the first level, you should consider
          using icons:
          http://developer.yahoo.com/yui/examples/treeview/customicons.html
          or adding a custom class to the first level

          If you have any more problem, please send a sample of your code.


          Francois-Xavier Aeberhard
        • yui_query
          ... thanks for the reply, i have send the mail to your id check it once. thru custom icons we can able to add icons only to the node label , i want to change
          Message 4 of 5 , Apr 28, 2008
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, "fx_aeb" <fx_aeb@...> wrote:
            >
            > Hi,
            >
            > You can change this CSS property:
            >
            > .ygtvtp {
            > background:transparent url(treeview-sprite.gif) no-repeat scroll 0pt
            > -6400px;
            > }
            >
            > and also the .ygtvtm . So you can add your own, which will change
            > every image of your tree. (tips:You can use firebug to find which
            > class correspond to which element)
            >
            > If you only want to change for the first level, you should consider
            > using icons:
            > http://developer.yahoo.com/yui/examples/treeview/customicons.html
            > or adding a custom class to the first level
            >
            > If you have any more problem, please send a sample of your code.
            >
            >
            > Francois-Xavier Aeberhard
            >

            thanks for the reply, i have send the mail to your id check it once.
            thru custom icons we can able to add icons only to the node label , i
            want to change the root node image i.e. plus symbol..

            i am using the default tree example given under treeview folder..
            here is the entire code..

            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
            <html>
            <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <title>Default TreeView</title>

            <style type="text/css">
            /*margin and padding on body element
            can introduce errors in determining
            element position and are not recommended;
            we turn them off as a foundation for YUI
            CSS treatments. */
            body {
            margin:0;
            padding:0;
            }
            </style>

            <link rel="stylesheet" type="text/css"
            href="../../build/fonts/fonts-min.css" />
            <link rel="stylesheet" type="text/css"
            href="../../build/treeview/assets/skins/sam/treeview.css" />
            <script type="text/javascript"
            src="../../build/yahoo/yahoo-min.js"></script>
            <script type="text/javascript"
            src="../../build/event/event-min.js"></script>
            <script type="text/javascript"
            src="../../build/treeview/treeview-min.js"></script>


            <!--begin custom header content for this example-->
            <style>
            #treeDiv1 {background: #fff; padding:1em;}
            </style>
            <!--end custom header content for this example-->

            </head>

            <body class=" yui-skin-sam">

            <h1>Default TreeView</h1>

            <div class="exampleIntro">
            <p>In this simple example you see the default presentation for the <a
            href="http://developer.yahoo.com/yui/treeview/">TreeView Control</a>.
            Click on labels or on the expand/collapse icons for each node to
            interact with the TreeView Control.</p>

            </div>

            <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

            <div id="treeDiv1"></div>

            <script type="text/javascript">

            //global variable to allow console inspection of tree:
            var tree;

            //anonymous function wraps the remainder of the logic:
            (function() {

            //function to initialize the tree:
            function treeInit() {
            buildRandomTextNodeTree();
            }

            //Function creates the tree and
            //builds between 3 and 7 children of the root node:
            function buildRandomTextNodeTree() {

            //instantiate the tree:
            tree = new YAHOO.widget.TreeView("treeDiv1");

            for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
            var tmpNode = new YAHOO.widget.TextNode("label-" + i,
            tree.getRoot(), false);
            // tmpNode.collapse();
            // tmpNode.expand();
            // buildRandomTextBranch(tmpNode);
            buildLargeBranch(tmpNode);
            }

            // Expand and collapse happen prior to the actual expand/collapse,
            // and can be used to cancel the operation
            tree.subscribe("expand", function(node) {
            YAHOO.log(node.index + " was expanded", "info", "example");
            // return false; // return false to cancel the expand
            });

            tree.subscribe("collapse", function(node) {
            YAHOO.log(node.index + " was collapsed", "info", "example");
            });

            // Trees with TextNodes will fire an event for when the label
            is clicked:
            tree.subscribe("labelClick", function(node) {
            YAHOO.log(node.index + " label was clicked", "info",
            "example");
            });

            //The tree is not created in the DOM until this method is called:
            tree.draw();
            }

            //function builds 10 children for the node you pass in:
            function buildLargeBranch(node) {
            if (node.depth < 10) {
            YAHOO.log("buildRandomTextBranch: " + node.index, "info",
            "example");
            for ( var i = 0; i < 10; i++ ) {
            new YAHOO.widget.TextNode(node.label + "-" + i, node,
            false);
            }
            }
            }

            //Add an onDOMReady handler to build the tree when the document is ready
            YAHOO.util.Event.onDOMReady(treeInit);

            })();

            </script>

            <!--END SOURCE CODE FOR EXAMPLE =============================== -->

            </body>
            </html>
          • abhishek Reddy
            how do i do that? tell me its urgent fx_aeb wrote: Hi, You can change this CSS property: .ygtvtp {
            Message 5 of 5 , May 1, 2008
            • 0 Attachment
              how do i do that?
              tell me its urgent

              fx_aeb <fx_aeb@...> wrote:
              Hi,

              You can change this CSS property:

              .ygtvtp {
              background:transpar ent url(treeview- sprite.gif) no-repeat scroll 0pt
              -6400px;
              }

              and also the .ygtvtm . So you can add your own, which will change
              every image of your tree. (tips:You can use firebug to find which
              class correspond to which element)

              If you only want to change for the first level, you should consider
              using icons:
              http://developer. yahoo.com/ yui/examples/ treeview/ customicons. html
              or adding a custom class to the first level

              If you have any more problem, please send a sample of your code.

              Francois-Xavier Aeberhard



              Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now.

            Your message has been successfully submitted and would be delivered to recipients shortly.