By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,122 Members | 1,508 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,122 IT Pros & Developers. It's quick & easy.

Re: Rethinking My Use of Modal Windows....

P: n/a
On May 2, 4:31 pm, Ben C <spams...@spam.eggswrote:
>

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!
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....
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....
Jun 27 '08 #1
Share this Question
Share on Google+
18 Replies


P: n/a
Prisoner at War wrote:
On May 2, 4:31 pm, Ben C <spams...@spam.eggswrote:
>>
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.

Jeff
>
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....
Jun 27 '08 #2

P: n/a
On 2008-05-03, Jeff <jeff@spam_me_not.comwrote:
Prisoner at War wrote:
>On May 2, 4:31 pm, Ben C <spams...@spam.eggswrote:
>>>
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.
Jun 27 '08 #3

P: n/a
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2008-05-03, Jeff <jeff@spam_me_not.comwrote:
Prisoner at War wrote:
On May 2, 4:31 pm, Ben C <spams...@spam.eggswrote:

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
Jun 27 '08 #4

P: n/a
On 2008-05-03, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
>On 2008-05-03, Jeff <jeff@spam_me_not.comwrote:
Prisoner at War wrote:
On May 2, 4:31 pm, Ben C <spams...@spam.eggswrote:

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.
Jun 27 '08 #5

P: n/a
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2008-05-03, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2008-05-03, Jeff <jeff@spam_me_not.comwrote:
Prisoner at War wrote:
On May 2, 4:31 pm, Ben C <spams...@spam.eggswrote:

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
Jun 27 '08 #6

P: n/a
On 2008-05-03, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
[...]
>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.
Jun 27 '08 #7

P: n/a
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2008-05-03, dorayme <do************@optusnet.com.auwrote:
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
[...]
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
Jun 27 '08 #8

P: n/a
On May 3, 4:47 am, Ben C <spams...@spam.eggswrote:
On 2008-05-03, Jeff <jeff@spam_me_not.comwrote:
Prisoner at War wrote:
On May 2, 4:31 pm, Ben C <spams...@spam.eggswrote:
>Easily done.
I found this code athttp://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.

GOOD GOD!!!

YOU, LIKE, SCANNED MY BRAIN!!!!

That's really scary stuff, man! Did you install some kind of spyware
on my computer through one of these newsgroups????

Holy cow, that's ***199%*** EXACTLY what I'd been looking for!!!

What is it you do for a living, besides practice remote MRI???

Any hot stock tips, BTW, Ben???

Holy cow, you must be a great person to have at a party! ^_^

Sorry I can't help you with your questions (even though I know you
weren't asking *moi*)...I'm going to go try to digest your script and
see if I can at least hack it for my purposes (namely, the "fade-
timeOut"), much less comprehend it....

Honestly, thanks, Ben. That's absolutely incredible. I'm putting you
and these newsgroups up in an "acknowledgments" page on my site...let
me know if you want a link to your blog or something; I'll put it in
there. That goes for all you folks who have helped -- you know who
you are. A seriously big thank-you. Wow.
Jun 27 '08 #9

P: n/a
On May 3, 5:59 am, Ben C <spams...@spam.eggswrote:
>

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.
Now now, don't be such a snob about it...I know it looks silly, but
hey, so are flowers!

Anyway, I promise to use them very judiciously...I was all set to go
with modal windows, then realized that they're too in-your-face,
freezing the browser like that, demanding an onClick to return to
normal viewing...so a dialog balloon is much better, you see...and
given the theme of my site, a comic book style one rather fits more
than not.

I definitely shan't be doing a "comic sans" font, though! Don't want
to get carried away here...actually, I will be trying to change the
colors of your balloons -- that's just too in-your-face-khaki, don't
you think! ;-)

Thanks again. Wow, you've just made my weekend, dude!!
Jun 27 '08 #10

P: n/a
On May 3, 5:51 am, dorayme <doraymeRidT...@optusnet.com.auwrote:
>

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?
LOL, that's an idea! I'm still thinking in HTML terms, but I suppose
with CSS it's possible to, say, set up a <divas a layer and have it
contain an <imgof the balloon with text -- would that be your
strategy? Using CSS to position the <imgprecisely on the page, when
called....
--
dorayme
Jun 27 '08 #11

P: n/a
On May 3, 6:54 am, dorayme <doraymeRidT...@optusnet.com.auwrote:
>

Probably not! Also on the cards are animated gifs, positioned or
whatever. You could, I suppose, do all the fading in them...
Cards?
Confession, I went through a small love affair with the animated gif
once.
Of course, everybody did -- I particularly remember those mailboxes
set up to run like a mouth, flapping as if in gossip! They're still
hilarious, you know, like the "download-the-web" .gif on
w3schools.com....
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!)
Hey, that's really neat! I particularly liked the "boastful A"...wow,
some truly creative people here! So you folks are mainly graphic
artists and designers who picked up some scripting for web work,
right? I'm impressed. Me, I'm just a dabbler. I like intellectual
fun, even if it's too much for me most of the time!
--
dorayme
Jun 27 '08 #12

P: n/a
On May 3, 1:46 am, Jeff <jeff@spam_me_not.comwrote:
>

That's just a regular popup window.
Is it? None to be found on that site anyway, it seems. Wonder why a
Perl guy would call a JavaScript pop-up a "help balloon"...even HTML
alt/title attributes would better qualify!
Perhaps Ben will write a simple example for you, I'm too sleepy at
the moment to dig mine out.

Jeff
Dude, thanks for the assist! It's too bad his JavaScript isn't
accepted by IE7 at all ("object doesn't support this property or
method"); hopefully I can find a fix for that! Why does the IE DOM
seem to always be an issue???
Jun 27 '08 #13

P: n/a
Prisoner at War wrote:
Why does the IE DOM seem to always be an issue???
Because it's <slowly style="patronizing">special!</slowly>

Seriously, same reason we battle with it with CSS.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Jun 27 '08 #14

P: n/a
On 2008-05-03, Prisoner at War <pr*************@yahoo.comwrote:
On May 3, 5:59 am, Ben C <spams...@spam.eggswrote:
>>

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.

Now now, don't be such a snob about it...I know it looks silly, but
hey, so are flowers!
I don't mind if it's silly. It's your website, put whatever you want on
it.
Anyway, I promise to use them very judiciously...I was all set to go
with modal windows, then realized that they're too in-your-face,
freezing the browser like that, demanding an onClick to return to
normal viewing...so a dialog balloon is much better, you see...and
given the theme of my site, a comic book style one rather fits more
than not.

I definitely shan't be doing a "comic sans" font, though! Don't want
to get carried away here...actually, I will be trying to change the
colors of your balloons -- that's just too in-your-face-khaki, don't
you think! ;-)
You can probably also draw less wobbly balloons.

What you might want to do is to start the fade out on the mouseout
event. That way slow readers can hold the mouse on the element if they
want to read the text without it disappearing.
Jun 27 '08 #15

P: n/a
In article
<9f**********************************@f36g2000hsa. googlegroups.com>,
Prisoner at War <pr*************@yahoo.comwrote:
On May 3, 5:51 am, dorayme <doraymeRidT...@optusnet.com.auwrote:


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?

LOL, that's an idea! I'm still thinking in HTML terms, but I suppose
with CSS it's possible to, say, set up a <divas a layer and have it
contain an <imgof the balloon with text -- would that be your
strategy? Using CSS to position the <imgprecisely on the page, when
called....
Well, you have noticed a site (bubble tooltips) that explains how to do
this stuff to your liking as you said in an earlier post. You need to
focus on one thing and perhaps you are diffusing your energies?

You can place a gif, or even an animated gif, in all sorts of places on
your webpage. It can appear not to have boxy dim by having transparent
edges. The question of how to so display such a thing on what trigger is
another issue and was being addressed by Ben.

--
dorayme
Jun 27 '08 #16

P: n/a
On May 3, 2:44 pm, Ben C <spams...@spam.eggswrote:
>

I don't mind if it's silly. It's your website, put whatever you want on
it.
Well, you were suspicious of the sense in so doing. My webhost
http://webhosting.sitesell.com/sunnyside.html seems to share such
prejudices. They wouldn't tell me why .ani and .cur file formats are
not supported. They simply say "it was a policy decision that was
made." Like, no kidding (the question is, why not??).

Animated cursors are an important aspect of "branding." If my site
were about "everything blue" -- anything you want in blue, we have it
-- it would make sense to have a blue-colored mouse pointer, wouldn't
it? Little details like that show "intelligent design"...a certain
sensibility...akin to craftsmanship....
You can probably also draw less wobbly balloons.
Nah, they were lovely just so! The informal nature of them is
wonderful.
What you might want to do is to start the fade out on the mouseout
event. That way slow readers can hold the mouse on the element if they
want to read the text without it disappearing.
Indeed -- more pressing, however, is the fact that MSIE does not
accept it. Damn it, will no one stop Microsoft from wreaking such
havoc??? Where are all the eWarriors who battle so fiercely over top-
posting?? If only we could channel their passion towards Microsoft's
maverickism and anti-social behavior...isn't non-W3C-compliance a more
serious breach of netiquette?
Jun 27 '08 #17

P: n/a
On May 3, 12:05 pm, "Jonathan N. Little" <lws4...@central.netwrote:
>

Because it's <slowly style="patronizing">special!</slowly>

Seriously, same reason we battle with it with CSS.
Well, yeah, but what the Dickens do they propose to achieve by such
digital dissent?? Glad their market share is under 75% this year....
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com
Jun 27 '08 #18

P: n/a
On May 3, 7:06 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
>

Well, you have noticed a site (bubble tooltips) that explains how to do
this stuff to your liking as you said in an earlier post. You need to
focus on one thing and perhaps you are diffusing your energies?
True, true...I really should be creating more content for my site
(Kontent is King!) but this DHTML business took over my soul last
month. But I'm learning, so I count all this as an overall positive
experience, however peripheral it may be. I'm thinking of somehow
grafting Ben's script onto it, since it works fine in Opera 9 and IE 7
as well as FF 2...I certainly prefer Ben's bubbles a bit more! =)
You can place a gif, or even an animated gif, in all sorts of places on
your webpage. It can appear not to have boxy dim by having transparent
edges. The question of how to so display such a thing on what trigger is
another issue and was being addressed by Ben.
Yes, you've all been most gracious and helpful. My site won't be up
until September-December, I'm afraid (you see how long it's taken me
just to even get to this present technologically primitive point!),
but I am definitely putting in a full page book-style acknowledgments
section.
--
dorayme
Jun 27 '08 #19

This discussion thread is closed

Replies have been disabled for this discussion.