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?
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>
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).
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>