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.

we are loving the timeline – it has worked great. Although we noticed that we must have done something (or missed something) that is causing the scroll bar to not show up in IE. Do you have any tips as to what may be causing this? You can view it here http://pleasantville50.pace.edu/timeline/

Thanks

Hi. Yes, it’s a common issue i got before, you have removed the audio div, but still the functionality is still on JS. Nothing wrong at all, except with the crappy IE, whcih is pretty sensible with missing DOM elements referenced on scripts.

Just go inside js/jquery.timeline.js file, and remove (or comment) the following lines (line 64 > )

        //HTML5 AUDIO PLAYER 
        audiojs.events.ready(function() {
            var as = audiojs.createAll({
                autoplay: true,
                loop: true
            });
            audio.prettyPaused = 0;
        });

Hope this helps.
kind regards and thanks for purchase.

(ps. BTW, nice customization! ;)

Awesome! Thanks so much for the prompt response and this fixed it right up.

Hi, great plugin! How can I add arrows to the left and right of the timeline that scroll the timeline forward/back when clicked?

Hi. There is not out-of-box option for this, should be code on js by hand. Not sure if you want to just move the slider on certain pixels lfet and right, or going from one milestone to the next (and previous). Second could be done user trigger() function, first could be little bit trickier, chaging the left css for both content and dragger elements (see lines 162 & 163 of jquery.timeline.js ) and updating the iScroll and iScroll2 vars with the new values, all packed in a function for the movement. Well, without doing testing that’s how i would be trying it.

Hope this helps. Kind regards and thanks for purchase.

Thanks for the quick reply. I just want to do the former, so that the timeline scrolls left/right by a certain number of pixels when the arrows are clicked.

Ok. With some js skills you can get it runnung, following the scheme i commented before. Let me know if you can manage or you could be interested in a custom budget for this.

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

Where can I locate this line of code to change the width of the entire project, I need it to be 700px wide..

Thanks!!

Hi. The config parameters are directly accesible right inside the html, div id > timeline. You will find the following variables (the one that controls the width is data-width):

data-fadeInDelay="3000" 
data-width="952" 
data-height="450" 
data-imagesWidth="3400" 
data-imagesHeight="265" 
data-contentWidth="1670" 
data-contentHeight="174" 
data-draggerWidth="59" 
data-draggerHeight="21" 
data-mouseWheel="1" 

Inside the docs you have further info about each config param. Hope this helps. Kind regards and thanks for purchase.

Hi,

Is this plugin based on this Wordpress plugin : http://codecanyon.net/item/wordpress-timeline-slider/2536611?ref=f41b ?

I wanted to purchase it for my Wordpress blog but it seems the support is really bad and the plugin isn’t really up-to-date :/

Best regards

Hi. Yeah, that’s the way, using iframe. You have some iframe plugins for WP, but it’s easier to just put the iFrame inside a page or post content. You have the timeline on a separated html, and refer that html url on the iframe, that’s all. But note that you won’t be able to manage the timeline contents through your WP admin, of course.

Hope this makes sense. Best regards.

Thank you again.

Putting your Timeline into a page or post content is as easy as putting a Youtube video as iframe ? For example, the code : <iframe width=”420” height=”315” src=”//www.youtube.com/embed/SfYeSMraAcQ” frameborder=”0” allowfullscreen></iframe> will display a Youtube video if I put it in my wordpress editor.

I also read iframe was not good for SEO because Google can’t read it. Does that mean the content into the Timeline will not be indexed ?

Best regards

Yeah, that’s the way to get that done. Simply change the url inside src attribute with the url where oyu have the timeline. And yes, i’m afraid iFrame is not the best way for SEO. You can always put hidden content on that page with the same texts, but won’t be the same, of course.

Before purchasing, I want to verify that this (jQuery Timeline Slider) works on any regular website, not just on a WordPress site? Thanks!

Hi. This is not a WP plugin, just a regular jQuery plugin, so it will work on any site, as long as you can load jQuery class (recommended to use the same version as the plugin to aovid conflicts between versions).

Hope this helps.

Hi, I just purchased your jQuery Timeline Slider plugin but download link is not working. :(

Hi. Is strange, i tested and i can download it just fine. Double check some download plugin could be blocking the link. If you can’t download it please contact support, authors don’t manage the downloading system :(

i just tried again today – and its working fine. Strange. Anyways, thanks

Bug in Audio Player :: REVISITED!

Previous forum member commented about this bug, last year – you haven’t replaced/ removed the COMA that is in the //HTML5 AUDIO PLAYER module in the jquery.timeline.js that is part of the FULL DOWNLOAD Files in the DARK sample::

Here is the CORRECTED CODE, Lines 64:71 without the coma, at the end of the loop, that causes the js module to fail.::

//HTML5 AUDIO PLAYER 
audiojs.events.ready(function() {
    var as = audiojs.createAll({
        autoplay: true,
        loop: true
    });
    audio.prettyPaused = 0;
});

I can, but the bug is without an m0, you lose your last mX milestone tag – the js could do with a start at 0 or first number encountered. I am working with multidimensional arrays, where I am stepping through a list of YES NO options yes = add a tag. So the direct count can be 3479 11 etc…
I can work this counting out, but thought it best you knew how critical starting at m0 is compared to m1. As suggested need a start at 0 or start at first span id encountered. That would solve the missing last tag from its amazing disappearing act! THXs in advance.

DEVELOPMENT idea::
Along the TimeLine, would be really nice to add a Graduation marks for each year. Ths would help improve the link between the ViewPort and the DataPort not being in sync issue.
So here is the idea….
/..../..../..../..../..../..../..../..../..../..../..../..../..../
sorry – text editor doesn’t permit a “pipe” ”|”?

Hi. To keep things organised on your long request, please, let’s track all conversations by email, will be easier for me. Thanks!

5 STARS Awarded by ma-design.com

Great simple app to develop and expand your own ideas and design. I have successfully adapted this using a lot of server side PHP coding to make the content dynamic, as well as to control much of the creation of the whole timeline using a simple ARRAY.

thanks for such a great app – congratulations on gaining a full 5 STAR award.

Thanks for your kind words and the rate. Enjoy the file and let’s keep in touch by email. ;)

Hiya – just quickly dropping a line to say, just brought this, will be providing clear feed forwards where needed, as I install and develop the concept.

If all goes well you will get a 5 STAR review! cant be fairer than that…

Update :: You don’t need a Hover image for the VIDEO pic, all you need is a ARROW then set the grey background in css using rgb alpha. then set the size for w & h @ 100% – then you are independent of the image size, and all video screen image sizes can be used on the fly.

UPDATE:: on the fly creation of both Vimeo and Youtube thumbnails now completed – WORKS GREAT!

UPDATE:: Just finalized coding to now include a random thumbnail generator, on all URL web links. This creates a thumbnail of one of 5 different web address, then displays it on the TimeLine. I will be further developing this feature in my own version of the TimeLine::

Thank you for this amazing timeline. Is it possible to provide the timeline from Right-To-Left structure. I need to use this for an Arabic website, but when i tried to change the direction it didn’t work with me.

Hi. Sorry but this user hasn’t purchased the file. I can’t give support for non verified purchases. Regards.

Having a problem with it working on an IE8 browser for some reason. It wont scroll at all with the IE8 browser, but IE10 works fine.

Can you recommend something that I could try to force it to work?

Safari, FF, Chrome, all seem to be fine as well, atleast with the latest versions.

I sent a link to a group of people, and they were using IE8, and it wasnt working for them. I confirmed it today, and it was giving them some browser errors.

Hi. I’m travelling till saturday so i can’t check code, but do you get the same error on my provided sample? If not, send me your url through my profile form (not here, please) so i can check what could be going wrong. Kind regards and thanks for purchase.

Excellent plugin! Just a quick question re: videos – is there a way to change the prettyphoto dimensions for viewing videos?

My videos are sized at 480×360px (.mov), but the controls are getting cut off as it seems the max height of the prettyphoto pop-up box is 360px.

Hi. I’ve not setup amy restrictions for prettyPhoto, the lightbox plugin is working as is. Check prettyPhoto documentation on their site on how to insert videos, and send me your url through my profile form (not here, please) if you can’t get it running. Kind regards and thanks for purchase.

Hi, I was able to find how to change the default height of the box in the jquery.prettyPhoto.js file. Thanks.

Nice you got it running. Let me know if i can be of further assistance. ;)

sorry my bad, coding stuff up on my end

Nice you got it working. Let me know if i can be of further assistance. ;)

hi,

it seems that the timeline has stopped working in the latest version of Firefox, can you confirm this and if there is a fix

Hi all. Glad to announce that a new HTML5 template is now available for purchase on Themeforest. Check it here:

I like to know if it is possible for this plugin to grab data from Google doc or Google spreadsheet? Please advice. Thank you

Hi. There is no out-of-box feature for that, but as long as you can manage to get the data in a valid format, i guess it could be possible. But note you will need web dev skills for it.

hi Pezflash, I also am the one that wrote the email. how can I get the bottom dates to align with the date on the slider that gets selected?

Hi. There is no automatic system for that, you need to place the marks and set them the xPos value, and make testing to align the top image area and the bottom milestones according to the position. My advice, first finish your whole image area, then milestones columns, and once finished, set the proper width for both on plugin main settings, then start to place the marks.

Hope this helps. Kind regards and thanks for purchase.

Thanks pezflash. I like the product a lot but unfortunately it may not work for me. I have about 30 timeline elements but cannot seem to get any of it to line up. I’ve set the slider of the elements evenly spaced also, and also played with and replaced some fixed width divs for the images. Cannot seem to get it to line up though no matter how much I try. Sometimes the timeline element goes too far left or too far right. Will keep trying though.

Hi. Send me your url through my profile fom, i’ll try yo take a look in case i can help you somehow.

First of all; Good work! really love the design But I can’t seem to get the fullscreen view on ipad, as showen here: http://www.unpezvivo.com/proyectos/codecanyon/timeline/features.jpg

Is that possible or does responsiveneness has to solve that?

Hi. Sorry for the confussion with that screenshot, the plugin is not responsive. Is something i’m considering in future updates, but mostly for mobiles, on iPad (landscape view) it should be displaying the same as on browsers. This is first time i got this issue, do you think i should change that preview image to avoid future confussions?

Kind a saw it comming, but yeah I think its a good idea to change that pic. Was lookin for a an Ipad optimalized template.

Ok, sorry about that. Will change it to aovid people thinking this is responsive. Never thought that was going to cause confussion. :(

Great plugin, but we REALLY need a responsive version. It’s 2013. :)

Yeah, got some requests for that. Not an easy tweak for this, but i’ve noted it on my to-do list for this file. ;)

What is the nature of the license. Can we code it?

You can code it to use on one internal project. If you are going to resell it inside another package or bigger project, you would need an extended license. Contact me through my profile form if that’s the case.

Hello Pezflash really nice project.

I’m installing this application, but I can’t figure out a formula for the ratio between the track Markers and the alinement of the slider images. Is there a factor you work with to determine these numbers, or just by site of manual alignment?

Thanks,

Yogi -

Ok thanks PezFlash.

Is there a section in the code that controls the ratio or speed of the of the scroll? Maybe I can develop a formula from that to create a fixed 1-1 ratio.

Thanks

Yogi -

Hi Yogi. The main dragging function is on jquery.timeline.js, line 143, but i think that if you need to tweak a bit the movement functionality, you will need to edit js/tinyscrollbar/jquery.tinyscrollbar.js file, where ratio(s) values are setup. You would need to add some values on dragging event on line 155. Hope this helps!

Thanks PezFlash that helps greatly. I’ll let you know if I come up with a solution.

Thanks Again for the great coding.

Yogi -

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