[Risolto][javascript] jQuery plugin smooth-div-scroll: problemi con width

Linguaggi di programmazione: php, perl, python, C, bash e tutti gli altri.
Avatar utente
Nativo
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 781
Iscrizione: giovedì 19 novembre 2009, 15:26

[Risolto][javascript] jQuery plugin smooth-div-scroll: problemi con width

Messaggio da Nativo »

Ciao a tutti!
Ho scaricato questo stupendo plugin per jQuery:
http://www.smoothdivscroll.com/
Ho un problema, il seguente codice non visualizza gli elementi successivi a "kkkkkkkkkkkkkk" (o meglio li stampa "a capo").
Infatti l'html generato mi da questo risultato:

Non capisco da dove tira fuori questa (errata) dimensione di 2700px?
Come posso risolvere?
grazie! =)

Codice: Seleziona tutto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<title>my jQuery Smooth Div Scroll</title>
	
	<style>
		/* container scroll-menu */
		#makeMeScrollable {
			position: relative;
			width:100%;
			height: 36px;
			background-color: #F2F1F0;
		}

		/* button scroll left */
		div.scrollingHotSpotLeft {
			position: absolute;
			left: 0;
			z-index: 200;
			width: 20px;
			height: 100%;
			background-color: blue;
			opacity: 0.35;
			filter: alpha(opacity = 35);
			-moz-opacity: 0.35;
			zoom: 1;
		}

		/* button scroll right  */
		div.scrollingHotSpotRight {
			position: absolute;
			right: 0;
			z-index: 200;
			width: 20px;
			height: 100%;
			background-color: blue;
			opacity: 0.35;
			filter: alpha(opacity = 35);
			-moz-opacity: 0.35;
			zoom: 1;
		}

		/* elements container that will be scroll */
		div.scrollWrapper {
			position: relative;
			overflow: hidden;
			width: 100%;
			height: 100%;
		}

		/* elements that scroll inside scrollWrapper  */
		.scrollAreaMenu {
			background-color: #E1D4BA;
			position: relative;
			width: auto;
			height: 100%;
		}

		.scrollableArea ul {
			margin: 0px;
			padding: 0px;
		}
		.scrollableArea li {
			display: inline;
			float: left;
			width: 170px;
			height: 25px;
			margin: 3px;
			padding: 2px;
			background-color: #ECB034;
		}
	</style>
	
	
	<!-- jQuery library - I get it from Google API's -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

	<!-- You can download it as a part of jQuery UI Core http://jqueryui.com/download -->
	<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
	
	<!-- Smooth Div Scroll 1.1 - minified for faster loading. You can download it here: http://www.smoothdivscroll.com/#download -->
	<script src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>
 
	<script type="text/javascript">
		// Initialize the plugin with no custom options
		$(function() {
			$("div#makeMeScrollable").smoothDivScroll({});
		});
	</script>
</head>
<body>
	<div id="makeMeScrollable">
		<div class="scrollingHotSpotLeft"></div>
		<div class="scrollingHotSpotRight"></div>
		<div class="scrollWrapper">
			<div id="scrollAreaMenu" class="scrollableArea">
				<ul>
					<li>11111111111111</li>
					<li>22222222222222</li>
					<li>33333333333333</li>
					<li>44444444444444</li>
				</ul>
				<ul>
					<li>aaaaaaaaaaaaaa</li>
					<li>bbbbbbbbbbbbbb</li>
					<li>cccccccccccccc</li>
					<li>dddddddddddddd</li>
					<li>eeeeeeeeeeeeee</li>
					<li>ffffffffffffff</li>
					<li>gggggggggggggg</li>
					<li>hhhhhhhhhhhhhh</li>
					<li>iiiiiiiiiiiiii</li>
					<li>jjjjjjjjjjjjjj</li>
					<li>kkkkkkkkkkkkkk</li>
					<li>llllllllllllll</li>
					<li>mmmmmmmmmmmmmm</li>
					<li>nnnnnnnnnnnnnn</li>
					<li>oooooooooooooo</li>
					<li>pppppppppppppp</li>
					<li>qqqqqqqqqqqqqq</li>
					<li>rrrrrrrrrrrrrr</li>
					<li>ssssssssssssss</li>
					<li>tttttttttttttt</li>
					<li>uuuuuuuuuuuuuu</li>
					<li>vvvvvvvvvvvvvv</li>
					<li>wwwwwwwwwwwwww</li>
					<li>xxxxxxxxxxxxxx</li>
					<li>yyyyyyyyyyyyyy</li>
					<li>zzzzzzzzzzzzzz</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>
Ultima modifica di Nativo il lunedì 7 febbraio 2011, 17:17, modificato 1 volta in totale.
The Future Is Open!
Avatar utente
Zoff
Moderatore Globale
Moderatore Globale
Messaggi: 33338
Iscrizione: mercoledì 10 ottobre 2007, 22:36

Re: [javascript] jQuery plugin smooth-div-scroll: problemi con width

Messaggio da Zoff »

Mi sa che fai prima a chiedere al googlegroup di supporto: http://groups.google.com/group/smoothdivscroll
Prima di aprire una discussione leggi le Guide, poi vedi se c'è un HowTo nel Wiki e fai una ricerca nel Forum!
Applica semplicemente il [Risolto]! Prova: http://forum.ubuntu-it.org/viewtopic.php?f=70&t=548821
Vuoi qualcosa di piu' dal forum? Prova i miei script: http://forum.ubuntu-it.org/viewtopic.php?f=70&t=597066
Avatar utente
Nativo
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 781
Iscrizione: giovedì 19 novembre 2009, 15:26

Re: [javascript] jQuery plugin smooth-div-scroll: problemi con width

Messaggio da Nativo »

Ho seguito il tuo consiglio... spero mi risponda qualcuno!  ;)
The Future Is Open!
Avatar utente
Nativo
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 781
Iscrizione: giovedì 19 novembre 2009, 15:26

Re: [javascript] jQuery plugin smooth-div-scroll: problemi con width

Messaggio da Nativo »

Risolto (da solo)

Codice: Seleziona tutto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<title>my jQuery Smooth Div Scroll</title>	
	<style>
	#menuLeft {
		background-color: yellow;
		float: left;
		height: 20px;
	}
	.menuLeft div {
		float: left;
	}
	#menuRight {
		background-color: orange;
		height: 20px;
		overflow: hidden;
	}
	/* container scroll-menu */
	#makeMeScrollable {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #F2F1F0;
	}
	/* button scroll left */
	div.scrollingHotSpotLeft {
		position: absolute;
		left: 0;
		z-index: 200;
		width: 20px;
		height: 100%;
		background-color: blue;
	}
	/* button scroll right  */
	div.scrollingHotSpotRight {
		position: absolute;
		right: 0;
		z-index: 200;
		width: 20px;
		height: 100%;
		background-color: blue;	
	}
	/* elements container that will be scroll */
	div.scrollWrapper {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	/* elements that scroll inside scrollWrapper  */
	#scrollableArea {
		position: relative;
		width: auto;
		height: 100%;
		background-color: #E1D4BA;
	}
	.scrollableArea div {
		float: left;
		margin: 2px;
		padding: 2px;
	}
	</style>
	<!-- jQuery library - I get it from Google API's -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<!-- You can download it as a part of jQuery UI Core http://jqueryui.com/download -->
	<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
	<!-- Smooth Div Scroll 1.1 - minified for faster loading. You can download it here: http://www.smoothdivscroll.com/#download -->
	<script src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {
			$("div#makeMeScrollable").smoothDivScroll({});
			$("#makeMeScrollable").smoothDivScroll("option","scrollInterval",35);
			$("#makeMeScrollable").smoothDivScroll("disable");
		});	
		jQuery(document).ready(function() {
			$('#btnLeft')
				.mousedown ( function(){
					$("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","left");
					$("#makeMeScrollable").smoothDivScroll("startAutoScroll");
				})
				.mouseup   ( function(){ $("#makeMeScrollable").smoothDivScroll("stopAutoScroll"); })
				.mouseout  ( function(){ $("#makeMeScrollable").smoothDivScroll("stopAutoScroll"); });
			$('#btnRight')	
				.mousedown ( function(){
					$("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","right");
					$("#makeMeScrollable").smoothDivScroll("startAutoScroll");
				})
				.mouseup   ( function(){ $("#makeMeScrollable").smoothDivScroll("stopAutoScroll"); })
				.mouseout  ( function(){ $("#makeMeScrollable").smoothDivScroll("stopAutoScroll"); });
		});
	</script>
</head>
<body>
	<div id="menuLeft" class="menuLeft">
		<div>111111111</div><div>222222222</div><div>333333333</div><div>444444444</div>
	</div>
	<div id="menuRight">
		<div id="makeMeScrollable">
			<div id="btnLeft" class="scrollingHotSpotLeft"></div>
			<div id="btnRight" class="scrollingHotSpotRight"></div>
			<div class="scrollWrapper">
				<div id="scrollableArea" class="scrollableArea">
					<div>aaaaaaaaaaaaaa</div><div>bbbbbbbbbbbbbb</div><div>cccccccccccccc</div>
					<div>dddddddddddddd</div><div>eeeeeeeeeeeeee</div><div>ffffffffffffff</div>
					<div>gggggggggggggg</div><div>hhhhhhhhhhhhhh</div><div>iiiiiiiiiiiiii</div>
					<div>jjjjjjjjjjjjjj</div><div>kkkkkkkkkkkkkk</div><div>llllllllllllll</div>
					<div>mmmmmmmmmmmmmm</div><div>nnnnnnnnnnnnnn</div><div>oooooooooooooo</div>
					<div>pppppppppppppp</div><div>qqqqqqqqqqqqqq</div><div>rrrrrrrrrrrrrr</div>
					<div>ssssssssssssss</div><div>tttttttttttttt</div><div>uuuuuuuuuuuuuu</div>
					<div>vvvvvvvvvvvvvv</div><div>wwwwwwwwwwwwww</div><div>xxxxxxxxxxxxxx</div>
					<div>yyyyyyyyyyyyyy</div><div>zzzzzzzzzzzzzz</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
The Future Is Open!
Scrivi risposta

Ritorna a “Programmazione”

Chi c’è in linea

Visualizzano questa sezione: Bing [Bot] e 1 ospite