testo scorrevole - modificare la barra css

[Tristal]

Salve a tutti,

ho questo esempio di testo con la barra scorrevole

http://www.lmadv.it/test/scroll/basic.html

vorrei modificare la barra azzurrina, che sarebbe quella attiva per far scorrere il testo. Così com'è è troppo lunga, vorrei fosse un quadrato...

con i css non riesco a modificare

.jspDrag
{
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	width: 10px;
	background-color: #369;
	visibility: visible;
	overflow: visible;
	height: 10px;
}

questo css è della barra azzurrina, se metto l'altezza non me la prende perchè?

[webbeloz]

controlla nel js, dovrebbe esserci height:

[webbeloz]

semplifica la ricerca nel js.

apri la versione nn .min e cerca/poi modifica, o aggiungi:

$(function()
{
	$('.scroll-pane').jScrollPane(
		{
			verticalDragMinHeight: 20,
			verticalDragMaxHeight: 20,
			horizontalDragMinWidth: 20,
			horizontalDragMaxWidth: 20
		}
	);
});

sei OT, ma questo funziona.

[Tristal]

perfetto grazie mille!!!!

[webbeloz]

Originariamente inviato da Tristal
perfetto grazie mille!!!!

ottimo!

[Tristal]

un'altra cosetta.. ecco l'esempio:

http://www.lmadv.it/test/scroll/brand.html

come faccio a dare un po' di disctacco tra il testo e la barra di scorrimento?

in html ho questo css:

<style type="text/css" id="page-css">
			.scroll-pane
			{
	width: 100%;
	height: 250px;
	overflow: auto;
	padding-bottom: 30px;
	margin-top: 20px;
			}
		</style>

nel codice jquery.jscrollpane.css ho

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	background-color: #FF0000;
}






.jspTrack
{
	position: relative;
	width: 4px;
	background-color: #999;
}



.jspDrag
{
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	width: 4px;
	background-color: #000;
	visibility: visible;
	overflow: visible;
}

[webbeloz]

distacco = spazio?

usa padding:

padding:5px 10px;

ovvero:
padding-top:5px
padding-right:10px
padding-bottom:5px
padding-left:10px

se nn ho visto male hai già un padding a 0 / zero.
E sembra essere nella pagina e non file CSS.
Ma potrebbe essere dato anche dal JS.

per forzare il CSS devi usare per es.:

padding-right:10px !important;

[Tristal]

E dove lo inserisco il pedding? Come faccio a dire che lo voglio proprio lì lo spazio? in .scroll-pane? O .jspVerticalBar?

[webbeloz]

che browser stai usando in questo momento?

[webbeloz]

cmq, il browser lo vediamo dopo...

ora tu hai nello style della pagina:

padding-bottom:30px;

modifica con:

padding:10px 15px 30px 5px;

e vediamo nella pagina di esempio come si comporta....
Se stai lavorando con Explorer, chiudilo e Installa Versione 22 di Firefox (en)