Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Jquery ui slider math problem

    Hello, well Im trying to make a div change while the jquery UI slider is dragged, I'll want to change the opacity and "left" in css so it looks like is slowly coming opaque and moving to the side as the slider is dragged... but im finding an issue with the math... I can't make the values "fit"

    Code:
     //start
      $(function() {
        $( "#slider" ).slider({
          value:50,
          min:50,
          max:100,
          slide: function(event, ui) {
            var leftR =  ui.value *-1 + "%";
            var leftO = ui.value / 100;
            $(".left1").css("left", leftR, "opacity", leftO);
          }
        });
      });
    and css:
    Code:
    .left1 {
    	position: absolute;
    	left: 50%;
    	opacity: 0;}
    But I cant get the math for the values right... How can I make that div move to the left, and become opaque?
    Last edited by Nightcrawler89; 12-21-2013 at 08:14 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it's starting off at 50% left and the slider value is 50, so you want to be subtracting the value from 100, I believe.

    Multiple css values in jquery need to be put into an object.

    This should be closer to what you want...

    Code:
      <script>
      $(function() {
        $( "#slider" ).slider({
          value:50,
          min:50,
          max:100,
          slide: function(event, ui) {
            var leftR =  100-ui.value + "%";
            var leftO = ui.value / 100;
            $(".left1").css({"left": leftR, "opacity": leftO});
          }
        });
      });
      </script>

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    it's starting off at 50% left and the slider value is 50, so you want to be subtracting the value from 100, I believe.

    Multiple css values in jquery need to be put into an object.

    This should be closer to what you want...

    Code:
      <script>
      $(function() {
        $( "#slider" ).slider({
          value:50,
          min:50,
          max:100,
          slide: function(event, ui) {
            var leftR =  100-ui.value + "%";
            var leftO = ui.value / 100;
            $(".left1").css({"left": leftR, "opacity": leftO});
          }
        });
      });
      </script>
    lol, indeed I wasnt substracting. Is was so obvious xD silly me.

    Thanks xelawho, now the issue with this is that the lowest value will be then 0.5 ... (when you slide it back the lowest will be 0.5). So I guess I would change it for
    Code:
      <script>
      $(function() {
        $( "#slider" ).slider({
          value:10,
          min:10,
          max:50,
          slide: function(event, ui) {
            var leftR =  50 - ui.value + "%";
            if (ui.value < 30) {
              var leftO = ui.value/1000;
            } else {          
              var leftO =  ui.value / 50;
            }
            $(".left1").css({'left': leftR, 'opacity':leftO});
          }
        });
      });
      </script>


  •  

    Posting Permissions

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