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]);

Possibly related posts: (automatically generated)