Want to have a box or bubble pop up with additional information
TheBicyclingGuitarist
there is a quotation of mine from May 13, 2008: "When you ride over
sharps, you get flats!" It has been very well received and it is the
title of my next album and possibly my autobiography, uh, make that
bicyclebiography.
I have a few lines of explanation about this quotation exploring
metaphysical philosophical issues it pertains to. There's really not
enough for a separate page, but too much to add to the home page.
Is there a non-Java non-Flash valid HTML way to have a box or bubble
pop up when someone hovers over the quotation, said box or bubble
having the few lines of explanation in it? If I have to, I'll create a
separate page, but I'd rather have the little bits of explanation
available to those who are interested without their having to leave
the page and without cluttering the page up by adding it to the main
content that is always displayed.
Any ideas? Thanks in advance.
The Bicycling Guitarist
dorayme
<d4f833e4-69ef-4226...@26g2000yqk.googlegroups.com>,
TheBicyclingGuitarist <Ch...@TheBicyclingGuitarist.net> wrote:
How about starting this discussion with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Pop up in CSS</title>
<style type="text/css">
span {display: none; font-size: .9em; padding: 20px; color: #c00;
border: 1px dotted; background: #ffc; text-decoration: none;}
div:hover span {display: block; position: absolute; top: 2em; left:
18em; width: 15em;}
</style>
</head>
<body>
<div>Text needing more explanation<span> explanation popping up on
hover</span>
</div>
</body>
</html>
And then there is IE...
--
dorayme
TheBicyclingGuitarist
> In article
> <d4f833e4-69ef-4226-99cb-bc1ebf4c2...@26g2000yqk.googlegroups.com>,
> > Is there a non-Java non-Flash valid HTML way to have a box or bubble
> > pop up when someone hovers over the quotation, said box or bubble
> > having the few lines of explanation in it? If I have to, I'll create a
> > separate page, but I'd rather have the little bits of explanation
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=utf-8">
> <title>Pop up in CSS</title>
> <style type="text/css">
> span {display: none; font-size: .9em; padding: 20px; color: #c00;
> border: 1px dotted; background: #ffc; text-decoration: none;}
> div:hover span {display: block; position: absolute; top: 2em; left:
> 18em; width: 15em;}
> </style>
> </head>
> <body>
> <div>Text needing more explanation<span> explanation popping up on
> hover</span>
> </div>
> </body>
> </html>
>
> And then there is IE...
>
> --
>
> - Show quoted text -
Thanks dorayme! I will experiment with that code and possibly even
look for workarounds for IE. You mean IE *still* doesn't render valid
HTML or CSS properly? WIll they ever? I'm glad a lot of people are
using Firefox and other browsers nowadays. I won't try too hard to
cater to Microsoft's proprietary stubbornness.
dorayme
<25f14ee0-2b9a-4d9d...@d15g2000prc.googlegroups.com>,
TheBicyclingGuitarist <Ch...@TheBicyclingGuitarist.net> wrote:
> Thanks dorayme! I will experiment with that code and possibly even
> look for workarounds for IE. You mean IE *still* doesn't render valid
> HTML or CSS properly? WIll they ever? I'm glad a lot of people are
> using Firefox and other browsers nowadays. I won't try too hard to
> cater to Microsoft's proprietary stubbornness.
Oh, there are all sorts of workarounds, IE 6 does not do hover on other
than links... truth is I have no time right now... but I will be back!
--
dorayme
TheBicyclingGuitarist
>
> Oh, there are all sorts of workarounds, IE 6 does not do hover on other
> than links... truth is I have no time right now... but I will be back!
>
> --
>
> - Show quoted text -
Yay! Okay, I've played with the code about five minutes. What I have
is close to what I want, but maybe the positioning could be improved
somehow. Does it have to be absolute, or maybe I could somehow "float"
the <span>explanation</span> next to the paragraph of text it
explains? The popup works in IE7 for me. If there are easy workaround
for IE6 then perhaps I'll implement them. How's it look? (Forget about
the philosophical opinion expressed. That's another matter
altogether.)
I don't want to create a link that will end up being a dead link
someday, so humor me on finding the page. This experimental version is
the index.htm of my web site, but with a "2" added to the filename,
i.e. index2.htm. My web site is www.TheBicyclingGuitarist.net/index.htm
so just add a "2" after the index before the dot htm please.
Opinions always welcome, even about the philosophical view expressed
but especially about ways to improve the HTML or CSS code.
TheBicyclingGuitarist
flats as in flat tires, flats as in musical notes...too mixed up. I
won't use the explanation after all this time but I am glad to know
how to do it if I ever want to. Thanks dorayme. I'll leave the
"index2.htm" page up for a couple days for giggles, then it's outta
here. Peace TBG
Bart Lateur
>You mean IE *still* doesn't render valid
>HTML or CSS properly? WIll they ever?
Well, since most people *still* use the same old browser, namely, MSIE6,
you have no reason to expect things to change for them...
It works in a more recent version of MSIE, in my case MSIE8, I tried it.
--
Bart.
Adrienne Boswell
<Ch...@TheBicyclingGuitarist.net> writing in news:b1c16c10-f7a8-40bd-
bb10-b5a...@l5g2000pra.googlegroups.com:
The only problem I am seeing is that I had to scroll down to see the
entire popup. Of course, when I went to do that, it disappeared. No
problem getting it back, though, after I had done that. Maybe bring it
up a notch or two?
--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
dorayme
Adrienne Boswell <arb...@yahoo.com> wrote:
> Gazing into my crystal ball I observed TheBicyclingGuitarist
> <Ch...@TheBicyclingGuitarist.net> writing in news:b1c16c10-f7a8-40bd-
> bb10-b5a...@l5g2000pra.googlegroups.com:
...
> www.TheBicyclingGuitarist.net/index.htm
...
>
> The only problem I am seeing is that I had to scroll down to see the
> entire popup. Of course, when I went to do that, it disappeared. No
> problem getting it back, though, after I had done that. Maybe bring it
> up a notch or two?
Our BP is worried it will cover his feet. So I diagnose a foot fetish
condition! <g>
By the way or not, BP, if you are going to have a hover to explain more
about a specific piece of text, it seems wrong to let such a big area
trigger it.
And, if you are going to expand philosophically, do so! Go on at length
and develop your view and forget about this semi-annoying pop up (the
hover ones are always a bit like this - unlike the nice js *windows*
that stay there usefully for various purposes.). Be bold and simply add
"and read more, MUCH MORE, about this matter..." and make it a link to
your thesis. Put a form on the linked page - that should take up a bit
of space if you run out of things to say - so people can criticize it.
<g>
--
dorayme
TheBicyclingGuitarist
> In article <Xns9C72732A84F3arbpenyahoo...@188.40.43.213>,
> "and read more, MUCH MORE, about this matter..." and make it a link to
> your thesis. Put a form on the linked page - that should take up a bit
> of space if you run out of things to say - so people can criticize it.
Thanks Adrienne Boswell and dorayme about the foot feetish. I nudged
it up a bit.
Forms are a really good idea for my web site to make it more
interactive! I'd put them on more than one page of my site IF I knew
how to do it! I've peeked a few times at what I could find on how to
learn how, and shied away each time. I did find that many so-called
forms out there are not valid code. I'll look again to see if I can
learn how to do this thing. I put a doctype on my pages and run them
through a validator to check them, but if not for the help of
newsgroups like this my site would suck a lot more. Peace TBG
Henry Soszynski
Greetings,
I quite like this popup and have used it on my
website in one or two places. However I have noticed that the popup in
some places goes off the page, and I don't know how to fix it, if
indeed it is fixable. Some minor tweaking on my part was to no avail,
and unfortuantely that is the limit of my expertise.
An example can be found here..
http://www.uq.net.au/~zzhsoszy/ips/r/ramgarh_haryana.html
hover over 'sikh suzerainty' and presumably you will see that half the
popup is off the page, whereas the next popup is just fine. Hover over
Ramgarh in the line 'son of Mian Surat Chand, and founder of Ramgarh'
Any help or related comments would be appreciated.
Kind regards,
Henry Soszynski