1

I am using the plugin 'Cookie Monster' by herdboy which generates a cookie notification message displayed as either a div at the top/bottom of your page or as an overlay. The basic plugin options limit the notification message positioning to either the top of your page or at the bottom (this is illustrated in the link). However, I want to set the message to appear inside a specific div of my choosing.

I can see that inside the plugin's JS file, your choice in the basic options means the message will either be positioned using $('body').prepend or $('body').append. I edited the js file to replace 'body' with '#myDiv'.

My problem is that even after having changed the plugin's JS file, the message continues to appear as the first div in the body tag (ie. prepended to the body). I have checked all other files in the plugins/system/cookiemonster location, and the only file which seems to reference injecting the message markup into the site is the JS file. I can't see any basic JS errors, and it is definitely not a caching issue.

What is it that I am potentially missing?

Improve this question
3
  • What exactly did you change in the code to try and change the position?
    – Lodder
    Jun 13, 2014 at 15:20
  • "I edited the js file to replace 'body' with '#myDiv'." - In the cookiemonster.js file, there is a long string of if/else conditions which look like this: if(appOrPre){$('body').append('<div style="background:none;" class="cc-cookies cc-discreet"> ... etc. I say 'etc' because the code repeats itself along these same lines, switching out 'append' with 'prepend' but otherwise being very similar. I changed the 'body' in $('body').prepend to '#myDiv' so that the message should prepend to my chosen div, not the body element.
    – Candlejack
    Jun 13, 2014 at 16:12
  • I'd contact the plunging developer. It's not an unreasonable enhancement request and is likely to reasonably simple and quick to implement.
    – Peter Wiseman
    Jun 13, 2014 at 23:07

2 Answers 2

Reset to default
1

Having established that editing the plugin's own JS file was unworkable (though I'm still unsure of the exact reason), I decided to override the plugin JS in the project's main JS file:

$(window).load(function(){
    // some other
    // project
    // functions here
    cookieMessagePositioning();
});

function cookieMessagePositioning(){
    var cookieTimer = setTimeout(function() {
        $('header.cc-cookies').prependTo('#myDiv');
    }, 20);
}

NB. header.cc-cookies is the relevant class from the markup generated by the Cookie Monster plugin. In the real project code we have some other conditions being checked in the CookieMessagePositioning function but these are irrelevant to the question and don't affect the answer.

The timeout (20ms in this case) is a precaution to make sure the relevant markup has loaded in the DOM before CookieMessagePositioning attempts to reposition anything.

Improve this answer
0

Almost hard to get valid answers on a such questions, without someone have access to the whole page and code.

However, a thing you have to ensure is that the #yourDiv element exists and is unique in the DOM. If your changes in the plugin js would have been okay, it probably wouldn't show at all, if your element wasn't there.

As an alternative workaround, although I don't know where you want the Cookies message appear, I could suggest to create some css overrides for it, giving it absolute or fixed position, to place it wherever you want, and some box-shadow mixed with other css tricks to make it stand out of the rest of the content.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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