problem in changing the direction of jquery treemenu

Question

hey guys ,

i have used the popular treemenu plugin for my project ,but the only problem i have is with direction .

as you may see , it shows menus in LTR direction and icons of folder and file floating left side

http://jquery.bassistance.de/treeview/demo/

question is how can i change the directio to rtl

believe me , it takes me one day to play with codes but not worked at last

i asked in jquery forum , but it takes 1 week just to accept my question , let alone answering it

however i know , this may be a lot to ask , but help me , if you have time

Answer 1

Hi Joyan!

All you need to do is modify the CSS to get the treeview to work. But because the plugin uses image sprites, the icons won't work very well on RTL pages, so I had to split them apart.

I made a demo with the resultant CSS (seen below)... and you can download a zip file of the demo from here.

Note: I did not modify the jquery.treeview.js file at all.

.treeview, .treeview ul { 
  padding: 0;
  margin: 0;
  list-style: none;
}

.treeview ul {
  background-color: white;
  margin-top: 4px;
}

.treeview .hitarea {
  background: url(rtl-treeview-default-c.gif) 0 2px no-repeat;
  height: 16px;
  width: 16px;
  margin-right: -16px;
  float: right;
  cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
  display: inline;
  float:none;
}

.treeview li { 
  margin: 0;
  padding: 0px 16px 2px 0px;
}

.treeview a.selected {
  background-color: #eee;
}

#treecontrol { margin: 1em 0; display: none; }

.treeview .hover { color: red; cursor: pointer; }

.treeview li { background: url(rtl-treeview-default-line.gif) 100% -2px no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 100% -177px; }

.treeview .expandable-hitarea { background: url(rtl-treeview-default-e.gif) 0 2px no-repeat; }
.treeview li.last { background-position: 100% -1768px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background: url(); }
.treeview div.lastCollapsable-hitarea { background: url(rtl-treeview-default-lc.gif) 0 0 no-repeat; }
.treeview div.lastExpandable-hitarea { background: url(rtl-treeview-default-le.gif) 0 0 no-repeat; }

.treeview-red li { background-image: url(rtl-treeview-red-line.gif); }
.treeview-red .hitarea { background-image: url(rtl-treeview-red-c.gif); }
.treeview-red .expandable-hitarea { background-image: url(rtl-treeview-red-e.gif); }
.treeview-red div.lastCollapsable-hitarea { background-image: url(rtl-treeview-red-lc.gif); }
.treeview-red div.lastExpandable-hitarea { background-image: url(rtl-treeview-red-le.gif); } 

.treeview-black li { background-image: url(rtl-treeview-black-line.gif); }
.treeview-black .hitarea { background-image: url(rtl-treeview-black-c.gif); }
.treeview-black .expandable-hitarea { background-image: url(rtl-treeview-black-e.gif); }
.treeview-black div.lastCollapsable-hitarea { background-image: url(rtl-treeview-black-lc.gif); }
.treeview-black div.lastExpandable-hitarea { background-image: url(rtl-treeview-black-le.gif); } 

.treeview-gray li { background-image: url(rtl-treeview-gray-line.gif); }
.treeview-gray .hitarea { background-image: url(rtl-treeview-gray-c.gif); }
.treeview-gray .expandable-hitarea { background-image: url(rtl-treeview-gray-e.gif); }
.treeview-gray div.lastCollapsable-hitarea { background-image: url(rtl-treeview-gray-lc.gif); }
.treeview-gray div.lastExpandable-hitarea { background-image: url(rtl-treeview-gray-le.gif); } 

.filetree li { padding: 0px 16px 2px 0; }
.filetree span.folder, .filetree span.file { padding: 0px 16px 2px 0; display: block; }
.filetree span.folder { background: url(rtl-folder.gif) 100% 0 no-repeat; }
.filetree li.expandable span.folder { background: url(rtl-folder-closed.gif) 100% 0 no-repeat; }
.filetree span.file { background: url(rtl-file.gif) 100% 0 no-repeat; }