innerHTML?

Discussion in 'Javascript' started by PlainDave, Dec 9, 2005.

  1. PlainDave

    PlainDave Guest

    Hi all,

    I'm new to javascript, so please be gentle. :) I have a "tooltip"
    script that I found somewhere, and I want to add html tags, links, etc.
    to the tooltip window. I already use a couple of tooltip.js type files
    in other sites, but I'm trying to learn. I'm assuming that it involves
    innerHTML? Here's the html with the script, and thanks for any
    info/advice.

    PlainDave

    <html>
    <head>
    <title>
    Bible Fellowship Events Calendar - printable version
    </title>

    <style type="text/css">
    <!--
    BODY {
    color: #000;
    background-color: #fff;
    font-family: Tahoma, Helvetica, Sans Serif;
    text-align: left;
    margin-left: 2px;
    margin-right: 2px;
    }
    li {
    background-color: #fff;
    color: #000;
    font-family: Tahoma, Helvetica, Sans Serif;
    font-size:13px;
    font-weight:normal;
    text-align:left;
    margin-bottom:9px;
    margin-left:-14px;
    line-height:109%;
    list-style-position: inside;
    list-style-type: disc;
    }
    ..nonmonth {
    background-color: #fff;
    height=100px;
    width:14%;
    text-align:right;
    vertical-align:top;
    color: #ddd;
    font-family: Tahoma, Helvetica, Sans Serif;
    font-size:17px;
    font-weight:bold;
    }
    ..datenumber {
    background-color: #fff;
    color: #000;
    height=100px;
    width:14%;
    text-align:right;
    vertical-align:top;
    font-family: Tahoma, Helvetica, Sans Serif;
    font-size:17px;
    font-weight:bold;
    }
    ..events {
    background-color: #fff;
    color: #000;
    font-family: Tahoma, Helvetica, Sans Serif;
    font-size:13px;
    font-weight:normal;
    text-align:left;
    }
    div.events {
    float:left;
    margin-left:-23px;
    width:155;
    height:2;
    }
    table.cal {
    width:100%;
    cellpadding:3;
    cellspacing:0;
    border:1px solid black;
    border-collapse: collapse;
    background-color: #fff;
    }
    td {
    border:1px solid black;
    background-color: #fff;
    }
    td.weekday {
    background-color: #fff;
    color: #000;
    font:17px Tahoma, Helvetica, Sans Serif;
    width:14%;
    text-align:center;
    vertical-align:middle;
    font-weight:normal;
    padding: 2px 0 2px
    }
    /*
    tr {
    height=100px;
    }
    */
    li.youth {
    background-color: #fff;
    color: #000;
    font-family: Tahoma, Helvetica, Sans Serif;
    font-size:13px;
    font-weight:normal;
    text-align:left;
    }
    ..menu {
    font: 9px Tahoma, Helvetica, Sans Serif;
    color: #000;
    background-color: #fff;
    padding:2px;
    vertical-align: middle;
    text-align:left;
    text-decoration:none;
    height:1px;
    width:10px;
    cursor:help;
    border: 1px solid #c30;
    }
    ..tip {
    color: #000;
    background-color: #fff;
    height=1px;
    text-decoration:underline;
    }
    ..toolTip {
    color:#000;
    background-color: #dff1ff;
    border-top: 1px solid #ddd;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    border-left: 1px solid #ddd;
    text-align: left;
    font-weight:normal;
    position: absolute;
    padding: 6px;
    font-family:Georgia,Verdana,Arial,Helvetica,sans serif;
    font-size:80%;
    font-variant:normal;
    width: 250px;
    text-decoration : none;
    }
    ..more {
    cursor:hand;
    color:blue;
    }
    div.questions {
    color:#03f;
    background-color:white;
    float:left;
    margin: -21, 5px;
    font: normal normal normal 10px Tahoma;
    text-align: right;
    font-face:Tahoma, Arial, Helvetica;
    letter-spacing:0.2em;
    text-decoration:none;
    }
    a, a:link {
    text-decoration:none;
    }
    a:hover {
    text-decoration:underline;
    }
    -->
    </style>

    <!-- START OF TOOLTIP JAVASCRIPT -->
    <script type="text/javascript">

    // The tool tip is created and referenced as a global object.
    var tipDiv;
    function genToolTip()
    {
    if (document.createElement) {
    tipDiv = document.createElement('div');
    document.body.appendChild(tipDiv);
    tipDiv.appendChild(document.createTextNode('initial text'));
    tipDiv.className = 'toolTip';
    tipDiv.style.display = 'none';
    }
    }

    window.onload = genToolTip;

    function showTip(e, txt)
    {
    if ( tipDiv ) {
    var e = e || window.event;
    var xy = cursorPos(e);
    tipDiv.firstChild.data = txt;
    tipDiv.style.left = (xy[0] + 15) + 'px';
    tipDiv.style.top = (xy[1] + 3) + 'px';
    tipDiv.style.display = '';
    }
    }

    function hideTip()
    {
    if ( tipDiv ) {
    tipDiv.style.display = 'none';
    }
    }

    // Based on quirskmode 'get cursor position' script
    function cursorPos(e){
    if (e.pageX || e.pageY) {
    return [ e.pageX, e.pageY ];
    } else if (e.clientX || e.clientY) {
    return [
    e.clientX + document.body.scrollLeft,
    e.clientY + document.body.scrollTop
    ];
    }
    }
    </script>
    <!-- END OF TOOLTIP JAVASCRIPT -->

    </head>
    <body>

    <div class="events">
    <ul>
    <li>Thursday night Men's Bible Study has been cancelled until sometime
    in January. We'll keep you posted.
    <a onmouseover="showTip(event,'Thursday night Men\'s Bible Study has
    been cancelled temporarily and will resume sometime in January. We\'ll
    keep you posted. If you have any questions, feel free to email Dave
    (Dave\'s email address can be found at the bottom of this page).')"
    onmouseout="setTimeout('hideTip()', 100);"><span
    class="more"><u>More...</u></span></a>
    </li>
    </ul>
    </div>
    </body>
    </html>
    PlainDave, Dec 9, 2005
    #1
    1. Advertising

  2. PlainDave

    Guest

    Try changing

    tipDiv.firstChild.data = txt;

    to

    tipDiv.innerHTML = txt;
    , Dec 9, 2005
    #2
    1. Advertising

  3. PlainDave

    PlainDave Guest

    Thanks! That's exactly what I was looking for. It works great! Now, if
    only I can find the time to learn some javascript. The possibilities
    seem endless.

    PlainDave
    PlainDave, Dec 10, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul
    Replies:
    1
    Views:
    3,200
    bruce barker
    Aug 4, 2003
  2. L Anthony Johnson
    Replies:
    4
    Views:
    7,938
    Michael van den Berg
    Jun 16, 2005
  3. =?Utf-8?B?am9obmRvZUBkcml2ZXIubmV0?=

    BUG: Setting Server Control's InnerHtml forces Constructore to be called.

    =?Utf-8?B?am9obmRvZUBkcml2ZXIubmV0?=, Feb 22, 2004, in forum: ASP .Net
    Replies:
    10
    Views:
    1,516
    Guest
    Feb 24, 2004
  4. m miller

    innerhtml manipulation

    m miller, Mar 2, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    3,510
    m miller
    Mar 5, 2004
  5. sonic
    Replies:
    5
    Views:
    280
    Randy Webb
    Jul 11, 2006
Loading...

Share This Page