Canvas Support

Timeline | Sorting in record order with the little circle dot lines

1 reply · opened Nov 22, 2016

SStuAndrewsNov 22, 2016

Hi Folks,

In the "Full Width" Blog Timeline example, the Embedded Video post comes above the Embedded Image post (the little circle dotted join to the main timeline comes above).

In the html code however, the order of the records is that the Embedded Image post is above the Embedded Video post.

Any way that we can have the little circle join display in the html declared record order?

Cheers.

SSemicolon WebSTAFFNov 24, 2016

Hello,

We definitely agree with this. Actually, this was created like this in the First Place. However, the position of the Buttons can be definitely changed. Please find the following steps:

  1. Find and Delete the following CSS Block in the css/style.css File:
.entry.entry-date-section + .entry .entry-timeline { top: 70px; }
  1. Please add the following code in the js/functions.js File replacing the entire blogTimelineEntries: function() Function Block:
blogTimelineEntries: function(){
	$('.post-timeline.grid-2').find('.entry').each( function(){
		var position = $(this).inlineStyle('left');
		if( position == '0px' ) {
			$(this).removeClass('alt');
		} else {
			$(this).addClass('alt');
		}
		$(this).find('.entry-timeline').fadeIn();
	});

	$('.entry.entry-date-section').next().next().find('.entry-timeline').css({ 'top': '70px' });
},

This will definitely fix the Issue with Ordering. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard