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.
Related
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.
Okay, so I need for an input element to be automatically focused when it shows up in the DOM. This is what I am currently trying to do:
modal.fadeIn('fast', function(){
$('input.cm_modal_input_elem').focus();
});
This isn't working. What is the official way to do this?
That is the official way of doing it, and if it's not working something else besides the posted code must be causing the problem. Like say you are inserting the element dynamically and expecting a function you called on page load to execute later on when the element is inserted or that there are other elements that receive focus later in your script etc.
Here's a fiddle to show it working !
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! :)
I've searched SO and this question seems to have been asked multiple times, but I can't seem to get it to work in my example.
Here's some code to play with:
http://jsfiddle.net/vol7ron/w8QsZ/2/
What I'm looking for is something similar to the to the flowplayer tooltip, where:
there's a trigger that causes the menu to appear when hovered
the menu disappears on leaving the trigger
if the user hovers over the menu (or tooltip), then the popup should stay open
My guess is that the trigger's hoverOut should call the disappear using setTimeout() with some delay, but on the menu's mouseenter(), the timeout should be cleared.
I'm still new to jQuery and am unsure where to store the generated timeoutID and where to call it.
Note: the same menu will be used for multiple triggers.
Update: Okay, I have something working: here
Could someone please help me clean it up and make it more efficient. More importantly, I would like not to use globals for the timeoutID. Perhaps there's a better way to store it in the object?
I just did something like this recently. What I would do is
var timer = setTimeout(/*blah*/);
$('#my_selector').data('timer') = timer;
I throw the timeoutID in the data for that element and then whenever I need to do something with it later (clearTimeout) I can just grab it from there.
note I used this method and it worked for a dynamic amount of elements, which is what I think you want. Just let me know if you need more of an explanation!
I am working on a site that has loads of legacy Javascript and jQuery includes and there is no documentation to show what is happening when.
I have a specific problem to fix and I cannot find the relevant code that is being executed when a button is clicked. To save me from trawling through (and making sense of) hundreds of lines of legacy script, is there a feature, possibly in Firebug, that will identify what script is being executed when I click on a button?
I believe there is a feature in Firebug's console window called Profile. Click profile, click the button, then click profile again. It should give you what all functions were called in that time. Be warned that if this code includes jQuery, you might get a huge long list of functions because jQuery uses tons in its code. Unfortunately, the profiler will also show anonymous functions, which can really be a pain.
Otherwise, do a search in the code for the button's class or ID and go through them. If you have an id of fancy then you might do a search for #fancy in your code and attempt to find it. That may lead you in a general direction, at least.
You can click Firebug's "Break on next" button (in the Script tab; it looks like a pause button), then push the button that you want to debug.
The next time any JavaScript code executes, Firebug will break into the debugger and show you that line of code.
The break button didn't work for me. Instead I did edit the onclick attribute with FireBug and prepended it with "debugger;" ... then you'll break right there once you click :)
None of the above answers worked for me. I am trying to use Firebug to figure out how a feature on a page is working for a site I have no control over. Here is what worked for me.
First, got the id of the element I am clicking on from the page source, and then get a temporary reference to it by creating a watch (under the script tab):
tmp=document.getElementById("idOfElement")
Next, I assigned the current onclick value to another temporary variable.
oldfunc=tmp.onclick
Next, I defined a new onclick function. Initially I tried putting debugger; as the first thing in the function, but this does not work! So instead, I created an alert:
tmp.onclick = function() { alert("Ok"); oldfunc() }
Now, as soon as I click on the button the alert comes up, at which point I then click the "Break on next" button as outlined in another answer to this question. Then I dismiss the alert and immediately I am in the debugger at the correct place.
In my case, the "Break on next" button did not work by itself, because there are a lot of other events, just mousing over the page was causing the breakpoint to be hit, preventing me from ever clicking the button.
In Firebug you can set a breakpoint in some JS and then you get a stack which will let you know the current function call stack. So if you set the breakpoint in function used by several handlers then you can use this to discover exactly which handler you are in.
This probably won't work if you are dealing with AJAX callbacks and the like though.