Jump to content
Larry Ullman's Book Forums

Recommended Posts

Hi there!

 

I posted a question on the php6/Mysql forum a while back about making popup tooltips with content filled through a mysql database connection. I was pointed towards the ajax quick project book, and as near as can be.. it is almost ready for uploading to my isp's server. The project is to allow the user access to live popup tooltips over bible scripture containing the original greek/hebrew definitons from the Mysql database. The connection is through ajax.

 

I have a couple of enduring small problems...

I have a small form with three radio buttons linked to onchange handlers in the window.onload = init; function. They allow the selection of no markup, single character markup and dictionary subject_key superscript markup within the text on the page. It is this markup that acts as the triggers for the popup tooltips.

 

All I would like to be able to put together now is some kind of client side storage of the state of the users choice for the appearance of the markup (the radio buttons) . Enduring beyond the user's current session is preferable,.. but across tabs desirable and between pages in the browsing "lane" is essential. I have ruled out sessionStorage for this, and MS userData wouldnt work either as I would browse across folders. - Help?

 

The radio buttons appear on the page if ajax is supported. Can you help me with some advice and / or assistance on putting together something that will work on most browsers? I can happily rule out any that do not support ajax through XMLHttpRequest or ActiveX.

 

After that, I would like to be able to keep a clientside stored history list of popup's visited, but only through an onclick event, not the mouseover/mouseout. This can wait,.. but initial help with things stored client side would help a great deal!

 

Thanks for any help you can offer - I am finding javascript very confusing, (I much prefer ansi C) I know its a little off topic ajax wise, but it is a web site using ajax,.. and i could really use the help :)

 

Alex

Share this post


Link to post
Share on other sites
I posted a question on the php6/Mysql forum a while back about making popup tooltips with content filled through a mysql database connection. I was pointed towards the ajax quick project book, and as near as can be.. it is almost ready for uploading to my isp's server. The project is to allow the user access to live popup tooltips over bible scripture containing the original greek/hebrew definitons from the Mysql database. The connection is through ajax.

 

It would seem to me that Ajax would be a poor choice here (hopefully I wasn't the one that recommended it!). Tooltips need to be quickly responsive to be meaningful and I would worry that Ajax wouldn't be fast enough. Just a thought...

 

All I would like to be able to put together now is some kind of client side storage of the state of the users choice for the appearance of the markup (the radio buttons) . Enduring beyond the user's current session is preferable,.. but across tabs desirable and between pages in the browsing "lane" is essential. I have ruled out sessionStorage for this, and MS userData wouldnt work either as I would browse across folders. - Help?

 

Sounds like a perfect time to use cookies.

 

The radio buttons appear on the page if ajax is supported. Can you help me with some advice and / or assistance on putting together something that will work on most browsers? I can happily rule out any that do not support ajax through XMLHttpRequest or ActiveX.

 

You can use the title attribute within a span to add a tooltip to any piece of text. In fact, proper all-browser support would suggest that you do this always, and then you'd have no need to use Ajax at all. Just a thought...

 

After that, I would like to be able to keep a clientside stored history list of popup's visited, but only through an onclick event, not the mouseover/mouseout. This can wait,.. but initial help with things stored client side would help a great deal!

 

Keep in mind that local storage isn't reliably supported yet.

Share this post


Link to post
Share on other sites

Hi Larry,

The speed is not a problem, in fact its faster on the isp's server than on my own PC,.. the looping back though localhost in my host file adds a considerable lag on my pc with xammp. My isp stopped offering hosting some 5 years back and only provide it for customers who already had it before then, so its really zippy, and they recently upgraded their cgi too.

 

The actual tooltips themselves would be tricky to implement without ajax,.. they would require a redirect to another page for sure... They have several parts, the reference key, the original words in greek or hebrew (needs unicode) the word usage, origin, transliteration into english and the word's phonetic pronounciation as well as the dictionary definition. The data is not so long that it requires a long query with joins etc.. its a select query on the reference key as a unique index and its probably too tricky to fit into a title attribute, but not too large as to be slow and unwieldy. in size its comparable to the examples in the ajax quickproject book.

 

Choosing the "no markup" radio button makes the mouseovers redundant.. so it needn't slow down anyones session if it comes to that, 'user beware' I guess!

 

There isn't exactly any reason for the server to have access to the information i want to store, even with the history records. I can simply script a small iframe to display the relevant links on the fly. All I would need to store is say a php style imploded array seperated by a pipe character or somesuch.

 

For this reason I'd prefer to avoid cookies.. but If you could provide any help for a wrapper to implement an API over cookies that would help me mimic the localStorage functions I would need, that would be invaluable. I just have huge problems understanding what all this prototype nonsense is about! Sheesh, wouldn't I kill for C++ style classes!

 

Thanks for the swift reply...

 

Alex

Share this post


Link to post
Share on other sites

Larry makes a good point with the title attribute. That might be the simplest all-browser solution.

 

Also, I'm not sure of your implementation, but you could set up an onload event to grab all the phrases that should have tooltips on a given page (for example, search for all span elements with the "tooltip" class), grab the corresponding info from the database, return that data in CSV format (or whatever), and then store it in a JS object for ease of use on the client side. By doing so, only one Ajax request needs to be made per page. Of course, there is the downside of what to do if the user's browser doesn't support Ajax, which is where Larry's title attribute suggestion is starting to sound good again.

 

The good news about Ajax though is that most people's browsers will support it these days. If a user's browser doesn't, it's most likely because they manually disabled JS.

 

Also, if you're going to make an onload Ajax request, while you're at it, you could have a table in the DB that stores the "cookie" settings you want to persist across sessions, etc. However, instead of using Ajax for that, it might be best to just include that DB query in the initial PHP page load, that way, you don't need to rely on Ajax.

Share this post


Link to post
Share on other sites

Hi again,

 

Wouldnt parsing the whole document for the keys, performing a very disjointed set of "select" queries, parsing it into json and back, and then writing it into the right elements in the right order be a terror of a p vs np problem? I didnt store the reference key in my verses as the auto_increment primary key id. They are referenced by strongs number (a kind of alphabetical order) This allows easy linking of the word origins between different entries. Reparsing the whole database is an option... but arrrgh!

 

My approach is to use tooltips that i could style with css, I have not found this online anywhere else. I have it all up and running with one ajax object, and it seems fine in my test page. My approach is to have the radio buttons, a link to (currently three) scripts ajax.js .. sprytooltip.js and my "childfill.js" (the event handlers etc) and just one div tag at the foot of the page for the tooltip content.

This is great for me because I use dwt templates in dreamweaver and it helps me keep the code tidy and easy to follow.

 

Edit - I am altering an existing html site on a www.domain.com address, my cgi server is reachable at "cgi.domain.com" - I have tested ok that I can relax the documents domain property from www.domain.com to just ".domain.com" to let me use ajax without the same origin restrictions,.. but I would still like the site to be on the "www.domain.com" address. My hosting space is shared between the servers, so there is no real size restriction, (but I am not building a new site, just trying to add a little more functionality to an existing one.) I would really prefer not to re-write the whole site as a php driven entity! I'm sorry, should have said so before.

 

Are there any benchmarks comparing asynchronus ajax requests with normal html over http? If I have a site that can happily stream cd quality audio @ 192kbps how would my ajax request compare? (I can easily max out my 8Mb connection) I have had a quick search, no luck yet. After a few months (way back) of bloated MFC classes, there is a certain amount of plaster on my legs I learned to find bearable ;)

 

Anyway, things are about as compact as I can get them source-wise so far, any ideas on the wrapper for cookies?

 

Alex

Share this post


Link to post
Share on other sites

Well, why not just do what Larry suggestions and store the definitions in the title attribute? Then, you could use JS and CSS to style the tooltips and when they're displayed without making any DB queries at all.

 

As for the cookie wrapper, I'm not quite sure what you're getting at.

Share this post


Link to post
Share on other sites

Hi there,

 

I just tried to see if I could make a title attribute modified with an <h1> tag, but...

 

<p>some text has a <span title="<h1>just an h1 tag</h1>">title</span> with an html content.</p>

 

the tooltip simply shows "<h1>just an h1 tag</h1>" when hovering over the word "title" in the span. If the title attribute cant be styled by even having its own classname upon a tag, such as div or span, within the quotes... how would it work for me?

 

Oh, and by the wrapper, I would like to be able to have the same methods for local storage upon the cookies, so I could do something like this...

 

var myStorage = window.localStorage || new cookieWrapper();

 

then use myStorage.setItem("name",value); and other localStorage methods on top of cookies if localStorage is not supported.

 

Alex

Share this post


Link to post
Share on other sites

I think there are a variety of ways to handle this, but I think the title method that Larry suggested is the best, as it's guaranteed to work, even if the browser doesn't support JS.

 

Now, the question is, how do you style the title attribute text? Again, there are various ways, but you probably want to first start by being able to get the text in the title attribute. That can be done as follows:

 

<!DOCTYPE html>

 

<html lang="en">

 

<head>

 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 

<title>title attributes styling</title>

 

<style type="text/css">

 

.tooltip {

 

background: yellow;

 

border: #000000 solid 1px;

 

left: 300px;

 

position: absolute;

 

top: 200px;

 

width: 200px;

 

}

 

</style>

 

</head>

 

<body>

 

<p>And then God said, <span title="Original Hebrew: (Translation goes here.)">"Thou shalt not steal."</span></p>

 

<p>And then God also said, <span title="Original Hebrew: (Some other translation goes here.)">"Thou shalt not covet thy neighbor's wife."</span></p>

 

<script>

 

var i,

spans = document.getElementsByTagName('span'),

spansLen = spans.length,

tooltip;

 

for (i = 0; i < spansLen; i += 1) {

 

spans.onmouseover = function () {

 

tooltip = document.createElement('div');

 

tooltip.className = 'tooltip';

 

tooltip.innerHTML = this.getAttribute('title');

 

document.body.appendChild(tooltip);

 

};

 

}

 

</script>

 

</body>

 

</html>

 

I whipped this up real quick, so it's not complete at all. A few points:

 

1) Instead of using the same absolute positioning, you'll probably want to get the mouse coordinates, and base the position off of that, or perhaps the location of the span.

 

2) There doesn't seem to be any easy way to hide the default HTML title display. You could position your DHTML div over it, so as to hide it, or you could temporarily set the title to an empty string, and then restore it when the span is moused away from. I suppose a better option might be to test for JS support on page load, store all the span title text in a JS object, and then set all the titles to empty strings.

 

Anyway, those are my ideas. Any criticisms are welcome.

Share this post


Link to post
Share on other sites

Hiya,..

 

Its sure a workable idea. There are a couple of similar ideas ive seen elsewhere, an anchor had a nested span initially set to display: none. Ill have to look for it again. then, the anchor had its hover attribute fiddled to display the(empty) span, and the title attribute of that span then appeared as a tooltip. (i think - it was a while ago) I might go back to look for it. It did invole three or fourl different style settings.

 

On the other side, I have a small test page, here

I would like to be able to test it on a slower connection, but see what you think. If it isnt broken and all that...

 

I'll have to go back to my xml files and fiddle with some more php to combine all of the dictionary database with my markup generating script. Sounds a nasty job, There are 31102 verses in the bible and some 14000 different original language words, so Ill have to write a script to combine them before I add them to the page, but Ill save myself some webspace and keep the databases as they are and put the work in a script. It will drive me nuts Im sure !!

 

Always good to have a fallback.

Thanks.

 

Alex.

 

Ps. If you look at that test page, each ajax request is made with a sepeate call to ajax.open("get","http.....)

 

would i see a performance increase by using a single ajax open call with "post" and calling send more than once? - I could use it with setTimeout and clearTimeout so if its left inactive, a call to abort, then another call to open() as required would be used. Ideas?

Share this post


Link to post
Share on other sites

This is kinda tricky. I'm not used to dealing with these massive databases. I will say though, that if you want anyone to be able to view your site, being able to handle JS-disabled browsers is essential.

 

Like you said, if you have any easy way to match up all the database entries with the phrases that appear on the pages, then a script should be able to automatically populate all the necessary title attributes in spans (or whatever you decide to do).

 

Also, I tried playing with your test page, but it didn't work...or perhaps I didn't understand how to use it. Either way, it either needs to be fixed or really obvious how to use, or you will probably frustrate your users too. Keep in mind that I'm at work now, and forced to use IE6 here, so that could be an issue.

 

The more you talk about your issue, the more that always having the title attributes being up to date with the proper tooltip information in the actual content is probably the best idea. For one, you'll never have to make any Ajax calls to maintain everything. The tooltip information will all always be on the page, and like I suggested before, JS and CSS can be used together to change the appearance of things.

 

Also, you could make a backend (admin) tool for yourself, so that whenever you want to change/update a page, a script will automatically check all the tooltips, and ensure that they're all correct and up to date, as per the database of info.

 

Anyway, just my ideas, but curious to hear what you think.

Share this post


Link to post
Share on other sites

I can get the tooltips to work fine in ie9 , firefox 6.0.2 and chrome 13.07...

 

just select one of the two options (polyps or strongs) with the radio buttons and hover over the added markup.

If you dont see the radio buttons, then your browser doesnt support ajax.

 

The site is not an application-based web tool, more just a personal record of bible studies etc.. the tooltips will be helpful for me, and the tooltip data shouldnt change,.. at least it hasn't since it was written in the latter half of the 19th century.

 

But yes you're right. having a fallback in case the ajax isn't supported is a very good idea. I have a second free domain I can easily redirect to in case javascript or ajax is not supported.

 

It looks like being a busy time going back to those scripts. The bible verses were sourced from xml files and the dictionary definitions from a tricky combination of csv files, sqlite databases and the odd correction cut and pasted from the web,.. but I should be able to patch it together differently with a script like you suggest.

 

Once I have such an admin script together I will not have too much trouble, there are very few problems that there aren't solutions for re: the css styling of tooltips. Ive already seen a few answers.

 

This post originally started as a request for help with cross browser support for localStorage / cookies to help me remember the history of tooltips I had singled out by "pinning them" with a click rather than a hover. It would be nice for client side storage to be accessible through the same methods, whether localStorage or cookies are used. I am working my way through putting together some functions with a CookieWrapper class, but I have a few problems as I'm no javascript programmer.

 

thanks for the help, I would like to continue to concentrate on the javascript before I forget all the stuff Im doing!

 

What could I do if neither cookies or localStorage are enabled? I'm guessing I could make a server side session database with php, the ajax would certainly facilitate that. It has been a while since I visited sessions but I would require the history to be there on my next visit... So either the history is available to everyone or I have to make a log in page which I was hoping to avoid doing . It's daft to think I have to log in to my own site when almost no-one else visits it!

 

 

Alex

Share this post


Link to post
Share on other sites

Even though I can't stand IE6 at work, it does support Ajax. I know that for sure, as many sites I have made using Ajax work fine from this computer.

 

Also, I was able to get the radio buttons to display, but it wasn't clear how to get the tooltips to display. On most sites that do what you want to do, they generally highlight the text, so that it's obvious that it's special text.

 

And yeah, given your situation, I think your first priority is to organize all the data and get it all together into one solid database.

 

After you do that, everything should be a breeze.

Share this post


Link to post
Share on other sites
What could I do if neither cookies or localStorage are enabled? I'm guessing I could make a server side session database with php, the ajax would certainly facilitate that. It has been a while since I visited sessions but I would require the history to be there on my next visit... So either the history is available to everyone or I have to make a log in page which I was hoping to avoid doing . It's daft to think I have to log in to my own site when almost no-one else visits it!

 

If neither cookies or local storage are available, you could create a session-like database, yes, but then you'd have to append the session ID to every page so that the session ID is stored in the client's history and is usable again when the page is next viewed. You cannot use real sessions for this, as real server-side sessions are only intended to last for a short time.

Share this post


Link to post
Share on other sites
On the other side, I have a small test page, here I would like to be able to test it on a slower connection, but see what you think.

 

I know this post is three weeks old, but in case you're interested: I still have a 56kb connection to the Internet (you can't find slower than that!), and your test page works fine for me. I tested both radio buttons, and the definitions appear when I hover over the different words. People used to 8 Gb Internet connexions would probably find it a bit slow, but for me it's fine.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×