Ergebnis 1 bis 2 von 2
  1. #1
    HO.S ist offline Jungspund
    registriert
    07-06-2011
    Beiträge
    20

    jquery ui slider horizontal

    moin,
    bei meinem slider gibts 2 probleme:
    -- width berechnet die breite zu klein, outerWidth aber etwas zu groß
    -- viel wichtiger: die richtung ist falsch :-) also die bewegungsrichtung der liste ist richtig, aber die handle-richtung muss anderesrum sein! wo muss ich was umdrehen :-)? ich finds grad nicht raus

    HTML-Code:
    <!DOCTYPE html>
    <html>
        <head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta content="no-cache" http-equiv="cache-control">
    		<meta content="no-cache" http-equiv="pragma">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    		<title></title>
    		<script type="text/javascript" src="jquery.js"></script>
    		<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>		
    		
    		<style>
    		<!--
    		body{
    			font-family:Arial, sans-serif;
    			font-size:12px;
    		}
    		div#seitennavi{
    			position:absolute;
    			left:10em;
    			top:12.6em;
    			width:41.0em;
    			height:2.0em;
    			text-align:center;
    			background:blue;
    			overflow:hidden;
    		}
    		
    		ul#seitenzahlen > li{
    			list-style:none;
    			padding:0; 
    			margin:0;
    		}
    
    		ul#seitenzahlen{
    			float:left;
    			width:auto;
    			height:2.0em;	
    			margin:0;
    			padding:0;		
    			border:1px solid green;			
    		}
    		ul#seitenzahlen > li{
    			width:1.0em;
    			height:1.0em;
    			float:left;
    			display:block;
    			background:red;
    			margin:0.1em;
    		}
    		ul#seitenzahlen > li.active{
    			background:white;
    			border:black;
    		}
    		#seitenzahlenslider-horizontal{
    			position:relative;
    			width:100%;
    			height:1.2em;
    
    		}
    		#seitenzahlenslider-wrap{
    			position:relative;
    			z-index:3000;
    			width:32em;
    			margin-top:2.2em;
    			margin-left:auto;
    			margin-right:auto;
    			height:1.2em;
    			background:yellow;
    		}
    		.ui-slider-handle{
    			width:1.2em;
    			height:0.7em;
    			margin:0 auto;
    			display:block;
    			position:absolute;
    			border-radius:0.3em;
    			opacity:0.8;
    			background:green;
    		}
    		
    		-->		
    		</style>
    		
    		<script type="text/javascript">
    
    		$(document).ready(function() {
    			var listItemCount=$('#seitenzahlen').children().length;	//list to scroll
    			alert($('#seitenzahlen').children().length);
    			var listItemWidth=$('ul#seitenzahlen > li').outerWidth();
    			alert($('#seitenzahlen > li').outerWidth());
    			var seitenzahlenWidth=listItemCount*listItemWidth;
    			alert(seitenzahlenWidth);
    			$('#seitenzahlen').css('width', seitenzahlenWidth + 'px');
    			
    			$("#seitennavi").after('<div id="seitenzahlenslider-wrap"><div id="seitenzahlenslider-horizontal"></div></div>');
    
    		var difference = $('#seitenzahlen').width()-$('#seitenzahlenslider-wrap').width();
    		if(difference>0){
    			var proportion = difference / $('#seitenzahlen').width();
    			var handleWidth = Math.round((1-proportion)*$('#seitenzahlenslider-wrap').width());
    			handleWidth -= handleWidth%2; 
    			
    			$("#seitenzahlenslider-wrap").width($("#seitennavi").width());
    			
    		
    			$('#seitenzahlenslider-horizontal').slider({
    				orientation: 'horizontal',
    				min: 0,
    				max: 100,
    				value:100,
    				slide: function(event, ui) {
    					var leftValue = -((100-ui.value)*difference/100);
    					$('#seitenzahlen').css({left:leftValue});
    				},
    				change: function(event, ui) {
    					var leftValue = -((100-ui.value)*difference/100);
    					$('#seitenzahlen').css({left:leftValue});
    				}
    			});
    					
    			$('#seitenzahlenslider-horizontal').find('.ui-slider-handle').css({width:handleWidth,'margin-left':-0.5*handleWidth});			
    				var origSliderWidth = $("#seitenzahlenslider-horizontal").width();
    				var sliderWidth = origSliderWidth - handleWidth ;
    				var sliderMargin =  (origSliderWidth - sliderWidth)*0.5;
    				$("#seitenzahlenslider-horizontal.ui-slider").css({width:sliderWidth,'margin-left':sliderMargin});								   
    		}else{
    			$('#seitenzahlenslider-wrap').remove();
    		}
    			
    			$("#seitenzahlenslider-horizontal.ui-slider").click(function(event){
    				event.stopPropagation();
    			});
    							   
    			$("#seitenzahlenslider-wrap").click(function(event){
    				var offsetLeft = $(this).offset().left;
    				var clickValue = (event.pageY-offsetLeft)*100/$(this).width();
    				$("#seitenzahlenslider-horizontal").slider("value", 100-clickValue);
    			}); 							
    					
    	});		
    	</script>
        </head>
        <body>
        	<div id="seitennavi">
    			
    		<ul id="seitenzahlen">
    			<li class="active">1</li>
    			<li >2</li>
    			<li >3</li>
    			<li >4</li>
    			<li >2</li>
    			<li >3</li>
    			<li >4</li>				
    			<li >2</li>
    			<li >3</li>
    			<li >4</li>
    			<li >2</li>
    			<li >3</li>
    			<li >4</li>
    			<li >2</li>
    			<li >3</li>
    			<li >4</li>
    			<li >2</li>
    			<li >3</li>
    			<li >4</li>
    			<li >2</li>
    			<li >3</li>
    			<li >4</li>
    			<li >2</li>
    			<li >3</li>
    			<li >4</li>
    				<li >2</li>
    				<li >3</li>
    				<li >4</li>
    				<li >2</li>
    				<li >3</li>
    				<li >4</li>
    				<li >2</li>
    				<li >3</li>
    				<li >4</li>
    				<li >2</li>
    				<li >3</li>
    				<li >4</li>
    				<li >2</li>
    				<li >3</li>
    				<li >4</li>
    				<li >2</li>
    				<li >3</li>
    				<li >4</li>
    				<li >2</li>
    				<li >3</li>
    				<li >4</li>
    				<li >2</li>
    				<li >3</li>
    				<li >4</li>
    				<li >2</li>
    				<li >3</li>
    				<li >4</li>
    				<li >2</li>
    				<li >3</li>
    				<li >4</li>
    
    			</ul>
    			
    		</div>				
        </body>
    </html>
    danke

  2. #2
    HO.S ist offline Jungspund
    registriert
    07-06-2011
    Beiträge
    20

    AW: jquery ui slider horizontal

    hallöchen,

    hmmm, weiß denn wirklich keiner rat? ich hab zwischendruch noch mal hin und her probiert mit vorzeichen wechsel wegen der richtung
    des scrollbalkens, aber alles was ich probiere verursacht, dass sich dann nüscht mehr bewegt. oder funktioniert bei euch der codeschnipsel gar nicht?

    viele grüße,
    h.s.

Ähnliche Themen

  1. jquery slider value
    Von ru2009ru im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 27-12-2010, 21:53
  2. Antworten: 4
    Letzter Beitrag: 19-10-2010, 15:31
  3. jQuery ? Coda-Slider
    Von jswelt bot im Forum Links & Tutorials mit Tipps & Tricks zu JavaScript, CSS, PHP, MySQL
    Antworten: 0
    Letzter Beitrag: 11-02-2010, 19:18
  4. Slider horizontal/vertikal? Ist das möglich?
    Von duck im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 08-02-2010, 14:53
  5. Slider Bildlauf Horizontal
    Von Sinan im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 22-02-2005, 13:13

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •