Mouse Position Troubles, Again

[David]

Thanks, Alex! That's exactly what I was thinking of.

[DaveLClarkI]

Well, the positioning of my dynamic informational message box is better now; however, it looks like that because the container only has an offset width of 2 it is causing the browser to set the width of my informational message box as small as possible in an attempt to make it fit within the container. It is able to do this, of course, because I have word wrap turned on so by default it reformats my message text as needed to achieve a smaller width for the message box.

Meaning, the same message text from the main page comes out as a single line of text; whereas, from the pop-up window it comes out with the text wrapped into more than a single line. I would prefer the message text to remain as a single line for shorter messages. For longer messages I set an explicit width on the message box. Any ideas?

[DaveLClarkI]

By the way... To prove the above, I added the following to my code and the problem was solved. The following changes the width of the PUI container based on the scrollWidth property.

Code: Select all

	if (container.offsetWidth < container.scrollWidth)
	{
		container.style.width  = container.scrollWidth + "px";
	}

[David]

What type of element is this that you are referring to? That contains the text?

[DaveLClarkI]

It is a div I create as follows:

Code: Select all

		dyno = document.createElement("div");	// then, (re)create it
		dyno.setAttribute("id", dynoId);
		dyno.setAttribute("class", "dropShadow");
		dyno.style.position = "absolute";
		dyno.style.left = "300px";
		dyno.style.top = "200px";
		if (messageText.length > 50)			// if this is a long message
		{
			dyno.style.width = "280px";			// limit width of message box (style sheet does word wrap)
		}
		dyno.style.visibility = "hidden";		// initial setting to allow repositioning
		dyno.innerHTML = '<img style="float: none; width: 16px; height: 16px; vertical-align: text-bottom;"'
					   + ' src="/profoundui/proddata/images/icons/information.png"></img> ';
		dyno.innerHTML += messageText;			// set value of dynamic widget
		dyno = msgSource.parentNode.appendChild(dyno);	// add to container

I then position and display the div as follows:

Code: Select all

		switch (position)
		{
			case 'mouse':
				dyno.style.left = (offsets.mouseLeft + 10) + "px";
				dyno.style.top = (offsets.mouseTop - dyno.offsetHeight - 10) + "px";
				break;
			case 'center':
				dyno.style.left = (Math.floor(offsets.width / 2) - Math.floor(dyno.offsetWidth / 2)) + "px";
				dyno.style.top = (Math.floor(offsets.height / 2) - dyno.offsetHeight) + "px";
				break;
			case 'top':
				dyno.style.left = (Math.floor(offsets.width / 2) - Math.floor(dyno.offsetWidth / 2)) + "px";
				dyno.style.top = "5px";
				break;
			case 'left':
				dyno.style.left = "5px";
				dyno.style.top = (Math.floor(offsets.height / 2) - dyno.offsetHeight) + "px";
				break;
			case 'bottom':
				dyno.style.left = (Math.floor(offsets.width / 2) - Math.floor(dyno.offsetWidth / 2)) + "px";
				dyno.style.top = (offsets.height - dyno.offsetHeight - 5) + "px";
				break;
			case 'right':
				dyno.style.left = (offsets.width - dyno.offsetWidth - 5) + "px";
				dyno.style.top = (Math.floor(offsets.height / 2) - dyno.offsetHeight) + "px";
				break;
			default:
		}
		dyno.style.visibility = "visible";
		$("#" + dynoId).fadeIn(0).fadeOut(fadeDuration);	// jQuery method to fade object

[David]

I guess in the CSS you are doing this?

Code: Select all

whitespace: normal;

Does it help to not do that (divs in PUI have whitespace:nowrap by default) when the div is not given a fixed width? It's not doing anything for you in that case, anyhow.

Is that it?

[DaveLClarkI]

Along with other styles applying to this div, I have the following in the stylesheet using a selector matching on the id of the div:

Code: Select all

  white-space:   pre-wrap;          /* CSS3 */
  white-space:   -moz-pre-wrap;     /* Mozilla, since 1999 */
  white-space:   -pre-wrap;         /* Opera 4-6 */
  white-space:   -o-pre-wrap;       /* Opera 7 */

It probably would work to remove the word wrap in this situation. But, truth be told, I didn't want to be toggling yet another thing in this process. I was hoping to just leave it in the stylesheet -- plus the fact that there are four of these which would require toggling.

[David]

Since your div is not given a size, it picks up the size of the containing div, which is basically zero in this case. So, with text wrapping turned on, it's just going to wrap on each word and everything will push down. Using 'nowrap' will get around that, forcing the text to flow out.

You could have the script toggle this, rather than using CSS, if you like that any better. Also, I don't think there is any need for all those alternate 'white-space' property values? I'd guess that all browsers supported by Profound UI will handle the standard values 'nowrap', 'normal', 'pre-wrap', etc. just fine.

[DaveLClarkI]

So, Profound only supports CSS3 browsers?

[David]

We support IE >= 8 (minimum 9 for Atrium, though), and also current FireFox, Chrome, Opera, IOS/Mac Safari, and also the Android browser.

I was not aware that any of those had any issue with the standard 'white-space' values.