Skip to forum content

Mif

— mystic javascript interface

You are not logged in. Please login or register.

Post new reply

Mifjs forum — Mif.Tree, Mif.Menu » Help » element is null » Post new reply

Post new reply

Compose and post your new reply

You may use: BBCode Images Smilies

All fields labelled (Required) must be completed before the form is submitted.

Required information for guests



Captcha image. Turn pictures on to see it.
Required information
Optional post settings

Topic review (newest first)

1 Post by Rolf

What you should do is use the onDomReady event of MooTools, which is fired when the dom is ready (duh).
You place all the JS in the domready event and that's that. What you are doing now is waiting for the load event (sort of) by placing it at the end of you code (at the bottom of the page).

<script type="text/javascript">
  window.addEvent('domready', function() {
    ..your code here..
  });
</script>

2 Post by alaoa

Figured it out.  i have to place the javascript at the end of the page because the container didn't exist when it was being fired.  Great script!!!!  I'm going to add you to my credits

3 Post by alaoa

I tried not to have to post in this forum but I am really stuck here.I have been trying to get this to work based on the demo.  At first I tried to use the most update mootools and it three an error that said I needed draggable, Mif.Tree not defined and Class not defined.  So i decided to paste everything from the demo verbatim and i'm still getting the error below.


element is null
bottom()mootools.js (line 1712)
(?)()mootools.js (line 1729)
initialize()mif-tr....2.6.js (line 66)
(?)()mootools.js (line 1205)
newClass()mootools.js (line 1147)
index.php?option=com_maian15&task=tools&format=raw&tool=update_view()index....te_view (line 36)
[Break on this error] element.appendChild(context);

here is my html.  The two urls are generating the the joson correctly

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb"
    dir="ltr">
<head>
<link href="components/com_maian15/stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link href="templates/khepri/css/template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://localhost/maian/includes/js/joomla.javascript.js"></script>
<script type="text/javascript" src="http://localhost/maian/administrator/components/com_maian15/js/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="http://localhost/maian/administrator/components/com_maian15/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/maian/administrator/components/com_maian15/js/mif-tree-v1.2.6.js"></script>
<script type="text/javascript" src="http://localhost/maian/administrator/components/com_maian15/js/request.js"></script>

<script type="text/javascript">
Mif.Tree.Node.implement({
    
    getPath: function(){
        var path=[];
        var node=this;
        while(node){
            path.push(node.name);
            node=node.getParent();
        }
        return path.reverse().join('/');
    }

});


var tree = new Mif.Tree({
    types:{
    nodeType:{
        openIcon: 'node-open-icon',//node-open-icon - css class for open icon.
        closeIcon: 'node-close-icon'
    }
}

});

tree.load({
    url: 'http://localhost/maian/administrator/index.php?option=com_maian15&task=tools&format=raw&tool=load_root'
});

tree.loadOptions=function(node){
    return {
        url: 'http://localhost/maian/administrator/index.php?option=com_maian15&task=tools&format=raw&tool=load_tree&abs_path=D%3A%5Cxampp',
        data: {'abs_path': node.data.abs_path}
    };
};

document.addEvent('keydown', function(event){
    if(event.key!='r') return;
    var node=tree.selected;
    if(!node) return;
    node.rename();
});
</script>

<style type="text/css">
#tree_container{
border:solid 1px #b4b4b4;
position:relative;
height:300px;
width:200px;
}



/*@global*/

.mif-tree-wrapper{
position: absolute;
z-index:100;
width: 100%;
height:100%;
margin:0;
padding:0;
overflow:auto;
font-family:sans-serif;
font-size:11px;
line-height:18px;/******Tree node height******/
white-space:nowrap;
cursor:default;
}

.mif-tree-bg{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}

.mif-tree-bg-container{
width:100%;
display:none;
}

.mif-tree-bg-node{
width:100%;
height:18px;
}

.mif-tree-bg-selected{
background-color:#dcd7ab;
}

.mif-tree-wrapper:focus{
outline:0;
}

.mif-tree-wrapper span{
padding-bottom:2px;
padding-top:2px;
cursor:inherit;
}

.mif-tree-children{
padding-left:18px;
width:18px;
}

.mif-tree-node{
width:18px;
background:url('components/com_maian15/images/line.gif') repeat-y 8px 0px;
}

.mif-tree-node-last{
background:url('components/com_maian15/images/line.gif') no-repeat 8px 0px;
}

.mif-tree-name{
cursor: default;
overflow:hidden;
margin-left:4px;
}

.mif-tree-name a{
color:red;
}

.mif-tree-name a:hover{
color:blue;
}


.mif-tree-node-wrapper{
background:url('components/com_maian15/images/horizontal-line.gif') no-repeat 9px center;
}

/*@gadjets*/

.mif-tree-gadjet{
background-image:url('components/com_maian15/images/gadjets.gif');
padding-right: 16px;
z-index:1;
overflow:hidden;
background-repeat:no-repeat;
cursor:default;
}

.mif-tree-gadjet-none{
background:none;
}

.mif-tree-gadjet-minus{
background-position: 0px 50%;
}

.mif-tree-gadjet-plus{
background-position: -18px 50%;
}


.mif-tree-gadjet-hover .mif-tree-gadjet-minus{
background-position: -54px 50%;
}

.mif-tree-gadjet-hover .mif-tree-gadjet-plus{
background-position: -72px 50%;
}



/*.mif-tree-gadjet-hover{
background-image:url('/components/com_maian15/images/gadjets-hover.gif');
}*/




/*@icons*/
.mif-tree-icon{
padding-right:18px;
background-position:0 50%;
background-repeat:no-repeat;
cursor:inherit;
}

.mif-tree-open-icon{
background-image:url('components/com_maian15/images/openicon.gif')
}

.mif-tree-close-icon{
background-image:url('/omponents/com_maian15/images/closeicon.gif')
}


.mif-tree-loader-open-icon,.mif-tree-loader-close-icon{
background-image:url('components/com_maian15/images/mootree_loader.gif');
}

.mif-tree-file-open-icon, .mif-tree-file-close-icon{
background:url('components/com_maian15/images/file.gif') no-repeat;
}


/*@selection*/

.mif-tree-node-selected .mif-tree-name{
background-color: #010161;
color:#fff;
text-transform:italic;
}

.mif-tree-highlighter{
height:18px;
overflow:hidden;
width:100%;
background:#b64553;
position:absolute;
}



/*@d'n'd*/
.mif-tree-pointer{
height:1px;
overflow: hidden;
position: absolute;
background-image:url('../../Source/assets/images/1.gif');
background-repeat:repeat-x;
background-color:#292fef;
}


.mif-tree-ghost{
background-color:#fff;
border:solid 2px #e8e8f7;
padding-left:2px;
}

.mif-tree-ghost .mif-tree-node-wrapper{
background:none;
}

.mif-tree-ghost span.mif-tree-text{
padding-top:1px;
padding-bottom:1px;
}

.mif-tree-ghost-icon{
padding-left:16px;
background-color:#fff;
background-repeat:no-repeat;
background-image:url('../../Source/assets/images/dropzone.gif');
}

.mif-tree-ghost-after{
background-position:-64px 2px;
}

.mif-tree-ghost-before{
background-position:-48px 2px;
}

.mif-tree-ghost-between{
background-position:-16px 2px;
}

.mif-tree-ghost-inside{
background-position:-0px 2px;
}

.mif-tree-ghost-notAllowed{
background-position:-32px 2px;
}

.mif-tree-drag-current{
background-color:#cfcfd8;
}

.mif-tree-replace{
background-color:#99c8fb;
}


/*@checkbox*/
.mif-tree-checkbox{
padding-left:18px;
}

.mif-tree-node-checked, .mif-tree-node-checked .mif-tree-checkbox{
background:url('../../Source/assets/images/checked.gif') center 2px no-repeat;
}

.mif-tree-node-unchecked, .mif-tree-node-unchecked .mif-tree-checkbox{
background:url('../../Source/assets/images/unchecked.gif') center 2px no-repeat;
}

.mif-tree-node-checked-selected{
background:url('../../Source/assets/images/checked_selected.gif') center 2px no-repeat;
}

.mif-tree-node-unchecked-selected{
background:url('../../Source/assets/images/unchecked_selected.gif') center 2px no-repeat;
}



/*@rename*/
.mif-tree-rename{
display: inline;
line-height: 14px;
height:14px;
cursor: default;
overflow:hidden;
font-family:sans-serif;
font-size:11px;
padding:1px 0;
border:solid 1px black;
}
</style>

</head>
<body id="update-screen">
<h1>File tree.</h1>
<div id="tree_container"></div>
</body>

</html>

Mifjs forum — Mif.Tree, Mif.Menu » Help » element is null » Post new reply