Page 2 of 3
Re: Mouse Position Troubles, Again
Posted: Thu Jan 23, 2014 12:00 pm
by David
Thanks, Alex! That's exactly what I was thinking of.
Re: Mouse Position Troubles, Again
Posted: Thu Jan 23, 2014 1:16 pm
by 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?
Re: Mouse Position Troubles, Again
Posted: Thu Jan 23, 2014 1:35 pm
by 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";
}
Re: Mouse Position Troubles, Again
Posted: Thu Jan 23, 2014 1:51 pm
by David
What type of element is this that you are referring to? That contains the text?
Re: Mouse Position Troubles, Again
Posted: Thu Jan 23, 2014 2:16 pm
by 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
Re: Mouse Position Troubles, Again
Posted: Thu Jan 23, 2014 4:15 pm
by David
I guess in the CSS you are doing this?
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?
Re: Mouse Position Troubles, Again
Posted: Thu Jan 23, 2014 4:23 pm
by 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.
Re: Mouse Position Troubles, Again
Posted: Thu Jan 23, 2014 5:15 pm
by 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.
Re: Mouse Position Troubles, Again
Posted: Thu Jan 23, 2014 5:30 pm
by DaveLClarkI
So, Profound only supports CSS3 browsers?
Re: Mouse Position Troubles, Again
Posted: Thu Jan 23, 2014 5:43 pm
by 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.