Code

Discussion on jQuery Responsive Timeline Slider

Discussion on jQuery Responsive Timeline Slider

Cart 1,618 sales

pezflash supports this item

Supported

This author's response time can be up to 2 business days.

177 comments found.

Hi, can I make this timeline fix to 650 pixel wide only. I mean, is there a line of code to change the width dimension?

Hi. Yes, one of the direct config parameters for the plugin setups the width of the whole viewport.

Hi can a fullscreen function be added?

Hi. I’ve answered your email. ;)

Can you please make the timeline responsive with fluid width? :)

Hi. Well, that would need a big amounf of work (not for a simple scaling, but for a a complete reponsive layout). I’ve receive this request couple of times, and is on the schedule for this file, but can’t promise when could be released.

Thanks for the suggestion (and the purchase. ;) )

Pls, i need to insert this insert a page with css but plus footer

Hi. I’m not sure what is your request. Please, be more concise. Also, consider that i will only give support to user who has purchased the file. Kind regards.

Thanks. do you know how I can change the container width to screen width?

Ooops, sorry, missed to answer that on your previous post. It’s pretty easy, as i created a custom script call for that. Just open your html, and edit the following attributeson main timeline div:

data-width="952" 
data-height="450" 

Depending on your global size, maybe you will need to adjust some global css.

;)

I meant the latter. It would be nice to add an insert milestone feature to be able to update the timeline without having to edit the source. Can you tell I’m a novice? Also, where can I change the width of the frame? Thanks, Again.

I’ll think about an easy way to implement that feature using ajax, can’t tell you when i’ll be able to get time to make an update, but i note it for future releases. Thanks for the heads up!

I’m also curious if it’s possible to insert a new timeline dynamically?

BTW. I love this. Great job!

Hi. Do you mean a full timeline or milestones data inside a current one? Both cases are possible, first one bit more difficult to achieve, but could be done with ajax and some js.

Kind regards and thanks for purchase.

Great job. Bookmarked already. I may buy this though will need some customization. Is it possible to insert new timeline dynamically?

Have replied to your email. ;)

Thanks—I forwarded your reply to my team and will let you know how it goes.

We really love your timeline, however, my programmers say they are unable to add additional column entries on the tmeline—above and beyond what is shown in the sample preview. Can you direct us to how to add these and are there limits to how many can be added? We wish to have about 120 entries in total.

Thanks

Hi. There is no limit on columns entries, although i guess you are missing to adjust the width value for that area, which is on the script custom parameters on the html (adjust “contentWidth” to your needs):

data-imagesWidth="3400" 
data-imagesHeight="265" 
data-contentWidth="1670" 
data-contentHeight="174" 

I left this manually because i thought it was easier to manage and testing. Maybe it wasn’t a good idea :)

Hope this helps. Kind regards and thanks for purchase.

Is there a limit to the number of characters you can have in a alt tag (which gives you a caption on the popup images)? I seem to be running into a wall after a certain amount of characters.

By “wall” I mean the image no longer shows up in IE8 (it does in other browsers) and it stalls. But only in IE

Really? You can’t use a semi-colon? BTW , I’m successfully using html within the alt tag by using entities.

Do you have IE to test on?

Yeap, IE9 displays the same as what i sent you on screenshot.

I got rid of the semicolons but it still didn’t show up. However when I shortened the alt tag text, it did. As I mentioned it may not be the length of the alt tag but it may be the character length of the entire span code.

Hi thx for this GREAT timeline !!!! Its awesome !!! How to make auto play or auto scroll function (for ex: from left to right and viceversa, with settable scroll speed)? Regards.

Hi. Well, there is no out-of-box option for that, but it’s possible adding a jquery animate function (left css property with easing) to control the 3 elements that needs to be moved, dragger, timeline images and milestones. Not easy but is doable with some js knowledge. If you finally need a custom budget for this, let me know through my profile form. Kind regards and thanks for purchase.

Is there a cap on the markers and millstones? I’m noticing that when I duplicate the last columns and add additional markers, they don’t appear.

I sent you the code…just to make sure, I also checked the original code provided in the zip file too, but have no luck. It seems that if you add additional columns…the last column just disappears. This happens with both of the samples (dark/light) in the zip file.

Have just replied to your email. ;)

Thanks! All systems go! :)

I can’t seem to get the timeline working in IE9 …am I doing something wrong? I can’t even get your demo to work. It works fine in Chrome, Firefox, and Opera…is there a setting I need to uncheck in IE?

Also, how do I change the height of the timeline so I can show more content vertically? Thanks.

Unfortunately I can’t send a link due to it being behind a proxy server… what I’m seeing is the load circle—even on your demo – and nothing appears. It’s like IE is blocking something and I can’t figure what. :(

It can’t be our firewall since Chrome and the other browsers work fine, so it must be an IE setting…just wondering if you know what settings should I enable to ensure it works fine.

IE is sometimes unpredictable, but i’ve to admit that IE9 is so far more steady and trusty than legacy version (not to talk about IE6 or 7). Well, is hard for me to give you proper advices, first of all ensure that the test is making online, sometimes security configuration on your machine could make IE not to load certain classes while testing local files. Set the CSS opacity for #timeline_container to 1 (instead of 0) to see if what is not running is the initial jquery animate function to fade it in.

Thanks for the quick response!

So, I found the culprit…it’s IE’s pathetic Compatibility View that’s causing the problem. Once I set that to OFF , it came up with no problems. Thanks again and great job!

Is there a way to have the slider continuously move without clicking?

Hi. Well, some code addons should be done, but it’s possible. I mean, there is not a out-of-box feature for that.

Hope this helps.

is it a wordpress plugin?

i

Hi. No, is a Js plugin. Some users has inserted it on WP templates by using a simple iframe on any page. Although you can find the WP version in the following link, but it was not developed by me, so support (if needed) don’t relay on my side. Consider it before buying. http://codecanyon.net/item/wordpress-timeline-slider/2536611

Kind regards and thanks for your interest in my files.

Pezflash, I will do that when it’s live. Right now it isn’t and I’m waiting for final approval.

Is there a way to adjust how fast or slow the images at the top move as you move the timeline?

Hi. When user uses the dragger, then you will see that top images and bottom content columns moves proportionally, no easing method here. But when a marker is being clicked (or user cliks on other areas of the dragger zone) then there is an animation to move images/columns/dragger to the right place. That animation is controlled inside js/tinyscrollbar/jquery.tinyscrollbar.js file, lines 161, 162 & 163:

$(oImages.obj).stop(true, true).animate({ left: -iScroll }, 1000, 'easeInOutQuad');
$(oContent.obj).stop(true, true).animate({ left: -iScroll2 }, 700, 'easeInOutQuad');
$(oDragger.obj).stop(true, true).animate({ left: iPosition.now }, 700, 'easeInOutQuad');

Adjust the jquery time values (1000, 700, 700) to your desired ones. ;)

Hope this helps!

I’m primarily interested in how fast the top images move as you drag (rather than using the marker). By “proportionally” what do you mean? For example, for my first decade (and the default placement when you first open the timeline) the top image is well placed. However, dragging to the next decade, the image has moved quickly past.

Hi. Could you please send me your url through my profile form (not here, please)? So i see what you are pointing out and can give you further support. Thanks!

Hi,

I just purchased this and started playing with it. Before I realized it, I deleted some of the sample content.

Can you please paste the html example code for milestones with a thumbnail that link to an image gallery?

Or, is there anywhere else I can go to see all of the html markup milestone examples?

Thanks!!

Hi. Please, post this with the account you purchased the file with, i’ll be glad to help you out on whatever you need. Kind regards.

I’m trying to place the markers in my timeline. But I’m encountering a problem I don’t understand.

I thought I should place a marker so it sits just above the first entry of a year. Changing the xpos in pixels does that. But when I click on that marker it moves to an entirely different place in the timeline. I’m don’t quite understand what I’m doing.

Hi.
The markers “click” places both the top image and below content row on proportional position based on global widths of both timeline, images and milestones row. As you can see in the html they are not linked, just positioned on screen on concret x values. So, you need to play with that x position (and widths for images and columns contents) to match (more or less, will be difficult to do it exact pixel) your desired position for both. Hope this makes sense… ;)

Let me know if i can be of further assistance.
Kind regards and thanks for purchase.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey