expanding a div to show all text

V

vlad.levin

I'd like to write a control that allows a user to expand a div which
originally shows the first line or two of text. I don't know very much
javascript so I was hoping someone here could point me in the right
direction. Here is the kind of functionality I am looking for:

Let's say people have posted notes to a Web page. The notes are
displayed from newest to oldest:

3:00 PM: If you are editing this file, make sure to... ^
1:00 PM: If you've run into the following performance... ^

The user can click on the ^ symbol to expand the div to show the
remaining text. Now, I've been able to accomplish most of this with
some simple Javascript, but there are a couple of things I don't know
how to do:

1) If all of the text fits into what is currently visible, then don't
even bother showing the ^ symbol.
2) If the text does not fit into what is currently visible, add '...'
to the end of the visible line. When the user expands the text, the
ellipses go away.

PS: If this would work with current versions of Firefox and IE, I'd be
happy, but if it only works with IE, that's fine for now.
 
M

Marc

Internet Explorer only!!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
..note{
width: 250px;
font-size: 10px;
font-family: arial, 'ms serif';
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
cursor: hand
}
</style>
<script type="text/javascript">
function expandDiv(note){
if (note.style.overFlow == ""){
note.style.overFlow = "hidden";
note.style.whiteSpace = "nowrap";
}else{
note.style.overFlow = "";
note.style.whiteSpace = "normal";
}
}
</script>
</head>
<body>

<span class="note" onclick="expandDiv(this)">3:00 PM: If you are editing
this file, make sure to save it afterwards</span><br />
<span class="note" onclick="expandDiv(this)">1:00 PM: If you've run into the
following performance problems, reboot your system.</span>

</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Clickable Div Block 1
How to make a div select work? 5
WIN32 - Update Text in a Window in order to show its size in Pixels and coordinates 0
How can I hide a div using an event listener on multiple checkboxes? 6
Hello to all! 1
Expanding collapsed text when printing 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
"input-group-text" help 7

Members online

Total: 270 (members: 2, guests: 268)
Robots: 82

Forum statistics

Threads
474,266
Messages
2,571,083
Members
48,773
Latest member
Kaybee

Latest Threads

Top