jQuery popover with meteor

help
1

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!

2

update!

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

1042×390 30.3 KB

3

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

4

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:

5

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
6

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

7

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

1 Like
8

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.

9

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);
	}
});
10

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

11

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

12

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

13

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

14

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

15

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

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

}

Detects anywhere in my entire layout template when clicked.

17

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

18

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'));
 }
});