Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    swapnil vathare
    @swapnilvathare
    Hi
    Prince John Wesley
    @princejwesley
    Hi
    DamonDeep
    @DamonDeep
    hi
    How can I change "radius" ? Exist "setRadius" function?
    Prince John Wesley
    @princejwesley
    do you need to change it dynamically? No support for it currently. If you need it, raise a ticket, I'll add it
    radius property can be set while constructing circular slider
    DamonDeep
    @DamonDeep
    ok i open new issue with that problem, tank you anyway
    adityask98
    @adityask98
    Hi! I enter <div id=slider></div> and under <script> I put var slider = $('slider').CircularSlider(); but nothing seems to happen. What am I doing wrong? Can you help me out? I quite new to web development.
    shraddha1112
    @shraddha1112
    Hi
    Joel Brady
    @ydarbleoj

    Hi, I love this plugin! I'm building something similar to this page (http://www.lyonaeroports-t1.com/en towards the bottom) and we're allowing the user to click on the data points (as well), but I'm finding that going between clicking and scrolling things begin to bog down. Is there away to expand the clickability of the slider beyond the radius?

    Here is my code:

    slide: function(ui, value) {
    var newUi = ui,
    color = 'factoid-color',
    content = '.factoid-content',
    info = '#factoid-content-',
    title = '.ft';
    newUi = $('#factoid');
      var showContent = function (contentNumber, direction) {
        newUi.find(info + contentNumber)
          .show('slide', { direction: direction }, 300);
        newUi.find('.fact-title-' + contentNumber).addClass(color) 
          .css('opacity', '1');
      }
    
      var hideContent = function (contentNumber, title, direction) {
        newUi.find('#factoid-content-' + contentNumber)
          .hide('slide', { direction: direction });
        newUi.find('.fact-title-' + contentNumber).removeClass(color)
          .css('opacity', '.2')
      }
    
      if (value > 15 && value < 45)  { 
        showContent(1, 'left') 
      } else {
        hideContent(1, title, 'left') 
      }
      if (value > 70 && value < 100)  { 
        showContent(2, 'left')
      } else {
        hideContent(2, title, 'left')
      }
      if (value > 129 && value < 160) { 
        showContent(3, 'left') 
      } else {
        hideContent(3, title, 'left')
      }
      if (value > 160 && value < 190) { 
        showContent(4, 'up') 
      } else {
        hideContent(4, title, 'up')
      }
      if (value > 215 && value < 235) { 
        showContent(5, 'right') 
      } else {
        hideContent(5, title, 'right')
      }
      if (value > 270 && value < 300) { 
        showContent(6, 'right') 
      } else {
        hideContent(6, title, 'right')
      }
      if (value > 315 && value < 335) { 
        showContent(7, 'right') 
      } else {
        hideContent(7, title, 'right')
      }
    
      // var valueArray = [0, 35, 90, 140, 179, 230, 290, 30]
      $('#factoid-info-1').on('click', function() { slider.setValue(35)});
    Joel Brady
    @ydarbleoj
    Actually for clarity, click events work great and the slide events work great; but once you mix the two events it becomes quite unresponsive - sorry for so many comments. Thanks!
    Prince John Wesley
    @princejwesley
    Hi
    I assume that all the above code are inside slide handle.
    $('#factoid-info-1').on('click', function() { slider.setValue(35)});
    this line is adding new click event for each slide action
    that's the problem
    Prince John Wesley
    @princejwesley

    Remove all existing click events attached to $('#factoid-info-1')

    I mean this: $('#factoid-info-1').off('click');

    @adityask98 # is missing here : $('slider')
    Joel Brady
    @ydarbleoj
    Duh! Thanks for the quick response. I figured out, eventually; and end up using:
    This message was deleted

    var valueArray = [0, 25, 80, 130, 178, 230, 290, 330]
    function setValueCallback(i){
    return function(){
    slider.setValue(i);
    }
    };

    for(var i = 0; i < valueArray.length; i++) {
    $('#factoid-info-' + i).on('click', setValueCallback(valueArray[i]));
    }

    Joel Brady
    @ydarbleoj
    One more question, is there away to change the animateDuration as a result of click event? slider.animateDuration(3000) is undefined.
    Prince John Wesley
    @princejwesley
    Please raise an issue in github. I'll add it configurable dynamically.
    Prince John Wesley
    @princejwesley
    Done, Give bower update
    Updated in README file
    Kyra Weber
    @kyraweber
    I am very new with javascript. I get the Uncaught Already Created error in my console, and my custom options do not work. I have it in a rails app. I have the min.js and min.css file included, here is my seperate js file with options- $(document).ready(function() {
    var slider = $('#slider').CircularSlider({
    radius: 75,
    innerCircleRatio: '0.5',
    handleDist: 1,
    min: 0,
    max: 10,
    value: 0,
    shape: "Circle",
    touch: true,
    animate: true,
    animateDuration : 360,
    selectable: false,
    slide: function(ui, value) {},
    formLabel: undefined
    });
    });
    Prince John Wesley
    @princejwesley
    That basically means, you are creating circular slider twice. Make sure that you have only one CircularSlider({}) call for #slider . Also make sure that you have only one #slider id element.
    Kyra Weber
    @kyraweber
    Thanks for the quick response! I will go searching...
    Tiffany
    @tiffknee
    hi there! i'm wondering if there is a way to intercept events once values are chosen? i'm trying to call a function, but updating every time it's sliding - vs once it's done sliding - gets computationally expensive.
    Prince John Wesley
    @princejwesley
    @tiffknee Let me add onDone callback for computation expensive tasks. Probably I'll add this weekend. Thanks
    Tiffany
    @tiffknee
    cool, thanks! i think it would be a useful feature to many
    glarget
    @glarget
    Hello, i'd like to ask you about jquery circular slider
    when i have two circular on the same page
    there is a pb on tablet
    the both cursors seems to move if a slide only one
    if a slide only moves *