Script problem with Netscape 7

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Phil
    #1

    Script problem with Netscape 7

    Hello all !

    I need help with this script :
    It's a tooltip appearing onMouseOver on a link. It works fine in IE, Opera
    but not Netscape 7 and Mozilla 1.5.
    The tooltip sticks on the top left corner of the window.

    Any help appreciated :-)

    Thanks

    =============== =============== ====


    <script language="JavaS cript" type="text/JavaScript">
    <!--


    function initToolTips(){
    offsetX = 0;
    offsetY = 15;
    ns4 = document.layers ;
    ns6 = document.getEle mentById && !document.all;
    ie4 = document.all;
    toolTipSTYLE="" ;
    if (ns4 || ns6 || ie4) {
    if (ns4) toolTipSTYLE = document.toolTi pLayer;
    else if(ns6) toolTipSTYLE =
    document.getEle mentById("toolT ipLayer").style ;
    else if(ie4) toolTipSTYLE = document.all.to olTipLayer.styl e;
    if (ns4) document.captur eEvents(Event.M OUSEMOVE);
    else {
    toolTipSTYLE.vi sibility = "visible";
    toolTipSTYLE.di splay = "none";
    }
    document.onmous emove = moveToMouseLoc;
    }
    }


    //--------------------------


    function moveToMouseLoc( e) {

    if(ns4 || ns6) {
    x = e.pageX; y = e.pageY;
    } else {
    x = event.x + document.body.s crollLeft;
    y = event.y + document.body.s crollTop;
    }
    toolTipSTYLE.le ft = x + offsetX;
    toolTipSTYLE.to p = y + offsetY;
    return true;
    }


    //--------------------------


    function toolTip(valItal , valGras, msg, fg, bg, police, tailleTexte) {

    if(toolTip.argu ments.length < 1) { // hide

    if (ns4) toolTipSTYLE.vi sibility = "hidden";
    else toolTipSTYLE.di splay = "none";
    } else { // show


    var content =
    '<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg +
    '"><td>' +
    '<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg +
    '"><td align="center"> <font face="'+ police +'" color="' + fg +
    '" size="' + tailleTexte + '">&nbsp\;' + msg +
    '&nbsp\;</font></td></table></td></table>';

    if (ns4) {
    toolTipSTYLE.do cument.write(co ntent);
    toolTipSTYLE.do cument.close();
    toolTipSTYLE.vi sibility = "visible";
    }
    if (ns6) {
    document.getEle mentById("toolT ipLayer").inner HTML = content;
    toolTipSTYLE.di splay='block'
    }
    if (ie4) {
    document.all("t oolTipLayer").i nnerHTML=conten t;
    toolTipSTYLE.di splay='block'
    }
    }
    }
    //-->
    </script>
    </head>



    <body>
    <div id="toolTipLaye r" style="position :absolute; visibility: hidden"></div>

    <script language="JavaS cript">
    <!--
    initToolTips();
    -->
    </script>

    <p>
    <a href="javascrip t:;"
    onMouseOver="to olTip('0','0',' TEXT','#000000' ,'#FFFFFF','Ari al, Helvetica,
    sans-serif','2')" onMouseOut="too lTip()">Test 1</a>
    </p>



    Tags: None
    • Lasse Reichstein Nielsen
      #2
      Re: Script problem with Netscape 7

      "Phil" <pasdemail@pasd email.com> writes:
      [color=blue]
      > Hello all !
      >
      > I need help with this script :
      > It's a tooltip appearing onMouseOver on a link. It works fine in IE, Opera
      > but not Netscape 7 and Mozilla 1.5.
      > The tooltip sticks on the top left corner of the window.
      >
      > Any help appreciated :-)[/color]
      [color=blue]
      > <script language="JavaS cript" type="text/JavaScript">[/color]

      The language attribut can be omitted
      [color=blue]
      > <!--[/color]

      and so can this.
      [color=blue]
      >
      >
      > function initToolTips(){
      > offsetX = 0;
      > offsetY = 15;
      > ns4 = document.layers ;
      > ns6 = document.getEle mentById && !document.all;
      > ie4 = document.all;[/color]

      These five variables are global, and are used as such. I would
      declare them outside the function to signal this.

      Your variables suggests that only ie4 has a document.all property.
      That is not true. Generally, browser detection is not a very stable
      way of making the script compatible with other browsers.

      Where does the values of the variables "offsetX" and "offsetY" come
      from?
      [color=blue]
      > toolTipSTYLE="" ;[/color]

      Since this variable is used to hold an object, I would initialize it
      with null instead of the empty string.

      All in all, I would use the following code instead:
      ---
      var offsetX = 0;
      var offsetY = 15;
      var toolTipStyle;

      function initToolTip() {
      var toolTipElem;
      if (document.getEl ementById) {
      toolTipElem = document.getEle mentById("toolT ipLayer");
      } else if (document.all) {
      toolTipElem = document.all["toolTipLay er"];
      } else if (document.layer s) {
      toolTipElem = document.layers["toolTipLay er"];
      }
      if (!toolTipElem) {return;} // something wrong.
      toolTipStyle = toolTipElem.sty le || toolTipElem;

      toolTipStyle.vi sibility = "visible";
      toolTipStyle.di splay = "none";

      // listen to mouse move event
      if (document.addEv entListener) {
      document.addEve ntListener("mou semove",moveToM ouseLoc,false);
      } else if (document.attac hEvent) {
      document.attach Event("onmousem ove",function() {
      moveToMouseLoc( window.event);
      });
      } else {
      document.onmous emove = moveToMouseLoc;
      }
      if (document.captu reEvents && window.Event &&
      window.Event.MO USEMOVE) {
      document.captur eEvents(window. Event.MOUSEMOVE );
      }
      }
      ---
      [color=blue]
      > function moveToMouseLoc( e) {
      >
      > if(ns4 || ns6) {[/color]

      Here you assume something about the event from your guess at the
      browser. If the guess is wrong, so is the result. That should not
      be a problem for NS7/Mozilla, though.
      [color=blue]
      > x = e.pageX; y = e.pageY;[/color]

      Make variables local if possible.
      [color=blue]
      > } else {
      > x = event.x + document.body.s crollLeft;
      > y = event.y + document.body.s crollTop;[/color]

      If the browser is in standards mode (which all new pages *should* put
      it), the scroll{Top,Left } values are placed on document.docume ntElement,
      not document.body.
      [color=blue]
      > }
      > toolTipSTYLE.le ft = x + offsetX;[/color]

      Probable cause of problem: You assign a CSS length without a unit. You
      *must* add a unit, probably pixels ("px").
      [color=blue]
      > toolTipSTYLE.to p = y + offsetY;
      > return true;
      > }[/color]

      My suggested function
      ---
      function moveToMouseLoc( event) {
      var x,y;
      if (typeof event.pageX == "number") {
      x = event.pageX;
      y = event.pageY;
      } else {
      var root = document.docume ntElement||docu ment.body;
      var x = event.clientX + root.scrollLeft ;
      var y = event.clientY + root.scrollTop;
      }
      toolTipStyle.le ft = (x+offsetX)+"px ";
      toolTipStyle.to p = (y+offsetY)+"px ";
      }
      ---

      [color=blue]
      > <script language="JavaS cript">[/color]

      The *type* attribute is required in HTML 4.
      Does your page validate?
      [color=blue]
      > <a href="javascrip t:;"[/color]

      Avoid javascript:-URL's.
      <URL:http://jibbering.com/faq/#FAQ4_24>

      /L
      --
      Lasse Reichstein Nielsen - lrn@hotpop.com
      DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
      'Faith without judgement merely degrades the spirit divine.'

        Comment

        • Phil
          #3
          Re: Script problem with Netscape 7

          > Does your page validate?

          Don't think so :-)
          In fact the whole code is a snippet coming from Dreamweaver...
          I made some arrangements with global variables, because I can't have them
          'global' for a future use

          I will review all that.
          Thanks a lot for your help and suggestions.


            Comment

            Previous template Next
            Working...