.
Related ► Programming
Top 5 developer skills to know in 2024
Controlling Text Display on Web Pages: Using PHP and JavaScript
Node.js vs ReactJS: Understanding the Differences
Display a loading gif in a div until div loads content from other page
How to redirect your website url to default https from http
Text form can't accept apostrophes
How to Include Read More tag in Genesis Child Theme
How to pass variables from one php page to another without form

Controlling Text Display on Web Pages: Using PHP and JavaScript Controlling Text Display on Web Pages: Using PHP and JavaScript

Controlling Text Display on Web Pages: Using PHP and JavaScript


  CodingTips[Updated on:Mar-21-2023]      |  Reading Time: About 5 minutes



When working with PHP, there are times when you need to limit the amount of text that is displayed on a page. This can be done using the substr function, but it can be a bit cumbersome to use every time you need to limit text. To make this process easier, you can create a custom function called custom_echo that will do the job for you.

The custom_echo function takes two parameters: $x and $length. $x is the string that you want to limit, and $length is the maximum number of characters that you want to display. If $x is longer than $length, the function will trim it down and add an ellipsis (...) to the end of the text. If $x is shorter than $length, the function will simply return the original text.

Here's an example of how to use the custom_echo function:

PHP Code to create a function named customer_echo():

function custom_echo($x, $addLineBreaks = true) {
  $posture = preg_replace_callback('/B#(w*[a-z_]+w*)/i', function($matches) {
    return '<a href="/hashtag/' . strtolower($matches[1]) . '">#' . $matches[1] . '</a>';
  }, $x);
  $postbacks = preg_replace_callback('@(https?://([-w.]+)+(:d+)?(/([w/_.%-=#]*(?S+)?)?)?)@', function($matches) {
    return '<a href="' . $matches[0] . '" target="_blank">' . $matches[0] . '</a>';
  }, $posture);
  if ($addLineBreaks) {
    $postbacks = nl2br($postbacks);
  }
  echo '<div style="font-size:100%;color:black; word-wrap: break-word" class="show-read-more">';
  echo $postbacks;
  echo '</div>';
}

Use Java Script to cascade down the read more text to fully read the text more than 200 characters:

 

$(document).ready(function(){
  var maxLength = 200;
  $(".show-read-more").each(function(){
    var myStr = $(this).html();
    if($.trim(myStr).length > maxLength){
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).html(newStr);
      var $readMoreLink = $('<a href="javascript:void(0);" class="read-more">read more...</a>');
      var $hiddenText = $('<span class="more-text">' + removedStr + '</span>');
      $hiddenText.hide();
      $(this).append($readMoreLink);
      $(this).append($hiddenText);
    }
  });

  $(document).on("click", ".read-more", function(){
    var $parent = $(this).parent();
    $parent.find('.more-text').show();
    $(this).remove();
  });
});

In the example above, the $text variable contains a long string of Lorem Ipsum text. We pass this variable and the maximum number of characters we want to display (100) to the custom_echo function. The function then checks to see if the length of $text is shorter than or equal to 100 characters. If it is, the entire string is echoed to the screen. If it is longer, the function trims it down to 100 characters and adds an ellipsis to the end.

Moving on to the JavaScript code for the "read more" feature, it's a handy way to give your users the ability to see more text without taking up too much space on the page. The code works by hiding the additional text until the user clicks a "read more" link. When the link is clicked, the additional text is revealed.

The code works by first finding all elements with the show-read-more class. It then loops through each of these elements and checks if their content is longer than the maxLength variable (set to 200 characters in this case). If it is, the code shortens the text to maxLength characters and adds a "read more" link at the end.

When the "read more" link is clicked, the code finds the parent element of the link (which contains both the shortened text and the "read more" link) and shows the hidden text (which is stored in a more-text span). It then removes the "read more" link from the parent element.

Overall, the custom_echo PHP function and the JavaScript "read more" code are both useful tools for controlling the amount of text that is displayed on a page. By limiting the amount of text that is displayed, you can make your pages more visually appealing and easier to read.

 

Like & Share

Leave a Comment


Login to post a public Comment

There are no comments yet. Comment to discuss