Search code examples
javascriptjqueryelfinder

Elfinder: Add a close button

I'm trying to add a close button to Elfinder. I'd like the placement to be to the right of the search box where close buttons usually are.

After the elfinder init, I do this:

$('.elfinder-toolbar').prepend('<a class="elfclose"><div class="elfclose-bg">&times;</div></a>');

The Css:

.elfclose {
  font-size: 20px;
  font-weight: bold;
  line-height: 18px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  text-decoration: none;
  float: right;
}

$().prepend should put the elfclose div as the first element under the toolbar, but the search box is always first.

I believe it's caused by Elfinder prepending after me... Is there a way I can say do this after the other div exists?

Solution

  • Just FYI, I did figure this one out...

    The search box is added by Jquery after init, so you have to put a delay after the prepend. I tried checking for the existence of the search div (which would be better), but it turned out to be too much work. No one's going to notice a .2 second delay. To paraphrase Larry Wall, your code is correct if it gets the job done before your boss fires you.

    I'm in Angular, hence the $compile directive:

    var close = $compile('<a class="elfclose" ng-click="closeFileBrowser()">
<div class="elfclose-bg">&times;</div></a>')($scope);
$timeout(function(){$('.elfinder-toolbar').prepend(close);}, 200);