Loading ...
Sorry, an error occurred while loading the content.

[oL] photo pop-up problems

Expand Messages
  • - Ray -
    On my site http://www.masonicsites.org/signatures I have 3 columns of famous names with popup signatures when you mouseover each. My problem is that I seem
    Message 1 of 5 , Jan 1, 2002
    • 0 Attachment
      On my site http://www.masonicsites.org/signatures I have 3 columns of famous
      names with popup signatures when you mouseover each. My problem is that I
      seem not to be able to have the popups for the right hand column appear to
      the left of the pointer. I have tried many different attacks on the problem
      and still have had no success.
      Could someone please help me with this?
      Many thanks in advance,
      - Ray Dotson -
    • Dennis Sandow
      ... Ray There are MANY positioning problems with Overlib. Let me explain how they are biting you. Problem #1: Your overlib(CENTER) calls do not display
      Message 2 of 5 , Jan 1, 2002
      • 0 Attachment
        - Ray - wrote:
        On my site http://www.masonicsites.org/signatures I have 3 columns of famous
        names with popup signatures when you mouseover each.  My problem is that I
        seem not to be able to have the popups for the right hand column appear to
        the left of the pointer.  I have tried many different attacks on the problem
        and still have had no success.
        Could someone please help me with this?
        Many thanks in advance,
        - Ray Dotson -
        Ray

        There are MANY positioning problems with Overlib.  Let me explain how they are biting you.

        Problem #1:  Your overlib(CENTER) calls do not display centered on the mouse.  Your overlib(LEFT) calls do not display to the left of the mouse.

        Discussion #1: Overlib (INCORRECTLY) uses the WIDTH value to figure out how to position the popup relative to the cursor

        • If you use CENTER,WIDTH,100, overlib shifts the popup 50 pixels (=100/2) left of the cursor.  Overlib assumes you knew the true width of the popup would be 100 pixels, and you want 50 pixels on either side of the cursor..
        • If you use LEFT,WIDTH,100, overlib shifts the popup 100 pixels left of the cursor.  Overlib assumes you knew the true width ....... .
        • This is EXACTLY what is happening to you.
        • The BROWSER does NOT care what width you specify. The BROWSER builds the popup to fit the contents of the popup. If you have an image in the popup that is 260 pixels wide, the BROWSER will build a popup 260 pixels wide, and OVERLIB(LEFT) will shift it (WIDTH=)100 pixels to the left, so 160 pixels worth will hang to the right of the cursor.
        • If you do not specify WIDTH,xxxx, overlib will use its default_WIDTH=200 to perform the CENTER and LEFT calculations.  Same result. The popup is shifted by an absolute amount, and there may be right-overhang.
        • The WIDTH argument only has REAL use in an overlib popup if the contents are TEXT-ONLY, and you want to force a width that is different from the default 200 pixels.
          • If there is an image, then the BROWSER will size the popup to fit the image
          • If LEFT/CENTER positioning is involved, the WIDTH input will be used for the calculation, and it will be wrong.
        Observation #1: The position (of the popup relative to the cursor) should be calculated (internally) from the TRUE width of the popup. Overlib does not do that. SEE "GENERIC" BELOW.

        Temporary patch for Observation #1: (This will really trouble you with 120 popups.) For EVERY overlib() call, set the WIDTH value to be equal to the actual width of the signature image contained in the popup.

        "I have tried many different attacks on the problem and still have had no success." This is the attack you should have tried.
        Observation #2:  (And this is actually different from #1 - but you haven't thought about it as 2 separate problems). The (right-column) popup hangs off the right side of the screen.

        Discussion #2:  Overlib does not automatically force all popups to stay 100% visible in the window.  It should do this REGARDLESS of the positioning instructions given in the arg list.

        Observation #2: The position (of the popup relative to the cursor) should be calculated (internally) from the TRUE width of the popup AND from the position of the cursor relative to the edges of the window.

        Temporary patch for Observation #2  If you adopt the PITA (pain in the a..)  patch #1 above, then this problem will go away, because you will FORCE the right-column signatures to be shifted LEFT by the full WIDTH of the image. Then the window-edge problem will not be an issue for you (although it will still exist.)

        GENERIC SOLUTION for #1 and #2: (This is the "SEE BELOW")

        A long time ago, I built a complete redesign of the positioning function FOR OVERLIB3.33. I assumed that Eric would write it into 3.50, but he did not.  If you want all positioning to be inside the window, and totally adaptive and logical, then you should use this patch.  Specifically, it addresses the two faults I have underlined above. The patch detects the TRUE width of the popup and uses that for positioning calculations and it adjusts the position of popups near the edge by measuring the position of the cursor relative to the edges of the window. The patch also reliably works HAUTO into the equation.

        The patch is fully described at
        http://groups.yahoo.com/group/overlib/files/Popup%20Positioning/Posndemo.htm .
        That document also includes expanded user instructions, and installation instructions.

        YOU WILL ALSO HAVE TO REVERT BACK TO Overlib3.33. This should not be a problem, since you are not using the 3.50 style sheet support. You can get a zipped copy of the original 3.33 at http://users.tellurian.net/sandow/over333.zip.

        • Unzip overlib3.33 (or the mini version - it loads faster).
        • Install the patch. Make sure you get the correct version (regular or mini).
        • Then remove overlib.js (3.50) from your server and install the patched overlib.js (3.33)
        • Change all your overlib() calls to OMIT WIDTH,nnn.
          • If you say CENTER for all of them, then they will all be centered over/under the cursor, and those in the left/right columns will be nudged away from the edge of the window so they are completely visible. (This is MY artistically preferred solution.)
          • If you say HAUTO, then the popups in the left column will be shifted RIGHT and the ones in the right column will be shifted LEFT. The popups in the center column will be LEFT or RIGHT, depending on whether the cursor is left or right of the geographic center of the page.  Sometimes this is annoying.
          • If you OMIT LEFT/CENTER/RIGHT/HAUTO, the popup will always be (by default) RIGHT of the cursor, but those in the right column will be nudged away from the edge of the window so they are completely visible..
        This should cure all your positioning problems. If not, let me know exactly what doesn't work for you.

        Dennis

        PS. Additional Hints to make your page easier to manage - NOT TESTED, You can try them. One step at a time.

        1. Preload the pictures this way to save space

        <script language=javascript>
          allPix = new Array();
          for (x=1; x<=120; x++) {
              allPix[x]=new Image(); allPix[x].src="signature"+x+".jpg";
          };
        </script>

        2. Standardize the Overlib calls

        <script language=javascript>
          function SigPop(textNo,pixNo){
            return overlib(TextStr[textNo], CAPTION, ' ',  CAPICON,'signature'+pixNo+'.jpg',VAUTO,CENTER,TEXTSIZE,2,CAPTIONSIZE,3);
          };
        </script>

        Note: CENTER can be used in all cases if you have applied the positioning patch.
        <body>
        <td width="33%" height="30" align="right"><font size="4">
              <a href="javascript:void(0)" onmouseover="return SigPop(18,72)" onmouseout="nd()" class="h">Ford, Gerald R.</a>
        </font></td>

        3. Simplify

        <script language=javascript>
          function WriteCell(textNo,pixNo,MName){
            document.write('<a href="javascript:void(0)" onmouseover="return SigPop('+textNo+','+pixNo+')" '+
                 ' onmouseout="nd()" class="h">'+MNAME+'</a>');
          };
        </script>

        <body>
        <td width="33%" height="30" align="right"><font size="4"><script language=javascript>WriteCell(18,72,"Ford, Gerald R.");</script></font></td>

        4. Simplify some more

        <script language=javascript>
          function WriteTd(Align,textNo,pixNo,MName){
            document.write('<td width="33%" height="30" align="'+Align+'"><font size="4">'+
                '<a href="javascript:void(0)" onmouseover="return SigPop('+textNo+','+pixNo+')" '+
                     ' onmouseout="nd()" class="h">'+MNAME+'</a>'+
                '</font></td>')
          };
        </script>

        <body>
        <script language=javascript>
          WriteTD("left",18,72,"Ford, Gerald R.");
          WriteTD("center",19,73,"xxx");
          WriteTD("right",20,74,"yyy");
        </script>

        5. Simplify some more

        <script language=javascript>
          function WriteRow(   LtextNo,LpixNo,LMName,   CtextNo,CpixNo,CMName,   RtextNo,RpixNo,RMName   ){
            document.write('<tr>');
            WriteTD("left",LtextNo,LpixNo,LMName);
            WriteTD("center",CtextNo,CpixNo,CMName);
            WriteTD("right",RtextNo,RpixNo,RMName);
            document.write('</tr>');
          };
        </script>

        <body>
        <script language=javascript>
          WriteRow(18,72,"Ford, Gerald R.",  19,73,"xxx",   20,74,"yyy");
          WriteRow(21,75,"qqq",              22,76,"xxx",   23,77,"yyy");
          WriteRow(24,78,"mmm",              25,79,"xxx",   26,80,"yyy");
        </script>

        At this point, 1 line of code in the <body> sets up an entire row . This replaces 14 lines in your current code - and it is MUCH easier to visualize.
        If it all works (?), you have cut over 600 lines out of your page.

        Happy New Year

        Dennis
         

      • Robert E. Boughner
        ... Two notes. 1. I would check out the note that Dennis Sandow told you about concerning what you need to do to include image preloading on your page. This
        Message 3 of 5 , Jan 1, 2002
        • 0 Attachment
          - Ray - wrote:

          > On my site http://www.masonicsites.org/signatures I have 3 columns of famous
          > names with popup signatures when you mouseover each. My problem is that I
          > seem not to be able to have the popups for the right hand column appear to
          > the left of the pointer. I have tried many different attacks on the problem
          > and still have had no success.
          > Could someone please help me with this?
          > Many thanks in advance,
          > - Ray Dotson -

          Two notes.

          1. I would check out the note that Dennis Sandow told you about concerning what
          you need to do to include image preloading on your page. This would help in
          viewing your page. Also this page takes a fair amount of time to download and
          some of the links further down in the table don't really fire until those images
          have been cached. You might want to consider adding a note that it will take a
          while to load or if you're familar with the technique put a covering layer on
          top that says that the page is loading and then after its loaded show the
          finished page. Then when people mouseover your links they won't have to wait.

          2. I suggest that you use a modified verison of overlib which has as its
          default VAUTO turned on. To do this open the overlib code in a text editor and
          find the line

          if (typeof ol_hauto == 'undefined') { var ol_hauto = 0; }

          and change it to

          if (typeof ol_hauto == 'undefined') { var ol_hauto = 1; }

          This will make the automatic horizon alignment the default behavior. This
          should take care of most of your problems. There are still some problems with
          this in Netscape 4.x because of how it treats the scroll bar, but I think it
          should take care of most of your problems. Dennis Sandow has pointed out a page
          that he has which describes this problem and what you can do to correct. Search
          for his name in the newsgroup archives. He has also put some files in the
          section "Files" on the overlib newsgroup site.
        Your message has been successfully submitted and would be delivered to recipients shortly.