0

I have added some jQuery functionality to create a popup when hovering over a link to the script.js file included with the particular theme I am using. It is enclosed in jQuery(document).ready(function($) {}.

It works perfectly at first, but it seems that once Drupal 7 caches/aggregates the script.js file, it no longer works at all. I'm not 100% sure it is a caching related issue, as it works fine for hours, but eventually stops working. Clearing the CSS/JS cache after it stops working makes it work again.

function contactLinkInit() {
        var div = '<div class="contact-popup">' +
                '10320 Globe Road<br/>Morrisville, NC 27560<br/>' +
                'Phone: <a href="tel:919-361-4333">919-361-4333</a><br/>' +
                'Fax: 919-361-4388<br/>' +
                '<a href="mailto:info@dosoffice.com">info@dosoffice.com</a>';

        var firstRun = true;
        var firstEntered = true;
        var enteredPopup = false;

        $("a.contact-link").mouseover(function(event) {
            if (firstRun) {
                $("body").append(div); 

                $("div.contact-popup").mouseover(function() {
                    if (!firstEntered) {
                        enteredPopup = true;
                    }
                    else {
                        firstEntered = false;
                    }

                    $("div.contact-popup").css('visibility','visible'); 
                });

                $("div.contact-popup").mouseout(function() {
                    enteredPopup = false; 
                    $("div.contact-popup").css('visibility','hidden');   
                });

                $("a.contact-link").mouseout(function() {
                    if (!enteredPopup) {
                        $("div.contact-popup").css('visibility','hidden'); 
                    }   
                });
                firstRun = false;
            }
            $('div.contact-popup').css('left',event.pageX + "px");      // <<< use pageX and pageY
            $('div.contact-popup').css('top',event.pageY + "px");   
            $("div.contact-popup").css('visibility','visible'); 
        });
    }

    contactLinkInit();

I'm sure what I've done here is not best practice, neither Javascript nor Drupal are my forte. Not only am I looking for a solution to the problem itself, I certainly wouldn't mind suggestions as how to improve the code itself.

  • Take a read of this, as you're not doing it the Drupal way: drupal.org/docs/7/api/javascript-api/… – Jaypan Apr 13 '17 at 15:53
  • I seem to be following Method 1... as script.js is is specified in my theme's .info file. Did you mean the part about wrapping jQuery? – Rohn Adams Apr 13 '17 at 16:49
  • Yes, and about behaviors – Jaypan Apr 13 '17 at 16:51
  • I'm not developing a module, I still need to use behaviors? – Rohn Adams Apr 13 '17 at 16:55
  • It's how the Drupal JavaScript API works. It has nothing to do with modules. – Jaypan Apr 13 '17 at 16:55
0

I have redone my code as suggested in the comments so that it uses Drupal behaviors and the Drupal's javascript-api. I also moved my code out of the existing theme's script.js to its own file, and added that file to the scripts array in the theme's .info file.

Below is my updated code, in case it should help anyone that encounters this same sort of problem and is unfamiliar with Drupal behaviors. This has solved my problem with my code no longer working once the JS is aggregated and/or cached.

   (function($) {
     Drupal.behaviors.contactLinkHoverPopout = {
         attach: function(context, settings) {
             var div = '<div class="contact-popup">' +
                 '10320 Globe Road<br/>Morrisville, NC 27560<br/>' +
                 'Phone: <a href="tel:919-361-4333">919-361-4333</a><br/>' +
                 'Fax: 919-361-4388<br/>' +
                 '<a href="mailto:info@dosoffice.com">info@dosoffice.com</a>';

             var popupVisible = false;

             // we only want mouseovers applied once!   
             $('a.contact-link', context).once(function() {
                 // add the invisible popup div
                 $('body', context).append(div);

                 // add mouseover to contact-link
                 $('a.contact-link', context).mouseover(function() {
                     $('div.contact-popup', context).css('left', event.pageX + "px");
                     $('div.contact-popup', context).css('top', event.pageY + "px");
                     $('div.contact-popup', context).css('visibility', 'visible');
                     popupVisible = true;
                 });

                 $('div.contact-popup', context).mouseover(function() {
                     $('div.contact-popup', context).css('visibility', 'visible');
                     popupVisible = true;
                 });

                 $('a.contact-link', context).mouseout(function() {
                     if (popupVisible) {
                         $('div.contact-popup', context).css('visibility', 'hidden');
                         popupVisible = false;
                     }
                 });

                 $('div.contact-popup', context).mouseout(function() {
                     if (popupVisible) {
                         $('div.contact-popup', context).css('visibility', 'hidden');
                         popupVisible = false;
                     }
                 });
             });
         }
     };
 }(jQuery));
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.