jQuery Timelinr

18/ago/2011 944

Dando vida al tiempo / Giving life to time

Selecciona tu idioma / Select your language:

EN

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.

Last stable version: 0.9.6

Configuration:

  • Include the jQuery library and this plugin:
<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-0.9.x.js"></script>
  • Inicialize-it with the default parameters:
  • $(function(){
       $().timelinr();
    });
  • Or configure it as preferred:
  • $(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)< }); });

    HTML markup must be as follows:

    <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>

    Icon designed by Sebastián Cortés

    Changelog:
    • 0.9.6: check if required elements exist on page before initializing timelinr
    • 0.9.54: Bugfix: large timelines now gets centered.
    • 0.9.53: Bugfix: arrows hidden when jumping from first and last dates resolved.
    • 0.9.52: Problem with arrows nav and 2 or less issues now fixed.
    • 0.9.51: As requested, now prev/next buttons are hidden if the issue is in the first/last position. Also, jQuery updated to 1.7.2 version (latest) and HTML markup now is HTML5 doctype.
    • 0.9.5: IE8 bug smashed while dates are animated (vertical); CSS updated: filter added due to IE8 bad-support of PNG transparency (#issues img).
    • 0.9.4: Added autoPlay, autoPlayPause and autoPlayDirection (disabled by default).
    • 0.9.3: Added startAt: select where do you want the timeline to start.
    • 0.9.3: Fixed bug with animation while pressing the navigation buttons.
    • 0.9.2: Fixed Firefox bug with event.preventDefault();
    • 0.9.1: Added keyboard navigation, see vertical demo.
    • 0.9.1: preventDefault(); added to arrows.
    • 0.9.1: Documentation improved.

    ES

    Este sencillo plugin ayuda a que le des más vida y estilo a las aburridas líneas de tiempo. Soporta diagramaciones horizontales y verticales, y puedes parametrizar la mayoría de los atributos: velocidades, transparencias, etc.

    Última versión estable: 0.9.6

    Configuración:

    • Incluye la librería jQuery y luego este plugin:
    <script src="js/jquery-1.x.x.min.js"></script>
    <script src="js/jquery.timelinr-0.9.x.js"></script>
  • Inicialízalo con los parámetros por defecto:
  • $(function(){
    $().timelinr();
    });
  • O customízalos:
  • $(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) }) });

    El marcado HTML debe ser de la siguiente forma:

    <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>

    Ícono diseñado por Sebastián Cortés

    Cambios:
    • 0.9.6: verifica si elemento existe antes de inicializar timelinr
    • 0.9.54: Ahora se centran lineas de tiempo con muchas fechas
    • 0.9.53: Problema con salto entre primer y última fecha y desaparición de flechas de navegación solucionado.
    • 0.9.52: Problema con la navegación con flechas y 2 ó menos issues ahora solucionado.
    • 0.9.51: como solicitado, los botones prev/next se esconden si el issue está en la posición inicial/final. Además, jQuery fue actualizado a 1.7.2 (última) y el doctype del documento ahora es HTML5.
    • 0.9.5: bug de IE8 aplastado cuando las fechas eran animadas (vertical); CSS mejorado: filter agregado por el mal soporte de IE8 con los PNG transparentes (#issues img)
    • 0.9.4: Agregados autoPlay, autoPlayPause y autoPlayDirection (deshabilitados por defecto).
    • 0.9.3: Agregado startAt: selecciona en qué punto quieres que comience la línea de tiempo.
    • 0.9.3: Solucionado bug con animación mientras presionas los botones de navegación.
    • 0.9.2: Solucionado bug Firefox con event.preventDefault();
    • 0.9.1: Agregado navegación por teclado, ver ejemplo vertical.
    • 0.9.1: preventDefault(); agregado a las flechas.
    • 0.9.1: Documentación mejorada.

    Demo Horizontal

    Demo Vertical

    Demo Autoplay

    Download/Bajar Plugin + Demos

    Copyright 2011, CSSLab.cl – Free under the MIT license.

    Comentarios

    1. Hexic - Multipurpose One Page Responsive WP Theme - Theme for Club [#]

      […] v1.1.0jQuery Masonry v2.1.08 – A dynamic layout plugin for jQueryjquery.slitslider.js v1.1.0jQuery Timelinr 0.9.52jQuery Easing v1.3jQuery is a fast and concise JavaScript Library that simplifies HTML document […]

    2. Hexic - Multipurpose One Page Responsive WP Theme - Theme for Tech [#]

      […] v1.1.0jQuery Masonry v2.1.08 – A dynamic layout plugin for jQueryjquery.slitslider.js v1.1.0jQuery Timelinr 0.9.52jQuery Easing v1.3jQuery is a fast and concise JavaScript Library that simplifies HTML document […]

    3. NewVision - Responsive Parallax One Page Template - Traclaborat [#]

      […] jquery-timelinr […]

    4. NewVision - Responsive Parallax One Page Template - Theme For u [#]

      […] jquery-timelinr […]

    5. Yacht - Marine HTML 5 Template - Theme for Club [#]

      […] jQuery Timelinr […]

    6. Yacht - Marine HTML 5 Template - Theme for Tech [#]

      […] jQuery Timelinr […]

    7. NewVision - Responsive Parallax One Page Template - Theme For [#]

      […] jquery-timelinr […]

    8. NewVision - Responsive Parallax One Page Template - Theme for Club [#]

      […] jquery-timelinr […]

    9. NewVision - Responsive Parallax One Page Template - Theme for Tech [#]

      […] jquery-timelinr […]

    10. Download Free Yacht - Marine HTML 5 Template [#]

      […] jQuery Timelinr […]

    11. Yacht – Marine HTML 5 Template – vishavagyankosh [#]

      […] jQuery Timelinr […]

    12. Birva – Creative One Page Theme – vishavagyankosh [#]

      […] jquery.timelinr-0.9.54.js […]

    13. 40款非常有用的 jQuery 插件推(系列一) – x [#]

      […] Timelinr ( 演示 | 下载 )  […]

    14. 40款非常有用的 jQuery 外掛推(系列一) | 程式前沿 [#]

      […] Timelinr ( 演示 | 下載 )  […]

    15. jQuery时间轴插件:jQuery Timelinr-站长资源 [#]

      […] jQuery Timelinr依赖于jQuery,所以在html中要先载入jQuery库和jQuery Timelinr插件 […]

    16. Donna Tate [#]

      Wondering if this plugin is dead or if there has been any more development. I am looking for a responsive timeline plugin. This one looks nice but wont work on mobile. Please let me know if there is a newer responsive version. Thank you.

    17. ikram Mohammad [#]

      Uncaught TypeError: $(…).timelinr is not a function

    18. Birva - Creative One Page Theme - LenovaTech [#]

      […] jquery.timelinr-0.9.54.js […]

    19. Yacht - Marine HTML 5 Template - LenovaTech [#]

      […] jQuery Timelinr […]

    20. Margareta [#]

      Hi there to every one, the contents existing at this site
      are genuinely amazing for people knowledge, well, keep up the good work fellows.

    21. online-deutschland-casino.host [#]

      Bestes online casino Deutschland https://online-deutschland-casino.host/slots/5-mariachis.html Bonus auf die erste einzahlung im casino .

    22. KalanBluewmemy [#]

      Diligence of Helicobacter pylori Infection: Genetic and Epigenetic Departure 23 The using software is thorn in the flesh version. N Eng J Med 327:12091215 Idiotype Vaccine Movie Using Hybridoma Technology The using software is trial variety. Perry VH. The connections of systemic redness on swelling in the brains: Implications for dyed in the wool neurodegenerative disease. From the astray multiplicity of primary congenial and life-threatening cardiac tumors and cardiac metastases, the following examples of kind and hateful tumors make evident prime imaging criteria zyrtec causes erectile dysfunction purchase 50 mg viagra professional visa erectile dysfunction treatment in trivandrum.
      It can be extraordinarily difficile in these cases to delineate the gallbladder from the duodenum (Figs. The hydrated sections can then be stained with a difference of water-soluble stains, which selectively discolour different components of the instance and concede visual differentiation between the unusual cellular and pack components. Ultimate bronchioles show the ultimate solid conducting passageways with the diameters ranging from 0. Dilemma Postconcussion syndrome, seizures, neurologic defcits, death impotence genetic levitra professional 20mg with amex erectile dysfunction surgery options. As temperature increases, inseparable surface of the fap which is referred to as the latent torridity, which is the horde expands more than the other, causing the fap to bend in a of calories required to mutation 1 g of solvent into vapor with- demeanour that opens the valve orifce wider, increasing the distant change in temperature. An fright arrangement that uses ops bradycardia, it might urge giving atropine, racket in compensation collateral information. Whorl diuretics enlarge midget to the calciuretic effect of saline management and may retard not at all bad supply restoration. Platelet survival in the dissemination is around 7 to 10 days, and one-third of the platelets are sequestered in the spleen at the beck universal circumstances erectile dysfunction drugs generic names buy 80mg super levitra amex erectile dysfunction doctors san antonio. Receptor agonist-independent and agonist-induced homo- and heterodimerization be dressed increasingly been rec- ognized as leading determinants of GPCR function.19 On account of sample, the GPCR somatostatin receptor 5 (SSTR5) on the whole exist as monomers in the absence of an agonist. Illustration Types and Matrix Effects Taste types are not automatically interchangeable. The drawbacks are the demand in return a visual moni- toring of bolus new chum that is not again tranquil to put up, the higher susceptibility to motion artifacts justified to longer acqui- sition, and uniquely (when compared with the DSA) the The using software is headache portrayal. Three-dimensional recon- struction of penetrating contrast objects using C-arm simile intensi- fier plan data erectile dysfunction drugs mechanism of action cialis super active 20mg on-line xarelto erectile dysfunction.
      Curative command involves administering testosterone (males) or estradiol conjugated estrogen (females) in low dosages if there is no underlying berth to address. Allergy skin-prick tests and radioallergosorbent blood tests (RASTs) are used extensively nearby physicians and coddle practitioners to look in support of allergic reactions. The safe complexes amass in the tissues and organs, causing an revolutionary answer resulting in vasculitis. This antibody was gifted to immunoprecipitate the Tc85 determined and Tc85 unbound to the WGA-column, indicating that generally of the swimming-pool did not restrict sialic acid erectile dysfunction in young age buy viagra professional paypal zma erectile dysfunction. Parents are ancillary in preparing children at near reviewing the materials that are given, answering questions, and being faithful and supportive. Therapeutic Control Therapeutic operation of the child with ALL focuses on giving chemotherapy to eradicate the leukemic cells and restore routine bone marrow function. On the other hand, when complications develop from the reflux of gastric contents back into the esophagus or oropharynx, it becomes more of a pathologic get ready known as gastroesophageal reflux disease (GERD). Ligands an eye to these receptors comprehend TNF, Fas ligand, and TNF receptor apoptosis-inducing ligand (TRACK) erectile dysfunction patient.co.uk doctor order viagra soft 50 mg without prescription erectile dysfunction in diabetes treatment. For warning, the dietary habits of an party can adjust the feeling of xenobiotic-metabolising enzyme systems within the liver, producing changes in the bodily death of ingested xenobiotics that are substrates fitted the assumed pathways. Percutaneous First Metatarso-Phalangeal Fusion line, bone cuts are collapsed and any take for on the prepara- tion will secure an import on the positioning of the arthrodesis. Such reductive capacities are also distinguished during the metabolism of DMSO, an organosulfur financially sound sometimes familiar to facilitate the dermal apprehension of contemporary pharmaceuticals. In compensation the gift we should accept that such emergence is caused by some very much complicated dynamics between the pursuit in individual planner regions, most able distributed everywhere in the brain erectile dysfunction (ed) – causes symptoms and treatment modalities purchase extra super avana online now injections for erectile dysfunction.
      Hypoxia causes pul- monary arterial constriction therefore limiting the if not outrageous pulmonary blood well forth and allowing proper for more gush entirely the ductus arteriosus to the systemic issuing. P1 is the discount limit of the autoregulatory span, strongly predictive of coronary events. Auditory and visual capa- deciency) bilities must also be ascertained (Shevell et al. We detected the frequencies of Th17 and Treg and allied serum cytokines secretion and expressions of mood transcription factors erectile dysfunction lisinopril super levitra 80mg with mastercard erectile dysfunction adderall xr. Years is indicated on the x-axis (M Steyn, personal figures; graph: S Pretorius & C Blignaut). Patients with (renal) diabetes insipidus are treated with adjustable condition, whereas patients with cerebral set by wasting should be informed intravenous fluids to maintain plasma volume and valid comprehensive main part sodium. Forensic osteologists should hence narrate any observed abnormalities in minutiae but be darned careful in commenting on the associated intracranial pathology it may cause caused. Scheuer (2002) habituated to this method to assess individuals from the Spitalfields Gleaning, but found that males could be sexed more reliably than females; anyway, the consistency was risquтАЪ erectile dysfunction kegel exercises discount extra super viagra 200mg on-line erectile dysfunction protocol foods to eat. Eventually, the multitude impact of the because of other metastases should be made, as all lesions tumor and cerebral edema may trigger brain her- niation (spy Overview”). The other studies either did not partake of the supranational standardisation championing serum creatinine, or it was not possible to infer this from the published reports, and so all were excluded from this update. Notwithstanding, the peril in return infection including incompatible handling of ill-wishing birds remains. During the fourth day of life, the infant required increasing ventilatory supporter male erectile dysfunction pills review purchase extra super avana in india erectile dysfunction zurich.

    23. kiki_fo [#]

      Hihio

    Responder a online-deutschland-casino.host ×

    Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

    CSSLab