src/jquery.timelineMe.js
function(item) {
            if(!item || !item.element)
                return;

            var pixelsRegex = /[0-9]+px$/;
            // Following wrapper are only used in horizontal mode, in order to correctly display bigItems (with table display)
            var itemWrapper = $('<div class="timeline-me-item-wrapper">');
            var labelWrapper = $('<div class="timeline-me-label-wrapper">');
            var contentWrapper = $('<div class="timeline-me-content-wrapper">');

            var labelElm = $('<div class="timeline-me-label">');
            item.labelElement = labelElm;
            if(this.settings.orientation == 'horizontal' && this.settings.labelDimensionValue && pixelsRegex.test(this.settings.labelDimensionValue)) {
                labelElm.css('width', this.settings.labelDimensionValue);
            }
            var pictoElm = $('<div class="timeline-me-picto">');
            item.pictoElement = pictoElm;

            labelWrapper.append(labelElm);
            itemWrapper.append(labelWrapper);

            if(item.type == 'smallItem' || item.type == 'bigItem') {
                var contentContainer = $('<div class="timeline-me-content-container">');
                var contentElm = $('<div class="timeline-me-content"></div>');
                contentContainer.append(contentElm);
                if(this.settings.orientation == 'horizontal' && this.settings.contentDimensionValue && pixelsRegex.test(this.settings.contentDimensionValue)) {
                    contentElm.css('width', this.settings.contentDimensionValue);
                }

                var shortContentElm = $('<div class="timeline-me-shortcontent">');
                contentElm.append(shortContentElm);
                item.shortContentElement = shortContentElm;

                var fullContentElm = $('<div class="timeline-me-fullcontent">');
                contentElm.append(fullContentElm);
                item.fullContentElement = fullContentElm;

                var showMoreElm = $('<div class="timeline-me-showmore">');
                item.showMoreElement = showMoreElm;

                var showLessElm = $('<div class="timeline-me-showless">');
                item.showLessElement = showLessElm;

                contentWrapper.append(contentContainer);
                itemWrapper.append(contentWrapper);
            }

            item.element.append(itemWrapper);

            item.itemWrapperElement = itemWrapper;
            item.labelWrapperElement = labelWrapper;
            item.contentWrapperElement = contentWrapper;
        }
function(item) {
            if(!item || !item.element)
                return;

            var pixelsRegex = /[0-9]+px$/;
            // Following wrapper are only used in horizontal mode, in order to correctly display bigItems (with table display)
            var itemWrapper = $('<div class="timeline-me-item-wrapper">');
            var labelWrapper = $('<div class="timeline-me-label-wrapper">');
            var contentWrapper = $('<div class="timeline-me-content-wrapper">');

            var labelElm = $('<div class="timeline-me-label">');
            item.labelElement = labelElm;
            if(this.settings.orientation == 'horizontal' && this.settings.labelDimensionValue && pixelsRegex.test(this.settings.labelDimensionValue)) {
                labelElm.css('width', this.settings.labelDimensionValue);
            }
            var pictoElm = $('<div class="timeline-me-picto">');
            item.pictoElement = pictoElm;

            labelWrapper.append(labelElm);
            itemWrapper.append(labelWrapper);

            if(item.type == 'smallItem' || item.type == 'bigItem') {
                var contentContainer = $('<div class="timeline-me-content-container">');
                var contentElm = $('<div class="timeline-me-content"></div>');
                contentContainer.append(contentElm);
                if(this.settings.orientation == 'horizontal' && this.settings.contentDimensionValue && pixelsRegex.test(this.settings.contentDimensionValue)) {
                    contentElm.css('width', this.settings.contentDimensionValue);
                }

                var shortContentElm = $('<div class="timeline-me-shortcontent">');
                contentElm.append(shortContentElm);
                item.shortContentElement = shortContentElm;

                var fullContentElm = $('<div class="timeline-me-fullcontent">');
                contentElm.append(fullContentElm);
                item.fullContentElement = fullContentElm;

                var showMoreElm = $('<div class="timeline-me-showmore">');
                item.showMoreElement = showMoreElm;

                var showLessElm = $('<div class="timeline-me-showless">');
                item.showLessElement = showLessElm;

                contentWrapper.append(contentContainer);
                itemWrapper.append(contentWrapper);
            }

            item.element.append(itemWrapper);

            item.itemWrapperElement = itemWrapper;
            item.labelWrapperElement = labelWrapper;
            item.contentWrapperElement = contentWrapper;
        }
function ( item ) { if ( ! item || ! item . element ) return ; var pixelsRegex = / [0-9]+px$ / ; // Following wrapper are only used in horizontal mode, in order to correctly display bigItems (with table display) var itemWrapper = $ ( '<div class="timeline-me-item-wrapper">' ) ; var labelWrapper = $ ( '<div class="timeline-me-label-wrapper">' ) ; var contentWrapper = $ ( '<div class="timeline-me-content-wrapper">' ) ; var labelElm = $ ( '<div class="timeline-me-label">' ) ; item . labelElement = labelElm ; if ( this . settings . orientation == 'horizontal' && this . settings . labelDimensionValue && pixelsRegex . test ( this . settings . labelDimensionValue ) ) { labelElm . css ( 'width' , this . settings . labelDimensionValue ) ; } var pictoElm = $ ( '<div class="timeline-me-picto">' ) ; item . pictoElement = pictoElm ; labelWrapper . append ( labelElm ) ; itemWrapper . append ( labelWrapper ) ; if ( item . type == 'smallItem' || item . type == 'bigItem' ) { var contentContainer = $ ( '<div class="timeline-me-content-container">' ) ; var contentElm = $ ( '<div class="timeline-me-content"></div>' ) ; contentContainer . append ( contentElm ) ; if ( this . settings . orientation == 'horizontal' && this . settings . contentDimensionValue && pixelsRegex . test ( this . settings . contentDimensionValue ) ) { contentElm . css ( 'width' , this . settings . contentDimensionValue ) ; } var shortContentElm = $ ( '<div class="timeline-me-shortcontent">' ) ; contentElm . append ( shortContentElm ) ; item . shortContentElement = shortContentElm ; var fullContentElm = $ ( '<div class="timeline-me-fullcontent">' ) ; contentElm . append ( fullContentElm ) ; item . fullContentElement = fullContentElm ; var showMoreElm = $ ( '<div class="timeline-me-showmore">' ) ; item . showMoreElement = showMoreElm ; var showLessElm = $ ( '<div class="timeline-me-showless">' ) ; item . showLessElement = showLessElm ; contentWrapper . append ( contentContainer ) ; itemWrapper . append ( contentWrapper ) ; } item . element . append ( itemWrapper ) ; item . itemWrapperElement = itemWrapper ; item . labelWrapperElement = labelWrapper ; item . contentWrapperElement = contentWrapper ; }
Method that fills the item's element with some useful html structure
Method that fills the item s element with some useful html structure