CODEWITHSUNDEEP
jquery
user354625
user354625

Reputation: 557

How to make whole textarea readable on using link..using jquery

I have this code in my view..

<span class="bold">Comment:
  <%=Html.TextAreaFor(model => model.Comment, new { })%>
</span>

The comment field is populating from a database. The text from the database is too long to fit in the visible area of the textarea. I have been asked to create a link next to the text area that, when clicked, would display the entire contents of the textarea in a 'popup bubble'.

Is this possible using jQuery?

Upvotes: 0

Views: 612

Answers (4)

jessegavin
jessegavin

Reputation: 75670

Something like this should do the trick

See it on jsFiddle http://jsfiddle.net/GmBqy/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
  <script type="text/javascript">
      $(function() {
        $("a.viewtext").click(function(e) {
          e.preventDefault();
          var textarea = $($(this).attr("href"));
          var popup = $("<div class='popup'><span class='close'>Close</span></div>");
          var closeButton = $("<span class='close'>Close</span>").appendTo(popup);
          closeButton.click(function() {
           $(this).closest(".popup").remove();                                                                                  
          });
          $("<div></div>").text(textarea.val()).appendTo(popup);
          textarea.after(popup);
        });
      });
    </script>
  <style type="text/css">
  .popup {
      position: absolute;
      top: 10%;
      left: 10%;
      width: 50%;
      background: #eee;
      border: solid 5px #000;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: 0 0 20px #000;
      -webkit-box-shadow: 0 0 20px #000;
      box-shadow: 0 0 20px #000;
  }
  .popup div {
      padding: 20px;
  }
  .popup .close {
      font: bold 11px sans-serif;
      position: absolute;
      top: 0;
      right: 0;
      background: #333;
      color: #fff;
      padding: 3px 6px;
      cursor: pointer;
  }
  </style>
</head>
<body>
  <textarea id="myTextField">It is a long established fact that 
  a reader will be distracted by the readable content of a page 
  when looking at its layout. The point of using Lorem Ipsum is 
  that it has a more-or-less normal distribution of letters, as 
  opposed to using 'Content here, content here', making it look.
  </textarea>
  <a class="viewtext" href="#myTextField">View Contents</a>
</body>
</html>

Upvotes: 2

istruble
istruble

Reputation: 13722

Lets break your problem up into two parts; get the value from the textarea and display the value in a tooltip.

Using the current stackoverflow "Your Answer" form as a sample form, start entering a new answer and then run this in your browser's console:

$("#wmd-input").val()

For me it looks a little something like this right now:

"Lets break your problem up ...

Now you have to decide how to display your tooltip with one of the many available options (or just roll your own).

Upvotes: 2

Nate Pinchot
Nate Pinchot

Reputation: 3318

You could create another property on your model for the shortened comment text and then store the full comment text in a hidden span.

Here is an example to get you started:

<style type="text/css">
  .commentFullText {
    display: none;
  }
</style>

<script type="text/javascript">
  $(function() {
    $('.showFullComment').click(function() {
      $(this).parent().find('.commentFullText').show();
    });
  });
</script>

<span class="bold">Comment:
  <%=Html.TextAreaFor(model => model.CommentShortened, new { })%>
  <a href="#" class="showFullComment">More...</a>
  <span class="commentFullText"><%=Html.TextAreaFor(model => model.Comment, new { })%></span>
</span>

Upvotes: 1

GSto
GSto

Reputation: 42380

yes, it is in fact possible.

Upvotes: 1

Related Questions