SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    floating help display

    I have a question that's kind of vague...
    I'm in the process of designing an interface for something that requires displaying plenty of help for the user. I don't have that much space to work with on the page but need somewhere to display little help "blurbs" that would be invisible unless a user clicks on a relevent help link or image. Essentially, I'd like the link to pop up a floating blurb WITHOUT opening a new window. Kind of that annoying little MS office assitant dude (who'se sometimes helpful)

    I know this is probably a css dhtml thing but my searches for examples or tuts have thus far proved fruitless.
    Can anyone point me in the right direction? If I see a good example I could probably figure out how it's done.
    Thanks!
    David

  2. #2
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use this method:

    #left a span {
    display : none;
    }
    #left a:hover span {
    display: block;
    position: absolute;
    top: 0px;
    left: 140px;
    width: 180%;
    height : auto;
    padding : 5px;
    z-index: 100;
    font: 0.6em Verdana, sans-serif;
    text-align: justify;
    }

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hurricane. I'm having some trouble getting that to work. could you show me an example?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's something I've used in the past similar to the above post. You might be able to use some of it.

    It will only work in newer browers (Ie6, mozailla 1.2+) so it may not be much use to you.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    p#tips a:link {
     text-decoration:none;
     border-bottom:1px dashed green;
     color: #FF0000;
    }
    p#tips a:hover {
     color: #666666;
     background: #FFFFCC;
     text-decoration: none;
    }
    p#tips a span {display: none;}
    p#tips a:hover span {
     display: block;
     position: absolute;
     top: 50px;
     left: 10%;
     width: 200px;
     padding: 5px;
     margin: 10px;
     z-index: 100;
     color: #0000CC;
     background: #FFFFCC;
     font: 10px Verdana, Arial, Helvetica, sans-serif;
     text-align: center;
     border: 1px solid #666666;
     text-decoration: none;
    }
    </style>
    </head>
    <body>
    <p>This is some text</p>
    <p id="tips">This is some text :<a href="javascript:void();"> <strong>Mouse over 
      here </strong><span> (This is the help text that will be displayed on rollover 
      in compliant browsers : This is the help text that will be displayed on rollover 
      in compliant browsers. This is the help text that will be displayed on rollover 
      in compliant browsers : This is the help text that will be displayed on rollover 
      in compliant browsers. ) </span></a> this is some more text:</p>
    </body>
    </html>
    You can also use the title attribute to give small amounts of help to a paragraph etc.

    e.g.
    Code:
    <p title="this is a small amount of text ; this is a small amount of text"><strong>Hold your Mouse over me</strong></p>
    Hope this is of some use.

    Paul

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, That looks like it will work perfectly! I appreciate you putitng in the time to paste the code.
    Cheers,
    David

  6. #6
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Same way as above, and more here:
    http://www.meyerweb.com/eric/css/edge/popups/demo.html

    You can change any of the positioning or styling settings to suit your needs.

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooooh... another way to get things done. It seems like with both methods there's plenty of room for getting my problem solved and playing too. Much appreciated, Eric.
    Btw, your site seems filled with future css tips. thanks!

  8. #8
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It ain't my site - just where I got the CSS from

  9. #9
    SitePoint Zealot
    Join Date
    Jan 2001
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry...I don't know why I just assumed it was your site.

  10. #10
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wish I knew half of what Eric Mayer knows


Bookmarks

Posting Permissions

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