PDA

View Full Version : HTML\CSS Java



i3nb
Mar 2nd, 2012, 09:51 PM
Hi,

I'm trying to add a information icon with text when hovering over it, on some pages how can I go about adding this? I've looked around haven't found anything.

dan-dan
Mar 2nd, 2012, 10:03 PM
If you don't want a basic HTML title, I'd look at javascripts display/hide element onmouseover.

If you don't want to do the painful work yourself, you'd probably find something decent looking with JQuery!

felgall
Mar 2nd, 2012, 10:28 PM
Why do people recommend adding the humongous jQuery file to web pages to do things that can be done in a dozen JavaScript statements or less without jQuery and still need almost as many statements added to the many thousands of lines of JavaScript that jQuery itself has in it.

dan-dan
Mar 2nd, 2012, 10:38 PM
Why do people recommend adding the humongous jQuery file to web pages to do things that can be done in a dozen JavaScript statements or less without jQuery and still need almost as many statements added to the many thousands of lines of JavaScript that jQuery itself has in it.

Cross browser compatibality and creative flair are the two things which jump straight to mind. Also familiarity (clients view) and simplicity.

i3nb
Mar 2nd, 2012, 11:11 PM
How can I add this to my page, and correctly aline it?

dan-dan
Mar 2nd, 2012, 11:47 PM
OK, what you're after are 'tooltips'.

I found what appears to be what you want on this site http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/ (http://http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/)... Look at 11 > Jtip.

The site this actually links to doesn't seem so clear as to the source code, sorry.

I hope this helps though. Just search for tooltips!

felgall
Mar 3rd, 2012, 12:01 AM
Cross browser compatibality and creative flair are the two things which jump straight to mind. Also familiarity (clients view) and simplicity.

Bloated, overly complicated, uncreative is what springs to my mind in this particular case.

It is all very well using a library like that if you are writing large complicated scripts that will use a decent fraction of the actual library but it is way overkill for something as simple as a tooltip script where the code you need in order to produce one using JQuery is almost as long as the code you need if you don't use jQuery (not counting the 42k of minified code you need to load simply in order to use jQuery in the first place).

Using jQuery to add a tooltip is like typing a saturn five booster to a plastic bucket you are using to hold water in order to avoid using a metal bucket. It makes sense to tie a saturn five to a moon rocket but it doesn't make sense when it is a bucket. A tooltip script has the level of complexity of a bucket in so far as scripts are concerned.

The following small piece of code will allow you to use any hidden piece of HTML from your page as a tooltip without needing a substantial portion of the code plus the jQuery library in order to make the page take three times as long to load and do the same thing. (The functions in the first two lines take care of all the cross browser processing you are proposing using jQuery to provide).


function pw() {return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth}; function ph() {return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight}; function obH(oi) {var obj = document.getElementById(oi); return obj.offsetHeight || obj.clip.height || 0;} function mX(evt) {return evt.clientX ? evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) : evt.pageX;} function mY(evt) {return evt.clientY ? evt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) : evt.pageY}
function sX() {return window.pageXOffset ? window.pageXOffset : document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;} function sY() {return window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;}
function popUp(evt,oi) {if (document.getElementById) {var wp = pw(); dm = document.getElementById(oi); var xs = sX(); var ys = sY(); var oh = obH(oi); ds = dm.style; st = ds.visibility; ew = dm.offsetWidth || dm.clip.width || 0; if (st == "visible" || st == "show") { ds.visibility = "hidden"; } else {tv = mY(evt) + 30; lv = mX(evt) - (ew/4); if (lv < (xs + 2)) lv = xs + 2; else if (lv + ew > wp + xs) lv = wp + xs - ew - 20; if (tv + oh + 30 > ph()+ys) tv = tv - oh - 50; lv += 'px'; tv += 'px'; ds.left = lv; ds.top = tv; ds.visibility = "visible";}}}

dan-dan
Mar 3rd, 2012, 12:20 AM
If someone were to post 'How do I get javascript to produce custom tooltips on hover with HTML/CSS I have produced', I'd prob post a link to this thread!

However, if you re-read this thread you'll see what I'm trying to offer the OP, based on what he seems to already know about web development.

i3nb
Mar 3rd, 2012, 02:31 AM
A question

I added my header that says I'm using java how would I define and add my link?

<a href="#" onmouseout="popUp(event,'bn')"onmouseover="popUp(event,'bn')" onclick="return false">

<div id="bn" class="tip"><table align="center" width="250" border="0" cellspacing="0" cellpadding="5" bgcolor="#008cff"><tr><td valign="bottom" align="center"> <img src="images/info.gif" width="250" height="90" border="0" alt="" /></td></tr><tr><td valign="bottom" align="center">Please visit my site</td></tr></table>

Just seem to get errors.