SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist jazztie's Avatar
    Join Date
    Mar 2001
    Location
    the Netherlands
    Posts
    519
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with scrolling and Layers

    I want to make links where, when you move over them with your mouse, little (layer)windows open automatically with a predefined text.

    What I found so far is this:
    PHP Code:
    <HTML>
    <
    HEAD>
    <
    style type='text/css'
    <!-- 
        
    A:link        colorbluetext-decoration:none;}
        
    A:visited     colorbluetext-decoration:none;} 
        
    A:hover        colorredtext-decoration:nonefont-weight:bold;}
    -->
    </
    style>
    <
    SCRIPT LANGUAGE="JavaScript">
    function 
    setupDescriptions() {
        var 
    navigator.appVersion;
        
    x.substring(0,4);
        if (
    y>=4setVariables();
    }
    var 
    x,y,a,b;

    function 
    setVariables(){
        if (
    navigator.appName == "Netscape") {
            
    h=".left=";
            
    v=".top=";
            
    dS="document.";
            
    sD="";
        }
        else {
            
    h=".pixelLeft=";
            
    v=".pixelTop=";
            
    dS="";
            
    sD=".style";
        }
    }
    var 
    isNav = (navigator.appName.indexOf("Netscape") !=-1);

    function 
    popLayer(a){
        
    desc "<table cellpadding=3 border=1 bordercolor='#006699' bgcolor='#F7F7F7'><td>";
        
        if (
    a==1desc += "Aanwijzing 1.<br> Het gaat helemaal nergens over";
        if (
    a==2desc += "Aanwijzing 2.<br> Het gaat helemaal nergens over <br>Tweede regel";
        if (
    a==3desc += "Aanwijzing 3.<br> Het gaat helemaal nergens over <br>Tweede regel <br>Derde regel ";
        if (
    a==4desc += "Aanwijzing 4.<br> Het gaat helemaal nergens over <br>Tweede regel <br>Derde regel <br>Vierde regel";
        if (
    a==5desc += "Aanwijzing 5.<br> Het gaat helemaal nergens over <br>Tweede regel <br>Derde regel <br>Vierde regel <br>Vijfde regel";
        
        
    desc += "</td></table>";
        
        if(
    isNav) {
            
    document.object1.document.write(desc);
            
    document.object1.document.close();
            
    document.object1.left=x+25;
            
    document.object1.top=y;
        }
        else {
            
    object1.innerHTML=desc;
            eval(
    dS+"object1"+sD+h+(x+25));
            eval(
    dS+"object1"+sD+v+y);
        }
    }

    function 
    hideLayer(a){
        if(
    isNav) {
            eval(
    document.object1.top=a);
        }
        else 
    object1.innerHTML="";
    }

    function 
    handlerMM(e){
        
    = (isNav) ? e.pageX event.clientX;
        
    = (isNav) ? e.pageY event.clientY;
    }
    if (
    isNav){
        
    document.captureEvents(Event.MOUSEMOVE);
    }

    document.onmousemove handlerMM;

    </script>
    </HEAD>
    <BODY OnLoad="setupDescriptions()">

    <div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">layer hidden off the screen</div>


    <a href="javascript:void(0);" onMouseOver="popLayer(1)" onMouseOut="hideLayer(-50)">Functie</a>
    <p>
    <a href="javascript:void(0);" onMouseOver="popLayer(2)" onMouseOut="hideLayer(-50)">Afdeling</a>
    <p>
    <a href="javascript:void(0);" onMouseOver="popLayer(3)" onMouseOut="hideLayer(-50)">Opmerking</a>
    <p>
    <a href="javascript:void(0);" onMouseOver="popLayer(4)" onMouseOut="hideLayer(-50)">Werkzaamheden</a>
    <p>
    <a href="javascript:void(0);" onMouseOver="popLayer(5)" onMouseOut="hideLayer(-50)">Aanwezigheid</a>
    <p>

    </body>
    </html> 
    This works fine... Untill the page gets too long and you need to scroll. Then the popup-messages get all screwed up. They appear too high on the screen.

    Is it possible to use the Mouse location for the starting point of the message? And if so: How do I accomplish this?

    I also found, that the message will appear behind multiple selectboxes. Can this be helped?

    Please, any help is appreciated!

    Jazz

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jazz,

    if I understand you right, you'd like a scrolling div. The following is something I am writing up for my site. You may find it helpful.

    The ?Home vars are there to prevent the div from scrolling above their original position.

    <script language="javascript">
    <!--
    var oldX = oldY = 0;

    function scrollDiv(divID)
    {
    var yHome = xHome = 200;
    var yPos = (document.all || document.getElementById) ? document.body.scrollTop : window.pageYOffset;
    var xPos = (document.all || document.getElementById) ? document.body.scrollLeft : window.pageXOffset;

    var divStyle = (document.getElementById) ? document.getElementById(divID).style : ( (document.all) ? document.all[divID].style : document.layers[divID] );

    if ('note'.indexOf(divID.substr(0,3)) != -1)
    oldY = resetXY(divStyle, false, yPos, yHome)
    else
    {
    if (yPos != oldY) oldY = resetXY(divStyle, false, yPos, yHome)
    if (xPos != oldX) oldX = resetXY(divStyle, true, xPos, xHome)
    }
    }

    function resetXY(divObj, isX, xyVal, xyOffset)
    {
    if (isX) divObj.left = xyOffset + xyVal;
    else divObj.top = xyOffset + xyVal;

    return (xyVal);
    }

    function init(divID)
    {
    scrollDiv(divID);
    setTimeout("init('"+ divID + "')", 60);
    }


    function doSel(selObj)
    {
    for (i=0; i< selObj.length; i++)
    if (selObj.options[i].selected)
    eval(selObj.options[i].value)
    }

    function changeVis(divID,isShow)
    {

    divStyle = (document.layers) ? document.layers[divID] : ( (document.getElementById)? document.getElementById(divID).style : document.all[divID].style );
    divStyle.visibility = (isShow) ? 'visible' : ( (document.layers) ? 'hide' : 'hidden');

    }

    //--> end hide JavaScript
    </script>


    </head>
    <body onLoad="init('dropDown')">

    <div id="dropDown" style="position:absolute;left:200;top:200;visibility:hidden">
    <form name="dropMenu">
    <select name="mySel" onChange='doSel(this)'>
    <option value="location.href=this.location">Select</option>
    <option value="changeVis('dropDown',0)">Hide this Layer</option>
    <option value="location.href='../index.html'">Home</option>
    <option value="location.href='../html/learning.html'">The Learning Curve</option>
    <option value="location.href='dHTML.html'">dHTML</option>

    </select>
    </form>
    </div>

    <div id="note1" style='position:absolute;top:10;left:10;visibility:hidden'>
    <table border="1" bgcolor="silver">
    <tr>
    <td><p>If the function call had been written as: setTimeout("init(divID)",60), the brower would complain that " 'divID' is undefined." Remember: Although divID contains a string, it itself is a variable.</p>
    </td>
    <td>
    <form name='notef1'>
    <input type='button' value='close note' onClick="changeVis('note1',0)">
    </form>
    </td>
    </tr>
    </table>
    </div>

    The html for the note is:
    <a href="javascript:void();" onMouseOver="scrollDiv('note1');changeVis('note1',1)">

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    SitePoint Evangelist jazztie's Avatar
    Join Date
    Mar 2001
    Location
    the Netherlands
    Posts
    519
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Vinnie,

    thanks for that great code. I have one more problem though. I would like the divLayer to appear next to my mouse-pointer. This way it doesn't matter where the page is in the window (scrolled all the way up or down). Is this possible??

    THanks,

    Jazz


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
  •