ОБНОВЛЕНИЕ У меня есть jsfiddle, где показана проблема здесь: http://jsfiddle.net/waf11s6u/1/ Когда вы вводите письмо в строку поиска, пользовательская полоса прокрутки, прикрепленная к div, исчезает. Полоса прокрутки может исчезнуть с помощью кода, который затухает несогласованные слова из div?Как остановить элемент HTML, исчезающий с помощью Javascript?
~~
Я создаю пользовательский селектор мульти-друг для игры в Facebook, это выглядит примерно так: http://tinyurl.com/gus79cf Пользователь может ввести в строку поиска и любые имена соответствия друга появляются в области ниже. Я использую собственный плагин прокрутки для создания полосы прокрутки для прокрутки списка друзей. Это сайт плагина: http://manos.malihu.gr/jquery-custom-content-scroller/
Визуально полоса прокрутки состоит из двух частей, первая является трек (я нарисовала дорожку на фоновое изображение, так что это не на самом деле часть кода Javascript), а вторая часть - значок, значок - это небольшое изображение, которое перемещается вверх и вниз по дорожке.
Полоса прокрутки работает отлично (это означает, что значок слайд вверх и вниз правильно), за исключением одной вещи, когда пользователь вводит письмо в панель поиска, значок исчезает, и он снова становится видимым снова, когда панель поиска пустой.
Диск, содержащий имена & Изображения друзей создаются динамически в Javascript (это называется «mfsForm»). Когда пользователь начинает вводить имя, у меня есть Javascript, который будет исчезать не совпадающими именами друзей & изображений.
Я думаю, что этот код также вызывает исчезновение значка.
Это код в вопросе:
// 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");
}
});
})
});
Я думаю, что $(this).fadeOut("slow"); делает значок прокрутки исчезать. Я попытался настроить таргетинг на значок, указав его класс (mCSB_dragger_bar) и затухая его здесь: $(this).next('.mCSB_dragger_bar').fadeIn("slow");, но он не работает.
Любая помощь или предложения по тому, что я мог бы попытаться исправить эту проблему, были бы очень благодарны, заблаговременно!
jsFiddle, возможно? –
Привет @rac спасибо за ваш ответ, я сейчас поработаю над созданием jsfiddle, для меня это может занять некоторое время, но я дам вам знать, когда я это сделаю. – Emily
Hi again @rac У меня есть эта скрипка здесь: http://jsfiddle.net/waf11s6u/1/, область внутри зеленого окна - это место, где будут указаны друзья, для этого примера я просто разместил там образец текста (потому что я не мог отображать друзей из facebook). Как вы можете видеть, есть специальная полоса прокрутки, прикрепленная к коробке. Если вы наберете «T» в строке поиска, тогда полоса прокрутки исчезнет, если вы продолжаете набирать «Th», тогда текст останется, потому что он соответствует тому, что находится в поле, но если вы наберете «Thz», тогда образец текста исчезнет , – Emily