search

ka215 / jquery.timeline

You can easily create the horizontal timeline with two types by using this jQuery plugin.
MIT License
240 stars 43 forks source link

test.js:3 Uncaught TypeError: $(...).timeline is not a function #94

Open LazyException opened 10 months ago

LazyException commented 10 months ago

Describe the bug I have the error :+1: test.js:3 Uncaught TypeError: $(...).timeline is not a function To Reproduce Steps to reproduce the behavior: Html : <!DOCTYPE html>

Calendrier à Chronologie Horizontale
  • Event Label
  • Event Label

JS

$(window).on("load", function() { $("#myTimeline").timeline('show'); });

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

ka215 commented 10 months ago

Hi there, Since version 2 of jquery.timeline, the constructor name has changed from all lowercase of "timeline" to capital case of "Timeline". Please note that the first "T" is capitalized.

$("#myTimeline").timeline('show');// <- ng

$("#myTimeline").Timeline('show');// <- ok

Thank you.

LazyException commented 10 months ago

Thank you for your quick response :) I would like to take this opportunity to ask you if it is possible to recover the JS configuration from your demo timeline? I cannot display the same rendering: https://ka2.org/jqtl-v2/ I of course took the time to consult your documentation

ka215 commented 10 months ago

I modified tester page. Clicking the view options button added to the advanced menu displays initialization options for the currently output jQuery.timeline.

LazyException commented 10 months ago

Very CRAZYYY ! Thanks a lot

Last answer pleaseee... how did you make the event colors different for each event?

I'm surprised to see that you didn't use the hookEventColors attribute in the colorScheme object

ka215 commented 10 months ago

We can specify a color for each event node, so on the tester page, the color is specified on the event node side. For example:

[{
  "uid": "18b51549b763c",
  "eventId": 1,
  "x": 2840.27,
  "y": 51,
  "width": 70.5,
  "height": 44,
  "start": "2023-12-18 04:08",
  "end": "2023-12-19 15:23",
  "row": 2,
  "bgColor": "#c1aa30",
  "color": "#101010",
  "bdColor": "#6C757D",
  "label": "Ut lacinia metus Nam ut Lorem Ut lacinia",
  "content": "Nunc ...",
  "category": "",
  "image": "",
  "margin": 2,
  "rangeMeta": "",
  "size": "normal",
  "type": "",
  "extend": {},
  "remote": false,
  "relation": {}
},
...
]

The event node data that is randomly generated on the tester page is cached in the session storage, so you can check the contents of the "div#my-timeline" key in the session storage using the browser's dev tools (press "F12" key).

Best regards.