Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: HTML\CSS Java

  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML\CSS Java

    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.
    Attached Thumbnails Attached Thumbnails HTML\CSS Java-htmlpic.png  

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    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!

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Quote Originally Posted by felgall View Post
    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.
    Last edited by dan-dan; 03-02-2012 at 09:42 PM.

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How can I add this to my page, and correctly aline it?

  • #6
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    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/... 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!

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by dan-dan View Post
    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).

    Code:
    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";}}}
    Last edited by felgall; 03-02-2012 at 11:07 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    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.
    Last edited by dan-dan; 03-03-2012 at 11:13 AM.

  • #9
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •