Having problems with message search?
Richard Quadling wrote:
I want to have the overdiv sized automatically. I would like to have a MAXIMUM size (say 600) so that the content wraps, but no minimum. And then I want the new shadow plugin still to work. Regards, Richard Quadling.
Richard
There are about 3 ways to manage the width of text popups.
| Regular popup |
| Regular popup with WIDTH at 200 pixels (default). Wrapping is automatic, but the popup can get very tall if there is a lot of text. |
1. Use the WIDTH token to manually adjust the overlib default width of 200 pixels.
- 200 pixels is about 20-40 chars, depending on the READER'S browser default font size and any styling that you might have in your page to control the popup font size.
- onmouseover="return overlib('Some Words' , WIDTH, 350)"
| Regular popup with WIDTH forced to 350 pixels in the overlib arg list |
Advantages
- Guaranteed to work in all browsers
- Requires you to do a mental calculation when you write the html for the page. You have to anticipate and manually enter the WIDTH that would look good.
2. Use the WRAP token
onmouseover="return overlib('Some Words' , WRAP )"
Works in OL4 only
Advantages
- For VERY SMALL amounts of text (say < 25 chars), this automatically downsizes the popup so it looks like a tooltip.
| Default popup |
| Popup_using_WRAP |
Disadvantages
- The automatic sizing routine (currently in OL4) computes a WIDTH that attempts to fit the popup around the text IN ONE LINE. It will make the popup WIDTH as wide as the window, to accommodate the text all on one line. The popup goes to a second line only after it has expanded itself to the full screen width for a first line. About a month ago, the developer of this module stated: "This feature however is not meant to be used with large body content because your popup could become VERY wide."
- It absolutely WILL become very wide.
| Caption |
| Longer-text_popup_using_WRAP_just_stays_on_one_line_until_it_approaches_the_full_width_of_the_window. |
| Caption |
| Long-text popup using WRAP just goes on and on and on and on and on and on and on.and sets the width to full window width before it finally wraps to a second line. |
3. Add your own adaptive width-calculator (My favorite)
I use a separate function in my html pages to estimate a WIDTH for the overlib() call. It generally creates a WIDTH that has a pleasing height/width ratio for larger-text popups.
Use code like this in your html page.
<head>The integer values 300, /4, *9, 720 work for me, but can be tuned for your preference.
<script language=javascript>
function dynamicSizer(aText,aCap){
textWide=Math.floor( 300+aText.length/4 );
if (aCap) textWide=Math.max( textWide, Math.floor( aCap.length*9 ) );
return Math.min( 720,textWide );
};
myText7 = "The lengthy text for my popup number 7";
myCaption7 = "The caption for my popup number 7";
myWidth7 = dynamicSizer(myText7,myCaption7);
</script>
</head>
<body>
< href=".." onmouseover = "return overlib(myText7, CAPTION,myCaption7, WIDTH,myWidth7 , ........ )
The WIDTH will never be > 720 (in deference to users with 800x600 monitors).
The WIDTH will never be < 300, but you can adjust that when you write the function.
Within those limits, the (pixel) WIDTH is computed by taking the integer value of ( 300+ 1/4 of the number of characters in the text string ).
If there is a CAPTION, the override computation insures that the WIDTH will be a bit wider than the CAPTION on one line (the *9 factor), so a longer CAPTION will never have to wrap to 2 lines.
YMMV, because you don't know the default font size setup on your user's browser.
A 240 character TEXT would set the WIDTH at 360. Inside the popup, the text line will be about 45 chars long, and wrap to 6 or 7 lines.
A 480 character TEXT would set the WIDTH at 420. Inside the popup, the text line will be about 52 chars long, and wrap to 9 or 10 lines
A 1200 character TEXT would set the WIDTH at 600. Inside the popup, the text line will be about 75 chars long, and wrap to 16+ lines
As I said, these values work for me, but you can change them to get the aspect ratio and the minimum/maximum size that looks good on your page.
| This long-text popup contains 300 characters and
so it is automatically sized to WIDTH, 375. This creates a popup that has a pleasant aspect ratio. The rest of this is just filler. The rest of this is just filler. The rest of this is just filler. The rest of this is just filler. The rest of this. |
| This long-text popup contains 600 characters and
so it is automatically sized to WIDTH, 450. This creates a popup that has a pleasant aspect ratio. The rest of this is just filler. The rest of this is just filler. The rest of this is just filler. The rest of this is just filler. This creates a popup that has a pleasant aspect ratio. The rest of
this is just filler. The rest of this is just filler. The rest of this is
just filler. The rest of this is just filler. This creates a popup that has
a pleasant aspect ratio. The rest of this is just filler. The rest of this
is just filler. The res |
For comparison, the OL4 WRAP token produces these:
| Caption |
| This long-text popup contains 300 characters and
the WRAP command. WRAP sizes this popup so it will extend the width of the
window. The rest of this is just filler. The rest of this is just filler.
The rest of this is just filler. The rest of this is just filler. The rest
of this is just filler. T |
| Caption |
| This long-text popup contains 600 characters and
the WRAP command. WRAP sizes this popup so it will extend the width of
the window. The rest of this is just filler. The rest of this is just filler.
The rest of this is just filler. The rest of this is just filler. The rest
of this is just filler. The rest of this is just filler. The rest of this
is just filler. The rest of this is just filler. The rest of this is just
filler. The rest of this is just filler. The rest of this is just filler.
The rest of this is just filler. The rest of this is just filler. The rest
of this is just filler. The |
Advantages
Provides a dynamic width with a reasonable aspect ratio
Allows the coder to make changes to the code within the popup, and not have to even think about the WIDTH the revised popup will need.
Disadvantages
More javascript in each page (although you can put this into a common .js file, and thus omit reprtitive download.)
This is designed for large popups. The constants will have to be tuned to use it for small popups (or use WRAP for small popups and this function for large ones.)
If you want help embellishing this function for a busy environment, write to me off-the-group. This proposed solution is "outside overlib".
Developers - See Discussion on this topic in the archives. FM, DH, REB and DJS June 17 - 20, 2003 under thread subject "WIDTH not working".
Dennis
Offline 
Send Email