• Resolved creativelifeform

    (@creativelifeform)


    Hi all,

    just wanted to share this. I’ve just extended the Ajax calendar to allow tool tips. Here’s how to do it.

    • Download your JQuery tool tip class of choice, I used this one: https://flowplayer.org/tools/tooltip/index.html
    • Put this in the includes/js folder of the plugin
    • open the events-manager.php file and find the commented line: Enqueing public scripts and styles
    • add the following line of code: wp_enqueue_script('jquery-tips', WP_PLUGIN_URL.'/events-manager/includes/js/jquery-tips.js'); //jQuery tools I renamed my tool tips file to jquery-tips.js, but you can call it anything you like
    • open up the events-manager.js file and right at the top in the /* Calendar AJAX */ section paste the following line:$(".e-tip[title]").tooltip() then in the load event for the calendar paste this again (needs to be instantiated again when the next page of the calendar loads). So my final ajax code looks like this:`$(“.e-tip[title]”).tooltip(
      {
      position:”bottom center”,
      effect:”fade”
      });
      $(‘.em-calendar-wrapper a’).unbind(“click”);
      $(‘.em-calendar-wrapper a’).die(“click”);
      $(‘a.em-calnav, a.em-calnav’).live(‘click’, function(e){
      e.preventDefault();
      $(this).closest(‘.em-calendar-wrapper’).prepend(‘<div class=”loading” id=”em-loading”></div>’);
      var url = em_ajaxify($(this).attr(‘href’));
      $(this).closest(‘.em-calendar-wrapper’).load(url, function()
      {
      $(this).trigger(’em_calendar_load’);
      $(“.e-tip[title]”).tooltip(
      {
      position:”bottom center”,
      effect:”fade”
      });
      });
      } );`

    Voila!

Viewing 15 replies - 1 through 15 (of 28 total)
  • Thread Starter creativelifeform

    (@creativelifeform)

    Sorry for some reason it’s not formatting the code backticks properly…hmm

    thanks for sharing. Does it working without any problem or conflict to the core functionality?

    Thread Starter creativelifeform

    (@creativelifeform)

    Interesting, actually it is causing a small problem in the back end which I can’t really understand. For some reason, when I try to add a new event, the event date tab is collapsed and cannot be expanded, not allowing me to enter an event date. The editing of events-manager.js is what is causing this, because I just did an experiment where I reverted the edited js file back to the original code and it fixed the problem for adding events, but of course, now no tool tips!.

    I find this kind of strange because I am only changing the Calendar AJAX part of the code. Here is my edited code:

    if($('.e-tip'))
            {
                $(".e-tip[title]").tooltip({position:"bottom center",effect:"fade"});
            }
    
    	$('.em-calendar-wrapper a').unbind("click");
    	$('.em-calendar-wrapper a').die("click");
    	$('a.em-calnav, a.em-calnav').live('click', function(e){
    		e.preventDefault();
    		$(this).closest('.em-calendar-wrapper').prepend('<div class="loading" id="em-loading"></div>');
    		var url = em_ajaxify($(this).attr('href'));
    		$(this).closest('.em-calendar-wrapper').load(url, function()
                        {
                            $(this).trigger('em_calendar_load');
                            if($('.e-tip'))
                            {
                                $(".e-tip[title]").tooltip({position:"bottom center",effect:"fade"});
                            }
                        });
    	} );

    Any idea why this might be causing issues in the admin section?

    edit: It seems that specifically the first line is causing the issue

    if($('.e-tip'))
            {
                $(".e-tip[title]").tooltip({position:"bottom center",effect:"fade"});
            }

    As soon as I remove this at the start of the code, the event date functionality is back in the admin. Quite strange. Perhaps some sort of conflict?

    you can use firebug or error console to see an error log.

    Thread Starter creativelifeform

    (@creativelifeform)

    Ah yeah it seems that the problem is being caused because this js file gets loaded in the admin, but the jquery.tools.min.js does not. Any idea to check if the class is included or not? I am not a jQuery user, I use mootools usually.

    I guess if I could include the tools when the admin loads then it will be fine.

    Thread Starter creativelifeform

    (@creativelifeform)

    What I don’t get is…there is no e-tip class, so the tooltip class shouldn’t get called since I am placing the call within a conditional no?

    edit: Okay I’ve come up with a temporary solution that is really lame but works. Simply paste the tools class inside of the event-manager.js file like so:

    (function(a){a.tools=a.tools||{version:"v1.2.5"},a.tools.tooltip={conf:{effect:"toggle",fadeOutSpeed:"fast",predelay:0,delay:30,opacity:1,tip:0,position:["top","center"],offset:[0,0],relative:!1,cancelDefault:!0,events:{def:"mouseenter,mouseleave",input:"focus,blur",widget:"focus mouseenter,blur mouseleave",tooltip:"mouseenter,mouseleave"},layout:"<div/>",tipClass:"tooltip"},addEffect:function(a,c,d){b[a]=[c,d]}};var b={toggle:[function(a){var b=this.getConf(),c=this.getTip(),d=b.opacity;d<1&&c.css({opacity:d}),c.show(),a.call()},function(a){this.getTip().hide(),a.call()}],fade:[function(a){var b=this.getConf();this.getTip().fadeTo(b.fadeInSpeed,b.opacity,a)},function(a){this.getTip().fadeOut(this.getConf().fadeOutSpeed,a)}]};function c(b,c,d){var e=d.relative?b.position().top:b.offset().top,f=d.relative?b.position().left:b.offset().left,g=d.position[0];e-=c.outerHeight()-d.offset[0],f+=b.outerWidth()+d.offset[1],/iPad/i.test(navigator.userAgent)&&(e-=a(window).scrollTop());var h=c.outerHeight()+b.outerHeight();g=="center"&&(e+=h/2),g=="bottom"&&(e+=h),g=d.position[1];var i=c.outerWidth()+b.outerWidth();g=="center"&&(f-=i/2),g=="left"&&(f-=i);return{top:e,left:f}}function d(d,e){var f=this,g=d.add(f),h,i=0,j=0,k=d.attr("title"),l=d.attr("data-tooltip"),m=b[e.effect],n,o=d.is(":input"),p=o&&d.is(":checkbox, :radio, select, :button, :submit"),q=d.attr("type"),r=e.events[q]||e.events[o?p?"widget":"input":"def"];if(!m)throw"Nonexistent effect \""+e.effect+"\"";r=r.split(/,\s*/);if(r.length!=2)throw"Tooltip: bad events configuration for "+q;d.bind(r[0],function(a){clearTimeout(i),e.predelay?j=setTimeout(function(){f.show(a)},e.predelay):f.show(a)}).bind(r[1],function(a){clearTimeout(j),e.delay?i=setTimeout(function(){f.hide(a)},e.delay):f.hide(a)}),k&&e.cancelDefault&&(d.removeAttr("title"),d.data("title",k)),a.extend(f,{show:function(b){if(!h){l?h=a(l):e.tip?h=a(e.tip).eq(0):k?h=a(e.layout).addClass(e.tipClass).appendTo(document.body).hide().append(k):(h=d.next(),h.length||(h=d.parent().next()));if(!h.length)throw"Cannot find tooltip for "+d}if(f.isShown())return f;h.stop(!0,!0);var o=c(d,h,e);e.tip&&h.html(d.data("title")),b=b||a.Event(),b.type="onBeforeShow",g.trigger(b,[o]);if(b.isDefaultPrevented())return f;o=c(d,h,e),h.css({position:"absolute",top:o.top,left:o.left}),n=!0,m[0].call(f,function(){b.type="onShow",n="full",g.trigger(b)});var p=e.events.tooltip.split(/,\s*/);h.data("__set")||(h.bind(p[0],function(){clearTimeout(i),clearTimeout(j)}),p[1]&&!d.is("input:not(:checkbox, :radio), textarea")&&h.bind(p[1],function(a){a.relatedTarget!=d[0]&&d.trigger(r[1].split(" ")[0])}),h.data("__set",!0));return f},hide:function(c){if(!h||!f.isShown())return f;c=c||a.Event(),c.type="onBeforeHide",g.trigger(c);if(!c.isDefaultPrevented()){n=!1,b[e.effect][1].call(f,function(){c.type="onHide",g.trigger(c)});return f}},isShown:function(a){return a?n=="full":n},getConf:function(){return e},getTip:function(){return h},getTrigger:function(){return d}}),a.each("onHide,onBeforeShow,onShow,onBeforeHide".split(","),function(b,c){a.isFunction(e[c])&&a(f).bind(c,e[c]),f[c]=function(b){b&&a(f).bind(c,b);return f}})}a.fn.tooltip=function(b){var c=this.data("tooltip");if(c)return c;b=a.extend(!0,{},a.tools.tooltip.conf,b),typeof b.position=="string"&&(b.position=b.position.split(/,?\s/)),this.each(function(){c=new d(a(this),b),a(this).data("tooltip",c)});return b.api?c:this}})(jQuery);
    jQuery(document).ready( function($){
    
    	/* Calendar AJAX */
    Plugin Author Marcus (aka @msykes)

    (@netweblogic)

    creativelifeform you spoke to my heart, it’s a shame WP isn’t on mootools ??

    thanks for sharing!

    Thread Starter creativelifeform

    (@creativelifeform)

    Haha yeah I guess jQuery is alright for doing things fast…but it’s lacking some really great stuff from Mootools.

    Oh well, it’s working now, if the mods can edit my top post to fix the code block that’d make this thread more useful, I can’t edit it myself now for some reason.

    Cheers!

    Thread Starter creativelifeform

    (@creativelifeform)

    Okay running into a sight issue with IE<9 (of course). The problem is that the tool tips will not appear once an ajax load for the calendar has been fired. I can’t quite understand why though as I am re adding the events after the calendar loads. Here’s my code, again I’m not a jQuery user so please excuse any messiness:

    /* Calendar AJAX */
    
            if($('.e-tip'))
            {
                $(".eventful[title]").tooltip({position:"bottom center"});
            }
            $('.em-calendar .eventful').mouseenter(function()
            {
                this.addClass('eventful-on');
            });
            $('.em-calendar .eventful').mouseleave(function()
            {
                this.removeClass('eventful-on')
            });
    
    	$('.em-calendar-wrapper a').unbind("click");
    	$('.em-calendar-wrapper a').die("click");
    	$('a.em-calnav, a.em-calnav').live('click', function(e)
            {
                e.preventDefault();
                if($('em-loading') )
                {
                    $('em-loading').remove()
                }
    
                $(this).closest('.em-calendar-wrapper').prepend('<div class="loading" id="em-loading"></div>');
                var url = em_ajaxify($(this).attr('href'));
    
                $(this).closest('.em-calendar-wrapper').load(url, function()
                    {
                        $(this).trigger('em_calendar_load');
    
                        $('.em-calendar .eventful').mouseenter(function()
                        {
                            this.addClass('eventful-on')
                        });
                        $('.em-calendar .eventful').mouseleave(function()
                        {
                            this.removeClass('eventful-on')
                        });
    
                        if($('.e-tip'))
                        {
    
                            $(".eventful[title]").tooltip({position:"bottom center"});
                        }
                    });
    	} );

    Any ideas? note: .e-tip is just a class I have for styling, you could use .eventful I guess.

    Thread Starter creativelifeform

    (@creativelifeform)

    Solved this, the problem was using this. As IE sucks, you need to use $(this) so here is the final code:

    (function(a){a.tools=a.tools||{version:"v1.2.5"},a.tools.tooltip={conf:{effect:"toggle",fadeOutSpeed:"fast",predelay:0,delay:30,opacity:1,tip:0,position:["top","center"],offset:[0,0],relative:!1,cancelDefault:!0,events:{def:"mouseenter,mouseleave",input:"focus,blur",widget:"focus mouseenter,blur mouseleave",tooltip:"mouseenter,mouseleave"},layout:"<div/>",tipClass:"tooltip"},addEffect:function(a,c,d){b[a]=[c,d]}};var b={toggle:[function(a){var b=this.getConf(),c=this.getTip(),d=b.opacity;d<1&&c.css({opacity:d}),c.show(),a.call()},function(a){this.getTip().hide(),a.call()}],fade:[function(a){var b=this.getConf();this.getTip().fadeTo(b.fadeInSpeed,b.opacity,a)},function(a){this.getTip().fadeOut(this.getConf().fadeOutSpeed,a)}]};function c(b,c,d){var e=d.relative?b.position().top:b.offset().top,f=d.relative?b.position().left:b.offset().left,g=d.position[0];e-=c.outerHeight()-d.offset[0],f+=b.outerWidth()+d.offset[1],/iPad/i.test(navigator.userAgent)&&(e-=a(window).scrollTop());var h=c.outerHeight()+b.outerHeight();g=="center"&&(e+=h/2),g=="bottom"&&(e+=h),g=d.position[1];var i=c.outerWidth()+b.outerWidth();g=="center"&&(f-=i/2),g=="left"&&(f-=i);return{top:e,left:f}}function d(d,e){var f=this,g=d.add(f),h,i=0,j=0,k=d.attr("title"),l=d.attr("data-tooltip"),m=b[e.effect],n,o=d.is(":input"),p=o&&d.is(":checkbox, :radio, select, :button, :submit"),q=d.attr("type"),r=e.events[q]||e.events[o?p?"widget":"input":"def"];if(!m)throw"Nonexistent effect \""+e.effect+"\"";r=r.split(/,\s*/);if(r.length!=2)throw"Tooltip: bad events configuration for "+q;d.bind(r[0],function(a){clearTimeout(i),e.predelay?j=setTimeout(function(){f.show(a)},e.predelay):f.show(a)}).bind(r[1],function(a){clearTimeout(j),e.delay?i=setTimeout(function(){f.hide(a)},e.delay):f.hide(a)}),k&&e.cancelDefault&&(d.removeAttr("title"),d.data("title",k)),a.extend(f,{show:function(b){if(!h){l?h=a(l):e.tip?h=a(e.tip).eq(0):k?h=a(e.layout).addClass(e.tipClass).appendTo(document.body).hide().append(k):(h=d.next(),h.length||(h=d.parent().next()));if(!h.length)throw"Cannot find tooltip for "+d}if(f.isShown())return f;h.stop(!0,!0);var o=c(d,h,e);e.tip&&h.html(d.data("title")),b=b||a.Event(),b.type="onBeforeShow",g.trigger(b,[o]);if(b.isDefaultPrevented())return f;o=c(d,h,e),h.css({position:"absolute",top:o.top,left:o.left}),n=!0,m[0].call(f,function(){b.type="onShow",n="full",g.trigger(b)});var p=e.events.tooltip.split(/,\s*/);h.data("__set")||(h.bind(p[0],function(){clearTimeout(i),clearTimeout(j)}),p[1]&&!d.is("input:not(:checkbox, :radio), textarea")&&h.bind(p[1],function(a){a.relatedTarget!=d[0]&&d.trigger(r[1].split(" ")[0])}),h.data("__set",!0));return f},hide:function(c){if(!h||!f.isShown())return f;c=c||a.Event(),c.type="onBeforeHide",g.trigger(c);if(!c.isDefaultPrevented()){n=!1,b[e.effect][1].call(f,function(){c.type="onHide",g.trigger(c)});return f}},isShown:function(a){return a?n=="full":n},getConf:function(){return e},getTip:function(){return h},getTrigger:function(){return d}}),a.each("onHide,onBeforeShow,onShow,onBeforeHide".split(","),function(b,c){a.isFunction(e[c])&&a(f).bind(c,e[c]),f[c]=function(b){b&&a(f).bind(c,b);return f}})}a.fn.tooltip=function(b){var c=this.data("tooltip");if(c)return c;b=a.extend(!0,{},a.tools.tooltip.conf,b),typeof b.position=="string"&&(b.position=b.position.split(/,?\s/)),this.each(function(){c=new d(a(this),b),a(this).data("tooltip",c)});return b.api?c:this}})(jQuery);
    	/* Calendar AJAX */
            if($('.e-tip'))
            {
                $(".eventful[title]").tooltip({position:"bottom center"});
            }
            $('.em-calendar .eventful').mouseenter(function()
            {
                $(this).addClass('eventful-on');
            });
            $('.em-calendar .eventful').mouseleave(function()
            {
                $(this).removeClass('eventful-on')
            });
    
    	$('.em-calendar-wrapper a').unbind("click");
    	$('.em-calendar-wrapper a').die("click");
    	$('a.em-calnav, a.em-calnav').live('click', function(e)
            {
                e.preventDefault();
                if($('em-loading') )
                {
                    $('em-loading').remove()
                }
    
                $(this).closest('.em-calendar-wrapper').prepend('<div class="loading" id="em-loading"></div>');
                var url = em_ajaxify($(this).attr('href'));
    
                $(this).closest('.em-calendar-wrapper').load(url, function()
                    {
                        $(this).trigger('em_calendar_load');
    
                        if($.browser.msie == true && $.browser.version != "9.0")
                        {
                            $('.eventful').addClass('eventful-off')
                        }
    
                        $('.em-calendar .eventful').mouseenter(function()
                        {
                            $(this).addClass('eventful-on');
                        });
                        $('.em-calendar .eventful').mouseleave(function()
                        {
                            $(this).removeClass('eventful-on')
                        });
    
                        if($('.e-tip'))
                        {
    
                            $(".eventful[title]").tooltip({position:"bottom center"});
    
                        }
                    });
    	} );
    Plugin Author Marcus (aka @msykes)

    (@netweblogic)

    +1 IE sucks

    Do you have an example of this method on a site that is using the calendar?

    Thread Starter creativelifeform

    (@creativelifeform)

    Sure here you go

    https://www.traintoperform.com.au/events/

    this was built using the older version of the plug in though.

    Because I have been trying to follow but I cannot get the interior pages of the calendar to show up with the correct style for the tool tip. I am not sure what I a missing. Here is a link for reference: https://lab.astonmagna.org/about/publications/press-releases/

    Any help would be appreciated!

    Great just saw your link! Thanks! Do you think it is because it is an older version of the plugin?

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘Extended Ajax calendar for tool tips’ is closed to new replies.