Make Ability For 100% Width

[cjdriver]

This slider is great, but the lack of responsiveness creating a lot of issues for me. I've modified the JS file to handle 100% widths for the containers and list elements.

Replace:
var widthIssue = $(settings.issuesDiv).width();
with
var widthIssue = $(settings.containerDiv).width();

Then in the first horizontal settings set add:
$(settings.issuesDiv+' li').width(widthIssues);

So it'll look like:
// set positions! if(settings.orientation == 'horizontal') { $(settings.issuesDiv).width(widthIssue*howManyIssues); $(settings.issuesDiv+' li').width(widthIssues); $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); } else if(settings.orientation == 'vertical') { $(settings.issuesDiv).height(heightIssue*howManyIssues); $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); }

After that all you need to do is modify the CSS so that #timeline, #dates, #issues, and #issues li are all width: 100%. Now when the window loads they automatically fill the containers. I'm still working on the ability for it to dynamically resize on screen resize.

[JeRoNZ]

@juanbrujo Thanks for creating this plugin.

I too wanted this to be responsive. I added a function to redo the calculations when the window is resized. Together with some css media queries (using bootstrap) to set the widths of the timeline, dates, issues and li items it seems to do mostly the right thing.

 #issues {
    width: 1170px;
    height: 350px;
    @media screen and (max-width: @screen-md-max){
      width:970px;
      height: 400px;
    }
    @media screen and (max-width: @screen-sm-max){
      width:750px;
      height: 500px;
    }
    @media screen and (max-width: @screen-xs-max){
      width: 90vw;
      height: 600px;
    }

etc.

function reLoad (){
            widthContainer = $(settings.containerDiv).width();
            heightContainer = $(settings.containerDiv).height();
            widthIssues = $(settings.issuesDiv).width();
            heightIssues = $(settings.issuesDiv).height();
            widthIssue = $(settings.issuesDiv+' li').width();
            heightIssue = $(settings.issuesDiv+' li').height();
            widthDates = $(settings.datesDiv).width();
            heightDates = $(settings.datesDiv).height();
            widthDate = $(settings.datesDiv+' li').width();
            heightDate = $(settings.datesDiv+' li').height();
            // set positions!
            if(settings.orientation == 'horizontal') {
                $(settings.issuesDiv).width(widthIssue*howManyIssues);
                $(settings.datesDiv).width(widthDate*howManyDates); /*.css('marginLeft',widthContainer/2-widthDate/2);*/
                var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
            } else if(settings.orientation == 'vertical') {
                $(settings.issuesDiv).height(heightIssue*howManyIssues);
                $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2);
                var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
            }
        }

 $(window).resize(function(){
     reLoad();
     $('#dates a.selected').trigger('click');
 });

[juanbrujo]

thanx @cjdriver @JeRoNZ for your efforts, I'll make some time to test your solutions.

[maxms]

I know this issue is closed but I just had to adapt this from an old site to a new one using a 3rd party Wordpress theme and thought I'd share my code for anyone it might `help. I am not a programmer but it works in my testing.

CSS (Adjust per your needs):
@media screen and (max-width: 800px){ #timeline, #timeline #dates { width: 640px; } #timeline #issues, #timeline #issues li { width: 640px; height: 500px; } #timeline #issues li p { width: 500px; } #timeline #issues li img { width: 100px; height: auto; } }

JS:
// Initialize Timelinr jQuery(function(){ jQuery().timelinr({ arrowKeys: "true" }) }); jQuery(window).resize(function() { jQuery().timelinr({ arrowKeys: "true" }) });