I'm learning how to do my own Jquery plugin and I'm starting with some basic stuff.
You can see my fiddle here: http://jsfiddle.net/denislexic/8YBM6/8/
This needs to be binded, ie, some of the time the elements will be AJAX loaded, so the plugin still needs to work. (in the fiddle I added a button that copies the content, so I could test it out, but no luck...)
I usually just do live or on. I'm trying to learn and understand.
Thanks
Here's an updated fiddle: http://jsfiddle.net/aR8RQ/1/
Changes I made include:
I'm using event delegation for the 'avatars' element(s). Previously the events were binded using .each() which would have only binded the events on the initial call for the plugin.
I'm using .data() to store the state of the menu (whether it's open or close) and added some event bindings on the document to handle closing the menu.
I added comments to hopefully help you out! I think this does everything you originally asked for (for instance: hiding the menu if you click on anything other than that). There's still some work you can do (for instance, when you "duplicate" you can handle the "close" method for your menus more gracefully!)
Hopefully this helps! :)
Related
I am trying to imitate jQuery.on("click", ".target", handler) by utilizing addEventListener() method. My research on Stackoverflow end up with this: Native addEventListener with selector like .on() in jQuery.
So, before some one mark my question as DUPLICATE please read carefully my requirements and my demo.
Here is my Plunker demo https://plnkr.co/edit/so8Sur?p=preview ( I am running chrome when testing it ). Following is the explanation for it:
At purple box which is "jQuery way" is running as my expectation which should be show Message popup no matter i am clicking on .target box or it children which is .target-child.
But for green box which is my custom event binding, with custom function: customOn(selector, type, filter, handler), it will only show popup when click on .target box only, but it will not show popup when i click on .target-child.
So, my question is, I wonder what kind of magic used by jQuery to make event to be triggered when click on the .target-child on my demo, while the actual selector filter is .target. Will jQuery traverse up on DOM trees to check any selector match every time it needs to handle delegated event? If yes, i feel it will take enough computation resource ( maybe RAM ), is that right? I hope there will be much efficient way rather than doing traverse up like that.
Any answer and comment will be highly appreciated. Thanks in advance.
Jquery use css selectors as crawling system.
So if you click on something, it will "crawl" the parents until it match (or not) the target.
I've a simple page that requires 2 date input and I would use a datepicker to get them.
I've found glDatePicker http://glad.github.io/glDatePicker (thanks a lot!) that is simple, light and works very well.
My problem is use it in modal with bootstrap 3.
I can call function to display the datepicker, for example
$(window).load(function() {
$('#date').glDatePicker();
});
and it works perfectly anywhere, except in modal where it look likes to appear behind the modal and/or it's not entirely shown (malformed).
I've alredy tried to put it in a specific div (like the author suggest), but the result is the same.
I think that it can't be attached correctly to the input field because of modal, but I'm not sure and anyway I don't know how to solve it :)
Thanks!
I had the same problem with another library. The fact is that the calendar that is shown is attached to "body" element and for this reason it cannot be seen in the modal popup. For this reason you can try if changing z-index property or positioning for you is enough. Otherwise (like in my case) was hacking the library in order to accept one additional optional parameter that was meant to store the dom element to attach the calendar to.
I am using the Bootstrap Popover Extended - https://github.com/kartik-v/bootstrap-popover-x - as I need modal behaviour in the popup.
I am not able to get its methods and events working.
Also, I cannot find a working demos which utilizes it with jQuery.
Perhaps someone who has already used it could provide me with some examples ?
Specifically, I need show, shown, hide, hidden events.
[added]
The demo I am looking is http://plugins.krajee.com/popover-x/demo
You can find the description of events and methods following the link to github that you provided. Also those are listed on the official page: events and methods
To show the popover manually you need:
1) initialize that, say, on a page load
$('you-popover-selector').popoverX({
$target: $('target-selector')
});
(I've noticed that you need provide $target in options, otherwise there is an error; target is a DOM element near which you want to show the popover)
2) invoke show method
$('you-popover-selector').popoverX('show');
I have a series of select dropboxes setup, with content that dynamically updates depending upon the preceeding selection. It works fine selecting in series.
When I try to go back to the top and start again, even though I have attempted to reset all children using
my_select.selectedIndex = 0;
The child select boxes remain unchanged. I had thought it was a Javascript error, but found the JSFiddle example actually worked, but my code within JQuery mobile does not work - leading me to believe it is a JQuery Mobile related issue
You can see a JSFiddle example at http://jsfiddle.net/vinomarky/xfcdF/
Steps to replicate:
Select 'Casing' from Type
Select 5 from OD
Change Type to Tubing
The JSFiddle example behaves as it should - resetting children to "-", while my 'live' JQuery Mobile example does not
Any ideas as to why?
You're manipulating the DOM behind jQuery Mobile's back but never telling jQuery Mobile that anything has changed.
You need to call the refresh method after you change the underlying <select>:
refresh update the custom select
This is used to update the custom select to reflect the native select element's value.If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu.
So you need to add things like this:
$('#od').selectmenu('refresh');
at the bottom of your change handlers. The element to refresh does, of course, depend on which change handler you're in.
Demo: http://jsfiddle.net/ambiguous/n3VXe/
Your fiddle worked fine because it didn't use jQuery Mobile at all.
Also, you shouldn't be using onchange attributes in 2012, you're loading jQuery so you should use it to bind handlers to the events you're interested in. You might want to replace all your direct DOM manipulation with jQuery as well.
I've been trying to get this little project I'm doing finished, but for some reason it is not properly working.
The issue is when I first visit the page and click the first link that appears in the main section it displays the popup box as wanted. Now when I click another day, for instance sunday and try to click the first link it doesn't do anything. And if I click back to Saturday the first link also doesn't do anything anymore.
It seems something is not properly activating or maybe a command is overwriting and not allowing it to work like it does when you first hit the landing page. I'm sorry if this is confusing but any help would be much appreciated.
The website is pouronline.com
that's where i do all my testing.
Thank you
You need to use the .live function.
So in your popup.js replace
$('a.poplight[href^=#]').click(function() {
with
$('a.poplight[href^=#]').live('click',function() {
Swap this:
$('a.poplight[href^=#]').click(function()
with this:
$('a.poplight[href^=#]').live('click',function()
You need to use a future-proof event observer because once you reload those anchors by changing the day in this case, the initial binding is lost. live() means to apply the binding to currently existing nodes as well as nodes that are added to the DOM at a later time.