www.webdeveloper.com
Results 1 to 5 of 5

Thread: Jquery slider background color overflowing when using multiple sliders

  1. #1
    Join Date
    May 2014
    Posts
    3

    Jquery slider background color overflowing when using multiple sliders

    Hi,

    When I move the second slider's right handle to left, the first slider is also affected (see the green overflow at the picture at following link).

    http://stackoverflow.com/questions/2...ltiple-sliders

    The code is as follows:

    HTML:

    Code:
    <div class="controls">
    	<span class="amount"></span>
    	<div class="slider range-slide">
    		<div class="slide" value="333,686" id="diameterslider" min="25" max="1000">
    			<span id="min">min:25</span>
    			<span id="max">max:1000</span>
    		</div>									
    	</div>
    </div>
    
    <div class="controls">
    	<span class="amount"></span>
    	<div class="slider range-slide">
    		<div class="slide" value="333,686" id="relativefloorslider" min="25" max="1000">
    			<span id="min">min:25</span>
    			<span id="max">max:1000</span>
    		</div>									
    	</div>
    </div>
    CSS:

    Code:
    .ui-slider { 
    	position: relative;
    	text-align: left;
    	background: #F84831; // red
    }
    .slide-back {
        position:absolute;
        height:100%;
    }
    Javascript:

    Code:
    $(".range-slide div.slide").each(function() {
    	values = $(this).attr('value').split(',');
    	firstVal = values[0];
    	secondVal = values[1];	
    	
    	// Update colors
    	var doUpdate = function() {
    		$("div.slide .slide-back").remove();
    		$($("div.slide a").get().reverse()).each(function(i) {
    			var bg = '#0f0'; // green
    			if(i == 1) {
    				bg = '#0ff'; // light blue
    			}
    			$("div.slide").append($('<div></div>').addClass('slide-back').width($(this).position().left - 5).css('background', bg));
    		});
    	};	
    	
    	$(this).slider({
    		values: [firstVal , secondVal],
    		min: parseInt($(this).attr('min')),
    		max:  parseInt($(this).attr('max')),
    		range: true,
    		slide: function(event, ui) {
    			$(this).parent().siblings('span.amount').html("@Messages("min.limit"): " + ui.values[0] + " - @Messages("max.limit"): " + ui.values[1]);
    			doUpdate($(this));
    		}
    	});
    });
    Do you know how I can handle this issue? I used following jsfiddle as base point: http://jsfiddle.net/AV3G3/60/

    Cheers, Alp

  2. #2
    Join Date
    Oct 2013
    Posts
    388
    An id value can only be used once per page. For example if you have already assigned id="blah" to one element that same "blah" value cannot be assigned to another element. The following shows up twice in your posted code:

    Code:
    			<span id="min">min:25</span>
    			<span id="max">max:1000</span>

  3. #3
    Join Date
    May 2014
    Posts
    622
    While my first advice would be to throw jQuery in the trash and stop doing things that have no business being done client side with JS...

    I see one glaring error in your markup -- ID's are unique, you can't use them more than once on a page... so if those two sets of id="min" and id="max" are on the same page, well there's your problem...
    -- edit -- Kevin2 beat me to it.

    Of course that DIV doesn't even have VALUE, MIN or MAX attributes

    DIV:
    http://htmlhelp.com/reference/html40/block/div.html

    Attributes -- the deprecated ALIGN, and 'common attributes'

    Common Attributes:
    http://htmlhelp.com/reference/html40/attrs.html

    ID, CLASS, STYLE, TITLE, DIR, LANG, ONevent -- THAT'S IT!

    There is no VALUE, there is no MIN, there is no MAX, so that script is halfwit garbage made by someone who has no business writing jack **** for the Internet; though that often goes without saying the moment you have someone using jQuery as most such folks don't know enough HTML, CSS or JS to be writing a blasted thing for the Internet.

    Which is why that code would end up with around a DOZEN nice big fat validation errors too.
    Last edited by deathshadow; 05-25-2014 at 04:13 PM.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    May 2014
    Posts
    3
    Quote Originally Posted by deathshadow View Post
    While my first advice would be to throw jQuery in the trash and stop doing things that have no business being done client side with JS...
    Thanks for your reply, yes those ids aren't needed. Removing them didn't help with overflow problem.

    I wanted to pass the min, max and value parameters from html, in my case following stackoverflow article was helpful for me: http://stackoverflow.com/questions/7...ax-in-the-html and the jsfiddle http://jsfiddle.net/zYChY/3/

    Yes that jsfiddle http://jsfiddle.net/AV3G3/60/ doesn't have any value, min or max on html side, but they are provided on javascript side. (Btw. the jsfiddle is written by someone else, i need the same thing for multiple sliders). The code I was trying on my computer has value, min and max attributes on html side.

    Regards,
    Alp

  5. #5
    Join Date
    May 2014
    Posts
    3
    Thanks for reply, yes those id's are not needed, but removing them didn't help much with overflow problem.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles