Solved

jQuery Canlendar click function

Posted on 2016-11-19
5
65 Views
Last Modified: 2016-11-23
I am using a Wordpress Plugin called bookly.  It is at the very bottom of the page.  If you go there and click on a date, the next step appears and you can choose a time.

However, if you go to the calendar when you first load the page, then navigate to the next month and click on the calendar date, the next step does not happen.
http://0c8.88c.myftpupload (DOT) com/

This is what controls it showing.
<script>
var int = setInterval(function() {
    if ($('#footer-calendar').find('.picker__day').length > 0) {
        clearInterval(int);
        init_calendar();
    }
}, 100);

function init_calendar() {
    $('.picker__day').on("click", function(e) {
        $('#footer-calendar').addClass('calendarstart');
    });

}

Open in new window

0
Comment
Question by:rgranlund
  • 3
  • 2
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 41894717
work for me... desktop and mobile...
question incomplete ?
desktopmobile
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 41894870
No, it doesn't, if you at first switch month (to December from November), after that times div not receiving  display:block rule.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 41894874
It is something to do with this part: wp-content/themes/inspyrus/library/js/scripts.js
function init_calendar() {
    $('.picker__table').on("click", function(e) {
        $('#footer-calendar').addClass('calendarstart');
    });

}

    $('.picker__table').on("click", function(e) {
        $('#footer-calendar').addClass('calendarstart');
    });

Open in new window

For some reason it doesn't work after you change month. Sorry, need to go.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 41895097
your datetime picker disable the propagation of the click event.
some solution :
1 - hack/fix it so it don't stop propagation on click
2 - register click event before it, so you got first the click
3 - replace your current code (what you post in the code snippet) by the following.
We use mouseup instead click event. Bonus, we handle touchstart too

<script>
function init_calendar(evt) {
	if($(evt.target).hasClass("picker__day"))
             $('#footer-calendar').addClass('calendarstart');
}

if(document.addEventListener) {
	document.addEventListener("touchstart", init_calendar, false);
	document.addEventListener("mouseup", init_calendar, false);
}
else {
	document.attachEvent("ontouchstart", init_calendar);
	document.attachEvent("onmouseup", init_calendar);
}

Open in new window


work in december
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41897454
So did you put the code on your site and it work fine but no feedback from you...

by the way you don't need this code anymore... that's why I put my line 1 in my previosu answer.
/* Footer Calendar */
var int = setInterval(function() {
    if ($('#footer-calendar').find('.picker__day').length > 0) {
        clearInterval(int);
        init_calendar();
    }
}, 100);

Open in new window

0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question