Rethinking My Use of Modal Windows....

#1

I think I may still have a use for a modal window or two for my
website (like when some prankster enters in "fuck fuck fuck" in my
search engine!) but I think maybe I should have a less "intrusive" or
"in-your-face" way of presenting "optional information," the sort you
associate with sidebars or even footnotes.

How about a comic book-style thought or dialog balloon onMouseOver?

Yeah, that'd be awesome! Only pops up onMouseOver and still allows
access to the rest of the page while displayed, while disappearing on
its own without needing the user to click an "okay" or "back" link or
button.

I wonder, could I somehow use the modal window code I have to achieve
the same thing, only without "freezing" the webpage?

Moreover, how do I style the thinggy to look like a comic book thought
balloon??

That thought balloon would be a kind of pop-up window, with
information (text), but it only appears onMouseOver and disappears
(with a nice little fading away effect, I hope!) just as easily...yet
it has to *look* like a comic book-style thought balloon and not just
another box or rectangle with text!

How would I style such a thinggy??

TIA for all ideas and advice!

#2

On 2008-05-02, Prisoner at War <prisoner_at_war (AT) yahoo (DOT) com> wrote:

Quote:

I think I may still have a use for a modal window or two for my
website (like when some prankster enters in "fuck fuck fuck" in my
search engine!) but I think maybe I should have a less "intrusive" or
"in-your-face" way of presenting "optional information," the sort you
associate with sidebars or even footnotes.

How about a comic book-style thought or dialog balloon onMouseOver?

Easily done.

Quote:

Yeah, that'd be awesome! Only pops up onMouseOver and still allows
access to the rest of the page while displayed, while disappearing on
its own without needing the user to click an "okay" or "back" link or
button.

I wonder, could I somehow use the modal window code I have to achieve
the same thing, only without "freezing" the webpage?

Moreover, how do I style the thinggy to look like a comic book thought
balloon??

Don't use a real modal window, instead use a "Web 2.0 popup".

Get a DIV, give it a transparent background and a background image that
looks like a speech bubble, with transparent pixels around its rounded
corners. Make the DIV visibility: hidden.

Then use JS to change it to visibility: visible when you want it to pop
up. The rest of the page won't be frozen.

Quote:

That thought balloon would be a kind of pop-up window, with
information (text), but it only appears onMouseOver and disappears
(with a nice little fading away effect, I hope!) just as easily...yet
it has to *look* like a comic book-style thought balloon and not just
another box or rectangle with text!

How would I style such a thinggy??

Fading away can be done but is a bit more tricky. You'd need to set the
element's opacity gradually from 1.0 to 0.0 before making it visibility:
hidden when it reached 0. For that you use setInterval (or setTimeout
but I prefer setInterval). I think we explained this the other day.

#3

On May 2, 4:31 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

Quote:

Easily done.

I found this code at http://colorado-springs.pm.org/balloonHint.html
but the site doesn't seem to provide a working example!

Quote:

Don't use a real modal window, instead use a "Web 2.0 popup".

Yeah, something like that Kontera in-line text stuff, except totally
client-side...hmmm, actually, that Kontera stuff can be annoying,
too...better switch back to onClick, since onMouseOver can be
accidental...what I will do with an onMouseOver, however, is make the
"link" or "linking/summoning element" get highlighted, as if
"warning"...good idea, you think? This way, it's not "in-your-
face"...don't want to be in-your-face to my visitors, even if it's
relevant information....

Quote:

Get a DIV, give it a transparent background and a background image that
looks like a speech bubble, with transparent pixels around its rounded
corners. Make the DIV visibility: hidden.

Then use JS to change it to visibility: visible when you want it to pop
up. The rest of the page won't be frozen.

Thanks, that sounds like a plan! I don't see the concrete steps
involved due to my present technical limitations, but the broad
contours of your suggestion sound like something I can learn to
achieve!

Quote:

Fading away can be done but is a bit more tricky. You'd need to set the
element's opacity gradually from 1.0 to 0.0 before making it visibility:
hidden when it reached 0. For that you use setInterval (or setTimeout
but I prefer setInterval). I think we explained this the other day.

Indeed, for which I am very grateful -- I am able to make text fade
in, now...ideally the whole "box" or "balloon" should fade in, but the
text itself fading in is impressive and very nice. Then again, maybe
one fade effect is plenty -- maybe instead of fade-out the balloon or
box should just disappear ASAP....

#4

Prisoner at War wrote:

Quote:

On May 2, 4:31 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

Easily done.

I found this code at http://colorado-springs.pm.org/balloonHint.html
but the site doesn't seem to provide a working example!

That's just a regular popup window.

Quote:

Don't use a real modal window, instead use a "Web 2.0 popup".

Perhaps Ben will write a simple example for you, I'm too sleepy at
the moment to dig mine out.

Jeff

Quote:

Yeah, something like that Kontera in-line text stuff, except totally
client-side...hmmm, actually, that Kontera stuff can be annoying,
too...better switch back to onClick, since onMouseOver can be
accidental...what I will do with an onMouseOver, however, is make the
"link" or "linking/summoning element" get highlighted, as if
"warning"...good idea, you think? This way, it's not "in-your-
face"...don't want to be in-your-face to my visitors, even if it's
relevant information....

Get a DIV, give it a transparent background and a background image that
looks like a speech bubble, with transparent pixels around its rounded
corners. Make the DIV visibility: hidden.

Then use JS to change it to visibility: visible when you want it to pop
up. The rest of the page won't be frozen.

Thanks, that sounds like a plan! I don't see the concrete steps
involved due to my present technical limitations, but the broad
contours of your suggestion sound like something I can learn to
achieve!

Fading away can be done but is a bit more tricky. You'd need to set the
element's opacity gradually from 1.0 to 0.0 before making it visibility:
hidden when it reached 0. For that you use setInterval (or setTimeout
but I prefer setInterval). I think we explained this the other day.

Indeed, for which I am very grateful -- I am able to make text fade
in, now...ideally the whole "box" or "balloon" should fade in, but the
text itself fading in is impressive and very nice. Then again, maybe
one fade effect is plenty -- maybe instead of fade-out the balloon or
box should just disappear ASAP....

#5

On 2008-05-03, Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

Quote:

Prisoner at War wrote:
On May 2, 4:31 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

Easily done.

I found this code at http://colorado-springs.pm.org/balloonHint.html
but the site doesn't seem to provide a working example!

That's just a regular popup window.

Don't use a real modal window, instead use a "Web 2.0 popup".

Perhaps Ben will write a simple example for you, I'm too sleepy at
the moment to dig mine out.

Here you are:

http://www.tidraso.co.uk/misc/bubble/

I don't do much JavaScript usually so this is unlikely to be the best
way of doing it. And it probably won't work in IE.

Question: at the moment each <span class="bubble"> has to have a unique
id just so I can identify it in createBubble. What's the best way of
avoiding that?

For example can the JS just create a bubble on the most recently parsed
node? Then the position of the SCRIPT elements in the document would
contain all the information necessary about where to attach the bubbles.

#6

In article <slrng1o9ke.i35.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

Quote:

On 2008-05-03, Jeff <jeff (AT) spam_me_not (DOT) com> wrote:
Prisoner at War wrote:
On May 2, 4:31 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

Easily done.

I found this code at http://colorado-springs.pm.org/balloonHint.html
but the site doesn't seem to provide a working example!

That's just a regular popup window.

Don't use a real modal window, instead use a "Web 2.0 popup".

Perhaps Ben will write a simple example for you, I'm too sleepy at
the moment to dig mine out.

Here you are:

http://www.tidraso.co.uk/misc/bubble/

Brilliant in Mac FF and Opera but not right in Safari 2, iCab. The
bubbles are very partially shown, the left bits, in the latter two.

--
dorayme

#7

On 2008-05-03, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Quote:

In article <slrng1o9ke.i35.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-05-03, Jeff <jeff (AT) spam_me_not (DOT) com> wrote:
Prisoner at War wrote:
On May 2, 4:31 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

Easily done.

I found this code at http://colorado-springs.pm.org/balloonHint.html
but the site doesn't seem to provide a working example!

That's just a regular popup window.

Don't use a real modal window, instead use a "Web 2.0 popup".

Perhaps Ben will write a simple example for you, I'm too sleepy at
the moment to dig mine out.

Here you are:

http://www.tidraso.co.uk/misc/bubble/

Brilliant in Mac FF and Opera but not right in Safari 2, iCab. The
bubbles are very partially shown, the left bits, in the latter two.

Probably because I'm using an inline box to form the containing block
for positioned descendents. The very thing I warned Mr Korpela about
only the other day

Although there the circumstances required more
precision.

Konqueror positions all the bubbles at the left of the block-- basically
it looks like it doesn't really allow inline containing blocks.

There isn't really an easy fix for that, except redesign the page so the
items that need bubbles are all blocks (including floats).

Also in Konqueror my default font is nice and big and the text doesn't
therefore fit in the last bubble. This is a fundamental problem of
trying to fit text into something that's sized in pixels.

Actually one could do bubbles sized in ems using IMG rather than
background-image...

And they don't fade properly in Konqueror because the version I have at
least doesn't support opacity. So they just disappear, but that could be
called reasonably graceful degradation.

#8

In article <slrng1oc5v.i35.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

Quote:

On 2008-05-03, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <slrng1o9ke.i35.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-05-03, Jeff <jeff (AT) spam_me_not (DOT) com> wrote:
Prisoner at War wrote:
On May 2, 4:31 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

Easily done.

I found this code at http://colorado-springs.pm.org/balloonHint.html
but the site doesn't seem to provide a working example!

That's just a regular popup window.

Don't use a real modal window, instead use a "Web 2.0 popup".

Perhaps Ben will write a simple example for you, I'm too sleepy at
the moment to dig mine out.

Here you are:

http://www.tidraso.co.uk/misc/bubble/

Brilliant in Mac FF and Opera but not right in Safari 2, iCab. The
bubbles are very partially shown, the left bits, in the latter two.

....
Actually one could do bubbles sized in ems using IMG rather than
background-image...

I was thinking this last. Perhaps, given the tricky nature of this task

and cost-benefit, just pics of text to go in pics of bubbles. And make
big enough for most people?

--
dorayme

#9

On 2008-05-03, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Quote:

In article <slrng1oc5v.i35.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:
[...]
Actually one could do bubbles sized in ems using IMG rather than
background-image...

I was thinking this last. Perhaps, given the tricky nature of this task
and cost-benefit, just pics of text to go in pics of bubbles. And make
big enough for most people?

Good idea. Then you can also use a cartoony font.

I can't help thinking that anyone sensible enough to worry about font
sizes and readability isn't going to be doing fading-out pop-up speech
bubbles in the first place.

#10

In article <slrng1odre.i35.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

Quote:

On 2008-05-03, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <slrng1oc5v.i35.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:
[...]
Actually one could do bubbles sized in ems using IMG rather than
background-image...

I was thinking this last. Perhaps, given the tricky nature of this task
and cost-benefit, just pics of text to go in pics of bubbles. And make
big enough for most people?

Good idea. Then you can also use a cartoony font.

I can't help thinking that anyone sensible enough to worry about font
sizes and readability isn't going to be doing fading-out pop-up speech
bubbles in the first place.

Probably not! Also on the cards are animated gifs, positioned or
whatever. You could, I suppose, do all the fading in them...

Confession, I went through a small love affair with the animated gif
once. And this talk of cartoons has reminded me. This was part of a long
story and I think I can do much better these days... but here are a
couple of oldies:

<http://dorayme.890m.com/alt/pics/boastfulA.gif>

and

<http://dorayme.890m.com/alt/pics/proudZ.gif>

For some reason, it looks a bit corny now to me. (Travis, you fancy
Flash geek, please don't laugh!)

--
dorayme