jQuery popover with meteor

Hello,

I’m trying to implement a drop down window for my notifications to my app. I’ve been using Skeleton.css for my apps basic look. In Skeleton the creator uses “data-popover” when a user clicks a drop down window. Inspect the element on “More” in the nav to get the example.

Here is my template. 99% sure it’s syntax is correct.

    <template name="notifications">
  <a href="#" class="navbar-link notifications" data-popover="#moreNavPopover">
 Notifications
{{#if notificationCount}}
  <span class="badge badge-inverse">{{notificationCount}}</span>
{{/if}}
<b class="caret"></b>
  </a>
 <div id="moreNavPopover" class="popover open">
     <ul class="popover-list">
           {{#if notificationCount}}
  {{#each notifications}}
    {{> notificationItem}}
  {{/each}}
{{else}}
  <li class="popover-item"> No Notifications</li>
{{/if}}

and a screen shot so you can see what is going on. The data doesn’t stay hidden till clicked.

What would I exactly need to put in my notifications.js helpers to make the drop down happen? I’ve read 4-5 links from google and everyone is slightly different. Does meteor have another feature I could you instead of popover?

Thanks!

update!

Interesting. The popup works when I get a notification, It doesn’t link to the comment though. Maybe a plan old css issue?

I’m assuming the class open makes it open, since you have that from the start it will start being open.

See how he adds the class on click: http://gfycat.com/EmptyAjarBighorn

Ahhh! Good eye!! Well… this is what I have so far.

Template.notifications.events({
'click notifications': function() {
var d = document.getElementById("moreNavPopover");
console.log(d.className);
d.className = d.className + " open";
}
 });

It’s not working though :frowning:

To extend on this maybe you could do something like

Template.notifications.events({
	'click [data-popover]': function () {
		Session.set('notifications_open', !Session.get('notifications_open'));
	}
});

Template.notifications.helpers({
	open: function () {
		if(Session.get('notifications_open')) {
			return "open";
		}
		return false;
	}
});

Template.notifications.onCreated(function() {
	Session.setDefault('notifications_open', false)
})

and then do <div id="moreNavPopover" class="popover {{open}}">

1 Like

You sir are a freaking GENIUS!!! Thank you, it worked!! :smile:

do something like function(e) { and you have the element in e.target, that way you don’t have to getElementById again

1 Like

Will do! How does skeleton.css handle when the user clicks outside of the dropdown and it closes? I guess you need to type something in the helper that detects outside of the menu? The dropdown will close when I click it "Notifications. Skeleton has it so it closes when you click outside of it.

Hm, not really sure.

Could you try something like this?

Template.notifications.events({
	'click [data-popover]': function () {
		Session.set('notifications_open', !Session.get('notifications_open'));
	},
	'click .popover': function(e) {
		e.stopPropagation();
	},
	'click': function() {
		Session.set('notifications_open', false);
	}
});

I’m sorry, I’m not quite sure how to do the e.target you mentioned with the function… It’s my 3rd week with JavaScript and Meteor

See the second event in the comment above, it’s using e in the function. That’s the jQuery event. Then e.target should be the same as getElementById I think

I see that, but e isn’t assigned to anything. The only way I know how to assign things from the DOM is getElementById. I see how e is used in a function. I don’t see how e.target replace getElementById

e.target is the element clicked, but I re-read your code, it wouldn’t matter there, sorry for confusing you

It is okay. Did you look at Skeleton.css script on its page? I noticed e was used there.

I found a link that should help me solve my problem of closing the menu by clicking outside of it.

Trying to figure out how to apply it to meteor

'click': function(event) {
event.preventDefault();
console.log("clicked anywhere in the layout");

}

Detects anywhere in my entire layout template when clicked.

Yeah, wasn’t that what I wrote? Or did you do something different?

Yeah but it doesn’t seem to work. The menu doesn’t open at all with this code.

Template.notifications.events({
	'click [data-popover]': function () {
	Session.set('notifications_open', !Session.get('notifications_open'));
},
'click .popover': function(e) {
  e.stopPropagation();
 },
 'click': function() {
Session.set('notifications_open', false);
 }
});

It will open when clicked on and closed when click on with just this

Template.notifications.events({
	'click [data-popover]': function () {
	Session.set('notifications_open', !Session.get('notifications_open'));
 }
});