paulkinzett / toolbar

A tooltip style toolbar jQuery plugin

Toolbar.js

A jQuery plugin that creates tooltip style toolbars.

Update

Toolbar.js has been overhauled with new functionality, a completely new design and now makes use of Font Awesome project as the base for icons.

Documentation

You can find the documentation for the toolbar at the toolbar project page. This is the best source for documentation as it will be updated as new features are released.

License

(This project is released under the MIT license.)

Copyright (c) 2013 - 2015 Paul Kinzett (http://kinzett.co.nz/)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

toolbar's Issues

SVG gradient fallback not rendered properly

When using the vertical toolbar in a browser, that supports only the SVG fallback, the background is not rendered properly as the gradient is the same height as with the horizontal toolbar.

Needs something like this:

.tool-right .tool-item, .tool-left .tool-item {
  background: url("data:image/svg+xml;base64,PD94[...]jwvc3ZnPg==") repeat scroll 0 0 transparent;
}

Add ability to float toobar

It would be great if the toolbar can just float or always visibly stick to an area as you are scrolling.

display bottom

hello,
How to display bottom ?

thank you

Positioning of toolbar

In your documentation your referring to positions: top, bottom, left or right.

jquery.toolbars.js however only supports top and left. When bottom and right are used no coordinates are return by self.getCoordinates();

Bower can't download the 1.1.0 version

Please update the bower.json to 1.1.0 version.
If I try to download the toolbar, I only could update the 1.0.1 version.

Bootstrap 4 version ?

Hi,
BS4 final is released.
Is there a release planned ?

Effects don't work with latest BS and FontAwesome icons

Toolbar not working

included the following in the in an .html file


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/jquery.toolbar.min.js"></script>

along with

<script type="text/javascript"> $(document).ready(function () { $('#user-toolbar').toolbar({ content: '#user-toolbar-options', position: 'bottom' }); }); with the following in the body

But it doesnt work in both IE 11 and Firefox latest version but the url http://paulkinzett.github.io/toolbar/ the controls work. Could anybody shed some light on the issue ? Regards Raj

toolbar integration with existing bootstrap

What if some one has already full bootstrap with icons , then this tool bar icons dont appear correctly.

Then This one not needed
But tool bar icons messup

Not showing the toolbar for append elements

Not showing the toolbar on jquery appended element.. please help me

attach toolbar to element after ajax div reload

hi there,
I'm using multiple js toolbar on files icon and it works fine.
I wonder how to attach the toolbar to a new file icon after an ajax upload.
I tried to put an init() function with the toolbars remove (to suppress the old ones) and creation and call the init() in the upload/done event.
It looks like the new tool-containers are created but they are not displayed on click.
any idea
thanks in advance

(not a feature or bad documentation) with the toolbarItemClick event

I think you lack documentation or the event lacks the data:

.on('toolbarItemClick',function(e) {

        console.log(e.id);      

}
);  

The click on the buttons on the toolbar does not insert the element that was acctualy clicked which might render the toolbarItemClick event as useless! no way to know what exactly was clicked, the e variable contains only data about the whole toolbar rather than the exact button that was clicked, there is of course a workaround to use an external click handler, but that would ruin the need for 'toolbarItemClick' which does not contain the neccresary info in its 'event' variable.

A possible workaround for now is probably something like:

$(document).on("click", ".tool-item", function(){ 
        var elementid=this.id; //the actual button that was just clicked.

        switch(elementid){
            case 'foo'
        //do something
            break
            case 'boo'
        //do something else
            break
        };
});

of course given that each button has an id, that id would end up in the 'elementid' variable.
such as these:

    <div id="user-options" class="toolbar-icons hidden-icons" style="display: none;">
    <a href="#" id="foo" title="test1"><i class="icon-user"></i></a>
    <a href="#" id="boo" title="test2"><i class="icon-star"></i></a>
    </div>

content passed to jquery.toolbar.js is displayed as undefined?

populateContent: function() {
var self = this;
var location = self.toolbar.find('.tool-items');
var content = $(self.options.content).clone().find('a').addClass('tool-item gradient');
location.html(content);
location.find('.tool-item').on('click', function(event) {
event.preventDefault();
self.$elem.trigger('toolbarItemClick', this);
});

},

the above code: $(self.options.content) getting displayed as undefined. we are passing values from our js below

allHeaders.each(function() {
var thisHeader = jQuery(this).attr("id");
var thisBody = jQuery("

");
jQuery(thisBody).append("");
jQuery(thisBody).append(""+jQuery("#no-filter-criteria").text()+"");
});

we are passing content like this
jQuery10(thisHeader).toolbar({
content: '#toolBar-'+ JSUtils.prototype.escapeDot(jQuery10(thisHeader).attr("id")),
position: 'bottom',
hideOnClick: true
});

NOTE: we are using jquery datatable and displaying values through JSON.

Kindly let us know why content passed to toolbar is displayed as undefined?

way to make a vertical menu open from the bottom

im not seeing a way on your tutorials to make a vertical menu drop down from the bottom

maybe you should add a tutorial for that :)

love the look of the toolbar though!

Appear not to play well with jquery 2.x

Tested with jquery 2.1.4 could not get it to do anything. Some patchy (not perfect) functionality with 1.8. Really nice idea, would love to come back to it at some stage.

add destroy method

it would be nice to have a "destroy" method to remove toolbar from the DOM

Question(s) regarding programatically generated loop instance of toolbar

A couple of questions (if you have the time):

Using the toolbar in a programatically generated repeating loop (ruby), is it possible to have a single toolbar init function that references the toolbar options container (content) following/relating to the initiating link element? I've tried a few scenarios but seem to be breaking the code trying to dynamically reference the options element with a jQuery selector in the toolbars content argument.

And lastly (this is probably simpler than I'm thinking)... is there a function similar to hideOnClick that hides the toolbar if one of the toolbar links is clicked (currently only seems to refer to clicking outside the toolbar??)

Thanks in advance :)

jquery.toolbar with Bootstrap 3.0.3 isn't display correctly.

When I use jquery.toolbar with bootstrap 3.0.3, the button and menu isn't display correctly.

Images are not displayed on toolbar buttons

All of my files are in the right place, such as /images, /scripts, /css etc. Made sure to point bootstrap.icons.css to the png such as background-image: url("images/glyphicons-halflings.png")
Bootstrap.js and jquery*.js are included in the project and html. All files recommended in the documentation are included in the project and html.

When the toolbar is displayed, there are no images on the buttons. However, the toolbar does display as expected on hover. Any ideas what could be wrong?

toolbar is not destroyed when the page is changed using hashchange

is there a way to destroy toolbar.js when the element that it belongs to is destroyed?

Use of class instead of id's for multiple toolbars on same page?

Is there a method to load the toolbar using classes for both the link and for the content div? I have an image gallery with buttons for each image ( favorite, print, info, etc.) and I want to use a single icon to click to open the toolbar but be able to use classes so I don't have to have an id for each toolbar ( the page has many images on it).

Documentation spelling mistakes

First paragraph: flexability -> flexibility
"Notes" list before "Options" - visable -> visible

This project is definitely bookmarked BTW.

How to get the clicked button?

Hi,how can i get the clicked button on toolbar?the toolbarItemClick event can't get the clicked item.Thank you in advance.

npm package?!

this plugin is also available on npm repo?! tnkx

Support Medium-like Toolbar (one toolbar per page, reused on multiple elements)

hideOnClick feature missing on github code

Why the version in the official site http://paulkinzett.github.com/toolbar/ has the hideOnClick function and and code on github doesn't?

    bindHideEvent: function() {

        var self = this;

        var hideEvent = "click.toolbar";

        if(self.options.hideOnClick) {
            $('html').off(hideEvent).on(hideEvent, function( event ) {
                if(self.toolbar.has(event.target).length === 0 ) {
                    self.hide();
                }
            });     
        }             

    },

Manually close toolbar

I would like to manually close the toolbar! Could you provide a way to do it?

Icons Appear Outside of Tool Bar

The icons are appearing outside of the tool bar as well as in it. This may be a conflict.

See http://jdcauley.koding.com/writersblock

How to display submenu options?

@paulkinzett is it possible to have submenu options? For example, I'd like to have a toolbar with a file menu. Then under file, I'd have a couple of menu options. Then under those menu options, I might have some others.

Also, is it possible to have items other than icons displayed or display other content?

Calculate position with .outerWidth() instead of .width()

To properly account for padding on the trigger elements, you get far more consistent results using .outerWidth() and .outerHeight() instead of .width() and .height().

animation - use css transition instead of jQuery animation for better performance

toolbar added to twittstrap resources list

Hello,
We have just add toolbar to twittstrap resources list
http://www.twittstrap.com/resources/details/toolbar
Under : Components
Regards

Wrong coordinates for right position

toolbar appears on middle of the element when positionning on right. Problem may occurs on left positionning also because of the way it is calculated:

for right positionning
https://github.com/paulkinzett/toolbar/blob/master/jquery.toolbar.js#L210

for left positionning
https://github.com/paulkinzett/toolbar/blob/master/jquery.toolbar.js#L204

Edge Collision Detection

hi,
awesome plugin, but would you please add ability for toolbar to detect window edge and get away from it and don't get outside the browser window ?

thanks in advanced.

close tool bar when click away

hi,
is there possibility to close the tool bar when user click on the page outside the tool bar ? because currently the only way to close it is to click the initiating element again,

thanks in advanced.

Toolbar cut off when button is too close to edge

Screenshot here: http://screencast.com/t/Vo9pwhyB

How do you close toolbar when an icon is clicked?

Sorry if this is mentioned somewhere that I haven't read yet, but I can show my toolbars and have added dynamic click handlers for each of the icons, yet, how do you close the toolbar when an icon is clicked?

Thanks for your contribution!

Links not working for me

None of the links in the reference implementation are working for me. If I navigate to http://paulkinzett.github.io/toolbar/ and click on any of the buttons from the modal menu, it does not append a # to the URL bar.

Additionally if I change a line like 399 to be an actual link, nothing happens when I click it in the menu. I can however right click and select open in new tab, and that works.

I am on the current version of chrome in OSX. Thank you for any help!

Hover event for options

Hi,

I would like to trigger a hover event for the options, similar to the existing "toolbarItemClick" method. Is there a way to do this?

Thank you very much,
Binyomin

Resize listener leak?

I just looked at the source, each call to setTrigger adds a window resize listener but I can't see a point where it is cleaned up. Is this the case or am I missing something?

Initiate on Hover

Is it possible to initiate the toolbar on hover as opposed to on click?

link doesnot open

the links doesnot open when assigned.. why is it so?