I'm a bit confused by some behavior on the frontend. Im using the datepicker() method from the JQuery UI libraries, and when a date is first selected, I want the calendar to slide left to display the rest of a form. That works fine unless the previous/next month elements are clicked first. Then the DOM changes(possibly unrelated) and nothing else happens. The calendar stays in its original position and the form never shows up. It's like the event listener that I wrote is being overridden. I'm assuming I just have a fundamental misunderstanding of event handling with javascript/jquery. Im a backend developer with only the slightest frontend experience, so if anyone could explain to me what im doing wrong, I'd be greatly appreciative.
Here's a super simplified example that creates the same behavior:
HTML:
<div id="calendar"></div>
CSS:
#calendar {
position:relative;
left:10em; }
JS:
$(document).ready(function () {
$("#calendar").datepicker();
$("#calendar tbody td").click(function () {
$("#calendar").animate({
left: "-30px",
easing: 'swing'
});
});
});
And here is a fiddle: http://jsfiddle.net/HM9ea/
Try this with onSelect:
$("#calendar").datepicker({
onSelect: function () {
$(this).animate({
left: "-30px",
easing: 'swing'
});
}
});
Demo
Issue with your code is that you were trying to animate a object which was not presenet at the state of document ready. so your event does not get fired, instead you can use the builtin method of select onSelect.
Related
Link: https://jsfiddle.net/nbonne/9hcoy9j8/
I aim is to have the medium blue box and everything in it move up when the search button is pressed.
I know my selector is for "form" and it's trying to change the background, I'm having trouble getting anything to animate.
I think this is the correct way to accomplish it but nothing happens:
$("#search-btn").click(function{
$("controls-main").animate({
background: "red"
}, 500);
})
In the fiddle:
Second click handler was missing parentheses (syntax error in console)
s-form class was missing from your form html code (empty selector)
$('search') is a wrong selector. You probably wanted $('[name=search]');
You are animating background, which jQuery's animate doesn't animate.
Updated working fiddle: https://jsfiddle.net/9hcoy9j8/18/
$(document).ready(function() {
$(".rand-wiki").click(function() {
window.open("https://en.wikipedia.org/wiki/Special:Random");
});
$(".s-form").on('click', function () {
$("[name=search]").animate({
marginTop: '40px'
}, 500);
});
});
jQuery on its own can't animate colors. You need another library like jQuery UI. See this SO answer for more information.
I'm developing a calendar using Fullcalendar (docs)
When an empty time slot is selected i want to show a context menu, like this:
(don't mind the styling)
select: function(start, end, jsEvent){
$("#calendarContextMenu").css({
display: "block",
left: jsEvent.pageX + 4,
top: jsEvent.pageY - 16
});
}
And hide it when anything else is clicked:
$(document).click(function(){
$("#calendarContextMenu").hide();
});
jsFiddle
This works well, but when an allday time slot is selected the context menu doesn't show up. I noticed this happens because $(document).click() is fired directly after fullcalendar's select callback. What can i do to fix it? It seems like there's some sort of event bubbling going on. Ofcourse, alternate solutions are always welcome.
Note: There is a div .fc-content-skeleton which is causing the problem i think.
I updated your codes and added the eventClick listener. Kindly check here: http://jsfiddle.net/e6v3mkjo/4/
Update 1:
Changed eventClick to dayClick
http://jsfiddle.net/e6v3mkjo/5/
Kindly check their docs as well: http://fullcalendar.io/docs/
Update 2:
Haha, I realized I didn't understand the question well. The solution to your real problem is just simple: remove the document click handler and then add the unselect handler.
unselect: function() {
$("#calendarContextMenu").hide();
}
Try:
$(document).click(function(){
console.log('hide');
$("#calendarContextMenu").show();
});
I recently asked a question about the inability to click a table row and popup an alert when on any page but the first using List.js pagination.
This was solved by adjusting my click event to:
$('#test-list').on('click', 'tr', function() {
alert("These work, but the rest don't :(")
})
Now I seem to be having the same trouble with buttons, but am not sure how to fix the click event.
This is the click event as it sits:
$(".test-button").on("click", function ()
{ alert("These work, but the rest don't :(");
});
Here's a codepen so you can check out the issue:
http://codepen.io/cavanflynn/pen/gpdgvj
It's probably also a simple fix, but I cannot come up with the solution.
Thanks for your help!
for the buttons use a static reference to bind the event and then pass the button class like this:
$("#test-list tbody").on("click", ".test-button",function () {
alert("These work, but the rest don't :( ..... but now seems working :) ");
});
working pen http://codepen.io/anon/pen/XbPpPK
I'm not that great with jQuery but basically, I have a jQuery that displays when scrolling down, new content.
But that new content has div that are under effect of another jQuery function that is called by ready.
So not it only the content that is loaded first when the page loads is working but when the new content is showing is not working on it to.
So I'm thinking maybe I can link the two jQuerys like a trigger when the second jQuery loads to execute the first one, is it possible? How?
Thanks!
UPDATE:
$(document).ready(function($){
$('.wrapper-hover').hover(
function () {
$(this).animate({opacity:'1'});
},
function () {
$(this).animate({opacity:'0'});
}
);
};
Try using Jquery .trigger() to trigger an event and then have something listen for that event
$(document).ready(function($){
//your event handler
$('body').on('event', function() {
$('.wrapper-hover').hover(
function () {
$(this).animate({opacity:'1'});
},
function () {
$(this).animate({opacity:'0'});
}
);
});
};
//when your inifinite scroll finishes trigger the event
$('body').trigger('event');
If all you're doing is attaching a hover event to that class you might also want to think about event delegation, still not sure what your intention is based on your question.
What I understood from your question is that you want a hover event on a div which works well when the page is loaded but it doesn't work when a new div renders. If this is so then try the following code.
$(document).ready(function($){
$('.wrapper-hover').on("mouseenter", function() {
$(this).animate({opacity: '0'}, 1000,
function() {
$(this).animate({opacity: '1'});
});
});
});
I resolved the issue with callback of the infinite scroll jquery. Thanks all!
I am developing a website using JQM. I have dynamically created a collapsible via AJAX data. Now, I want to make the collapsible slideup and down smoothly (JQuery mobile). The problem is .delegate function is getting executed, but its using the default sliding speed and not changing. My code is :
$('#search-page').delegate('.menu-collapse','expand', function (event) {
$(this).children().slideDown(300);
}).delegate('.menu-collapse','collapse', function (event) {
$(this).children().next().slideUp(300);
event.stopPropagation();
});
I think some problem with $(this). Can anyone sort it out ? Thanks in Advance.
try , thats work exactly as you want now
$(document).on('pageinit',function(event){
$('[data-role="collapsible"]').bind('expand', function (event) {
$(this).find('.ui-collapsible-content')
.css('display','none')
.slideDown(300, function(){
$(this).css('display','block');
});
}).bind('collapse', function (event) {
$(this).find('.ui-collapsible-content.ui-collapsible-content-collapsed')
.slideUp(300);
});
});
FIDDLE HERE
I think, you need to find way, how you can animate collapsible set, not why delegate not working
see questions like this, and try it out.
But i can't repeat this, because it's bit different.