locked
Jquery (read more) ellipses script not working for snippets RRS feed

  • Question

  • My standard jquery ellipses script is not working in Sharepoint page layout snippets. The idea was to dynamically place a 'read more' link within long paragraphs so when user clicks it expands to show more text. This code works correctly in plain html pages but not on Page layout snippets. The snippets in question are used to collect text that is added in edit mode by user or page editor and displays this when saved and checked-in.

    Output in the page: Currently it shows the ellipses dots(...), then a few lines of text depending on value of 'showchar' variable. But clicking on readmore link makes all the text vanish - which is not the intended outcome.

    jquery:

    $(document).ready(function() {
        var showChar = 350;  
        var ellipsestext = "...";
        var moretext = "Read more >>";
        var lesstext = "<< Read less";
    
        $('.story').each(function() {
            var content = $(this).html();
             if(content.length > showChar) {
                 var c = content.substr(0, showChar);
                var h = content.substr(showChar, content.length - showChar);
                var html = c + '<span class="moreellipses">' + ellipsestext+ '</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
                $(this).html(html);        }
         });
         $(".morelink").click(function(){
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });

    html source after code runs (collected from Chrome dev tools):

    <div class="col-xs-12 col-sm-12 col-md-12 l3-details story">
      <div data-name="Page Field: Section1L3Description">
        <div id="ctl00_PlaceHolderMain_ctl08_label" style="display:none">Section1L3Description</div>
        <div id="ctl00_PlaceHolderMain_ctl08__ControlWrapper_RichHtmlField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl00_PlaceHolderMain_ctl08_label">
          <p><span class="moreellipses">...</span><span class="morecontent"><span>The care of our residents&nbsp;and service to our customers is critical so we always make sure that prospective employees meet our pre-employment screening, referencing and past employment checks before joining our team.&nbsp;<br><br>Our recruitment processes encourage a diverse workforce and we are fair and open when recruiting workers by carrying out the relevant right to work checks.&nbsp;<br><br>We also carry out rigorous checks for anyone  advise you of the checks applicable for specific roles.</span></span>
          </p>     
        </div>
      </div>
      &nbsp;&nbsp;<a href="" class="morelink">Read more &gt;&gt;</a> 
    </div>
    css :
    <style>
    .morecontent span {
    display: none;
    }
    
    .morelink {
    display: block;
    float: right;
    margin-right: 1em;
    } 
    
    .readMore {
    padding- 
    color:#0079c8; 
    font-family:"Century Gothic"; 
    font-size:15px;
    }
    </style>



    Tuesday, March 13, 2018 1:20 PM

All replies

  • Hi,

    I don't think the JS will not work - I think its more on the logic inside your JS.

    Set debugger in your js (see below) and open developer tools in Chrome. See if you operate to correct DOM.

         $(".morelink").click(function(){
            if($(this).hasClass("less")) {
    debugger;
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
    debugger;
                $(this).addClass("less");
                $(this).html(lesstext);
            }
    debugger;
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });


    Best regards,

    Riwut Libinuko
    Principal Architect, Singapore
    Office Servers and Services MVP | Singapore
    Blog : http://blog.libinuko.com

    Tuesday, March 13, 2018 1:36 PM
  • Hi Riwut

    Can you kindly clarify, in your first sentence, were you saying the code will or will 'not' work ? The debugging didnt help much, (only one unrelated error regarding stylesheet displayed) 

    regards


    Tuesday, March 13, 2018 4:22 PM
  • Hi,

    Your code will not work, but it is not because the page layouts. It is because of the logic implementation.
    My suggestion is to open Developer Tools (F12 in your browser), and goto javascript console. In that console, you try to simulate the logic. There are 3 debugging point that you want to investigate and to understand whether the logic is correct.


    Best regards,

    Riwut Libinuko
    Principal Architect, Singapore
    Office Servers and Services MVP | Singapore
    Blog : http://blog.libinuko.com

    Tuesday, March 13, 2018 11:33 PM
  • Hi,

    I modify the code as below for your reference:

    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/JavaScript">
    $(document).ready(function() {
        var showChar = 350;  
        var ellipsestext = "...";
        var moretext = "Read more >>";
        var lesstext = "<< Read less";
            
        $('.ms-rtestate-field').each(function() {
            var content = $(this).html();
             if(content.length > showChar) {
                var c = content.substr(0, showChar);
                var h = content.substr(showChar, content.length - showChar);
                var html = '<div>'+c + '</div><div class="moreellipses">' + ellipsestext+ '</div><div class="morecontent"><div>' + h + '</div>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></div>';
                $(this).html(html);        
             }
         });
         
         $(".morelink").click(function(){
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });
    </script>
    <style>
    .morecontent>div{
    display: none;
    }
    
    .morelink {
    display: block;
    float: right;
    margin-right: 1em;
    } 
    
    .readMore {
    padding- 
    color:#0079c8; 
    font-family:"Century Gothic"; 
    font-size:15px;
    }
    </style>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Wednesday, March 14, 2018 10:07 AM
  • Thanks for all the responces guys.

    The tricky thing with this piece of code is that it works when applied elsewhere but not with Sharepoint snippets. I am now debugging to track down the problem but no luck so far

    Wednesday, March 14, 2018 11:11 AM
  • Hi,

    Did you use the following line of code? Use <div/> to instead of the <span/>

    var html = '<div>'+c + '</div><div class="moreellipses">' + ellipsestext+ '</div><div class="morecontent"><div>' + h + '</div>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></div>';
          

    Or please provide some screenshots for further research.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Thursday, March 15, 2018 9:07 AM
  • Hi Dennis

    I have tried with the <divs> instead of <span> but it doesnt fix the issue - the output is in reverse. Before clicking 'read more', the whole text is being displayed (which is wrong) then after clicking 'read more' it then displays half the text, with the 'read less' link at the bottom. (I am unable to attach sample images here for you, as i am told my msdn account needs verifying)

    Also, after applying your script, the ellipses dots (...) now appear within the text ().


    • Edited by ewulee Friday, March 16, 2018 9:07 AM
    Friday, March 16, 2018 9:04 AM
  • I think the problem is coming from here 

     $(".morelink").click(function(){
            if($(this).hasClass("less")) {

                $(this).removeClass("less");
                $(this).html(moretext);
            } else {

                $(this).addClass("less");
                $(this).html(lesstext);
            }

            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });


    Friday, March 16, 2018 9:21 AM
  • Hi,

    You can upload the screenshots into OneDrive, then share the link as text in the reply.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Friday, March 16, 2018 9:27 AM
  • Ok, I will do so shortly..

    In the meantime i think i have detected where the problem is coming from. according to the script here:

    <span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'

    The <a> tag that calls the moretext variable is suppose to appear just after the last div or span when the page loads. But in google chrome dev tool, its appearing outside as a sibling of the main span, instead of within it. (dont know why) so it seems like i need to replace this (third line from the bottom in the code): $(this).parent().prev().toggle();   with something like $(this).sibling().child()prev().toggle(); - i will try sending screenshots using google drive sharing, hope that will work for you.

    thanks again


    Friday, March 16, 2018 11:17 AM
  • Hi,

    Would you please provide us with an update on the status of your issue?

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Thursday, March 22, 2018 7:26 AM