Полоса прокрутки Jscrollpane на переключенном элементе div

0

Im работает на веб-сайте с меню onclick, которое переключает мои div div. Теперь я пытаюсь получить пользовательскую полосу прокрутки на этом div, но я не могу найти плагин, который действительно работает. Я не уверен, что даже это можно сделать...

это мой код

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slide-fade-content.js"></script>
<!--Jscrollpane-->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<!--Jscrollmousewheel-->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!--Jscrollstyle-->
<link href="css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
<script>
    $(function(){
    $('#menu a').click(function () {
        $('#menu a').css('background', 'none');
     $(this).css('background', '#00d6f6');
     });
 });
</script>
</head>

<body>
<div id="container">
    <div id="wrapper">
        <div id="left">
            <center><img src="images/logo.png"></center>
            <div id="menu">
                <center><a class="more" href="#first-item"><b>Portfolio</b></a>&nbsp;&nbsp;<a class="more" href="#second-item"><b>About Me</b></a>&nbsp;&nbsp;<a class="more" href="#third-item"><b>Services</b></a><br></center>
                <center><a class="more" href="#fourth-item"><b>Contact</b></a></center>
            </div>
            <div id="footer"> DNDesign 2014</div>
        </div>
        <div id="content">
            <div id="ajax" class="scroll-pane"></div>
        </div>
    </div>
</div>
</body>
</html>

<script>
$(function()
{
    $('.scroll-pane').jScrollPane();
});
</script>

это CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0px;
}

p {
    color: #fff;
}

#container {
    width:100%;
    height: 100%;
    background: url(images/background.png) repeat-y fixed #000;
}

#wrapper {
    width: 960px;
    height: 100%;
    margin: 0px auto;
}

#left {
    width:320px;
    height:100%;
    background: #121212;
    margin-left: 10px;
    float: left;
    border: 10px double black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#menu {
    width: 300px;
}

a {
    color: #fff;
    text-decoration: none;
    font-size:18px;
    font-style: oblique;
}

a:hover {
    background: #00d6f6;
}

#footer {
    width: 320px;
    position: absolute;
    bottom: 15px;
    text-align: center;
    color: #fff;
}

#content {
    width: 600px;
    height: 100%;
    margin-left: 30px;
    float: left;
    background: url(images/background-left1.png) bottom left no-repeat, url(images/background-left2.png) bottom right no-repeat, url(images/background-left4.png) top left no-repeat, url(images/background-left3.png) top right no-repeat, url(images/logobottom.png) bottom center no-repeat;
}

#ajax {
    margin-top: 113px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.scroll-pane {
    overflow: auto;
}

это код для ajax div:

/* jQuery Color Fade v0.1 * Released under the CC BY 3.0 License (http://creativecommons.org/licenses/by/3.0/) * https://github.com/matthewbj/jQuery-Color-Fade */
(function(b){var c={init:function(a){var c=b.extend({fadeColor:"#00d6f6",fadeTime:800,delayTime:600},a),d={position:"relative","z-index":1},e={height:"100%",width:"100%","background-color":c.fadeColor,position:"absolute",top:0,left:0,"z-index":"-1"};return this.each(function(a){b(this).css(d).append('<div id="colorFadeDiv'+a+'" class="colorFadeClass"></div>');b("#colorFadeDiv"+a).css(e).delay(c.delayTime).fadeOut(c.fadeTime)})},refade:function(a){a=b.extend({fadeColor:"#00d6f6",fadeTime:800,delayTime:600},
a);b(this).find(".colorFadeClass").css("background-color",a.fadeColor).show().delay(a.delayTime).fadeOut(a.fadeTime)}};b.fn.colorFade=function(a){if(c[a])return c[a].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof a||!a)return c.init.apply(this,arguments);b.error("Method "+a+" does not exist on jQuery.colorFade")}})(jQuery);

// slide & fade content
jQuery(document).ready(function($) {
    $('.more').on('click', function() {
        var href = $(this).attr('href');
        if ($('#ajax').is(':visible')) {
            $('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
        }
        $('#ajax').css({ display:'block' }).animate({ height:'450px' },function() {
            $('#ajax').html('<img id="loader" src="loader.gif">');
            $('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); // http://loadinfo.net/
            $('#ajax').load('slide-fade-content.html ' + href, function() {
                $('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': '#00d6f6' });
            });
        });
    });
});

страница, на которой есть divs, которые загружаются в div ajax

<div id="load">
<div id="first-item">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>
<div id="second-item">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>
<div id="third-item">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>
<div id="fourth-item">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>

в основном у меня есть одна дополнительная страница, на которой есть divs с содержимым для каждой страницы ссылок на меню. Когда вы нажимаете одну из кнопок меню, она извлекает один из этих div с другой веб-страницы (которая не видна на самом сайте) и показывает ее в div с идентификатором ajax. Поэтому я думаю, мне нужно поместить полосу прокрутки в этот div.

Изменение: я пытался внедрить Jscrollpane в свой код, но его не показываю... что я делаю неправильно? Кроме того, я еще ничего не редактировал в исходном CSS, который поставляется с Jscrollpane, поэтому проблема не может быть проблемой.

  • 0
    Нет кода, который изменяет ваш контент через ajax. Можете ли вы сделать пример в jsFiddle ?
  • 0
    Я не прошу изменить свой контент через ajax, я спрашиваю, почему эта полоса прокрутки Jscrollpane не отображается в моем div. Весь материал с другим кодом делает меня идеальным, это действительно переключение div (on), нажав кнопку меню, вот и все
Теги:
scrollbar

1 ответ

0

Похоже, проблема заключается в самом обновлении ajax - обновление содержимого после применения jScrollPane удаляет пользовательские элементы прокрутки (которые находятся внутри вашего контейнера), поэтому вы должны повторно инициализировать jScrollPane, чтобы видеть полосы прокрутки после обновления ajax. Чтобы избежать этого, вы должны использовать метод getContentPane чтобы получить элемент для обновления. JavaScirpt обновление демо.

Вместо этого плагина вы можете попробовать панель прокрутки jQuery, где вы можете обновлять контент с помощью идентификатора элемента или селектора классов $('.element-class').not('.scroll-wrapper').html(content) который вы можете безопасно использовать, даже если jQuery Scrollbar не инициализирован

Поделиться
  • 0
    Я добавил весь код для этой страницы, включая часть Jquery, которая имеет отношение к div ajax. Я сделал небольшую ошибку, думал, что это было на главной странице, извините. Ajax div не загружает себя, как в демонстрации, которую вы мне показали, так что я до сих пор не могу заставить его работать. Мой плохой за то, что не дал весь необходимый код. Надеюсь, что это лучше показывает, что именно происходит и как мне это исправить
  • 0
    @Juzbeingme, но вы обновляете содержимое #ajax с помощью $('#ajax').load('slide-fade-content.html ' Load $('#ajax').load('slide-fade-content.html ' , так что вы действительно удаляете пользовательские полосы прокрутки. Вам следует переустановить jScrollPane после загрузки содержимого. Сделайте пример в jsFiddle
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню