ciao tomtomfive,
ti rispondo qua, così può essere d'aiuto anche ad altri.
per i posteri: questa modifica è ispirata da
questo modulo, tutti i file necessari li trovate all'interno dello zip.
iniziamo ad includere nell'head del template gli script e i css:
<link href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/rd_article_scrollbar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/js/jquery.jscrollpane.min.js"></script>
ora specifichiamo la classe css del div contenitore dei contenuti da scrollare [sempre nell'head o in uno dei css del template (per comodità lo mettero nell'head)]
<style type="text/css">
.overflowcontrol {
height: 400px;
overflow: auto;
width: 500px;
}
</style>qui possiamo specificare le dimensioni del box scroller tramite "height" e "width".
NB: se i contenuti inseriti nello scroller si visualizzano interamente senza bisogno di scrollare, la scrollbar viene automaticamente nascosta.
ora inseriamo, sempre all'interno dei tag head, lo script
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('.overflowcontrol').jScrollPane();
});
</script>infine racchiudiamo il richiamo ai componenti all'interno del div "overflowcontrol"
<div class="overflowcontrol">
<jdoc:include type="component" />
</div>infine copiamo le immagini della scrollbar contenute nello zip del modulo, all'interno della cartella "images" del template.
allego l'index.php del rhuk_milkyway come esempio.
RD
[allegato eliminato da un amministratore]
