diff --git a/view/theme/frio/js/mod_display.js b/view/theme/frio/js/mod_display.js new file mode 100644 index 0000000000..86608821e5 --- /dev/null +++ b/view/theme/frio/js/mod_display.js @@ -0,0 +1,11 @@ +/** + * @brief Javascript for the display module + */ + +// Catch the GUID from the URL +var itemGuid = window.location.pathname.split("/").pop(); + +$(window).load(function(){ + // Scroll to the Item by its GUID + scrollToItem('item-'+itemGuid); +}); diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js index 1e26ad7705..1e93be24c0 100644 --- a/view/theme/frio/js/theme.js +++ b/view/theme/frio/js/theme.js @@ -542,3 +542,26 @@ String.prototype.rtrim = function() { var trimmed = this.replace(/\s+$/g, ''); return trimmed; }; + +// Scroll to a specific item and highlight it +// Note: jquery.color.js is needed +function scrollToItem(itemID) { + if( typeof itemID === "undefined") + return; + + // Define the colors which are used for highlighting + var colWhite = {backgroundColor:'#F5F5F5'}; + var colShiny = {backgroundColor:'#FFF176'}; + + // Get the Item Position (we need to substract 100 to match + // correct position + var itemPos = $('#'+itemID).offset().top - 100; + + // Scroll to the DIV with the ID (GUID) + $('html, body').animate({ + scrollTop: itemPos + }, 400, function() { + // Highlight post/commenent with ID (GUID) + $('#'+itemID).animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600); + }); +} diff --git a/view/theme/frio/templates/threaded_conversation.tpl b/view/theme/frio/templates/threaded_conversation.tpl index 3746ba0324..a5402ede5d 100644 --- a/view/theme/frio/templates/threaded_conversation.tpl +++ b/view/theme/frio/templates/threaded_conversation.tpl @@ -1,4 +1,5 @@ +{{if $mode == display}}{{/if}} {{$live_update}} @@ -23,17 +24,3 @@ {{/if}} - - - -{{if $mode == display}} - -{{/if}} -