473,320 Members | 2,193 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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

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
18 1333
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Nonoy of Philippines | last post by:
Hello, guys... I'm just starting to develop web applications and I have this problem regarding Session objects At some parts of my application, I open modal dialog window which also opens...
0
by: Hector | last post by:
I have a ComboBox set up in a non-modal form. When a selection is made from the ComboBox, the handler code closes the form, but then the system crashes because of an unhandled NullReferenceException....
3
by: Andrew | last post by:
I get a Null Reference Exception if I close a non-modal dialog (that is, a form opened with Show()) when a selection is made from a ComboBox. The error message refers to Unsafe Native Methods, but...
8
by: Stephen Rice | last post by:
Hi, I have a periodic problem which I am having a real time trying to sort. Background: An MDI VB app with a DB on SQL 2000. I have wrapped all the DB access into an object which spawns a...
5
by: jacquesvdz | last post by:
Hi Hope you guys can help me with this? I live in a house with 10 people.In the beginning wehn there were only two people, I gave them my password for the use of my pc. But since I got...
23
by: Chukkalove | last post by:
Im sorry, I dont know the correct description for a hierarchy of parent and child forms. I have a main form that opens a child form modally. This child form in turn opens it's own child form...
2
by: Mike | last post by:
Hi, I'm having a problem with modal forms on windows. I've written a very short test program, with a main window and a form called from the main window. The form is set to modal with...
4
by: John Kotuby | last post by:
Hi all... I am bulding an application and wish to use custom Modal dialog windows. According to a couple of recent articles I have seen, the newer Mozilla browsers (actually I think they said...
2
by: =?Utf-8?B?TmF0aGFuIFdpZWdtYW4=?= | last post by:
Hi, I am wondering why the .NET Framework is quite different from Win32 API when it comes to displaying system modal message boxes. Consider the four following types of system modal message...
18
by: Prisoner at War | last post by:
On May 2, 4:31 pm, Ben C <spams...@spam.eggswrote: I found this code at http://colorado-springs.pm.org/balloonHint.html but the site doesn't seem to provide a working example! Yeah,...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.