[Javascript] Show full text in pop up window

Paul Novitski paul at dandemutande.org
Thu Mar 18 13:49:20 CST 2004


Samyukta,

Here are a few solutions:

==============================
1) Instead of a clickable pop-up, consider a mouseover pop-up using html's 
built-in title attribute:

         <td title="This is the complete title">This is the...</td>

To this, you could add:

         <td style="cursor: default;" ...

This will keep the mouse pointer looking like an arrow instead of changing 
to a text I-bar.  You could also use "cursor: hand;" but the common 
convention is that this denotes a clickable link.

==============================
2) You could also have a mouseover pop-up using a hyperlink-to-nowhere:

         <td>
           <a href="#" title="This is the complete title">
             This is the...
           </a>
         </td>

This isn't my first choice, because href="#" will irritatingly send your 
user to the top of the page if they've scrolled down.

==============================
3) One way to make the title appear onClick is to use an alert dialog:

         <td onclick="alert('This is the complete title');">This is the...</td>

or, more elaborately but less elegantly:

         <td
          titletext="This is the complete title"
          onclick="alert(this.titletext);">
         This is the...
         </td>

...but I don't know that it's possible to set the position of the alert box 
on the screen.  If you make your user move their mouse and their gaze all 
over the screen just to read complete titles, they'll probably get irked 
and not use the feature gladly.

==============================
4) Much more elaborately, here's one way (of many ways!) you could create a 
more friendly pop-up, stylized to your own aesthetic specs:

a. Begin with the table cell & events:

         <td
          onclick="DisplayTitle(this, 'This is the complete title');"
          onmouseout="DisappearTitle();">
         This is the...
         </td>

b. Include a hidden layer to be your pop-up:

         <div
          id="TitlePopup"
          class="cssTitlePopup"
          style="position: absolute; visibility: hidden;">
         </div>

c. When the cell is clicked, fill and display the pop-up:

function DisplayTitle(argCellObj, argTitleText){
         TitlePopup.innerText = argTitleText;
         TitlePopup.style.pixelTop = JustBelow(argCellObj);
         TitlePopup.style.pixelLeft = SlightlyToTheRightOf(argCellObj);
         TitlePopup.style.visibility = "visible";
}

d. Use some method, such as onmouseout() as I've done above, to make the 
pop-up go away:

function DisappearTitle(){
         TitlePopup.style.visibility = "hidden";
}

e. The hypothetical functions JustBelow() and SlightlyToTheRightOf() would 
set the position of the pop-up to be near the originating table cell, 
according to your whims.  One way to find the position of an object on the 
screen is to add its position to the positions of all of its parent containers:

var oObj = oThingie;
var iTotalTop = 0;
var iTotalLeft = 0;

while (oObj){
         iTotalTop += oObj.offsetTop;
         iTotalLeft += oObj.offsetLeft;
         oObj = oObj.offsetParent;
}

This loop continues to walk up the DOM until it reaches the top.  It could 
be elaborated to include margins & padding when appropriate.

I've used this successfully only when beginning with an image within a 
table cell, but perhaps someone else here could tell me how to begin with 
the <td> itself.

Alternatively, reference the mouse pointer position and damn the DOM...!

Cheers,
Paul



At 10:01 AM 3/18/2004, you wrote:
>Hi,
>
>I would like to implement a pop up in my page.On clicking the link to 
>generate the pop up, the pop up should have the full text of the 
>content.how do i do this...
>currently i have a page/form with table and rows in it.
>the 'book title' is what i am talking about.as the title is large, i cnat 
>display the whole title in the table.so i want to show only the first 10 
>characters and dots.on clicking this text, a pop up should come up showing 
>the whole text in the wndow (pop up window) that opens up...
>
>Thanks in advance!1!!
>
>Do you Yahoo!?
><http://us.rd.yahoo.com/mailtag_us/*http://mail.yahoo.com>Yahoo! Mail - 
>More reliable, more storage, less spam
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript





More information about the Javascript mailing list