Apply jQuery UI to Optimizely code?

Question

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.

Answer 1

I figured this out. I needed to change

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

to

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