CSSLab

jQuery Timelinr

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.timelinr-0.9.53.js"></script>

$(function(){
   $().timelinr();
});

$(function(){
   $().timelinr({
      orientation: 'horizontal',
      // value: horizontal | vertical, default to horizontal
      containerDiv: '#timeline',
      // value: any HTML tag or #id, default to #timeline
      datesDiv: '#dates',
      // value: any HTML tag or #id, default to #dates
      datesSelectedClass: 'selected',
      // value: any class, default to selected
      datesSpeed: 'normal',
      // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
      issuesDiv : '#issues',
      // value: any HTML tag or #id, default to #issues
      issuesSelectedClass: 'selected',
      // value: any class, default to selected
      issuesSpeed: 'fast',
      // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
      issuesTransparency: 0.2,
      // value: integer between 0 and 1 (recommended), default to 0.2
      issuesTransparencySpeed: 500,
      // value: integer between 100 and 1000 (recommended), default to 500 (normal)
      prevButton: '#prev',
      // value: any HTML tag or #id, default to #prev
      nextButton: '#next',
      // value: any HTML tag or #id, default to #next
      arrowKeys: 'false',
      // value: true/false, default to false
      startAt: 1,
      // value: integer, default to 1 (first)
      autoPlay: 'false',
      // value: true | false, default to false
      autoPlayDirection: 'forward',
      // value: forward | backward, default to forward
      autoPlayPause: 2000
      // value: integer (1000 = 1 seg), default to 2000 (2segs)< });
   });

<div id="timeline">
   <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1">
         <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
   <a href="#" id="next">+</a> <!-- optional -->
   <a href="#" id="prev">-</a> <!-- optional -->
</div>

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.timelinr-0.9.53.js"></script>

$(function(){
   $().timelinr();
});

$(function(){
   $().timelinr({
      orientation: 'horizontal',
      // valores: horizontal | vertical, por defecto horizontal
      containerDiv: '#timeline',
      // valores: cualquier etiqueta HTML ó #id, por defecto #timeline
      datesDiv: '#dates',
      // valores: cualquier etiqueta HTML ó #id, por defecto #dates
      datesSelectedClass: 'selected',
      // valores: cualquier clase, por defecto selected
      datesSpeed: 'normal',
      // valores: número entre 100 y 1000 (recomendado) ó 'slow', 'normal', 'fast', por defecto normal
      issuesDiv : '#issues',
      // valores: cualquier etiqueta HTML ó #id, por defecto #issues
      issuesSelectedClass: 'selected',
      // valores: cualquier clase, por defecto selected
      issuesSpeed: 'fast',
      // valores: número entre 100 y 1000 (recomendado)ó 'slow', 'normal', 'fast', por defecto fast
      issuesTransparency: 0.2,
      // valores: número entre 0 y 1 (recomendado), por defecto 0.2
      issuesTransparencySpeed: 500,
      // valores: número entre 100 y 1000 (recomendado), por defecto 500 (normal)
      prevButton: '#prev',
      // valores: cualquier etiqueta HTML ó #id, por defecto #prev
      nextButton: '#next',
      // valores: cualquier etiqueta HTML ó #id, por defecto #next
      arrowKeys: 'false',
      // valores: true/false, por defecto false
      startAt: 1,
      // valor: número entre 1 y el máximo de elementos, por defecto 1 (primero)
      autoPlay: 'false',
      // valor: true | false, por defecto false
      autoPlayDirection: 'forward',
      // valor: forward | backward, por defecto forward
      autoPlayPause: 2000
      // valor: número (1000 = 1 seg), por defecto 2000 (2segs)
   })
});

<div id="timeline">
   <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1">
         <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
<a href="#" id="next">+</a> <!-- opcional -->
<a href="#" id="prev">-</a> <!-- opcional -->
</div>

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

1. ¡esta genial!

   Inyaka
   18 / Agosto / 2011

   

2. Buena, gran aporte! Fácil y bonito…

   Sergio Conejeros
   18 / Agosto / 2011

   

3. Excelente gracias!

   Marco
   18 / Agosto / 2011

   

4. It lacks key navigation but great job !

   TVorace
   19 / Agosto / 2011

   

5. nice

   dykz
   19 / Agosto / 2011

   

6. Cool & fun timeline, I’m testing it and it works just fine! I report only one issue : I don’t know if this is an error from my part but when i click on the prev-next buttons/links, the page scrolls up to the top. I added a return false on these links with jQuery to avoid that.

   Jerem
   20 / Agosto / 2011

   

7. Jerem: this issue is covered within the new release, although I use preventDefault instead of return false.

   Jorge Epuñan
   22 / Agosto / 2011

   

8. Realmente bonito, te felicito por tu buen trabajo y muchas gracias por compartirlo

   creaciones web
   23 / Agosto / 2011

   

9. This script do not work fine when we don’t start on first date … if “selected” on 1950 for exemple … without this, it’s fine !

   PCO
   23 / Agosto / 2011

   

10. PCO: tnx for the advice, I’ll work on it for sure!

    Jorge Epuñan
    23 / Agosto / 2011

    

11. Great correction 0.93 ! StartAt very useful !!

    PCO
    24 / Agosto / 2011

    

12. Great script! Is it possible to link to another page from entry x (eg. 7) and when pressing the browser’s back button to start the timeline at the last clicked entry x? FF does this now already, but WebKit and IE do not. Keep up the good work!

    Tim
    24 / Agosto / 2011

    

13. Tim: yep, it is possible. Just have to integrate jQuery.bbq plugin, as I did in this tabbed article. I’ll prepare a new demo with this and publishit it right here.

    Jorge Epuñan
    24 / Agosto / 2011

    

14. Hello , My name is kanagu, I am a WPF developer and I am planning to launch a web site in the near future to provide free WPF plugins. I came to know about this timer plugin recently, Can I have your permission to write this plugin WPF and redistribute it as a free utility for the WPF developers ?

    kanagu
    24 / Agosto / 2011

    

15. kanagu: sure, this is a free plugin so go for it.

    Jorge Epuñan
    24 / Agosto / 2011

    

16. thanks

    9ale7
    24 / Agosto / 2011

    

17. Awesome plugin, well done!!! I would like to add more items to the list dynamically, is there a method to do so?

    I imagine one way would be to use jQuery to add to the lists and re-initialise the plugin, but I believe that would reset the list to the start again….?

    Appreciate your help….

    Rob James
    29 / Agosto / 2011

    

18. hey Rob James: that’s an awesome upgrade, and a great challenge. Let me work on that and if it’s successful I’ll add it here as a new example.

    Jorge Epuñan
    29 / Agosto / 2011

    

19. Is it possible to make it autoplay ?

    Jens Mikkelsen
    31 / Agosto / 2011

    

20. Jens: sure it is possible, let me add it as a parameter in the next version, I’ve already have some things done for 1.0 release.

    Jorge Epuñan
    31 / Agosto / 2011

    

21. Jens: done 0.9.4 includes autoPlay, forward and backward.

    Jorge Epuñan
    31 / Agosto / 2011

    

22. Love the plugin and it works perfectly for a page I need to create. I am having an issue with IE7. I am changing the colors and there is an artifact around the titles and images. See the example here – http://i.imgur.com/ZlhgS.jpg. Is there a solution for this?

    Ricky Gonzalez
    06 / Septiembre / 2011

    

23. Ricky: that’s because I’m using advanced CSS3 properties for the example, for bad browsers (as IE7) you must deactivate them (text-shadow, box-shadow, gradients, etc) and the images are all transparent PNG’s (unsupported by IE7-), so use regular JPG or GIF’s.

    G’luck

    Jorge Epuñan
    06 / Septiembre / 2011

    

24. Hello Jorge,
    wonderful plugin, thank you!
    But I have same issues like Ricky (latest comment) has. But in IE8. The matter not in text-shadows or pngs, once I remove a link to script in mark-up all becomes fine. What is interesting is that it does not happen with png arrows (I made my own) and it does not affect text (links) in #dates. Only h1 (which has no text-shadow or any other CSS3 effect) and pngs in #issues are affected and have same ugly outline. Do you have any solution how to fix the problem? It is somewhere in script itself…
    Would be very thankful and hope for your reply. Thanks! Tanya

    Tanya
    07 / Septiembre / 2011

    

25. Using as an event/concert timeline for friends band. Ideal!
    Thanks!!

    Ryan
    12 / Septiembre / 2011

    

26. Cool code. I have timeline tutorials similar yours but yours look simple.

    http://kclarkwebdesign.com/blog/tutorials/?page_id=286

    Krittiya Clark
    18 / Septiembre / 2011

    

27. excelente jorge ! felicitaciones !!

    dlv
    18 / Septiembre / 2011

    

28. That’s a real great plugin. I had been searching the web for something like this for ages! I needed to create timelines for my students, and thanks to you now it’s done! There’s an example:
    hhttp://campus.carmelitas.edu.pe/courses/CCI010/document/Term_III/test/index.html?cidReq=CCI010

    santiago csirke
    18 / Septiembre / 2011

    

29. Excellent plugin. Exactly what I was looking for, and found by accident.

    haribo
    19 / Septiembre / 2011

    

30. Outstanding work, very well done!
    Didn’t work with our javascript “lightbox” (pretty photo), but it does play well with Highslide. I’m sure if I were more proficient at Javascript that I’d be able to figure it out, but sadly… I am not.

    Thanks much for making this available!

    Greg
    19 / Septiembre / 2011

    

31. Hi, is it possible to make an event when you go with the mouse over the navigation arrows the line automatic go to scroll., and stops when the mouse is leaving the navigation arrows?

    Jan-Willem
    19 / Septiembre / 2011

    

32. Hey Jorge! Nice plugin!!! Really cool.

    Quick question: How can I remove animation on arrow mouseover?

    Andy
    23 / Septiembre / 2011

    

33. Andy: that’s CSS3 and it’s in the stylesheet:

    a {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
    }

    Every link is setted to be animated on it’s :hover state, so just remove that transition sentence and no link will be moving anymore.

    Jorge Epuñan
    23 / Septiembre / 2011

    

34. Jorge, thank you for your reply! You’re the man!

    Andy
    30 / Septiembre / 2011

    

35. great plugin! very nice.
    i would add a “outline:none” to the li class of the year numbers for hiding the dotted outline.
    but great work anyway!

    lars
    01 / Octubre / 2011

    

36. Great posting.It help to know abour script.

    hire magento designer
    04 / Octubre / 2011

    

37. It’s so great.

    I just have a question. i use your script in a rather strange way. My blog loads a bunch of divs, so i use your script 10x at once.

    is there a way to give the number of the last “page” manually.

    I use $(settings.datesDiv+’ li’).eq(settings.startAt-1).find(‘a’).trigger(‘click’);

    to give the startpage?

    Nasendackel
    18 / Octubre / 2011

    

38. Great script…simple yet elegant.

    Antonio
    19 / Octubre / 2011

    

39. Si el texto es muy grande no aprece todo. Se corta.

    Alex
    19 / Octubre / 2011

    

40. Nasendackel Yes, with the startAt property you can reach any object inside the timeline, but not if it is dynamic. For that you should write smt customized, like:

    http://jsfiddle.net/taM8x/

    Gluck!

    Jorge Epuñan
    19 / Octubre / 2011

    

41. If you had a very long text or paragraph in your it is cut and not visible. How i can solve that?

    Alex
    19 / Octubre / 2011

    

42. Alex: solve it with CSS.

    Jorge Epuñan
    19 / Octubre / 2011

    

43. Está genial Jorge, impresionante !!!! Gracias por compartirlo.

    Manuel Pino
    20 / Octubre / 2011

    

44. Muy útil, ademas que esta genial

    Daniel
    20 / Octubre / 2011

    

45. Nice Job!!

    Airton Maia
    21 / Octubre / 2011

    

46. Brilliant! Thank you for sharing.

    Fern
    22 / Octubre / 2011

    

47. It is painful to fill the issue list manually.
    Why don’t you fill it automatically like this:
    $(“#issues li”).each(function (a) {
    var id = $(this).attr(‘id’);
    $(‘#dates’).append(‘‘ + id + ‘‘);
    });

    Pascal GANAYE
    22 / Octubre / 2011

    

48. Pascal: that’s done for 1.0 version, coming soon!

    Jorge Epuñan
    23 / Octubre / 2011

    

49. Gran aporte . Saludos

    pesadilla24
    24 / Octubre / 2011

    

50. Very nice and very usefull. Thanks for sharing!

    Stefan
    27 / Octubre / 2011

    

51. Hi,

    Thanks for your jquery timeline.

    I have two questions :
    1) what happens if text is bigger than the displayed picture ? Does it display a vertical / horizontal scroll ?

    2 is it possible to display more than one picture (one before and one after the text) ?

    Sincerely thanks and have a nice day,

    Miguipda

    Miguipda
    28 / Octubre / 2011

    

52. Miguipda: if I understood, what you need is all CSS and it’s not an issue of Timelinr. Inside #issues li you can include anything you want and style ias needed.

    Gluck!

    Jorge Epuñan
    28 / Octubre / 2011

    

53. Ótimo! Muito obrigado, cara.

    Thiago
    28 / Octubre / 2011

    

54. Hola, mil disculpa me tope con este sitio web y como vi q respondian y se ayudan tengo un problema, tengo el jquery-1.3.min.js y el jquery-1.6.1.min.js y no se si ellos se pueden usar juntos en una pag. que estoy diseñando, si me pueden ayudar mil gracias si no es el foro correcto mil disculpas pero necesito ayuda

    Carlos
    31 / Octubre / 2011

    

55. Carlos: si, en teoria puedes usar juntos pero no, no te lo recomiendo. Depende de las razones en q deberias usarlas juntas, generalmente no deberias usarlo. Mira como usar jQuery sin conflictos y otras opciones de librerias Javascript.

    Jorge Epuñan
    31 / Octubre / 2011

    

56. Excelente plugin.

    ignacio
    03 / Noviembre / 2011

    

57. Hola Jorge, me ha salido en mi web estupenda la linea de tiempo, pero quiero colocar en otro sitio un lightbox, y parece que hay algún conflicto y ya no funciona timelnr. Me puedes ayudar?

    Ramon
    04 / Noviembre / 2011

    

58. How do I get the images to grow? I downloaded the new version and images in the example file do not grow.

    Patrick
    04 / Noviembre / 2011

    

59. Excelente plugin. Gracias por tu compartir tu arduo trabajo!!!!!

    Cartero
    05 / Noviembre / 2011

    

60. Patrick: that’s CSS3 feature:

    #issues li.selected img {
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
    }

    Gluck!

    Jorge Epuñan
    06 / Noviembre / 2011

    

61. Is it possible to have the timeline stop on the last slide?

    Keith
    07 / Noviembre / 2011

    

62. plugin muy copado!

    Hernan
    07 / Noviembre / 2011

    

63. Gracias Joge por el comentario seguire mirando otras opciones para no usar esos 2 js juntos

    Carlos
    07 / Noviembre / 2011

    

64. Jorge como estas, espero q bien aqui molestandote otra vez , en el camello me pidieron un slider de fotos peor q tenga noticias tambien en el nivo no puedo poner noticias ni link q se vallan a otras paginas , como busco un slidershoder o algo asi para pa paguina no se ni como buscar eso , peor la idea surgio por la pag de msm.com q ellos tienen noticias coon fotos y letras no se si me entiendas, gracias por la atencion prestada

    Carlos
    08 / Noviembre / 2011

    

65. Carlos: si te entendi, necesitas un slideshow con foto y txt q te lleva a un enlace, yo modifique nivoslider para q haga eso en un proyecto pero creo q Diapo o Awkward Showcase te pueden ayudar.

    Suerte.

    Jorge Epuñan
    08 / Noviembre / 2011

    

66. Great Plugin! Very nice animations!I would put it on GitHub.com!

    Malte
    09 / Noviembre / 2011

    

67. Malte: sure I’ll do it, with v1.0 release.

    Jorge Epuñan
    09 / Noviembre / 2011

    

68. Como estas Jorge las opciones que me disten la una dio esta muy complejo jajja yo recién empiezo esto y la otra pues esta mas o menos no me convence mucho peor el nido ya lo tengo adaptado en el código del nido com le hago q tu dijiste q lo has modificado yo más o menos entiendo esto, pero no puedo ni agregarle un simple link creo q se lo modifica en el html en esta parte

    Me puedes indicar más o menos como cambiarlo y en donde e si no es mucha molestia por que si no voy a tener que poner otro que esta mas o menos peor eso si es mucho trabajo empezar otra vez

    Carlos
    09 / Noviembre / 2011

    

69. Carlos
    09 / Noviembre / 2011

    

70. Disculpa pero no puedo poner la parte del código que quiero que veas cómo puedo hacer eso????

    Carlos
    09 / Noviembre / 2011

    

71. Carlos: creo q mejor para eso usa el contacto. Pega el codigo como entidad HTML porfa para q se renderice.

    Jorge Epuñan
    09 / Noviembre / 2011

    

72. Jorge ya me salio tengo el slider show como queria ahor alo voy a poner en el html eso es otro rollo despues te digo claro esta si te interesa saber como me fue jajaj amil gracias

    Carlos
    11 / Noviembre / 2011

    

73. Great plugin, just one question. After the image has finished growing, there seems to be something happening to the text, also happens if you use the arrows, it gets brighter at the end of the animation, and a little bolder as well. Can that be fixed? (I see it on your demo pages)

    wesley
    12 / Noviembre / 2011

    

74. wesley: what is your browser? With Chrome animation runs great, FF something happens like you say with the text getting a little bolder but I havent IE to test it.

    Jorge Epuñan
    12 / Noviembre / 2011

    

75. Hi Jorge !
    Great job, it’s a nice tool !

    But I have a little problem :
    I try apply a background to” #dates li a” but on IE6, the background have an fixed position and the text move.
    Have you an idea for my problem?

    Thanks a lot !

    Yordi

    Yordi
    16 / Noviembre / 2011

    

76. Jorgé, I am on mac safari when I see the text become bold/styled differently after the effect has run. Not tested in other browsers, hope that helps. I thought chrome and safari shared the same codebase.

    wesley
    17 / Noviembre / 2011

    

77. Jorge, thanks for the plugin! It looks beautiful, but unfortunately I am having the same problem as Jerem (20 de Agosto del 2011 a las 6:08 pm). I cannot get the timeline to scroll at all, and the next/previous buttons return to the top of the page. I’m using the 0.9.4 release. Any advice?

    Kate
    18 / Noviembre / 2011

    

78. Kate: as you describe, your problem is a conflict with Timelinr and another script (and it is not working at all). Do you have any URL where I can inspect your code to help you better?

    Jorge Epuñan
    18 / Noviembre / 2011

    

79. wesley: I’ve seen that problem in IE8, it regards to the filter attribute (MS propietary) and it is fixed on 1.0 release (soon). I’ll check it on Safari, never gave me problem that browser,

    Jorge Epuñan
    18 / Noviembre / 2011

    

80. Hi, Thanks for the hard work. Its pretty impressive. But I have one small problem, everytime I use jquery.noConflict(), the timeline doesn seem to work. Do you have any idea? Thanks

    Cedric Loy
    19 / Noviembre / 2011

    

81. In IE8 horizontal scrolling will not work fine.

    DasNets
    22 / Noviembre / 2011

    

82. I found a bug – multiple clicks in a short period of time can shift the timeline focus away from center. It can be fixed by checking both issuesDiv AND datesDiv for the “:animated” quality in next and prev.

    Dave Mayo
    22 / Noviembre / 2011

    

83. Tnx a lot Dave, it worked perfectly. Improving 1.0 release with your bugfix, tnx!

    Jorge Epuñan
    22 / Noviembre / 2011

    

84. j’ai remarqué un bug,
    http://www.cochetconceptweb.fr/timeline/

    Allez sur la droite, la selection de la dates se décale jusqu’a disparaitre totalement.

    Olivier
    28 / Noviembre / 2011

    

85. Olivier: Je passe en revue maintenant, je m’aperçois que je vais.

    Jorge Epuñan
    30 / Noviembre / 2011

    

86. Olivier: Je l’ai déjà résolu, en tout cas, le correctif sera pour la version 1.0

    Jorge Epuñan
    30 / Noviembre / 2011

    

87. Great script! Awesome tutorial.

    What is the license for this?
    Cual es la licensia para usar esto?

    Gracias!

    csslab lover
    12 / Diciembre / 2011

    

88. It is free under the MIT license

    Jorge Epuñan
    12 / Diciembre / 2011

    

89. Love the timeline. It works great, but my problem is, I’ve added about 15 dates to the timeline and when I get to the end, the “next” link allows the timeline to keep going instead of stopping, like your demo. And then when I click “prev” all the “issues” remain a 0.2 opacity until I return to the start. I’ve also noticed that the image animation is not working for me locally. Any help would be appreciated.

    Bob
    13 / Diciembre / 2011

    

90. Great jquery tool. it is perfect. Yesterday I try in opera, and on my site is some bad. I can not describe it well “blicking” headers. try http://www.dp2.cz/koncept. what is bad?

    dikomix
    14 / Diciembre / 2011

    

91. Awesome script! Thanks for sharing it with us

    By the way, a guy on Codecanyon.net has been making money with your work since a while…

    I think you should check this out: http://codecanyon.net/item/jquery-timeliner-slider/964667

    Cheers.

    Chris
    14 / Diciembre / 2011

    

92. This is great! Just what I was looking for.

    I have one small issue – my timeline is sitting down the bottom of a page and when the page loads the browser automatically scrolls down to the timeline. Is there a way to stop this happening?Many thanks!

    Antenna
    14 / Diciembre / 2011

    

93. Bob do you have any way to upload your code to a server to have a look at it?

    Jorge Epuñan
    14 / Diciembre / 2011

    

94. Chris: Yeah I’m in knowledge of it and already have contacted Envato to remove it ASAP. Although still no answer…

    Jorge Epuñan
    14 / Diciembre / 2011

    

95. Antenna: same as Bob, please give some URL to have a look at the code.

    Jorge Epuñan
    14 / Diciembre / 2011

    

96. Sorry Jorge, the issue I was experiencing was due to another script – all sorted now! Any clues as to when version 1.0 will be ready? Thanks!

    Antenna
    18 / Diciembre / 2011

    

97. Hi,
    I am experiencing a conflict with Pretty Photo. The timeline works until I view a photo, close the pic and then when I return to the timeline it won’t scroll? Could you help me out please? Many thanks in advance.

    jo
    18 / Diciembre / 2011

    

98. Jorge, I found out that the error came when I tried to do bulleted lists within each issue. The jQuery did not like that. I’m having to manually use HTML bullets for the copy I’m trying to insert. Is there a way to fix that?

    Bob
    19 / Diciembre / 2011

    

99. Antenna: great! Still no schedule to the final release, sorry.

    jo: as I know, Prettyphoto has it’s own methods for navigation, probably they’re confliction with the ones used in Timelinr. Try using jQuery.noConflict();

    Bob: thst’s because the Timelinr itself uses lists for it’s construction; I suggest you use HTML Entities, for example for the bullets use •.
    Let me know how it’s working for you, tnx for writing me.

    Jorge Epuñan
    19 / Diciembre / 2011

    

100. Love your plugin! Thank you for offering it for free!

     Steph
     19 / Diciembre / 2011

     

101. very nice!
     but breaks in IE8 and IE7, some CSS improvements are necessary!

     Lars
     21 / Diciembre / 2011

     

102. Lars: sincerally, I don’t care about IE6-IE7, with this plugin I’m looking forward, not backwards.
     If you need some fallback, I suggest you use conditional comments or Modernizr.

     Jorge Epuñan
     21 / Diciembre / 2011

     

103. Well, great plugin! Thank you.

     Claudio
     22 / Diciembre / 2011

     

104. Muy bueno!!!

     Facundo
     23 / Diciembre / 2011

     

105. It is possible repeat timeline and “selected” on the bottom content? When I add second shortcut is create the timeline, and he moving but selected class is only in “using” timeliner (top or bottom).
     http://www.dp2.cz/koncept

     dikomix
     28 / Diciembre / 2011

     

106. dikomix: great use! I never thought to have the dates duplicated, of course I’ll work on smt for it. Gimme some time and I’ll publish here a solution for you.

     regards.

     Jorge Epuñan
     28 / Diciembre / 2011

     

107. No trabaja en IE8, alguien sabe alguna forma de hacerlo funcionar en IE8?

     Not working on IE8, can anyone help make it work on IE8?

     Eduardo
     11 / Enero / 2012

     

108. Eduardo: what’s not working for you? Do you have any URL?

     Jorge Epuñan
     11 / Enero / 2012

     

109. No need for my URL, same happens with your demo: http://www.csslab.cl/ejemplos/timelinr/latest/vertical.html

     I tried your demo to make sure it was not something i was doing wrong. Please let me know if you have a solution.

     Works in all other IE except IE8, when scrolling timeline goes crazy, with compatibility mode on it does work, but if its off the scrolling messes up.

     Eduardo
     11 / Enero / 2012

     

110. Eduardo: Bug detected, and I can offer you 2 options:

     1. Force compatibility mode with <meta http-equiv=”X-UA-Compatible” content=”IE=7″>
     2. Give me some time to fix it, I will do it because I should always offer the best rendering mode, specially for IE.

     Damn IE8, It shoudn’t do that! ¡Gracias!

     Jorge Epuñan
     11 / Enero / 2012

     

111. Eduardo after hours, your bug is dead. Please check again with your IE8 on this new 0.9.5 version, I fixed too the lack of PNG support for the same browser.

     Regards.

     Jorge Epuñan
     11 / Enero / 2012

     

112. jQuery Timeline,
     This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc..
     http://assadotcom.blogspot.com/2012/01/jquery-timeline.html

     assadotcom
     15 / Enero / 2012

     

113. nice plugin..

     Joseph Buarao
     15 / Enero / 2012

     

114. Hello. I can’t initialize multiple timelinr on the one page. can you help me how to do it? I used your code and my init code is :
     “$(function(){
     $().timelinr_({
     containerDiv: ‘#timeline_’
     });
     });”

     ale
     16 / Enero / 2012

     

115. ale: that’s not possible on cureent version, could be a feature soon but I can’t garantee that.

     Jorge Epuñan
     16 / Enero / 2012

     

116. ok. Thank you for a fast answer. Would be a very functional if we can to initialize multiple timeliners on the one page, something code like “$(function(){
     $().timelinr({containerDiv: ‘#timeline_1′});
     $().timelinr({containerDiv: ‘#timeline_2′});
     });. Thanks alot for your plugin, it’s really nice one.

     ale
     17 / Enero / 2012

     

117. great work! mate..

     Joseph Buarao
     17 / Enero / 2012

     

118. Could we use it for free ? If yes, mention in footer of CssLabs+ URL towards your site is enough?
     Thanks for your work

     Adi
     17 / Enero / 2012

     

119. Yes Adi, it is MIT licensed.

     Jorge Epuñan
     17 / Enero / 2012

     

120. hi, is there a way I can add scroll bar to the text on each section? i’ve been trying to use different UI but no luck, including this one
     http://manos.malihu.gr/jquery-custom-content-scroller
     No luck..porfa me puedes ayudar? thanks. PD. great timeline!

     Roberto
     20 / Enero / 2012

     

121. Roberto you shouldn’t have any problem integrating another plugin, but there’s something important that you should know:

     Most of scrollbars plugins I’ve used need the element scrolled be visible (not hidden like are the #issues li within the timeline). Probably you should use a method for that, from the scrollbar plugin.

     GLuck! Send an URL to help you better.

     Jorge Epuñan
     20 / Enero / 2012

     

122. My company decided your plugin was the best option for an interactive history timeline on the website. However, when I try to apply the plugin to our template, none of the dates or issues show up. Using Firebug, I see that the JS is setting the style width to 0 for both the issues and date UL items. We copied the CSS from the example as a starting point and changed the width for both UL, and DIV, so there is a starting width, yet somehow the style is set to “width: 0px; margin-left: 0px;”. I noticed in the JS that there is some calculation and created an alert for the settings at the top of the JS, widthIssues tells me it has a value of 0, but I don’t know where it’s getting the 0 from.

     Any thoughts on what we are doing wrong? I can provide a test URL via email. Thanks for the plugin and any advice you can offer.

     Ryan
     20 / Enero / 2012

     

123. Awesome job! Is there a way to use a direct link to get to a specific era. For example, is there a way to get to a link via “www.website.html#1900″ . I tried it with your demo, but the website is grayed out.

     Mimi
     25 / Enero / 2012

     

124. thanks ……timeline profile!

     Razor
     31 / Enero / 2012

     

125. Great work, we are going to use it on our new site. Quick question though; I can’t seem to re-arrange the dates line to show below the “issues”. Is there any reason why this should not work?
     P.S. As you’ll see on our dev page (http://mambo.3thirteen.co.uk/en) we have customised the look of your great plugin. Hope you like it. Thanks,

     cafe mambo ibiza
     01 / Febrero / 2012

     

126. hey cafe mambo ibiza: as I’ve seen in your site your problem was resolved right?

     Great design BTW, congrats.

     Jorge Epuñan
     02 / Febrero / 2012

     

127. I replaced the content with list points. This made it so when you clicked the next button on the last point that it kept scrolling! To fix this I had to give a class to all of the issues and declare it in the JS file like:

     var howManyIssues = $(settings.issuesDiv+’ li.year’).length;

     ArleyM
     02 / Febrero / 2012

     

128. Excelente timeline. Gracias por compartir tu excelente creación.

     Arnoldo Briceño
     03 / Febrero / 2012

     

129. En internet explorer 7/8 el texto se ve mal. Dando la posibilidad de desactivar las funciones “fadeTo” funcionaria correctamente y se vería bien.

     Antonio A.
     16 / Febrero / 2012

     

130. There was a bit of a name-spacing issue (when using jQuery not as $), so I have a little update that I could commit to make it play nice. Do you plan on putting this on github?

     Andrew
     16 / Febrero / 2012

     

131. I am using it for the comments on my blog. In my template I am loading 11 comment-loops at once, which all uses timelnr. so I am using ist 11x. on loop has maybe 10 items and only 1. Is there a way to say timenlr by hand how many items there are?

     Nasendackel
     17 / Febrero / 2012

     

132. Andrew: I’m working on 1.0 version, which will be stable and hosted on GitHub (no date for release yet).

     Nasendackel: Great use of Timelinr, tnx! It is misbehaviour with some element calculous, I recommend you to re-init the plugin everytime you request a new comment.

     Jorge Epuñan
     17 / Febrero / 2012

     

133. Wow.
     Esta genial.
     crees que pueda aplicarlo a una pagina jimdo?

     Enrique
     21 / Febrero / 2012

     

134. Estimado, excelente trabajo y se agradece la iniciativa de compartirlo.

     Eso sí, el script presenta conflictos con varios otros plugins de jquery. Para los que quieran utilizarlo junto con algún lightbox, a mi me resultó con el plugin Slimbox2.

     Ojalá pudiera salir una actualización nueva corrigiendo esos fallos, si no es mucho pedir, claro está.

     Germán
     27 / Febrero / 2012

     

135. Hola Jorge, quiero felicitarte por tu gran aporte, en verdad es muy ameno, y ya no se hacen tediosas las lineas de tiempo.

     Solo quiero preguntarte si el plugin solo sirve conectado a Internet, porque al probarlo sin conexion no me deja avanzar.
     Y disculpa si ya se había comentado la solucion anteriormente.
     De antemano muchas gracias!!!

     Raul Perez
     28 / Febrero / 2012

     

136. Enrique: no conozco jimdo pero seguro que se podra, con un poco de paciencia.

     Germán: si estoy conciente de esos problemas y los tengo considerados para el final release (v1) aunq no he tenido tiempo para terminarlo.

     Raul: el ejemplo que descargas va a buscar la libreria jQuery a Google API’s por lo q si no tienes conexion no la encuentra; te recomiendo descargarla antes desde el sitio oficial y llamarla local.

     Jorge Epuñan
     28 / Febrero / 2012

     

137. Hey Jorge,

     Yes I managed to get it working but broke it again on my local version so will need to pull it back off the dev site

     I look forward to telling you when the final site is live, if you like where the design is heading hopefully you’ll love it.

     Cheers,

     Kevin

     Cafe Mambo Ibiza Sunset
     29 / Febrero / 2012

     

138. Hey,

     Just wanted to say thanks for making such a great plugin. Works great when you follow the instructions

     Keep up the good work – looking forward to a 1.0 release!

     Jim

     Jim
     07 / Marzo / 2012

     

139. Great Plugin! Thank you very much for it!
     I have a question:
     Is it possible to stop the animation when onmouseovering the #timeline div and continue again when onmouseouting?

     Arto
     12 / Marzo / 2012

     

140. Excellent plugin, but I am having a little problem with the dynamic date width. Any idea why the last couple of dates are wrapping?

     http://www.irishpride.ie/about/history-new/

     Cheers!

     Spen
     15 / Marzo / 2012

     

141. Arto: not, it is not supported but yes, it is possible. I’ll add it as a feature on next release.
     Spen: I see on your link that you already resolved your problem.

     Jorge Epuñan
     16 / Marzo / 2012

     

142. This is awesome, thank you so much for sharing! I was wondering if there was a way to hide the arrows once you reach the end of the list? Like, when you reach the end of the list, could the right arrow be hidden? Same way for the left arrow, when you are at the beginning of the list, could the arrow be hidden until clicked to where there are list items before and after? I hope that made sense. I’m a designer but not so good at javascript.

     Thanks again for the great code!

     Gina G
     21 / Marzo / 2012

     

143. hello,

     is it possible to iplement a drag funcionality, so that i can drag through the years instead of having to see each and every one of them to get to the end ?

     thanks.
     pedro

     pedro
     22 / Marzo / 2012

     

144. hello!! Very interesting discussion glad that I came across such informative post. Keep up the good work friend. Glad to be part of your net community.

     National Seating
     22 / Marzo / 2012

     

145. Thank you so much for this awesome plugin!

     I would like to use it, but i experienced an issue with the issues:

     the first issues li is placed at the right position but when i click on the next date, the issues li is placed a few pixels under the starting point of the first li. The third li is placed a few pixels under the second one and so on.

     it seems that the script is scrolling too far!?

     If you could have a short look i would be more than thankful:

     http://oswaldoberhuber.com/#section7

     Matthias
     26 / Marzo / 2012

     

146. Matthias: your #issues li needs a clearfix, any method would help; in my test I added an overflow: hidden; to the CSS declaration.

     I sent you a screenshot to your email.

     G’luck!

     Jorge Epuñan
     26 / Marzo / 2012

     

147. wow, thank you so much!

     matthias
     26 / Marzo / 2012

     

148. and another question:

     is it possible to have to different timelinr in one page?

     matthias
     26 / Marzo / 2012

     

149. Sorry Matthias but for the current version the answer is no. Although it will be available for 1.0 version (no date for release).

     Jorge Epuñan
     26 / Marzo / 2012

     

150. Multiple timeline in a page.

     Hi, how I can add multiple timelines in a page? I try use another div id for a seccond time line but it’s not work… how I can do that?

     Thanks

     Theodoro Caliari
     27 / Marzo / 2012

     

151. Theodoro : sorry but until v1.0 it will not be possible.

     Jorge Epuñan
     27 / Marzo / 2012

     

152. really like this code but is their anyway to hide the left button when at the start of the timeline and the right button when at the end.

     jon harding
     27 / Marzo / 2012

     

153. Hallo This is the timeline view I am looking for … But how does this work with drupal? Where do I put the map jqueryTimelin_095 in my drupal structure? Is there anyone who has experience with this? thanx you and also thank you for sharing. Sylvie

     Sylvie Van de Waeter
     03 / Abril / 2012

     

154. hello,

     is it possible to iplement a drag funcionality, so that i can drag through the years instead of having to see each and every one of them to get to the end or beginning ?

     thanks.
     pedro

     pedro
     05 / Abril / 2012

     

155. Great plugin, Jorge. But I’m trying to make some dates on the timeline be written without links, just a simple markup date on it. But it seems that the “next” and “prev” buttons on the “#issues” ul doesn’t tracking for the next “a” tag”, just the next li child nested under both “#issues” and “#dates”. Is there some way to fix it? Gracias!

     Daniel Zanin
     08 / Abril / 2012

     

156. Daniel Zanin I can’t figure your problem as you describe it, since #prev and #next buttons should be outside #issues.

     Can you send an URL to check the source?

     Jorge Epuñan
     09 / Abril / 2012

     

157. Jorge, la verdad que esta muy bueno, realmente simple, dinamico y funcional.
     Tengo una duda al respecto, estoy intentando modificar el tamaño para agrandar las fotos, pero no encuentro la manera, ¿podrias darme una mano? desde ya muchas gracias por compartir.

     Jonathan
     09 / Abril / 2012

     

158. Hi Jorge, it´s me again. Clicking on my name will link to the site where I´m using your timeline script. It has conflict with the Fancybox modal window jQuery script, does any other modal window script that can run together with your timeline? Also, there’s that thing with the order of the dates (on the ul “dates” tag) synched with the “issues” ul tag. Example: I wanted to mark an interval of years (2008 to 2012) and between one year and another (ex. 2008 and 2009) have some months listed. But if I have 2008>June on “dates” ul (even if without link), but doesn´t have the 208>June “issues” ul, your script doesn´t “jump” the inexistent date, it shows the just next li value found. Have some way to create that “jump date” alternative?

     Daniel Zanin
     16 / Abril / 2012

     

159. Daniel Zanin: Your problem with the modal window it’s not an Timelinr problem; you missed the Fancybox stylesheet and the ID of the element that fires the modal window does not matches the ID of the targeted element, you should check that.

     I sent you by email the fixed code.

     Jorge Epuñan
     16 / Abril / 2012

     

160. Sir, The previous and next button won’t work for me, I mean when I click on them, it just scrolls on Top, the next slide won’t come….

     What could be the possible error…??

     Thanx.

     Yogi
     17 / Abril / 2012

     

161. Hi,
     this is a very nice widget.
     Is there any chance to implement mousewheel support?

     g/f

     franticzek
     18 / Abril / 2012

     

162. Hi,

     your jquery timeline script is wonderful.
     Therefore I tried to integrate it into my homepage which is based on joomla content management system. Unfortunately I got a problem. Not all timeline-elements will be presented in date-container and issue-container.

     I did some checks and now I found the problem. But I am not a expert in jquery and therefore I don’t know who to solve this problem.

     The fact:
     Joomla is a powerfull content management system and the used templates from joomla have their own css-files, where you will find styles for links, list elements and so on.
     Also your timeline-scrript will be provided with a css-file, also with styles for the above mentioned elements.

     This conflict is the reason for my problem. If I exclude the joomla css-file your timeline script works well within joomla and without any problem but there are some layout problems for the rest of the system, because the styles from your timeline-css-file will be used.

     If I include also your css-file the layout for the whole system is OK, but some elements will not be presented in timeline-container.
     My understanding: For the layout your css-specification will be used but I believe the jquery script is adressings the wrong styles and therefore it doesn’t work in the expected way.

     Do you have any idea, how to clear this conflict and to make sure that your jquery script is using also the styles from your css-file.

     Thank you in advance for your response.

     Hans Maurer – Austria (Vienna)
     johann@maurer.at

     Hans Maurer
     20 / Abril / 2012

     

163. Nice job man! Congrats.

     I’ve also made a jQuery Plugin which aim to help on form validation. If you think interesting, have a look:

     http://code.google.com/p/jquery-valida/wiki/GettingStarted

     Rogério Taques
     24 / Abril / 2012

     

164. I am curious to find out what blog platform you have been working with? I’m having some minor security issues with my latest blog and I would like to find something more safe. Do you have any recommendations?

     Afvallen Door Sporten
     25 / Abril / 2012

     

165. Sir, I’ve got issue with the implementaion of this plugin, when i click on Next or previous button page just moves on top…. the slider won’t work….. I have one more slider in my page, I know its some jquery clashing…because when individually implemented, the sliders do work….. I’ve tried the noconflict( ); method…. but all in vain…. Any idea how to avoid clashing of jquery……..??

     Regards

     Yogesh
     25 / Abril / 2012

     

166. Thanks for this kind of tutorial stuff.I used this plugin in my site and it was working nicely.I glade to be here.Please continue sharing with this kind of awesome tips.

     Web design company
     29 / Abril / 2012

     

167. Hello, great plugin but not useful. Works great everywhere but Internet Explorer, the artifacts around the h1 ruin everything! Especially, because I want white background and it only shows normal when the background color is set to #333333. I was going to use this for a big site but now I am stuck.

     Asif Kabani
     30 / Abril / 2012

     

168. If I want to use an image instead of h1 for text, how do I do that?

     Asif Kabani
     30 / Abril / 2012

     

169. Yogi: that’s probably some conflict you might have; check the web inspector console.

     franticzek: sure good idea, but I think that’s up to you. I didn’t added any binding to any event, but for sure I’ll point this to the newer version.

     Hans Maurer : Sorry I don’t use Joomla, can’t help you. But try working the CSS specificity for the elements within #timeline.

     Afvallen Door Sporten: If you check my source code (and the footer) I’m under WordPress. And about security, I use WordPress Firewasll 2 and Login Lockdown plugins.

     Yogesh : can’t figure out out without checkin your code. Send me an URL.

     Asif Kabani : I don’t know whats the artifacts around the h1 means. it is the text-shadow? Just remove it from the CSS! If your want an image… use CSS!

     Jorge Epuñan
     02 / Mayo / 2012

     

170. Hello. Thank you for this js!
     How can I have the autoply stop when mouseover a slide, and replay again from the same slide when mouseout?

     Mex
     04 / Mayo / 2012

     

171. Is there a way to make the prev and next buttons scroll more then one date at a time?

     Awesome plugin by the way :]

     João
     07 / Mayo / 2012

     

172. A stupid question, how can i modifiy the number of the dates displayed in the timeline? Currently, there’s 7 displayed and 2 others, the ones if both sides, that are blurred and i wanna show 9 dates at least.

     Meryboth011
     07 / Mayo / 2012

     

173. I managed to make both sliders work ( with noconflict function )… I mean I have one more slider… which has a set of images…
     When I click on one of the image…it gets expanded(kind of overlay or lightbox effect)…

     Problem is after I close this overlay image…the slider images move as normal… but in your timeline slider, the Previous and Next buttons just stop working… Not only Prev and next but other links also won’t work…

     There are prev and next variables defined in my slider.. so I’ve renamed that prev and next to prevslide and nextslide in html, jquery and css file… but still it won’t work…

     Both the sliders do work when page gets loaded. Its only that when I click an image from my slider and close the expanded image… Your slider stops working… Its been entire day… I’ve still not able to crack it…

     Sorry for lengthy post…

     Regards

     Yogesh
     10 / Mayo / 2012

     

174. All is well now.

     In the js file I put as var settings… And then it worked.

     Thanx for your kind help Sir.

     Regards

     Yogesh
     14 / Mayo / 2012

     

175. IE8 bug smashed while dates are animated (vertical); CSS updated: filter added due to IE8 bad-support of PNG transparency (#issues img)

     Web Design
     15 / Mayo / 2012

     

176. Hello Jorge,

     Nice job! It’s very usefull and functional.

     I’ve just made a little customization on your code, that allow the container adjust it’s own size according on the issue is current been displayed by the Timelinr.

     Maybe you could add the idea on a new version of Timelinr, what do you think?

     Please, contact me if you need more details.

     Kind regards,

     Rogério.

     Rogério Taques
     19 / Mayo / 2012

     

177. I want to have 10px margins on my #dates li elements, but this messes up the positioning of the dates when they scroll along!
     Is there anything I can do to the jquery to deal with this?

     Aaron
     25 / Mayo / 2012

     

178. Aaron: Timelinr calculates que widths of the #dates li and #issues li elements to construct the timeline behaviour. If you play with the box model of those elements probably will crash.

     So, as recommendation: don’t add margin, padding, borders directly to #issues/#dates li. Inside the li‘s add another element and to that one margin as you need. What happends inside don’t messes with the timeline.

     G´luck.

     Jorge Epuñan
     25 / Mayo / 2012

     

179. Hello Jorge,

     Great work. Thanks for the efforts.

     I’m trying to add a timelinr to a page on the university site I work on.

     http://www.norwich.edu/cadetsBETA/dayinlifeBETA.html

     The last two dates li are not displaying, and the final issues li is not displaying. If you use the next link, you can advance to the second to last issues li, but not the final li.

     Anything obvious jump out at you?

     I know there are probably a lot of conflicts with existing css, but I’m just looking for a place to start.

     best,
     Eric

     Eric Hobart
     25 / Mayo / 2012

     

180. Eric Hobart: it’s just a CSS inheritance problem. I commented the following styles from inner.css:

     article li {
     margin: 0 0 10px 2px;
     padding: 0 0 0 10px;
     }

     And it worked for both #issues li and #dates li.

     Screenshot available.

     Jorge Epuñan
     25 / Mayo / 2012

     

181. Jorge,

     Thanks so much. I figured it was a css conflict, but wasn’t sure how much was being calculated in the js, and how much room was left to tweak the li box model attributes.

     I added margin 0 padding 0 to both sets of lis, and it’s working perfectly. I’ll shoot you a link when it’s final…I need to swap the #timeline dot.gif repeating back ground out and tweak the next/back images.

     Thanks again for your help.

     donation on the way…

     best,
     Eric

     Eric Hobart
     25 / Mayo / 2012

     

182. Thanks Eric, just received your generous donation. And I’ll be waiting for your production URL.

     Jorge Epuñan
     25 / Mayo / 2012

     

183. Hey Jorge, thanks for the advice!
     One last thing – is there any way to make the selected date appear more to the left of the timeline instead of always being exactly in the centre?

     Aaron
     28 / Mayo / 2012

     

184. Aaron: that’s a feature that will have v1.0, but if you understand jQuery should not be hard to modify the code and have it done as you need.

     Jorge Epuñan
     28 / Mayo / 2012

     

185. Thanks again Jorge! I’ll get some jquery help.

     One last final thing, how do I set the date which is showing when the page loads? Right now it always loads on a particular date, and I can’t work out why, or how to change it!

     Aaron
     28 / Mayo / 2012

     

186. Oops, figured that last question out, don’t worry!
     By the way, when will the next version be released?

     Aaron
     28 / Mayo / 2012

     

187. Great plugin. Bye bye boring timelines using tooltips. Is there a way to add play/pause buttons and pause on hover? Cheers!

     Cylis
     29 / Junio / 2012

     

188. Hi Jorge,

     Great plugin! We are currently testing on our development servers but we will definitely use it live on our website really soon.

     I have one quick question that hopefully you can help me with.

     I have some events that accompany the same date year. How can I make the dates sync up with my events? I thought that by adding the year number in the id of each li it would link to the appropriate date in the dates ul. Am i doing something wrong? How can I accomplish what I am trying to do?

     Other than that, no complaints! Great work!

     Hanley Hansen
     17 / Julio / 2012

     

189. Hanley: I sent you by email an example of what you want to achieve, it is a simple way to reorder the li’s of #dates and #issues. You can add for example 1930, then 1930 – JAN, 1932 and so on, but #issues must have same li’s and in same order.

     g’luck.

     Jorge Epuñan
     20 / Julio / 2012

     

190. This is going to seem like a very stupid question, but I’m new to all this. Can I install this plugin into my wordpress theme/CMS? And if so, how do I do it? Can I customize it from inside wordpress?
     Thanks a mil,

     Julia
     22 / Julio / 2012

     

191. Julia: it is not built-in, you’ll have to integrate it to WordPress or any CMS by your may, coding it.

     Jorge Epuñan
     24 / Julio / 2012

     

192. this is a great plugin. but there is a little layout problem. if your 2nd/any other timeline is bigger than the first one, you will see an extra space/height in the first timeline.
     i think there should be a solution for this.
     thanks again.

     abrar ahmed
     27 / Julio / 2012

     

193. Hello Jorge,
     Great work.
     I’m using your plugin for my Drupal-7 project.
     I need that no ‘prev arrow’ will come if it is first image and no ‘next arrow’ will come if it is last image.
     Thnx in advance.

     Alok Tripathi
     31 / Julio / 2012

     

194. Alok: sorry that feature is not available in this version. It will be aded on 1.0 release, still working on it (no date yet). You’ll have to code it for yourself.

     Jorge Epuñan
     31 / Julio / 2012

     

195. Great plugin. Bye bye boring timelines using tooltips. Is there a way to add play/pause buttons and pause on hover? Cheers!

     العاب فلاش
     31 / Julio / 2012

     

196. Hello Jorge,
     Thnx anyway,
     I’ll try to code it. And if I succeeds then will share the code as well.
     Waiting eagerly for your 1.0 release.
     Cheers!

     Alok Tripathi
     01 / Agosto / 2012

     

197. Muchos gracias. Interesante.

     Leczenie kanałowe
     01 / Agosto / 2012

     

198. Hi, great plugin! I’m having a hard time getting it to work properly in IE8. The images won’t show up unless I remove the zoom function from the css. As well, despite removing it from the css, a very pixelated drop shadow remains around the text. Do you have any suggestions on how I can fix this? It looks perfect in Firefox and Chrome!

     Dawn
     07 / Agosto / 2012

     

199. Dawn: I remember I fixed that, it was a CSS problem using jQuery animation. I checked the demo in IE8 and it is working fine. Are you sure you’re working with the latest version?

     Jorge Epuñan
     07 / Agosto / 2012

     

200. Nice script! Is it possible to optimize timelinr for current jQuery version 1.7.2? If I use the latest version of jQeruy, timelinr doesn’t work correct anymore.

     minstyle
     08 / Agosto / 2012

     

201. Can you display more than one issue withing the viewport…lets say I have more than 1 issue per day?

     Kendall
     08 / Agosto / 2012

     

202. Can you display more than one issue within the view?
     lets say I have more than 1 issue per day?

     Kendall
     08 / Agosto / 2012

     

203. minstyle: tested with jQuery 1.7.2 and still working, probably you have a conflict with another script, but by itself it works fine with latest version.

     Jorge Epuñan
     08 / Agosto / 2012

     

204. I’m trying to accomplish a similar timeline to http://www.tribalddb.nl/#/feed_the_creatives in terms of getting more than 1 issue within the view… you think this is possible?

     Kendall
     08 / Agosto / 2012

     

205. Hi Jorge,
     Thank you for your comment! You are right, Timelinr works fine with the latest version of jQuery. After I cleared my browser cache my problem was fixed.

     minstyle
     09 / Agosto / 2012

     

206. Jorge,
     Is it possible to have “next” and “previous” buttons that apply to the timeline (dates) only? In other words, I would like to be able to scroll through the list of dates independently of the content that is associated with that year.

     Thanks for the great plug-in!

     Nate
     14 / Agosto / 2012

     

207. Hi,
     Would you prefer this?
     http://docs.jquery.com/Plugins/Authoring
     Then you can use the plugin in CMS like Drupal.
     —–
     (function( $ ) {

     $.fn.timelinr = function(options){
     // default plugin settings
     var settings = $.extend({
     orientation: ‘horizontal’ …..
     })( jQuery );
     —–
     Best regards
     Lars

     Lars Jendrzejewski
     15 / Agosto / 2012

     

208. Hola Jorge, muy bonita y útil la timeline que has publicado. Como puedo hacer para que la linea desde un comienzo empiece por la ultima fecha que se indico, o sea a partir de 2001 vaya a 2009, 2008, 2007, 2006 asi sucesivamente pero que del comienzo marque el ultimo año en vez izq a der, de der a izq ????
     Slditos !

     Dayana
     20 / Agosto / 2012

     

209. Dayana mmm y no puedes invertir tu las fechas en tu codigo fuente?

     Jorge Epuñan
     20 / Agosto / 2012

     

210. Hola gracias por tu respuesta pues si ya inverti las fechas, pero no me refiero a que la ubicación de los datos sea al revés, ahora mismo la línea está ubicada a la derecha yo quiero desde el principio(que parta desde la izquierda) ubicarla a la izquierda ….

     Dayana
     21 / Agosto / 2012

     

211. Dayana: hay un parametro llamado startAt con el cual puedes definir en q posición de la linea de tiempo comenzar (esta en la documentacion un poco mas arriba), ahi puedes -dinamicamente o no- definir la posicion inicial del #issue y #date.

     Jorge Epuñan
     21 / Agosto / 2012

     

212. Is it possible to stop AutoPlay, if a button (prev or next) is clicked ?

     Renate
     29 / Agosto / 2012

     

213. Very nice to use on “About us” page!

     Lasse
     13 / Septiembre / 2012

     

214. is it possible to stop it in the middle or something?

     Jasper Petersen
     13 / Septiembre / 2012

     

215. Excellent jquery. We created a wordpress plugin with your timelinr in http://wordpress.org/extend/plugins/wp-jquery-timelinr/

     I hope you enjoy it!

     broobe
     14 / Septiembre / 2012

     

216. Cool code. I have timeline tutorials similar yours but yours look simple.

     Temizlik portalı
     17 / Septiembre / 2012

     

217. Hola amigo buen día, me preguntaba que configuración hay que moverle al plugin para que podamos tener mas de una linea de tiempo en la misma pagina.

     Saludos.

     Jonathan
     20 / Septiembre / 2012

     

218. exelente amigo me parece muy interesante tu trabajo saludos

     rlash
     20 / Octubre / 2012

     

219. Hi, Great script but I have an problem with it. I using it in WordPress and calling on posts. This all works fine in terms of populating the content but the timeline may only show for example 3 out of the ten posts. Then when I add another post it may only show one post in the timeline link. I can send a link if this helps and if you are still supporting the script. I can’t for the life of me figure out why it is doing this. I have tried removing all other scripts.

     SEO Kent
     26 / Octubre / 2012

     

220. SEO Kent: Yes, send me the link, it should be a wp_query() issue.

     Jorge Epuñan
     26 / Octubre / 2012

     

221. Hi Jorge, Sent the link via your contact form.

     It seems to be a possible CSS issue. If I take overflow hidden off the Dates CSS class I can see all the dates links. Go to the link sent but go to domain name sent.co.uk/test to see this. I am looking to see if I have any conflicts.

     SEO Kent
     27 / Octubre / 2012

     

222. Hi Jorge, Ok, I have gone through with a fine tooth comb and there are not conflicting CSS classes.

     If you take a look at the original link I sent via your contact form you will see I have increased the height and added an overflow auto to show you that the links are there. However the dates LI’s are wrapping.

     This is a head scratcher as I cannot see anything wrong with the CSS.

     SEO Kent
     27 / Octubre / 2012

     

223. Hi Jorge, Just to let you know I fixed it by adding back the fixed width to the dates LI.

     Is there a way to not set this so the click links can be variable lengths?

     Paul

     SEO Kent
     27 / Octubre / 2012

     

224. How can I do to add two (2) same timeline in the same page?
     Thank you of all for reply!

     Andrea
     03 / Noviembre / 2012

     

225. Could you please help me to modify this slider to stop sliding and start sliding again on mouseout event.

     Farhan
     19 / Noviembre / 2012

     

226. Modified question:
     Could you please help me to modify this slider to stop sliding on mouse hover and start sliding again on mouseout event.

     Farhan
     19 / Noviembre / 2012

     

227. Compliment, great slider. Is there a possibility to skip years? For example there is no Content for 1944 and 1950 but I want to show the numbers in the timeline. So when I click on the arrow in 1930, the slider should go to 1971. Thank you very much.

     Christian
     22 / Noviembre / 2012

     

228. How do I get 2 of these to to work on the same page? I have tried initialising two timlinr objects and have overridden the defaults with the unique DOM ID’s and classes. But only one seems to work at a time…

     How can I fix this?

     Andy
     03 / Diciembre / 2012

     

229. Is there any chance to make this plugin responsive? Especially for small resolutions, how to adapt content to fit for example between 320 and 480px… because every slide is floated next to other.. with fixed width… so it doesn’t fit in smaller resolutions

     Malcolm
     04 / Diciembre / 2012

     

230. In the plugin code where you have $(settings.issuesDiv+’ li, this should really be $(settings.issuesDiv+’ > li otheriwse you can’t nest li’s in the issue content area as the plugin thinks these are separate issues

     Jon Moore
     06 / Diciembre / 2012

     

231. Can this slider be controled from another page. For example links Link to be set on another page and targeted to specific slide? Tried to do something like it, but it bugs slider.

     Thanks.

     +314568975
     30 / Diciembre / 2012

     

232. Can this slider be controlled with hash tags from another page. Thanks.

     Boris
     03 / Enero / 2013

     

233. This is an awesome timeline. I am having the same issue as wesley. Has anyone figured out how to fix the issues text from bolding on completion of the action? It only happens in some browsers.

     Kelly
     21 / Enero / 2013

     

234. I am using this plugin in the horizontal version. I’m not able to enter more than 10 items. There is this limitation?

     Mateus de Aquino
     22 / Enero / 2013

     

235. Not at all Mateus. I’m inspecting your code to see what could be the problem. I’ll email you soon.

     Jorge Epuñan
     24 / Enero / 2013

     

236. Great plugin! Is there an easy way to add support for touch devices? I’ve noticed that you can’t swipe on iPad to scroll through the timeline.

     Cheers!
     Sarah

     Sarah
     03 / Febrero / 2013

     

237. Thank you for the excellent slider. one question please… Just reciently the animations have stoped in IE. is there any reason or work around for this? all other browsers are showing animation on buttons and images just fine. thank you again- amy

     amy
     11 / Febrero / 2013

     

238. Hi, thanks for this great Timeline!
     I think I found a bug. When you switch from last to first or first to last issue using the dates, BOTH arrows disapear :/
     I tested it on your demo, too.
     Can you help me?

     ttkicker
     26 / Febrero / 2013

     

239. ttkicker TRUE! tnx will fix it soon.

     Jorge Epuñan
     26 / Febrero / 2013

     

240. That is a best jquery sliders / time-line ever I saw. Best greetings from Polish

     Krzywy14
     26 / Febrero / 2013

     

241. Is there a way to use a direct link to get to a specific era. For example, is there a way to get to a link via “www.website.html#1900″ . I tried it with your demo, but the website is grayed out.

     Tim
     27 / Febrero / 2013

     

242. Hi, Is it possible to stop the prev and next buttons from being displayed none when there is nothing left and right? I’d like to include a disabled button instead Loving how easy this plugin is.

     Emma
     08 / Marzo / 2013

     

243. Hi, i have a question about your plug-in.
     I have a section that use a jquery for display or not the different element (http://net.tutsplus.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/ ), when i insert the timeliner in the second tab, the plug-in doesn’t work, there is a solution about this problem?

     Regards
     Robb

     Robb
     10 / Marzo / 2013

     

244. Howdy! This post could not be written any better!
     Reading this post reminds me of my good old room mate!

     He always kept chatting about this. I will forward this post to him.

     Pretty sure he will have a good read. Many thanks for sharing!

     simply click the following post
     21 / Marzo / 2013

     

245. Could I get some help loading this into a Bootstrap Framework? It is working fine at first but then loads quickly and removes all of the timeline markers and fades out the entire timeline section. It could be a conflict with the jQuery but I am not really that fluent in JS or jQuery. Thanks

     Tim
     24 / Marzo / 2013

     

246. i dont understand how to set up the style

     öaslkjfölkj
     27 / Marzo / 2013

     

247. Hola, muchas gracias por este aporte pero tengo un pequeño problema, cuando implemento la funcionalidad en un sitio todo funciona bien, sin embargo el scroll se va recorriendo hasta que el li de issue queda en la parte superior de la ventana. Todo sucede cuando se acciona el click del ancla.

     Ruben
     19 / Abril / 2013

     

248. good goods

     kousuke
     22 / Abril / 2013

     

249. COMO PUEDO CAPTURAR EL NOMBRE AL PINCHAR EL DATO DE LA LINEA DE TIEMPO????? ES URGNTE GRACIAS

     Sebastian
     25 / Abril / 2013

     

250. Your write-up provides established useful to myself.
     It’s very educational and you really are obviously extremely experienced in
     this region. You get exposed my own eyes to be able to numerous opinion of this subject with intriquing, notable and reliable content material.

     Valium
     26 / Abril / 2013

     

251. great plugin! very nice.
     i would add a “outline:none” to the li class of the year numbers for hiding the dotted outline.
     but great work anyway!

     Handbag Hardware
     30 / Abril / 2013

     

252. Hola Jorge
     First of all, thx u so much for sharing this wonderful jquery timeline.

     It works all fine, I had no problem experienced with it.

     Nevertheless, you said it will be possible in v1.0 to put multiple timelines on same page.
     Do you have any idea when this feature will be added, I mean when the version 1.0 will be ready ?

     Thx again, and keep up your good work !

     Kal
     04 / Mayo / 2013

     

253. Timelinr is a handy little nugget of web-friendly goodness.

     I’m using it in a slightly abnormal manner, but the issue I have is being able to stop the autoplay and reset the Timeline within a page.

     Normally, I’d rely on moving to a new page and/or a page refresh to cover this, but based on circumstances I need more precise control.

     Is there a way to grab a handle (i.e. like a pointer, or file handle) to a specific Timelinr instance to change behaviours? (i.e. autoplay, start at, etc.)

     Many thanks for sharing a great plugin!

     613-966-5848
     06 / Mayo / 2013

     

254. Hi,
     Thanks for this great plugin. One question.

     How would you go about having a “Next” button on the last timeline item, that when clicked, goes back to the start of the timeline?

     Any help would be appreciated.

     Cheers,
     Ryan

     Ryan
     20 / Mayo / 2013

     

255. Ryan: Yes, that can be changed. If you’re preficient with jQuery, and depending if you’re using horizontal or vertical layout, search within the JS file for this comment:

     “prev/next buttons now disappears on first/last issue”

     below that is the functionality you need to change, from fadeIn()/fadeOut() to $(settings.datesDiv+’ li:first-child’).find(‘a’).trigger(‘click’);

     Regards.

     Jorge Epuñan
     22 / Mayo / 2013

     

256. Hey there would you mind letting me know which web host you’re using? I’ve
     loaded your blog in 3 completely different web browsers and
     I must say this blog loads a lot faster then most. Can you recommend a good web
     hosting provider at a fair price? Thanks, I appreciate it!

     ambien
     25 / Mayo / 2013

     

257. El Plugin está genial!! Mirando la programación del php, no encuentro donde está configurada la función de la fecha… Me gustaría añadir también el dia, a parte del mes y el año!!

     Alguien ha buscado algo similar

     Yea!!

     Jorge López
     27 / Mayo / 2013

     

258. A raiz del ultimo comentario que coloqué, voy a explicar mejor mi objetivo. Primeramente, volver a dar la enhorabuena a Jorge por el plugin y ademas, adaptarlo a WordPress. Impresionante!!

     Yo soy el director de un centro de formación de Alcañiz (mi pueblo) y en la cabecera de la nueva web, ya llevo varias semanas modificando el css para dejarlo algusto y adaptado a la web. (Pero voy despacio, ya que la web me la hago yo )… La idea es aplicar el timelinr a los cursos y actividades que tenemos y que a medida que vaya pasando la fecha, el timelinr se mueve de forma automática al siguiente curso/evento. CReo que no es necesario conectar con el calendario de eventos de wordpress… Desconozco si las modificaciones son en el js, para añadir el dia, a parte del año y el mes y por otro lado, que tratamiento habría que darle a la propiedad Start, para que comparara la fecha del evento, con la fecha del servidor por ejemplo, para que iniciara en el siguiente al evento finalizado…. Jurr! no se si me expliqué. Supongo que tiene unpelín de dificultad… Presupuesto? Coste? Muchas gracias y un abrazo!!

     Jorge López
     29 / Mayo / 2013

     

259. The plugin is very good, but I have a problem, I wonder how do I reset the time when you click on something, because some items jump when the time comes at the end

     ex:
     if it is set to change in 5 five seconds, if the click occurs in 3 seconds, the next will only get two seconds and now will jump.

     How do I fix this?

     thank you

     Tiago Oliveira
     31 / Mayo / 2013

     

260. My brother suggested I may like this blog. He was totally right.
     This post actually made my day. You cann’t consider simply how a lot time I had spent for this info! Thank you!

     Garden Swing Seats for sale
     02 / Junio / 2013

     

261. Hiya! I simply want to give an enormous thumbs up for the great info you’ve got here
     on this post. I will likely be coming back to your blog for extra soon.

     SEO
     20 / Junio / 2013

     

262. Hello,

     We have just implemented the timlinr plugin on one of our clients websites (Works great ). However we did come across a small bug which I couldn’t figure out for the life of me why it was happening. I have set it up so it recalls timlinr if a user resizes the browser. However for some reason it wasn’t using the new calculated “widthIssue” inside any of the click functions. I put console.log(widthIssue) after the variable declaration and it was resetting it each time i resized the browser but when you used this in the “click” functions it always seemed to be the old value. I have got around it by just setting it each time they click next or previous so not really a big issue but thought I would let you know.

     Many Thanks and keep up the awesome work with this plugin.

     Tom
     10 / Julio / 2013

     

263. Thanks for the good work on this outstanding plugin.

     However it does not work with the noConflict funktion.
     As soon as I include “jQuery.noConflict();” prior to calling the function (or right after including calling the js file), the plugin will stop working. Works with the demo-files, too, so I don’t need to post an URL. Would be great if you could deal with this issue to make it work together with other libraries.

     Thanks!

     Sarah
     20 / Julio / 2013

     

264. HI I used timeline in my website. I need change height dynamically of the li . I tried with css but I didnt success. Is there any possible. Long paragraph cut and not displayed full message. If I dont put height to timeline div then div takes automatically maximum paragraph height and give this max height to remaining all divs. At this time remaining divs look like half of the empty space.

     8148
     12 / Agosto / 2013

     

265. Still a great plugin. Will there be a version 1?
     Just one short question:
     Is it possible to a link which jumps to the first issue?

     Thanks!

     Nasendackel
     19 / Agosto / 2013

     

266. Amigo, estoy eternamente agradecido por esta herramienta. Basta con echar una pregunta, ¿cómo puedo ver que en los smartphones? Gracias y contineu con el buen trabajo, siempre será reconocido!

     Ricardo
     24 / Agosto / 2013

     

267. Exact what we need – thx a lot!

     Carsten Tauber
     26 / Agosto / 2013

     

268. If you want to stop interval on mouse hover you should change in js:
     Line 257: setInterval(“autoPlay()”, settings.autoPlayPause);
     to:
     $(settings.containerDiv).hover(function(ev){
     clearInterval(timer);
     }, function(ev){
     timer = setInterval(“autoPlay()”, settings.autoPlayPause);
     });

     Now auto-play will stop when your cursor is on containerDiv (default is #timeline).
     Its not the best and beautiful way, but works

     Gzres
     12 / Septiembre / 2013

     

269. hello. i m using this plugin and this is very very awsom. i have to tune this plugin. and i dont want to scroll/animated dates i want to show all dates from 1998 to 2014. how can i do that plz guide me here is the link where i want to show
     http://qubikstudio.com/wedding/ourstory.html

     waiting for reply

     Arif
     30 / Septiembre / 2013

     

270. This is my first time pay a visit at here and i am genuinely pleassant to read everthing at alone place.

     facebook messenger
     15 / Octubre / 2013

     

271. Hi! Really a nice work! Could you help me to fix the CSS. I wish the points on the line (dot.gif) are in full screen. From the extreme left to extreme right.
     Thank you!

     Enzo
     17 / Octubre / 2013

     

272. You have a fantastic website. Do you update it often?

     Do you mind if I share this site with friends in zynga?

     free ipad
     24 / Octubre / 2013

     

273. Hi

     I love the plugin – quick question though – is there any way to change it so rather than a date it shows:

     1 year before, 1 Month before, 1-2 weeks before, 1 day before on the day etc?

     Thanks

     Jeremy
     03 / Noviembre / 2013

     

274. Hi everybody,
     first thanks for this application, it’s just so nice.
     I installed all the code on my joomla website and it worked perfectly. But i update the joomla version (from 2.5 to 3) and now the animation doesn’t work anymore.
     Has somebody else this problem or any solution to fix it ?
     Thanks

     daurey
     29 / Noviembre / 2013

     

275. Tremendous issues here. I am very glad to see your article.

     Thanks a lot and I am having a look forward to contact you.
     Will you kindly drop me a mail?

     seo
     03 / Diciembre / 2013

     

©2013 CSSLab.cl - Todos los derechos reservados.

• Inicio
• Envía tu Sitio
• Contacto
• RSS