1

I'm attempting to append a div to the body of a site, then hide it by sliding it to the left when a user clicks the close button using jquery. The site is currently using Drupal 7, and for multiple reasons directly editing the file is not a possibility. I am using Optimizely to apply this.

I know the proper jquery functions that I need to apply, but my main problem is figuring out how to add jQuery UI to my document from Optimizely so that it applies to the jQuery code I'm adding in the edit code section. Here's what I have for the div I want to append, with the jQuery .hide functions applied to the button tag:

$("body").append("<div id=\"faceboxwrap\">
<div id=\"facebox\" style=\"height:500px; width:320px; z-index:99999; position:fixed; margin-left:0px; bottom:20px; background-image:url(..);\">
<div class=\"action-link field-name-field-fa-link\" style=\"float:left; margin-top:360px; padding-right: 10px; \">
<div class=\"field field-name-field-shared-splash-link field-type-link-field field-label-hidden\" style=\"width: 175px; margin-left: 103px; margin-right: auto; top: 38px; background-color: rgb(204, 51, 51); \">
<div class=\"field-items\">
<div class=\"field-item even\">
<a href=\"...\" id=\"trackDonate\" style=\"padding-right: 10px;\">DONATE $10</a>
</div></div></div>\n
<div style=\"text-align: center; width: 100%; color: rgb(121, 121, 121); font-size: 13px; margin-top: 60px; margin-left: 115px;\">
<button id=\"close\" style=\"font-weight: bold; font-size: 14px; cursor: pointer; text-transform: lowercase; cursor: hand;\" onclick=\"$('#faceboxwrap')hide('slide', {direction: 'left'}, 1000));\"> No thanks </button>
</div></div></div></div>");

Is there any way to apply the jQuery UI script to this div without editing the actual website? The javascript source I want to add is: http://code.jquery.com/ui/1.10.4/jquery-ui.js

I've tried to apply it with this code but it did not work:

$(function(){var fileRef1 = document.createElement('script'); 
fileRef1.setAttribute("type","text/javascript"); 
fileRef1.setAttribute("src","http://code.jquery.com/ui/1.10.4/jquery-ui.js"); 
document.head.appendChild(fileRef1);});

I've been trying to do this for over four hours with every trick I can find and I can't make it work. Any help would be great. Thanks.

user3255115
  • 43
  • 5

1 Answers1

2

I figured this out. I needed to change

onclick=\"$('#faceboxwrap').hide('slide', {direction: 'left'}, 1000));\"

to

onclick=\"jQuery('#faceboxwrap').hide('slide', {direction: 'left'}, 1000));\"
user3255115
  • 43
  • 5
  • That sounds like your `$` might be overwritten or not assigned. Optimizely is using `$` as far as I know (works for me), but it will always be available as `jQuery`. – simbabque Feb 04 '14 at 19:44
  • Optimizely overwrites the `$` alias to point to a subset of jQuery which excludes many of the DOM manipulation functions such as show/hide. The jQuery function still refers to the full version of jQuery you import elsewhere in your page, which is why it works when you call `jQuery.hide`. – Brian Hadaway Mar 11 '14 at 20:44