Icons Appear Outside of Tool Bar

[jdcauley]

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

[jdcauley]

I fixed this issue, however, I've found that in both a direct clone of your repo and in my implementation the href doesn't actually work.

[rollbackpt]

That situation should be related to this part of the code:

location.html(content); location.find('.tool-item').on('click', function(event) { event.preventDefault(); self.$elem.trigger('toolbarItemClick', this); });

The default event is being prevented and sent to the toolbarItemClick event.

I am just guessing here, didn't tested.

[rollbackpt]

I think the event 'toolbarItemClick' is not yet implemented. I think if you remove this part the href will work:

location.find('.tool-item').on('click', function(event) { event.preventDefault(); self.$elem.trigger('toolbarItemClick', this); });

[jdcauley]

No Luck, does the click activate anything?

[rollbackpt]

Ok you're right it doens't work. My bad :S. I will work on a solution to the events but for now i leave here a little hack to make it work:

replace the:

var content = $(self.options.content).clone( true ).find('a').addClass('tool-item gradient');

with: (remove the true from .clone) var content = $(self.options.content).clone().find('a').addClass('tool-item gradient');

and comment the prevent default option:

location.find('.tool-item').on('click', function(event) { //event.preventDefault(); self.$elem.trigger('toolbarItemClick', this); });

hope it works i will try to get the events working this weekend.

[rollbackpt]

Humm wait it should work by just commenting:

//event.preventDefault();

and without taking the true in .clone

On the demo page links dont work because of the:

$('.toolbar-icons a').on('click', function( event ) { event.preventDefault(); });

added on the index page, because it's a demo.

[jdcauley]

This fix works if you add it above:

location.find('.tool-item').on('click', function(event) { event.preventDefault(); self.$elem.trigger('toolbarItemClick', this); });

but not if you replace it out right.

Working example: http://jdcauley.koding.com/writersblock Top right sharing icon.

Thanks for your help.

Jordan

Jordan Cauley Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Friday, March 8, 2013 at 5:52 AM, João Ribeiro wrote:

location.find('.tool-item').on('click', function(event) { event.preventDefault(); self.$elem.trigger('toolbarItemClick', this); /* Trick to href while events are not working / if($(this).attr("href") !== "" && $(this).attr("href") !== undefined){ if($(this).attr("target") !== "" && $(this).attr("target") !== undefined){ var win = window.open($(this).attr("href"), $(this).attr("target")); win.focus(); } else{ var win = window.location.replace($(this).attr("href")); } } / Trick to href while events are not working */ });

[rollbackpt]

You don't need that trick.

you just need to remove this from your index file:

// Define any icon actions before calling the toolbar $('.toolbar-icons a').on('click', function( event ) { event.preventDefault(); });

where you have:

because they just use this on demo so ppl dont reload the page on click.

And comment the event.preventDefault(); on the jquery.toolbar.js like this:

location.find('.tool-item').on('click', function(event) { //event.preventDefault(); self.$elem.trigger('toolbarItemClick', this); });

[jdcauley]

Well don't I feel dumb.

Thanks

Jordan Cauley Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Friday, March 8, 2013 at 9:48 AM, João Ribeiro wrote:

You don't need that trick. you just need to remove this from your index file: // Define any icon actions before calling the toolbar $('.toolbar-icons a').on('click', function( event ) { event.preventDefault(); });
because they just use this on demo so ppl dont reload the page on click. And comment the event.preventDefault(); on the jquery.toolbar.js like this: location.find('.tool-item').on('click', function(event) {
//event.preventDefault();
self.$elem.trigger('toolbarItemClick', this);
});

— Reply to this email directly or view it on GitHub (https://github.com/paulkinzett/toolbar/issues/15#issuecomment-14623814).

[paulkinzett]

@rollbackpt is exactly right. The event.preventDefault(); is in the demo to stop the page reloading when testing it. Happy that you worked it out.