Timeline Issue

15 replies · opened May 6, 2016

BbdolnikMay 6, 2016

Having a small issue with the Timeline functionality. I searched the forums and did not see anything about this, although on Themeforest under the comments there is some mention of the problem I am having.

When you look at the timeline the posts connect to the timeline in what you would hope to be a reverse order by date. However they don't follow that way in the html, and they also tend to move around when going responsive.

For example... http://dev1.wbparts.com/news.cfm

You can see the first entry in the html is actually the second connection on the timeline (on the left hand side, the right hand side post is connected above it). This would be fine, I could manage the dates that way in the code. However when it goes responsive, the left hand side post is on top, making the dates go out of order.

Is there any way to fix this? It looks as though the left side post should really be connected ABOVE the right side post. This would make more sense.

Thanks.

BbdolnikMay 9, 2016

Any thoughts on this? I imagine it's affecting EVERYONe the same.

BbdolnikMay 11, 2016

Can you at least let me know if you are looking at this or not, been a couple days. I realize it's a little complex and may take time, but just a quick note that lets me know you are aware of it would help.

SSemicolon WebSTAFFMay 12, 2016

Hello,

We Really Apologize about the Delay! [sb_private_reply]There were some issues with one of our Servers because of which there was a delay in replying you.[/sb_private_reply]

We are definitely looking into this issue and will get back to you within 2-3 hours. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFMay 13, 2016

Hello,

We have looked into this issue and we feel that this is the Default Behavior of the Isotope Functionality. However, we can surely sort the Articles according to the Dates. Please follow the Steps below:

  1. Please add the .entry-date Class to the <li> Tags which hold the Dates. Example:

-  24th Feb 2014
  1. Now find the following JS code on the page:
$container.isotope({
	itemSelector: '.entry',
	masonry: {
		columnWidth: '.entry:not(.entry-date-section)'
	}
});

and replace it with:

$container.isotope({
	itemSelector: '.entry',
	masonry: {
		columnWidth: '.entry:not(.entry-date-section)'
	},
	sortBy : 'date',
	sortAscending : false,
	getSortData: {
		date: function ($elem) {
			return Date.parse($elem.find('.entry-date').text());
		}
	}
});

This should definitely fix this issue. Let us know if we can help you with anything else or if you find any further issues.

BbdolnikMay 13, 2016

Thank you very much for looking at this. You guys really know how to support your product!

HOWEVER, youre suggested edits did not work. Here is an example page... http://dev1.wbparts.com/news-testsort.cfm

It kind of falls apart in Chrome, have not tested other browsers.

BbdolnikMay 13, 2016

"We have looked into this issue and we feel that this is the Default Behavior of the Isotope Functionality."

I'm not saying you are wrong, but it seems unlikely that it's 'supposed' to work like this, it really doesn't make any sense to depict things on a timeline in one manner and sort them in another. Something is off, surely the original developers of this code would have set out to have it display correctly.

SSemicolon WebSTAFFMay 13, 2016

Hello,

Thank You for the Kind Words. :)

We Really Apologize, there was a Slight Issue in the Previous Code. Please use the following code:

$container.isotope({
	itemSelector: '.entry',
	masonry: {
		columnWidth: '.entry:not(.entry-date-section)'
	},
	sortBy : 'date',
	sortAscending : true,
	getSortData: {
		date: function(itemElem) {
			return Date.parse($(itemElem).find('.entry-date').text());
		}
	}
});

This will definitely work fine.

Additionally, you are absolutely correct about the issue with the First Post being the 2nd Connection. We will surely work on this and release a Fix to this in our Next Update.

Actually, the Isotope Plugin does not Sort the Dates by Default. The Items in the Isotope Grid are pushed to the Next Available space in a Random Order thus making it irregular. But the above code should fix this issue. Do let us know if you are still facing any further issues with this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

BbdolnikMay 13, 2016

VERY NICE!

Thank you so much, working now.

I wish every product was supported as well as yours!

BbdolnikMay 13, 2016

lol, I spoke a little too soon.

For some odd reason it took the entry-date-section and swapped them around, and put them out of place.

2016

Check the example to see please... http://dev1.wbparts.com/news-testsort.cfm

BbdolnikMay 13, 2016

Keep trying to mark this as unresolved and it won't take. Second time I've had this problem with the forums.

SSemicolon WebSTAFFMay 16, 2016

Hello,

Apologize about the Issue with this. Actually, the Dates are now Sorted in Descending which is why this causes an issue and to fix this we will need to use a Hack to trick the Isotope by adding a fake .entry-date with the Last Date of the Month to fix this. Try using this code:

May 201631st May 2016

This should now fix your issue.

Thank You for reporting the Forum Unresolved Issue to us. It seems that only users are facing this issue while for moderators it is working fine. We will look this up and fix it. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

BbdolnikMay 16, 2016

Not really sure where you want me to add this <DIV>. I added it right after

2016

But that doesn't seem to work... http://dev1.wbparts.com/news-testsort.cfm

Can you tell me where it should go?

BbdolnikMay 16, 2016

Nevermind, I see what you mean now. In our case it would be the last day of the year, since we only want to have entry date sections based on year, not month.

I thought I would just go ahead and let it sort ascending and be done with it, not that big a deal. However, I'm getting really inconsistent results.

Check out this link http://dev1.wbparts.com/news.cfm where I'm just letting it sort ascending, and it is correct UNTIL you hit LOAD MORE, where the second page loads and sorts descending?

Any ideas, this is really really weird behavior.

Thanks

BbdolnikMay 16, 2016

Well I changed both pages to sortAscending: false, and used your 'trick' on the entry date section and now it is being consistent at least. Guess I will just go with this as it works.

Thanks.

SSemicolon WebSTAFFMay 17, 2016

Hello,

Changing the sortAscending: false Value will fix this issue and the Post Entries will now be Sorted in a Descending Order. This should now work consistently since the codes seems to be correct now. We apologize about the previous issues and Thank You so much for your Continued Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

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