Site Feature: Post Preview


#1

John,

I had an idea which shouldn’t be too hard to implement, being able to preview the latest post of a thread by mousing over a new icon. Another possibility would be to use an accordion widget so that clicking on a post would allow you to see the latest message and maybe reply. Just a thought. I like the new style btw.


#2

#3

cool man. i made this a public request in #meta … thought it deserved some attention.


#4

Looking through your resources, you already have magnific popup.

I like the “Open with fade-slide animation”. So imagine you go with clicking a little speech bubble icon to launch a dialog with the last reply… in that case I think you could get away with only one hidden dialog but you would have to add another click event listener to each speech bubble to update the contents.

Calling .magnificPopup() twice on an element doesn’t create duplicate event listeners, but it looks like you would need to use bind() with namespaces for the event handlers. (Excuse me if this is remedial for you, but I got curious on how to tackle this problem and wanted to share my research since I didn’t know what to do.)


#5
$(document).ready(function() {
	// Not sure if this would return an array that would need to be iterated over 
	// since you'd have many of the same icon.
	$('.last-reply-icon').magnificPopup({
		type: 'inline',

		fixedContentPos: false,
		fixedBgPos: true,

		overflowY: 'auto',

		closeBtnInside: true,
		preloader: false,
		
		midClick: true,
		removalDelay: 300,
		mainClass: 'my-mfp-slide-bottom'
	});
	
	$('.last-reply-icon').bind('click.update-last-reply-modal', function() {
		// Use $( this ) to traverse to the parent element, then grab the href 
		// attribute of the <a> tag in the "div.topic-last-activity"
		
		// That should be enough to create an ajax request to get the necessary 
		// post info
		
		// Update modal here
		
		// Note: If you want to be efficient with your web requests you could 
		// create a dictionary with the href from above being the key and the info
		// you retrieve being the value. Then you'd first lookup the post info in the 
		// dictionary and only make the request if it was missing. You could also 
        // pre-populate the dictionary when the user first gets the web page as part of the initial get request.		
		
	})
});

You can use the function in the document body every time the page updates with more information such as from a polling event or the infinite scroll.