SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Slider Issue

    Hello there,

    I am new to UI Development, I had an issue in displaying slider, i have to use 3 sliders
    in my page, 2 are working fine but the 3rd slide is not getting displayed even though the code is same as the remaining 2. Below are my JS and HTML pages. Please reply me ASAP. Thank you.

    Java Script Code:


    Code:
    // Time Slider
    				$("#time_slider").slider({
    				range: true,
    				min: 0,
    				max: 1439,
    				values: [540, 1020],
    				slide: slideTime
    			});
    			
    			function slideTime(event, ui){
    				var minutes0 = parseInt($("#time_slider").slider("values", 0) % 60);
    				var hours0 = parseInt($("#time_slider").slider("values", 0) / 60 % 24);
    				var minutes1 = parseInt($("#time_slider").slider("values", 1) % 60);
    				var hours1 = parseInt($("#time_slider").slider("values", 1) / 60 % 24);
    				$("#time").text(getTime(hours0, minutes0) + ' - ' + getTime(hours1, minutes1));
    			}
    			function getTime(hours, minutes) {
    				var time = null;
    				minutes = minutes + "";
    				if (hours < 12) {
    					time = "AM";
    				}
    				else {
    					time = "PM";
    				}
    				if (hours == 0) {
    					hours = 12;
    				}
    				if (hours > 12) {
    					hours = hours - 12;
    				}
    				if (minutes.length == 1) {
    					minutes = "0" + minutes;
    				}
    				return hours + ":" + minutes + " " + time;
    			}
    			slideTime();
    
    	//-----------------------------
    	// Trip Duration
    	$("#duration_slider").slider({
    				value: 160,
    				min: 0,
    				max: 1440,				
    				step: 30,
    				slide: slideDuration
    			});
    			
    			function slideDuration(event, ui){
                var hours = Math.floor(ui.value / 60);
                var minutes = ui.value - (hours * 60);
    
                if(hours.length == 1) hours = '0' + hours;
                if(minutes.length == 1) minutes = '0' + minutes;
    
    			$("#duration").text(hours+'hrs. '+minutes+'mins. ');
    			}
    			
    			slideDuration();
    
    	//-----------------------------
    	// Max Price
    				$("#price_slider").slider({
    				value: 160,
    				min: 0,
    				max: 1440,				
    				step: 30,
    				slide: slidePrice
    			});
    			
    			function slidePrice(event, ui){
    			var dollars = ui.value;
    			$("#maxprice").text('$'+dollars);
    			}
    			
    			slidePrice();

    HTML Code:


    Code:
    <head>
    <style>
    	#slider-range{width:400px;}
    	#slider-range,#time,#duration,#maxprice {margin:10px;display:block;}
    	.ui-slider-horizontal .ui-state-default {background:url(images/scrub-btn.png) no-repeat scroll 50% 50%;}		
    	.flights-select {margin: -22px 0px 140px;}
    
    </style>
    </head>
    <body>
             <div class="flights-section-title">Flight Time</div>
                                                           
                                <div class="flights-section">&nbsp;
                                        <ul class="inline">
                                            <li><input class="radio" type="radio" name="2" checked="checked" value="a"><div class="flight-radio-label">Take-Off</div></li>
                                            <li><input class="radio" type="radio" name="2" value="b"><div class="flight-radio-label">Landing</div></li>
                          </ul> 
                                  <div class="leftnav-dot-divider">
                                    <div id="time_slider"></div>
                                    <span id="time"></span></div>
    
                            	</div><!-- flight-section-slider -->
                               <div class="flights-section-title">Max Trip Duration</div>
                              <div class="flights-section"> 
                              <div class="leftnav-dot-divider">                        
                              <div id="duration_slider"></div>
                                    <span id="duration">2hrs. 0mins.</span>
                                    </div>
                              </div><br />
    
                              
                              <div class="flights-section-title">Max Price</div>
                              <div class="flights-section"> &nbsp;
                              <div class="leftnav-dot-divider">
                              <div id="price_slider"></div><span id="maxprice">$100</span>
                                    </div>
                              </div><br />
                             </body
    Last edited by ralph.m; Mar 10, 2011 at 22:14.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,099
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi buddi03520! Welcome to SitePoint.

    To be honest, I think you have zero hope of getting any help with this unless you post a live link. I doubt anyone can understand your problem with the code you posted.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph.m,

    Thank you. i am new to forums, what is the live link and how to post .

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,099
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by buddi03520 View Post
    what is the live link and how to post
    Just a link to your site, or the web page in question. Copy the link from your browser and paste it here, or highlight some text and click the link button when you are posting to paste in the link and create a text link.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •