UPDATE I have a jsfiddle showing the issue here: http://jsfiddle.net/waf11s6u/1/ When you type a letter into the search bar, the custom scrollbar attached to the div disappears. The scrollbar may be getting faded out by the code that fades out non-matching words from the div?
~~
I’m creating a custom multi-friend selector for a Facebook game, it looks similar to this: http://tinyurl.com/gus79cf The user can type into a search bar and any matching friend names appear in the area below. I’m using a custom scrollbar plugin to design the scrollbar for scrolling down through the list of friends. This is the plugin’s site: http://manos.malihu.gr/jquery-custom-content-scroller/
Visually the scrollbar is made up of two parts, the first is the track (I’ve drawn the track onto the background image, so it’s not actually part of the Javascript code), and the second part is the icon, the icon is the small image that moves up and down along the track.
The scrollbar works perfectly (meaning that the icon slides up and down correctly), except for one thing, whenever the user types a letter into the search bar the icon disappears, and it only becomes visible again when the search bar is empty.
The div which contains the names & images of friends is created dynamically in Javascript (it's called "mfsForm"). When the user begins typing a name, I have some Javascript that will fade out non-matching friend names & images.
I think that this code is also causing the icon to disappear.
This is the code in question:
// Earlier code here connects to Facebook's API.
// Then 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');
// Creating the div "mfsForm" (this will hold the friend names & photos, and is also what the custom scrollbar is applied to.)
var mfsForm = document.createElement('form');
mfsForm.id = 'mfsForm';
mfsForm.className = " 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++) { //Math.min(response.data.length, 10)
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);
console.log(mfsForm);
$(mfsForm).mCustomScrollbar();
// 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("slow");
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
//Attempting to fade in the icon here:
$(this).next('.mCSB_dragger_bar').fadeIn("slow");
}
});
})
});
I think that $(this).fadeOut("slow"); is making the scrollbar icon fade out. I've tried to target the icon by referencing its class (mCSB_dragger_bar) and fading it in here:
$(this).next('.mCSB_dragger_bar').fadeIn("slow"); but it's not working.
Any help or suggestions on what I could try to fix this problem would be really appreciated, thank you in advance!
