I’m trying to install this custom jQuery scrollbar: http://manos.malihu.gr/jquery-custom-content-scroller/ onto a modal in my Facebook Canvas app, but I can’t seem to apply it to the correct div.
My app/html page has an “Invite” button that opens up a modal which contains a multi-friend selector. The modal/multi-friend selector contains a div that is created by Javascript and then populated with a list of the user’s friends. The user can then choose people to invite from this list.
This is the Javascript that creates the friends list div in the modal (mfs is the id of a parent div in the modal, this parent div will contain the mfsForm div after it (mfsForm) is created).
//Code to login to Facebook’s API goes here…
// Getting the list of friends for the logged in user with the Graph API
FB.api('/me/invitable_friends?limit=48', function(response) {
var container = document.getElementById('mfs');
var mfsForm = document.createElement('form');
mfsForm.id = 'mfsForm';
//This area contains code which goes through each friend and creates an image and name for each one. This populates the mfsForm.
mfsForm is the id of the div that holds the list of friends. I’m trying to apply the scroll bar to this div. To do this I need to apply the class “ content mCustomScrollbar” to it.
I’m sure that I have the correct scripts included on the page because I’ve tested the scroll bar plugin by applying the same class (“ content mCustomScrollbar”) to the div mfs and it appears along the right hand side of that div perfectly, but I want to apply it to mfsForm instead.
Nothing I’ve tried so far has worked, the browser’s default gray scrollbar is the only one that appears on the mfsForm div. I think the problem might be due to the div mfsForm being created in Javascript.
I’ve tried the following methods to apply the class to mfsForm:
Applying the class to mfsForm in the external Javascript file right after it is created:
//Code to login to Facebook’s API goes here…
// Getting the list of friends for the logged in user with the Graph API
FB.api('/me/invitable_friends?limit=48', function(response) {
var container = document.getElementById('mfs');
var mfsForm = document.createElement('form');
mfsForm.id = 'mfsForm';
var attempt = document.getElementById("mfsForm");
attempt.className = " content mCustomScrollbar";
//This area contains code which goes through each friend and creates an image and name for each one. This populates the mfsForm.
Applying the class to mfsForm in the html page on document.ready:
<script>
$(document).ready(function(){
var attempt = document.getElementById("mfsForm");
attempt.className = " content mCustomScrollbar";
});
</script>
Applying the class to mfsForm in the html page on click of the button that opens the Invite modal:
//this code is in an external Javascript file:
function applyScroll(){
var attempt = document.getElementById("mfsForm");
attempt.className = " content mCustomScrollbar";
}
//this is the onClick event on the html page:
<a class="invitebutton" href="#openModal" onclick="applyScroll();"></a>
I thought the error might be caused by mfsForm not existing when the class is applied to it, so I thought applying it only after the document is loaded, or only when the invite button is clicked, would solve this problem as mfsForm would be created by then, but this hasn’t solved the problem. I get the following error in the console:
TypeError: attempt is null
Can anyone see what I’m doing wrong? I’d really appreciate any advice on how to solve this. Thank you in advance!
UPDATE
Current HTML code:
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Facebook App.</title>
<!-- Loading jquery 2.1.3 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- This .js file contains the mfsForm creation code -->
<script type="text/javascript" src="scripts/fb.js"></script>
<!-- This .css file contains the custom scrollbar's default styles -->
<link rel="stylesheet" type="text/css" href='https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css'>
<!-- This .css file contains the styles for .mfsForm and .content -->
<link rel="stylesheet" type="text/css" href="styles/scrolltestcss.css">
<!-- This is the custom scrollbar's .js file-->
<script src='https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js'></script>
</head>
<body >
<div>
<a class="invitebutton" href="#openModal"></a>
</div>
<!--Modal-->
<div id="openModal" class="modalDialog">
<div id="mfs">
<div id="wrapper">
</div>
</div>
</div>
</body>
</html>
Current fb.js file:
window.fbAsyncInit = function() {
FB.init({
appId: 'myappId',
xfbml: true,
version: 'v2.3'
});
function onLogin(response) {
if (response.status == 'connected') {
FB.api('/me?fields=first_name', function(data) {
var welcomeBlock = document.getElementById('fb-welcome');
welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
});
var jQuery = document.createElement('script');
jQuery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
document.head.appendChild(jQuery);
// First get the list of friends for this user with the Graph API
FB.api('/me/invitable_friends?limit=48', function(response) {
var container = document.getElementById('mfs');
var mfsForm = document.createElement('form');
mfsForm.id = 'mfsForm';
mfsForm.className = " content mCustomScrollbar mfsForm";
// Iterate through the array of friends object and create a checkbox for each one.
for (var i = 0; i < response.data.length; i++) {
var friendItem = document.createElement('div');
friendItem.id = 'friend_' + response.data[i].id;
friendItem.style.cssText="width:100px; height:100px; padding:7px; color:#FFF;"
friendItem.style.cssFloat="left";
friendItem.innerHTML = '<input type="checkbox" name="friends" value="' + response.data[i].id + '" />';
var img = document.createElement('img');
img.src = response.data[i].picture.data.url;
img.style.cssText = 'width: 70px;height: 70px;'
friendItem.appendChild(img);
var labelName = document.createElement('label');
labelName.style.cssText = 'font-size: 14px;'
labelName.innerHTML = response.data[i].name;
friendItem.appendChild(labelName);
mfsForm.appendChild(friendItem);
}
container.appendChild(mfsForm);
// Create a button to send the Request(s)
var sendButton = document.createElement('div');
sendButton.id = 'sendButton';
sendButton.onclick = sendRequest;
container.appendChild(sendButton);
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val()//, count = 0;
// Loop through the comment list
$("#mfsForm div").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut("fast");
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
}
});
})
});
}
}
function sendRequest() {
// Get the list of selected friends
var sendUIDs = '';
var mfsForm = document.getElementById('mfsForm');
for (var i = 0; i < mfsForm.friends.length; i++) {
if (mfsForm.friends[i].checked) {
sendUIDs += mfsForm.friends[i].value + ',';
}
}
// Use FB.ui to send the Request(s)
FB.ui({
method: 'apprequests',
to: sendUIDs,
title: 'My Great Invite',
message: 'Add this app!',
}, callback);
}
function callback(response) {
console.log(response);
}
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
onLogin(response);
} else {
// Otherwise, show Login dialog first.
FB.login(function(response) {
onLogin(response);
}, {
scope: 'user_friends, email'
});
}
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Current scrolltestcss.css:
.mfsForm {
padding-left: 90px;
position: absolute;
left: 100px;
top: 250px;
font-family:"Bubblegum Sans";
font-size: 22px;
text-decoration: none;
color: #FFF;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
margin: auto;
width: 400px;
height: 200px;
overflow: auto;
border: 2px solid red;
}
.content { border: 2px solid green;
}
