Here is the site I'm having problems with and I could use something with a fresh set of eyes to help me out:
http://www.costabellaliving.com/index.php?option=com_forme&fid=2 This is the code I'm using to initiate scrollbars on pages that need them: // add scrolling code to select pages $("code, #project").append("<code class='jquery'>$ ('div.content').addClass('scroll');</code>"); This looks for a <code> tag and then adds the class "scroll" to div.content // run the code in the markup! $("code.jquery").each(function() { eval($(this).text()); }); // Add scrolling where needed $(".scroll").jScrollPane({scrollbarWidth:16, scrollbarMargin:0, showArrows:true}); Here is the associated CSS code: /*** jScroll Pane ***/ /** size and positioning **/ .jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1 } .jScrollPaneTrack { width: 16px; height: 100%; padding: 2px 1px; position: absolute; top: 2px; right: 2px } .jScrollPaneDrag { width: 14px; position: absolute; overflow: hidden } .jScrollPaneDragTop, .jScrollPaneDragBottom { position: absolute; left: 0; overflow: hidden } a.jScrollArrowUp, a.jScrollArrowDown { display: block; height: 9px; padding: 2px 1px; position: absolute; right: 2px; overflow: hidden; z- index: 1 } a.jScrollArrowUp, .jScrollPaneDragTop { top: 0 } a.jScrollArrowDown, .jScrollPaneDragBottom { bottom: 0 } /** appearance **/ .jScrollPaneTrack { background: #F3D1A6; border-left: solid 1px #B99D86; border-right: solid 1px #B99D86; cursor: pointer } .jScrollPaneDrag { background: #BA987B; cursor: pointer } a.jScrollArrowUp, a.jScrollArrowDown { background-color: #F3D1A6; background-position: 2px -36px; background-repeat: no-repeat; border- left: solid 1px #B99D86; border-right: solid 1px #B99D86 } a.jScrollArrowUp { background-image: url(../images/arrow_up.png); border-top: solid 1px #B99D86 } a.jScrollArrowDown { background-image: url(../images/arrow_down.png); border-bottom: solid 1px #B99D86 } a.jScrollArrowUp:hover, a.jScrollArrowDown:hover { background- position: 2px -17px } a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { background-position: 2px 2px } Any help at all would be greatly appreciated. Thank you, Nic Marson
