Web Analytics Made Easy -
StatCounter javascript in a tooltip - CodingForum

Announcement

Collapse
No announcement yet.

javascript in a tooltip

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • javascript in a tooltip

    Hi
    I was wanting a Javascript on my website to disply this other Javascript which I cant edit here

    <script language="JavaScript" type="text/javascript" src="http://www.enemydown.co.uk/ed_clanrank.php?ladder=4&clan=1325"></script>

    and I was wondering if you could give me some help in putting it into the script (http://www.walterzorn.com/tooltip/tooltip_e.htm that one) He says that you should do this in order for a script to show up inside the tooltip

    "Alternatively, instead of a string, return escape() accepts a variable defined elsewhere -
    example: onmouseover="return escape(text1)"
    - or even a function call -
    example: onmouseover="return escape(TooltipText())" .
    Variables or functions should be defined in a separate JS file or a <script> block within the <head> section, and might be useful, for instance, to facilitate having identical text for several tooltips. Even the irregularities with non-alphanumeric characters and with quotes (see point 3 and 4) needn't to be regarded anymore. Therefore, it's also less critical to include text that has been created dynamically on the server. "
    But iam not to sure how to do that. PLease can you show me how to make my script pop up when you hover over a link and the rank information is diplayed
    thank you

  • #2
    Keep it simple, use title attribute.
    If you REALLY need to customize the appearance and/or behaviour, do it the right way: www.klproductions.com/kltooltips.html
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

    Comment


    • #3
      what is and and how do i use attributes?

      Comment


      • #4
        This has worked for me


        <script>
        //-----------------------TOOL_TIP---------------------------------------------------------------
        if (!document.layers&&!document.all)
        event="test"
        function showtip(current,e,text){
        if (tips)
        {if (document.all){
        thetitle=text.split('<br>')
        if (thetitle.length>1){
        thetitles=''
        for (i=0;i<thetitle.length;i++)
        thetitles+=thetitle[i]
        current.title=thetitles
        }
        else
        current.title=text
        }

        else if (document.layers){
        document.tooltip.document.write('<layer bgColor="white" style="border:1px solid black;font-size:12px;">'+text+'</layer>')
        document.tooltip.document.close()
        document.tooltip.left=e.pageX+5
        document.tooltip.top=e.pageY+5
        document.tooltip.visibility="show"
        }}//end if tips
        }
        //-----------------------HIDE_TIP---------------------------------------------------------------
        function hidetip(){
        if (document.layers)
        document.tooltip.visibility="hidden"
        }
        //-----------------------TOOL_TIP_DEFINITIONS---------------------------------------------------------------
        var tips=true;
        var comment_tip="well here is a tip 4 u";
        </script>
        <table>
        <tr><td><input type=radio value="comment" name="my_comment" onMouseover="showtip(this,event,comment_tip)" onMouseout="hidetip()"><font color="#000000">comment</td></tr>
        </table>


        ez
        Animation Rule #64
        Poor quality images are often artistic,
        Poor quality sound is ALWAYS annoying.

        Comment


        • #5
          Originally posted by tsclan
          what is and and how do i use attributes?
          RTFM: http://www.w3.org/TR/html4/struct/gl...tml#adef-title
          Vladdy | KL
          "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

          Comment


          • #6
            ez4ne12c

            I tried that script and it didnt seeem to work for me sorry

            I still cant get the script
            <script language="JavaScript" type="text/javascript" src="http://www.enemydown.co.uk/ed_clanrank.php?ladder=4&clan=1325"></script>
            to show up on a tooltip I have found here
            http://www.klproductions.com/kltooltips.html

            can anyone show me who to display it in the tooltip

            I see Vladdy has given me a link to another site with another toolip I could use but I could not see the option to put a script inside the tooltip

            I have put <script language="JavaScript" type="text/javascript" src="http://www.enemydown.co.uk/ed_clanrank.php?ladder=4&clan=1325"></script> into a "Var" and then call it in the html but that doesnt work either

            Ideas and help would be greatly appreciated
            thank you

            Comment


            • #7
              Hi,
              I guess im not sure what you want to do, do you want to explicitly display the text
              <script language="JavaScript" type="text/javascript" src="http://www.enemydown.co.uk/ed_clanrank.php?ladder=4&clan=1325"></script>
              as a tooltip, cause that definitely works for me

              OR do you somehow want the tooltip to execute the script?

              The tooltip will display the text vut i dont think i could get it to execute the script

              ez
              Animation Rule #64
              Poor quality images are often artistic,
              Poor quality sound is ALWAYS annoying.

              Comment


              • #8
                If I understood you correctly...

                <head>
                <script language="JavaScript" type="text/javascript" src="http://www.enemydown.co.uk/ed_clanrank.php?ladder=4&clan=1325"></script>
                </head>

                The php script should generate javascript statement like:

                var tooltipMsg = "blah blah blah";

                then in your html: (using the original tooltip script)

                onmouseover="return escape(tooltipMsg)"
                Glenn
                vBulletin Mods That Rock!

                Comment


                • #9
                  In reply to ez4ne12c I am wanting the script

                  <script language="JavaScript" type="text/javascript" src="http://www.enemydown.co.uk/ed_clanrank.php?ladder=4&clan=1325"></script>

                  exacutedand showing up on the tooltip. I dont want simply the this popping up <script language="JavaScript" type="text/javascript" src="http://www.enemydown.co.uk/ed_clanrank.php?ladder=4&clan=1325"></script>" in text form.

                  The only reason I thought I was possible was that on the guys website (http://www.walterzorn.com/tooltip/tooltip_e.htm) He says this about adding scripts

                  5. Tooltip content via variables or funktion calls
                  Alternatively, instead of a string, return escape() accepts a variable defined elsewhere -
                  example: onmouseover="return escape(text1)"
                  - or even a function call -
                  example: onmouseover="return escape(TooltipText())" .
                  Variables or functions should be defined in a separate JS file or a <script> block within the <head> section, and might be useful, for instance, to facilitate having identical text for several tooltips. Even the irregularities with non-alphanumeric characters and with quotes (see point 3 and 4) needn't to be regarded anymore. Therefore, it's also less critical to include text that has been created dynamically on the server.
                  He does say something about defining the variable or functions in the head which is what "glenngv" has done but all that does is exacutes the script before the tooltip making it show up when I dont want it to show up there I want it to show up in the tooltip
                  I hope that clears a few things up But thanks so much for helping me this far
                  Thank you

                  Comment


                  • #10
                    What do you mean "script executed"?
                    A script linked to a page is either a set of functions which are being executed when called or attached to an event (good programming practice), or a set of instructions that are executed when the script is loaded (bad coding practice).
                    In either case, there has to be either a variable that stores a string or a function that returns a string which you want to use as a tooltip. Without knowing what it is and how it is organized it is impossible to help you.
                    I know that my tooltips will work when you dynamically set the element's title attribute (before initialization of my script):
                    document.getElementById('elementThatHasTooltip').title=tooltipText;
                    or element's tooltip attribute (after initialization of my script):
                    document.getElementById('elementThatHasTooltip').tooltip=tooltipText;
                    It is up to you, when and how you decide to do it.
                    Vladdy | KL
                    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

                    Comment


                    • #11
                      This is the output of the php script. I put the statements in newline for readability.

                      Code:
                      document.write("<table border='0' cellpadding='1' cellspacing='1' bgcolor='#000000'>"); 
                      document.write("<tr><td align='center' bgcolor='#005984'>");
                      document.write("<a href='http://www.enemydown.co.uk' target='_blank'><img src='http://www.enemydown.co.uk/images/small_enemydown.gif' width='104' height='18' border='0' align='absmiddle'></a>"); 
                      document.write("<br><a href='http://www.enemydown.co.uk/ladder.php?ladder=4' target='_blank'><font color='#FFCC00' size='1' face='Verdana, Arial, Helvetica, sans-serif'>UK - Division 2</font></a><br>"); 
                      document.write("<font color='#FFFFFF' size='5' face='Arial, Helvetica, sans-serif'><b>88</b></font><br>"); 
                      document.write("<a href='http://www.enemydown.co.uk/clan.php?id=1325' target='_blank'><font color='#FFCC00' size='1' face='Verdana, Arial, Helvetica, sans-serif'>Ts</font></a>");
                      document.write("</td></tr></table>");
                      You can apply tooltip in the links by putting title attribute in it. You can do it by editing the php script. But if you don't have access to it, you need a code to loop through the document.links array to look for specific link and then put the tooltip programmatically.
                      Glenn
                      vBulletin Mods That Rock!

                      Comment


                      • #12
                        Code:
                        <html>
                        <head>
                        <title>Tooltip</title>
                        
                        <!--- *** BEGIN : Code to put the html output of "ed_clanrank.php" into a variable *** --->
                        <script type="text/javascript">
                        	var tooltipText = "";
                        	oldDw = document.write;
                        	document.write = function(str){tooltipText += str;}
                        </script>
                        <script language="JavaScript" type="text/javascript" src="http://www.enemydown.co.uk/ed_clanrank.php?ladder=4&clan=1325"></script> 
                        <script type="text/javascript">
                        	document.write = oldDw;
                        </script>
                        <!--- END : Code to put the html output of "ed_clanrank.php" into a variable *** --->
                        
                        </head>
                        
                        <body>
                        	<a href="#" onmouseover="return escape(tooltipText)">Current Rank</a>
                        	<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script> 
                        </body>     
                        
                        </html>
                        Use the above code but also make sure you follow steps 1 & 2 from http://www.walterzorn.com/tooltip/tooltip_e.htm
                        Last edited by RoyW; Feb 26, 2004, 11:31 PM.
                        The answer does not come from thinking outside the box, it comes from realizing the truth :-
                        "There Is No Box". [JavaScript Gadgets'n'Gizmos][JavaScript-FX]

                        Comment


                        • #13
                          Odd but nice trick!
                          Glenn
                          vBulletin Mods That Rock!

                          Comment


                          • #14
                            OMG thank you so much guys, you are pros at Javascript and your knowledge of it was grealy appreciated. AS you can now see here http://tsclan.co.uk you can see on the front page that there is a "Current Rank" link where when you hover it you see the our rank.

                            Thank you again "RoyW"and "glenngv" for helping me in that last mile. I think thats it for now but if I have anymore problems I know where to go

                            Thanks

                            Comment


                            • #15
                              Looks good but you may want to take out the extra <head> <body> and <html> tags

                              My example was meant to be an entire document.

                              The correct way to insert it into your page would be
                              Code:
                                <TR>
                                  <TD> <IMG SRC="images/hi_homepage_39.gif" WIDTH=22 HEIGHT=75 ALT=""></TD>
                                  <TD valign="top" background="images/hi_homepage_40.gif"><p style="margin-bottom: 0">
                              
                              <!--- *** BEGIN : Code to put the html output of "ed_clanrank.php" into a variable *** --->
                              <script type="text/javascript">
                              	var tooltipText = "";
                              	oldDw = document.write;
                              	document.write = function(str){tooltipText += str;}
                              </script>
                              <script language="JavaScript" type="text/javascript" src="http://www.enemydown.co.uk/ed_clanrank.php?ladder=4&clan=1325"></script> 
                              <script type="text/javascript">
                              	document.write = oldDw;
                              </script>
                              <!--- END : Code to put the html output of "ed_clanrank.php" into a variable *** --->
                              
                              <a href="#" onmouseover="return escape(tooltipText)">Current Rank</a>
                              	<script language="JavaScript" type="text/javascript" src="wz_tooltip.js"></script> <p>
                              <a href="http://www.enemydown.co.uk/clanschedule.php?id=1325" title="When our next match is" target="_blank">Schedule</a></p>
                              
                                  </p>
                                  </TD>
                                  <TD> <IMG SRC="images/hi_homepage_41.gif" WIDTH=18 HEIGHT=75 ALT=""></TD>
                                  <TD> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=75 ALT=""></TD>
                                </TR>
                              This will make sure you have a valid document structure.
                              The answer does not come from thinking outside the box, it comes from realizing the truth :-
                              "There Is No Box". [JavaScript Gadgets'n'Gizmos][JavaScript-FX]

                              Comment

                              Working...
                              X