[WordPress] JScrollPane embedden in WP werkt niet

[Verwijderd]

Hallo,

ik ben niet zo bekend met javascript maar probeer een custom scrollbar met jscrollpane toe te voegen aan wordpress. Als ik het in een gewone test site zonder wordpress probeer werkt het, maar binnen wordpress pakt hij hem niet.

Ik heb de benodigde bestanden met een include aan de header toegevoegd en ze zijn bereikbaar:

JavaScript:

<script type="text/javascript" src="http://osdoi.com/demo3/wp-content/themes/osdoi theme/js/JQem.js"></script>
    <script type="text/javascript" src="http://osdoi.com/demo3/wp-content/themes/osdoi theme/js/jquery.js"></script>
    <script type="text/javascript" src="http://osdoi.com/demo3/wp-content/themes/osdoi theme/js/mouse.js"></script>
    <script type="text/javascript" src="http://osdoi.com/demo3/wp-content/themes/osdoi theme/js/jscrollpane.js"></script>
    
    <script type="text/javascript">
    var $j = jQuery.noConflict();
$j(function(){
jQuery('.scroll-pane').jScrollPane({scrollbarWidth:10});
});
    </script>

mijn html is als volgt:

HTML:

<div class="scroll-pane">
<div class="content">

Hierin de inhoud van content

</div>
</div>

De CSS voor die divs is:

Cascading Stylesheet:

.scroll-pane{
    margin-top:60px;
    padding:0px 30px 10px 10px;
    width:810px;
    height:400px;
    overflow:scroll;
}

.content{
    width:800px;
    height:800px;
}

Voor de opmaak van de scrollbar heb ik voor nu even de standaard CSS van jScrollpane:

Cascading Stylesheet:

.jScrollPaneContainer {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color:#000;
}

.jScrollPaneTrack {
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    background: #aaa;
}
.jScrollPaneDrag {
    position: absolute;
    background: #666;
    cursor: pointer;
    overflow: hidden;
}
.jScrollPaneDragTop {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.jScrollPaneDragBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
a.jScrollArrowUp {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    text-indent: -2000px;
    overflow: hidden;
    /*background-color: #666;*/
    height: 9px;
}
a.jScrollArrowUp:hover {
    /*background-color: #f60;*/
}

a.jScrollArrowDown {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    text-indent: -2000px;
    overflow: hidden;
    /*background-color: #666;*/
    height: 9px;
}
a.jScrollArrowDown:hover {
    /*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
    /*background-color: #f00;*/
}

Je kan talen meegeven in je [code=html | js | css | php] blokken

Heeft iemand hier toevallig ervaring mee en een idee wat ik verkeerd doe

[ Voor 1% gewijzigd door BtM909 op 08-02-2012 12:17 ]

[Kvn]

Al eens gekeken of je Javascript-errors krijgt?

[Verwijderd]

Die krijg ik niet helaas

[BtM909]

Hier kunnen we niks mee. Je moet toch echt gaan debuggen en een kant-en-klare testcase opleveren.

Je zegt dat het stand-alone wel werkt, maar niet als je het in WordPress neerplempt. Heb je al eens geGoogled? If so, waarom ben je er niet achter gekomen dat er gewoon een WP plugin beschikbaar is?

Hoef je ook geen moeite te doen met namespaces binnen de diverse javascript libraries