A slider for the Gantt view

Posted on by

slider

The slider for Gantt views was part of the 7+1 live demos I published last November; moving the handle or directly clicking on the slider allows you to resize the Gantt.

After some additional adjustments, I am ready to release today a sample script.

I did not build the slider. I simply took an existing one offered by the jQuery UI library, and combined it with my technique to scale down the Gantt view.

Here is my sample code:

<!-- Slider for Gantt view -->
<!-- Questions and comments: Christophe@PathToSharePoint.com -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" type="text/javascript"></script>

<style type="text/css">
#scale {
color: #478AFF;
font-weight:bold;
position: absolute;
left:16px;
top: 12px;
}

#mainslider {
  width: 510px;
}

#content-slider {
  width: 500px;
  height: 8px;
  margin: 10px;
  background: #BBBBBB;
  position: relative;
}

.content-slider-handle {
  width: 12px;
  height: 20px;
  position: absolute;
  top: -6px;
  background: #478AFF;
  border: solid 1px black;
}
</style>

<div id="mainslider">
<div id="content-slider">
<div class="content-slider-handle"><span id="scale">100%</span></div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
  $("#content-slider").slider({
    animate: true,
    handle: ".content-slider-handle",
    change: handleSliderChange,
    steps: 15,
    min: 25,
    startValue: 100,
    slide: handleSliderSlide
  });
});

function handleSliderChange(e, ui)
{
$(".ms-ganttInnerTable IMG").width(16*ui.value/100) ;
}

function handleSliderSlide(e, ui)
{
$("#scale").text(ui.value+"%");
}

$("#mainslider").one("mouseover", function(){
$(".ms-ganttDetailTimeUnitRow *").css("display", "none");
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
$(".ms-ganttMajorTimeUnitHeaderCell").each(function(){
var d=$(this).text().split("/",3);
d[2] = d[2].replace("20","'");
$(this).html(monthname[d[0]-1]+"<br />"+d[2]);
});
});
</script>

As usual, use a CEWP to include the code in your page.

The script calls two libraries: jQuery and jQuery UI. In my sample code I pull them from Google APIs, but you can also store them directly on your SharePoint farm. Also, note that you don’t need the full jQuery UI library, you can restrict yourself to the core UI and the slider.

In addition to the jQuery documentation, I found this post very helpful.

Click here to try out the live demo!

Update [Jan 22, 2009] The script is written for a MM/DD/YYYY date format. If for example your date format is DD-MM-YYYY, then use these formulas:

var d=$(this).text().split("-",3);
d[2] = d[2].replace("20","'");
$(this).html(monthname[d[1]-1]+"<br />"+d[2]);

133 thoughts on “A slider for the Gantt view”

  1. Is it supposed to get choppy? When I was playing with it, the view was fine until 80%. At 80% and lower, gaps appeared in the bars next to the tasks.

  4. Youre website is amazing, you have great ideas.

    I use Internet Explorer in my Office and the Slider Works fine, but the month-view doesn’t work. It shows still the standard dayli view.

    Thanks for your help Christophe!

  5. seems the demoscript is different then the script above in this page. The one in the demo works, the other does not. Also I get choppy image chunks after scaling down the size.

  6. I’ve found the reason why the script above does not work. It seems the html code was missing in the “” tags on line 73. This causes the code to go to the next line in the script above but it should not do this. the line should look like this:

    $(this).html(monthname[d[0]-1]+””+d[2]);

  7. Thanks none, there should actually be a line break:

    $(this).html(monthname[d[0]-1]+"<br>"+d[2]);

    For the fourth time this week I was tricked by my editor, sorry for that…

  9. I have updated the script to fix the choppy effect and re-insert the missing line break. I have also changed the reference to the latest version of jQuery, 1.3.1, which was released on Jan 21st.
    Plus a footnote about date formats.

  10. Looks great unfortunately when I add it to my web page the slider appears but doesn’t change either the chart or the scale number. I’ve tried it with the .js file on my local server as well as from google.

    What am I missing!

  12. Not sure what the difference was but used Fiddler to view the script from the demo site and copied over the contents of the web part and now it works!

    Brilliant.

  13. Update (and answer to Mark): the last version of jQuery (1.3.1) is not compatible with the current version of jQuery UI (1.5.3). I have switched back to jQuery 1.2.6 in the script.

  14. Christophe,

    Great post. I noticed that in your screenshot above, you have the gantt chart broken down by month. I don’t need the slider functionality, but I do need to break down the gantt chart into a monthly view. Can you help me out?

    Thanks in advance,
    Erich

  15. Erich, it’s not exactly a monthly view. I have just reformated the week view to hide the days. This is done in the last 10 lines of the script.

  16. Hi Christophe

    Thanks for all the cool stuff – it has been amazingly useful.

    I can’t get the Gantt chart to work at all – all I get is raw code in the CEWP. I tried same before Christmas and got a slider, but reverted to my previous state as it didn’t affect the Gantt – same as Mark above – and I didn’t have time to figure it out.

    I notice there is no reference in the script to the two jQuery libraries – I seem to recall there was before and you refer to them in the text.

    Thanks in advance for any help you can provide.

    Ian

  17. My blog editor tricked me again, sorry for that!

    The script should work now. Note that you need to use compatible versions of jQuery and jQuery UI (that was the issue in Mark’s case).

  18. Hi Christophe! Thanks again for your great work!
    But what if I want the title row not to scroll with the tasks?
    Thx!
    Benny

  19. Hi Christophe! Thanks for this great work! is it possible to display the week number in addition to the month?

    Torsten

  20. got it!!!!

    To fix the header row and the left column the style tag has to be replaced by:

    #scale {
    color: #478AFF;
    font-weight:bold;
    position: absolute;
    left:16px;
    top: 12px;
    }

    #mainslider {
    width: 510px;
    }

    #content-slider {
    width: 500px;
    height: 8px;
    margin: 10px;
    background: #BBBBBB;
    position: relative;
    }

    .content-slider-handle {
    width: 12px;
    height: 20px;
    position: absolute;
    top: -6px;
    background: #478AFF;
    border: solid 1px black;
    }

    .ms-ganttInnerTable{
    z-index:10;

    }
    .ms-ganttOuterTable{
    empty-cells: show;
    }

    .ms-ganttMajorTimeUnitHeaderCell {
    writing-mode: tb-rl;
    filter: flipv fliph;
    vertical-align: top;
    top: expression(this.offsetParent.scrollTop);
    position: relative;
    z-index: 15;
    column-span: 1;
    background-color: white;
    width= 16;
    }

    .ms-ganttTitleCell{
    left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
    position: relative;
    z-index: 20;
    background-color: white;
    }

    .ms-ganttTitleHeaderCell{
    top: expression(this.offsetParent.scrollTop);
    left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
    position: relative;
    background-color: white;
    z-index: 30;

    }
    .ms-ganttDetailTimeUnitRow {
    position: relative;
    top: expression(this.offsetParent.scrollTop);
    background-color: white;
    }

    • Benny, I had a user who ONLY wanted to lock the Title column and Date scale, as in a spreadsheet’s Freeze Panes, and your solution led me to what I needed!

      To freeze panes in your SharePoint Gantt Chart view, add a CEWP with the following code:

      .ms-ganttInnerTable{
      z-index:10;
      }

      .ms-ganttOuterTable{
      empty-cells: show;
      }

      .ms-ganttMajorTimeUnitHeaderCell {
      vertical-align: top;
      top: expression(this.offsetParent.scrollTop);
      position: relative;
      z-index: 15;
      column-span: 1;
      background-color: white;
      width= 16;
      }

      .ms-ganttTitleCell{
      left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
      position: relative;
      z-index: 20;
      background-color: white;
      }

      .ms-ganttTitleHeaderCell{
      top: expression(this.offsetParent.scrollTop);
      left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
      position: relative;
      background-color: white;
      z-index: 30;
      }

      .ms-ganttDetailTimeUnitRow {
      position: relative;
      top: expression(this.offsetParent.scrollTop);
      background-color: white;
      }

      • In Style tags, of course. Opening tag should include [style type=”text/css”] in between the “” and close with a regular “”.

      • Michael,

        Fantastic!

        I’ve implemented your code successfully but would also like to have the Gantt to open at todays date instead of the start date of the first task created. Any ideas?

        Many thanks,

        Matt

      • Hi,

        I managed to get the autoscroll working, there is a slight lag on page load so if anyone has any suggestions on a better way to do this please let me know.

        .ms-ganttOuterTable{
        empty-cells: show;
        }
        .ms-ganttMajorTimeUnitHeaderCell {
        vertical-align: top;
        top: expression(this.offsetParent.scrollTop);
        position: relative;
        z-index: 15;
        column-span: 1;
        background-color: white;
        width= 16;
        }
        .ms-ganttDetailTimeUnitRow {
        vertical-align: top;
        top: expression(this.offsetParent.scrollTop);
        position: relative;
        z-index: 15;
        column-span: 1;
        background-color: white;
        width= 16;
        }
        .ms-ganttTitleCell{
        left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
        position: relative;
        z-index: 20;
        background-color: white;
        }
        .ms-ganttTitleHeaderCell{
        top: expression(this.offsetParent.scrollTop);
        left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
        position: relative;
        background-color: white;
        z-index: 30;
        }
        .ms-GT {
        background-color: #98FB98;

        window.onload = function(){
        DoIt();
        }

        function DoIt() {
        var objDIV;
        var objTD;
        var arrElements;

        arrElements = document.getElementsByTagName(“div”);
        for (var i = 0; i < arrElements.length; i++) {
        if (arrElements(i).className == "ms-ganttDiv") objDIV = arrElements(i);
        }

        arrElements = objDIV.getElementsByTagName("td");
        for (var i = 0; i < arrElements.length; i++) {
        if (arrElements(i).className == "ms-GT") objTD = arrElements(i);
        }
        objDIV.scrollLeft = Math.round(objTD.offsetLeft – objDIV.offsetWidth / 2);
        return 1;
        };

        Thanks,

    • Hi, the freezing pane code works perfect for IE, but not for other browsers like Firefox, Chrome, etc. Is there any way around? Thanks a lot.

  23. Christophe!

    This is yet another OUTSTANDING contribution to the collective utility of SharePoint – you are by far the definitive innovator for the masses on this platform. Keep up the GREAT work!!! -Dan

  27. Duh! Thanks Christophe!

    How would you change the script so that at 100%, the header is unchanged. Eg. shows the dates normally rather than “Jan” x 4, “Feb” x3, “Mar” x 5 etc.)

    AND show quarters at 25% (e.g. |Q1 ’09 for Jan, Feb, & March)2009)?

  28. All of my customers LOVE the built-in Gantt view, and so always want it customized. They all seem to have the same requirements for;

    1. multiple List Columns on the LEFT rather than just the Title
    2. Title Group By
    3. Month, Quarter, Year gantt views, never day and week

    Is is just not possible at all to create a custom Gantt chart like that through SPD?

    I tried the Bamboo Calendar and Task list and neither of those meet all of those requirements above either. And none of the JavaScript examples on any sites seem to accomplish this either.

  29. Pingback: Gantt Slider « Mihai Plesa

  30. I need to change the default slider view from 100% view to default showing it at 25% view. Is there a way for me to do that so they don’t have to slide down to 25% every time?

  32. If by line 68 you mean $(“#mainslider”).one(“mouseover”, function(){ that does not work, everything is still really at 100% even though the slider shows 25.

  33. Linda: this require more changes than I initially thought. Here is what I came up with. You can check out the live demo here.

    <!-- Slider for Gantt view -->
<!-- Questions and comments: Christophe@PathToSharePoint.com -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" type="text/javascript"></script>

<style type="text/css">

#scale {
color: #478AFF;
font-weight:bold;
position: absolute;
left:16px;
top: 12px;
}

#mainslider {
  width: 510px;
}

#content-slider {
  width: 500px;
  height: 8px;
  margin: 10px;
  background: #BBBBBB;
  position: relative;
}

.content-slider-handle {
  width: 12px;
  height: 20px;
  position: absolute;
  top: -6px;
  background: #478AFF;
  border: solid 1px black;
}
</style>
<div id="mainslider">
<div id="content-slider">
<div class="content-slider-handle"><span id="scale">25%</span></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
  $("#content-slider").slider({
    animate: true,
    handle: ".content-slider-handle",
    change: handleSliderChange,
    steps: 15,
    min: 25,
    startValue: 25,
    slide: handleSliderSlide
  });
$(".ms-ganttInnerTable IMG").width(16*25/100) ;
$(".ms-ganttDetailTimeUnitRow *").css("display", "none");
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
$(".ms-ganttMajorTimeUnitHeaderCell").each(function(){
var d=$(this).text().split("/",3);
d[2] = d[2].replace("20","'");
$(this).html(monthname[d[0]-1]+"<br />"+d[2]);
});
});

function handleSliderChange(e, ui)
{
$(".ms-ganttInnerTable IMG").width(16*ui.value/100) ;
}

function handleSliderSlide(e, ui)
{
$("#scale").text(ui.value+"%");
}

</script>

  34. Thanks for replying so quickly. Your second solution above worked perfectly. I like it defaulting there because it looks more like a Quarter/Month view like my customer needs.

    Thanks again!!

  35. Christophe,

    Thanks for this code. Almost perfect.
    Could you give me a hint on how to add one extra column on the left?
    For example the list already contains extra column called “Domain” but how to get that displayed in the Gantt?

    Thanks for your help.

    Kees

  36. If I didn’t want to use the slider but just wanted to reformat my visible dates to be like the ones in your screenshot (Jun 09), could I do that in a stylesheet? What would be the properties?

  37. Pingback: More jQuery demos: scrolling news, fisheye menu « Path to SharePoint

  39. Hi Chris,

    Great feature (Thank you!). How do I show months at 100% and zoom down to week intervals at 25% for example? I need to see to the week level. Thanks- T.

  40. ..actually I wrote that backwards- weeks at 100% and months as you drop past 50% to 25%. (sorry! )

  41. Great work! Thank you for sharing it with the community.

    Can you please show how can I reverse to the normal date (default Gantt date) format when slider is at 100%?
    Thanks
    M.

  42. Pingback: An example combining Gantt view and color coding « Path to SharePoint

  43. Hi Christophe,
    Great work!
    I just want to know if it has restrictions under secured site. It works on our dev site but when I did the same on production which is on https page it does not work…no linking, no animation just 100% with the loader and nothing happens when you click it…

    Looking forward to your response
    Cheers,
    Desiree

  44. In reference to Matts post about having the timeframe start at todays date; how do I add the code? Does it go with the slider code or somewhere else? Sorry for not getting it but I’m not very good at this stuff.

  45. Pingback: Color Coded Gantt View « Path to SharePoint

  47. Hi Christophe,
    I’m a great admirer of your work and am learning so much from your work.
    The yellow verticle bar that indicates today’s date in the Gantt view is rather hard to see, especially if I do more to shrink the chart size. Could you suggest a way to make that more readily visible like change it’s color to red for example?
    Thanks in advance.

  48. Hi Christophe,

    I’m a bit of a newb and was wondering how to get the jquery-ui to work. I can utilize regular jquery but when I use your script all I get is the change inside the Gantt chart but the slider feature does not work. I’m pointing to where the placed the jquery-ui folder ( same place that the jquery library was installed) but still nothing. Any suggestions would be great.

    Thanks in advance.

      • Hi Christophe,

        I’m using Jquery-ui 1.7.2 and Jquery 1.3. I know I have Jquery installed correctly but am not sure about the jquery-ui. Do I just have to un-zip the file and place it in a directory (which is what I’ve done)? I have my jquery install in “C:\Program Files\dir\jquery” and mu jquery-ui files in”C:\Program Files\dir\jquery-ui” and point to them both in the script. Does this sound right or am I missing anything.

        Thanks again for your help.

  49. Your slider is amazing, however I seem to be having some issues with the days of the week showing. When the page first loads, the days will show, however when I hover over the slider, it loses the days of the week and just shows:
    Sep’09 Sep ’09 Sep ’09 Sep ’09 Oct ’09 etc.
    Is there a way to keep the days of the week?
    Also, in IE, the above shows up as vertical text…
    Thanks for any help, and again, great work!

    _Dan

    • Dan, this is the expected behavior, and is done on purpose. Keeping the full date would force the column width, preventing the timeline from shrinking along with the slider.

  50. I too would like to display the Gantt chart in Month intervals. Could this be accomplished by adding an “IF” statement something like

    If interval month=last date month then skip displaying it?

  51. >>Matt

    >>I managed to get the autoscroll working, there is a slight lag on page >>load so if anyone has any suggestions on a better way to do this >>please let me know

    Hi Matt,

    Your code works ok in IE6 but does not work in IE8. Can you please advise?

    Regards,
    M.R.

  52. Sorry, it’s not a browser problem.
    The scroll solution (i.e. Matt scrolling, see above posting+code) works fine on a 64-bit Sharepoint site but does not work in a 32- bit Sharepoint environment. On a 32-bit Windows the following piece of code fails:

    arrElements = objDIV.getElementsByTagName(“td”);
    for (var i = 0; i < arrElements.length; i++) {
    if (arrElements(i).className == "ms-GT") objTD = arrElements(i);
    }

    Class name "ms-GT" is not found and as a result objTD is always null.

    Can you please advise?

    Regards,
    M.R.

  53. Hi I’m new and wanted to know if anyone answered the question i would to do the same thing.

    Thank you for your time.

    TMZ
    Hi Chris,

    Great feature (Thank you!). How do I show months at 100% and zoom down to week intervals at 25% for example? I need to see to the week level. Thanks- T.

    Reply .July 13, 2009 at 6:10 pm

    TMZ
    ..actually I wrote that backwards- weeks at 100% and months as you drop past 50% to 25%. (sorry! )

  55. Hi Chris,

    Great post and love it.

    The slider works but I have a problem where the Month (jan…dec) appear to be “undefined”. Am I missing something?

    Can you please advice?

    Yew

  57. Wonderful! But I want to suppress the tasks below the GANTT Chart so that my Dashboard is not cluttered with tasks and the only thing you see is the GANTT.
    Paul

    • Paul, the following code was part of the “color coding” solution. I think it should suppress your tasks:

      //Optional: hide the list under the Gantt view
      $(“.ms-summarystandardbody”).hide();

  58. Thanks Chris, one problem when using the latest jquery ui (1.7.2) and juery lib (1.4).
    I implmented your slider, changed some options to make it work, however no matter what I do, I just can not move the handle, it seems there is no “handle” in the latest UI.slider, either an option or an event.

    Need your help.
    Chirs

  60. Thanks Chris,

    This script is awesome. I’m a complete newbie to coding so your site is a god send.

    I was just wondering if there is a way of combining the Months together, as I think it would make it look a lot cleaner.

    Thank You for your help.
    James

  61. To Terri, Roban, Chris, Rob and James: we offer an upgraded version of the script – along with lots of other goodies – to the participants of our online workshop: Inline Graphs, Dynamic Charts and Enhanced Gantt Views
    http://eusp-chartsandgraphs.eventbrite.com/

    The jQuery team just released jQuery 1.4.2 yesterday, and I’ll upgrade all the scripts to work with this last version.

  62. Great slider, very helpful. I’m actually trying to get it to display only “years”, as we have several projects with very long timelines, I don’t care to see the minutae but rather the broad overview. The problem is with the current way we see our gantt views, it cuts off because we have projects that started several years ago, and continue off a few years from now.

    Would love to see some code to modify this for a yearly view!

    Thanks!

  63. Great job,
    i have one question, on 25% i cannot see week view. It is always a month view. It is same behavior on your demo also.
    See attached screenshot. Is this expected behavior?

  64. Hi Christophe,
    thank you for your great job.
    I have a question: I have regional setting to “italian” and therefore date is DD-MM-YYYY, and if I use your code for showing the months value some months are not correctly displayed in the columns (I think your code is for UK settings MM-DD-YYYY).
    Have you any suggestion?

    thanks
    Michele

  65. Hi Christophe,
    thank you for your great job.
    I have a question: I have regional setting to “italian” and therefore date is DD-MM-YYYY, and if I use your code for showing the months value some months are not correctly displayed in the columns (I think your code is for UK settings MM-DD-YYYY).
    Have you any suggestion?

    thanks
    Michele

  66. Hi Christophe, thank you a lot for your very helpfully tutorials and scripts. The color code gantt view works fine but i habe problems with the slider and the month grouping. We use a german sharepoint and i have changed the date formate text as descripted. But no month is displayed only the date of each monday.
    Have you any suggestion?
    thanks britta

  67. Hi Christophe,

    When I am inserting the CEWP before the “ListViewWebPart” the slider is not working.
    When I am inserting the CEWP after the “ListViewWebPart” the slider is working.

    Why so?

    I want to insert the slider before the “ListViewWebPart”. For that what I have to do.

    Thanks,
    Rajesh

    • It should work when inserted before the Gantt view. Check that you are correctly calling jQuery, and see if there could be any conflict with other scripts on the page.

  68. This is great!

    There is a comment from Matt above about defaulting to Today’s date, but I cannot see the solution. I would also like it to default to Today’s date, as it currently defaults to the start date of the first project.

    Any suggestions?
    Thanks
    Carla

    • Hi CarlaO,

      This is how I have been doing it, if anyone has any better suggestions please respond.

      window.onload = function(){
      DoIt();
      }

      function DoIt() {
      var objDIV;
      var objTD;
      var arrElements;

      arrElements = document.getElementsByTagName(“div”);
      for (var i = 0; i < arrElements.length; i++) {
      if (arrElements(i).className == "ms-ganttDiv") objDIV = arrElements(i);
      }

      arrElements = objDIV.getElementsByTagName("td");
      for (var i = 0; i < arrElements.length; i++) {
      if (arrElements(i).className == "ms-GT") objTD = arrElements(i);
      }
      objDIV.scrollLeft = Math.round(objTD.offsetLeft – objDIV.offsetWidth / 2);
      return 1;
      };

      Cheers,

      Matt

  69. Plz .. can anyone show me how to change the Gantt view to quarter instead of month. Thanks

  71. I am using this in SharePoint 2010, and I get the Slider to show in the page in the CEWP, and the slider seems to work fine, but it doesn’t change the gantt view in the least bit. Have you tried this in 2010? Was there some change in 2010 that I need to modify the script for? I have searched high and low for a solution like this, and it always comes back to your script, which would be great if I could get it to work.

    I’ve tried moving it above and below the gantt, tried deleting and recreating the CEWP, tried linking it to the CEWP instead of pasting the code into the CEWP, still get the same results.

    Any help would be greatly appreciated.

    Thanks.

      • I didn’t know what you were talking about until after you replied here. I went back and found it. I never saw it before. It DOES have a ‘zoom in’, ‘zoom out’, and ‘scroll to task’ function in the ribbon that I didn’t see before. Amazing how you miss things that are right in front of your face sometimes…

        Thanks for pointing out my collective blindness!

        Great site by the way. I am currently supporting 2007 and 2010, so some of your solutions are still useful to me, and work well.

        Thanks for being a resource!

        ~Rob

  72. Hi Christophe,

    The slider is great. I also got the color coded Gantt view but I cannot combine them.

    The Slider script is above the Gantt but if I add a CEWP below the Gantt to color code the bars, the slider will not work. Is there something I should be adding in between?

    Carlo

    • Oh, and I get runtime errors in line 1599 when I try to save the contents of the Source Editor window and line 1568 if I skip that one and then click OK to save the CEWP. I also get an error on line 1457 when I exit page editing mode. All the same error, “Object doesn’t support this property or method”.

    • And final ignoramus post of the day… both to close (most of) my own question thread and to answer Carlo’s:

      You need to remove the jQuery script call from the color coding CEWP. The two web parts call conflicting versions of the jQuery library. Just remove the first through argument and you’re good to go.

      Final question for Christophe if he’s still monitoring this thread. I noted that the slider only works with much older versions of the jQuery and jQuery UI libraries. Not a show-stopper but is there a combination of versions newer than 1.2.6 and 1.5.3 that will work? Is this addressed in the scripts available for purchase from EUSP as part of the recorded workshop package?

  73. Hello Christophe
    I tried this on my SP 2007 setup, it doesn’t work with IE 8 but it does with chrome. our site is currently setup as https, could that be causing this issue?
    any tips would be greatly appreciated.
    Thank you
    V

  75. As Varun said, course has expired. When is the next one, or can you post the code? I tried to colspan the months so they do not repeat, but the progress bars do not reflect the correct start/end period.

    Thanx

  76. Varun and Fred, below a message from Natasha Felshman at EndUserSharePoint.com:

    This workshop was recorded and is available for purchase. It includes the on-demand recording, all of the resources, and use of a sandbox to test the solutions.

    Please let me know if this is something you are interested in and I’ll be happy to give you the details.

    Best,
    Natasha

  77. A comment I left on other posts, and also has its place here:
    For those interested, I am starting a new series of online workshops, including one on the Gantt view. For details and updates, please visit my home page:
    http://sp2010.pathtosharepoint.com

    @Eric: the scripts from the recording use jQuery 1.4.2. I’ll update them for the new workshop, where I plan to use version 1.4.4. I’ll also provide a plain JavaScript version (no slider) for those who don’t want to be bothered by external dependencies.

    jQuery and js libraries in general should not be called twice in the same page (or for advanced design use the no conflict option). This is an old post, I now include conditional loads in my sample scripts (jQuery only loaded if it’s not yet present on the page).

  78. My slider comes up, but I’m unable to slide with it.
    It is stuk @ 100%
    Anyone know how to fix this ?
    I just copied the code from above and I changed it to my date format(Begium) “/” to “-“

    • I use it in combination with color code gantt.
      If I only place slider it works, with color code gantt it doesnt work.
      I can put the 2 scripts together but then I have to place the slider under the Gantt to get it work. Because the color code gant only works if you place de cewp under the gantt.

  79. Hi Christophe,
    Excellent work by the way, is there a way to reduce scale further? Currently i can only get about 8 months on hte screen can it be reduced to fit say 18 months?
    thanks
    Chris

  80. Hi Christophe,

    I love ALL your work and have implemented your new Gantt demo features into my list view. I have two small problems I’m hoping you can help with:

    1. I’m getting a broken image URL for my first task only, which has the same priority (Normal) as many others that are working fine.

    The image names in the source are getting an “undefined” instead of the expected 1, 2 or 3. ie. CenterStatusedundefined.gif, EndNormalundefined.gif, StartStatusedundefined.gif.

    2. My site currently uses jQuery v1.4.2 which the UI plugin and other scripts don’t work with. I’ve resolved this by adding a later call to your supported version. But…do you think you might be able to upgrade the code (and plugin version) to support more recent jQuery?

    • I have other solutions, but they are not public. Actually the most popular one doesn’t use jQuery at all.

      If you have two versions of jQuery on the same page, be sure to use the no conflict mode to avoid any trouble. This might fix your issue.

  81. “Actually the most popular one doesn’t use jQuery at all.” How can it be popular if it’s not public? Do you mean it’s for sale, or only available to close friends and family? 🙂

    I’d be very interested to see it.

    If it helps resolve the first issue above, I have identified that changing the Priority for the first task results in updating the image for the second one! It’s as though the array is out of synch. I will try the no conflict option to see if that has any affect.

  82. OK. Have now tried this with and without — noConflict, latest ui plugin version, legacy jquery lib — and still the first row of images is ‘undefined’.

    I finally established that it was due to the summary view using grouping. Makes sense when you look at the source.

    Is there a workaround for grouped views??

      • You’re absolutely right Christophe. My apologies. I was implementing several techniques at once. Please feel free to delete or move this as required.

        The colour-coding failed when grouping was applied to the list view. I’m sure I saw a post a while ago that said this was now possible but can’t seem to locate it…and maybe it didn’t apply to colour-coding at all?

    • Sebastian, this post is dated from January 2009, and of course applies to SharePoint 2007. Many organizations, like government agencies, are still working with that version and won’t upgrade soon.
      And you’re right, Microsoft made the zoom in/zoom out feature available, just one year and a half after me 😉

  84. Dear how to do it with sharepoint2010. i add CEWP and edit the html code and put this script and style the slider is there but it does not work for my gantt view. please advice

    Adnan

  85. Sure there is a zoom in and ut function in SP2010 but i only can use it in the calener view. Is it possible to have a monthly view also on the home/start page?

  86. Hi Christophe,

    The solution that you had designed in not working in SharePoint 2010.
    Can you please let us know if some further modification are required to make your script work with SP 2010.

    I would be really thankful to you if you could please help me in resolving my issue and make this slider work with SharePoint 2010.

    Awaiting your response.

    Thanks & Regards
    Amit Mathur

  87. Christophe:
    I’m using SharePoint 2007 and tried your code. It seems to work, but, the slider doesn’t move when I try to drag it, although the percentage displayed changes when I try to drag the blue box over. So, everything is working, just the movement of the slider box isn’t displaying. Any ideas on how to fix that?

  88. Hi Christophe,

    Do you have a code that allows for the dates to just display as months without the use of the slide bar tool? I tried the above slider coding and it wasn’t showing up as months (using SP2007).

    Your help would be immensely appreciated.

    Thanks,
    AK

Comments are closed.