I’m building a new GIS site for the county. My previous one depended on <frame> and <table>. Yes, I know, frames are a mess. I won’t be doing that again. The existing site is 7 years old. I am using <div>’s to paint the page and control content. This will be the first time I use <div>.
As screen size has increased, the need to present more data has as well. I’m running out of real estate (screen size wise). I like the ability to hover on a thread topic (at the SDMB) and return the few first sentences of the topic. Is that simply another <div> that pops on hover? I would like to include such a feature for data that I present, but magnify it for people that find the text to small. I would nest a .gif image of say a magnifying glass in the corner, and pop another <div> with the larger text? (my guess)
Can that be put in a .CSS file? I am also new to CSS. Is there a way for a hover event in CSS to fire a jscipt function? Or do I have to set up an event for the imbedded magnifier in a linked .js file (or in default.htm).
I guess the short question is, can a ‘onhover’ event in CSS call a jscript function? Is there a ‘timeout’ (SDMB times out after only a few seconds, don’t like that myself).
1-At the SDMB site, when you hover over a topic, does that just paint another <div>?
2-Can this call to that div be set up in .CSS? Can .CSS call jsript?
3-Or, should I set up an event handler in ‘default.htm’. (I’m using the jQuery library for AJAX, but that’s a different story).
(Yep, this question could and maybe should go in a more computer related site. But I like the way the hover works here. And you folks always have a quick answer for simple computer questions)
Just a quick note: <div> is just a block-level tag that has no further built-in display preferences or behavior. <span> is the same thing only with a default inline display instead of block display. I’m saying this because I’ve notices that people new to css/divs/etc can get the impression that they should use <divs> and <spans> for everything, while it’s much better (and easier) to use, for instance, <table> and <h1> and <p> for real tables, headers and paragraphs, respectively.
In the case of the SDMB, the hover texts are just TITLE attributes of the table cell containing the title:
<td title="this is the hover text"><a href="....">title of thread</a>....</td>
That will work with most html tags, but you can only use plain text in a title attribute, so if you want anything more you’ll have to use javascript.
That’s possible, yes.
Not in any standardized way (I think you can do it in Internet Explorer, but forget about getting it to work anywhere else). I’d suggest you check out some of the jQuery selector examples for ways of doing that easily.
You can’t link CSS to JavaScript (please also note: JScript is the Microsoft/Internet Explorer-specific variant of JavaScript). As I said, using jQuery (from a separate .js file) is probably the best way to go about it.
The timeout for TITLE attributes is browser dependent. If you write your own js code you can do whatever you want.
I think this http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm
will do at least some of what you want (not the magnifying part, but the popup on hover). You might also find other stuff on that site that fits your needs even better.
Not really. I just really wanted to know if a CSS mouseover could call javascript. I work for the GOV(Blazing Saddles, ref. Anyone?), and the existing site that I wrote has done very well. But is very dated. The GIS data to support the site is completely new. I’m GIS, and have to get that information out there.
The new site MUST do as much as the current one. But we have the ability to do much more. My boss actually said “No Dancing Monkeys” In other words, no flash. Data. I agree. (though I must find a .gif of a Dancing Monkey if he queries his property )
We are doing UPS replacements this weekend, and the site is probably down. I will post the link if it gets back up this afternoon.
With modern enough browsers, you CAN do this with CSS using the :hover selector. You’re basically looking at a CSS tooltip.
Essentially, you have a bunch of invisible divs with the tooltip texts hidden somewhere offscreen. Then you use :hover to reposition them next to the link when moused over.
Note that with all things HTML, you may run into problems with certain browsers.
ETA: This is only if you don’t want to use Javascript at all. If you do, you needn’t bother with this method; JS will give you more powerful popups.
Superfluous ParenthesesThank you for your well thought out response.
If I go the route to magnify the <div>…. I will paint the original <div> with a table containing the data. And also send that table to a hidden variable to the browser. I don’t want to make another call to the server.
On mouse over for my magnifier, I should be able to call the value of that hidden variable (the table) and paint it into the new magnified div window. I can use CSS to change the font size of that table. I think. Or I can change the size before I send if from the server. Hmmm…… I’ll change the size of the magnified table before I send it.
This is my second web site. I am actually getting a bit ahead of myself.
To bad that ‘time out’ is browser dependent. I may have to include another <div> in the magnified window as a simple X to close it. Nest it I guess.
Could you just use JavaScript’s native onmouseover event instead of tying it into CSS?
It’s conceivable that JS could monitor all your divs of a certain class for changes in CSS-caused display changes (such as a script that does something whenever a link changes color from CSS), but… that sounds like a headache.
I will look into this as well. But I am using Javascipt. The other API’s can’t do what I need. Re: calling the server and painting one div based on what XML is returned. AJAX.
If you want to go a quick and easy route, you can add the free Microsoft Ajax Control Toolkit to your project and use the Popup Control to do what you want.
Well, if you work for the Colorado government, and assuming this is a state government site, I’m sure you are aware that it has to be accessible. If basic functionality of the site requires Javascript, I’m sure aware you have to provide alternative access without scripting. Just sayin’.
)