Welcome Guest! To enable all features please Login or Register.
Options
View
Go to last post Go to first unread
Online vcsharp  
#1 Posted : 09 April 2018 08:51:04(UTC)
vcsharp


Rank: YAF Lover

Reputation:

Joined: 03/10/2017(UTC)
Posts: 64
Man
India

Thanks: 21 times
ISSUE
I have noticed that when a user is on post message page, and clicks on Preview button, then for a long post, the preview part is only partially visible with the top part hidden from user view. This is not very intuitive for an end user.

EXPECTED FUNCTIONALITY
I think, when user clicks on Preview button, then the preview message should be wholly visible or at least a maximum part of it should be visible, and top part of preview should always be visible. So, in a worst case scenario, when the post is very long that goes beyond a single page then the preview message should show the top part of message and for seeing the lower part of preview, user would scroll down in the page.

Please take a look at following video, which shows this issue : Preview Message is not fully visible

I am using yaf 2.2.3.

Sponsor
Online vcsharp  
#2 Posted : 10 April 2018 14:36:40(UTC)
vcsharp


Rank: YAF Lover

Reputation:

Joined: 03/10/2017(UTC)
Posts: 64
Man
India

Thanks: 21 times
The issue can be taken care of by using some client-side coding.

I inserted the following client-script within pages/postmessage.ascx and it solved the problem of preview part not being fully visible for a longer post. A video of how the Preview is scrolled into view can be seen at following url: How Preview message is scrolled into view

Since Preview button is the only button on this page that posts back to the same page, so we can safely call the method for scrolling Preview message into view in client-side event of pageLoad. This is what is happening in script below.

Code:
<script type='text/javascript'>

(function () {
    //returns true if element top is within viewport else returns false
    function isElementInView(element) {
        var emt = $(element);
        var offset = emt.offset();
        var documentScrollTop = $(document).scrollTop();

        if ((offset.top + emt.height()) > ($(window).innerHeight() + documentScrollTop) && offset.top >= documentScrollTop) {
            return false;
        } else if (offset.top < documentScrollTop) {
            return false;
        }
        return true;
    }

    //scrolls top of preview into view
    function scrollPreviewIntoView() {
        var emt = $("[id*='PreviewRow'");
        if (emt.length > 0 && isElementInView(emt[0]) !== true) {
               $(document).scrollTop(emt.offset().top);
        }
    }

    //scroll preview part into full view on postback. (preview button is the only button posting back to postmessage page)
    Sys.Application.add_load(applicationLoadHandler);

    function applicationLoadHandler() {
        scrollPreviewIntoView();
    }
}());

</script>

Edited by user 10 April 2018 14:40:09(UTC)  | Reason: added more explanation

Rss Feed  Atom Feed
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Notification

Icon
Error