Foros del Web - Ver Mensaje Individual - Menu vertical siempre visible arriba cuando llegue al borde superior

RubenGuerrero · #7 (**permalink**) 12/10/2009, 05:20

Ya he encontrado como hacerlo

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body>
<div id="floatdiv" style="
    position: absolute;   
    width:140px;height:230px;left:0px;top:0px;   
    padding:16px;   
    border:3px solid #94039E">
</div>  
<script language="JavaScript" type="text/javascript" src="floating_menu.js"></script>
<div style="width: 200px;"><p>

Nulla diam arcu, porttitor eleifend commodo id, elementum et mauris. Aenean accumsan nisi imperdiet est venenatis eget volutpat est venenatis. Vestibulum blandit quam risus, at commodo diam. Cras ac lectus sit amet leo porta sagittis. Vestibulum vestibulum sem id mauris congue at fermentum felis convallis. Nulla odio eros, ultrices a ultrices vitae, lobortis sit amet mi. Vestibulum posuere, enim at elementum facilisis, sem ipsum mattis sem, nec vestibulum mauris libero vel ipsum. Quisque lacinia, nisl hendrerit laoreet molestie, erat enim malesuada elit, sed ullamcorper tellus odio nec massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam non mauris id risus placerat volutpat. Donec eu luctus turpis. Sed molestie, lacus non cursus sagittis, nisl arcu pulvinar quam, at lacinia mi mauris feugiat eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sed orci non lectus pellentesque ornare quis a turpis. Suspendisse at magna ut metus ultricies vehicula. Sed vulputate pretium mi. Quisque ac nisl eros. Duis in faucibus est.

Pellentesque nisi dui, semper eu posuere in, interdum at orci. Nam congue blandit dui, et posuere eros eleifend et. Nulla vulputate imperdiet venenatis. Maecenas interdum diam sit amet odio tincidunt feugiat. Nullam eget est velit. Aliquam mollis purus at metus condimentum vel aliquet sapien auctor. Nulla in leo nisl, sed aliquam orci. Etiam pharetra, urna ac ullamcorper dignissim, lacus lorem tincidunt augue, ut luctus nisi orci id libero. Mauris non velit elit, eget lacinia purus. Praesent hendrerit lobortis vulputate. Duis nec neque eros, ac convallis urna. Curabitur sagittis dolor sed est vulputate elementum.

Quisque eget erat urna, vel tincidunt nunc. Phasellus imperdiet facilisis sem, eget varius velit cursus eget. Etiam nec ante ac nulla pulvinar accumsan a id magna. Praesent consectetur pharetra dui, euismod interdum elit adipiscing id. Vestibulum mollis est ac nisi scelerisque sed vestibulum odio cursus. Donec rutrum, diam id lacinia volutpat, arcu dolor iaculis ante, ut tristique tellus dui sit amet nibh. Donec non commodo nisl. Sed non neque eu dui placerat viverra et sit amet dui. Donec ut dolor eros, et feugiat leo. Nunc non metus nibh, quis aliquam arcu.

Curabitur eu dictum odio. Suspendisse nec ante tempus eros aliquet vulputate. Sed nec malesuada augue. Integer id condimentum eros. Fusce dignissim, sapien eu cursus ultrices, urna lorem bibendum magna, nec venenatis nisi urna ut ipsum. Morbi gravida dui sed risus ultrices bibendum. Praesent tristique nunc eget sapien consectetur eget dictum neque mollis. Nullam mollis turpis vel urna aliquet accumsan. Nulla tempor elit in leo ornare aliquam. Vivamus lobortis, lacus vel adipiscing facilisis, velit lectus blandit neque, sed luctus turpis tortor vitae nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p></div>
</body>
</html>

y el floating_menu.js

Código:

// JavaScript Document
var floatingMenuId = 'floatdiv';   
var floatingMenu =   
{   
    targetX: -200,   
    targetY: 14,   
  
    hasInner: typeof(window.innerWidth) == 'number',   
    hasElement: typeof(document.documentElement) == 'object'  
        && typeof(document.documentElement.clientWidth) == 'number',   
  
    menu:   
        document.getElementById   
        ? document.getElementById(floatingMenuId)   
        : document.all   
          ? document.all[floatingMenuId]   
          : document.layers[floatingMenuId]   
};   
  
floatingMenu.move = function ()   
{   
    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';   
    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';   
}   
  
floatingMenu.computeShifts = function ()   
{   
    var de = document.documentElement;   
  
    floatingMenu.shiftX =     
        floatingMenu.hasInner     
        ? pageXOffset     
        : floatingMenu.hasElement     
          ? de.scrollLeft     
          : document.body.scrollLeft;     
    if (floatingMenu.targetX < 0)   
    {   
        floatingMenu.shiftX +=   
            floatingMenu.hasElement   
            ? de.clientWidth   
            : document.body.clientWidth;   
    }   
  
    floatingMenu.shiftY =    
        floatingMenu.hasInner   
        ? pageYOffset   
        : floatingMenu.hasElement   
          ? de.scrollTop   
          : document.body.scrollTop;   
    if (floatingMenu.targetY < 0)   
    {   
        if (floatingMenu.hasElement && floatingMenu.hasInner)   
        {   
            // Handle Opera 8 problems   
            floatingMenu.shiftY +=   
                de.clientHeight > window.innerHeight   
                ? window.innerHeight   
                : de.clientHeight   
        }   
        else  
        {   
            floatingMenu.shiftY +=   
                floatingMenu.hasElement   
                ? de.clientHeight   
                : document.body.clientHeight;   
        }   
    }   
}   
  
floatingMenu.calculateCornerX = function()   
{   
    if (floatingMenu.targetX != 'center')   
        return floatingMenu.shiftX + floatingMenu.targetX;   
  
    var width = parseInt(floatingMenu.menu.offsetWidth);   
  
    var cornerX =   
        floatingMenu.hasElement   
        ? (floatingMenu.hasInner   
           ? pageXOffset   
           : document.documentElement.scrollLeft) +    
          (document.documentElement.clientWidth - width)/2   
        : document.body.scrollLeft +    
          (document.body.clientWidth - width)/2;   
    return cornerX;   
};   
  
floatingMenu.calculateCornerY = function()   
{   
    if (floatingMenu.targetY != 'center')   
        return floatingMenu.shiftY + floatingMenu.targetY;   
  
    var height = parseInt(floatingMenu.menu.offsetHeight);   
  
    // Handle Opera 8 problems   
    var clientHeight =    
        floatingMenu.hasElement && floatingMenu.hasInner   
        && document.documentElement.clientHeight    
            > window.innerHeight   
        ? window.innerHeight   
        : document.documentElement.clientHeight   
  
    var cornerY =   
        floatingMenu.hasElement   
        ? (floatingMenu.hasInner     
           ? pageYOffset   
           : document.documentElement.scrollTop) +    
          (clientHeight - height)/2   
        : document.body.scrollTop +    
          (document.body.clientHeight - height)/2;   
    return cornerY;   
};   
  
floatingMenu.doFloat = function()   
{   
    var stepX, stepY;   
  
    floatingMenu.computeShifts();   
  
    var cornerX = floatingMenu.calculateCornerX();   
  
    var stepX = (cornerX - floatingMenu.nextX) * .07;   
    if (Math.abs(stepX) < .5)   
    {   
        stepX = cornerX - floatingMenu.nextX;   
    }   
  
    var cornerY = floatingMenu.calculateCornerY();   
  
    var stepY = (cornerY - floatingMenu.nextY) * .07;   
    if (Math.abs(stepY) < .5)   
    {   
        stepY = cornerY - floatingMenu.nextY;   
    }   
  
    if (Math.abs(stepX) > 0 ||   
        Math.abs(stepY) > 0)   
    {   
        floatingMenu.nextX += stepX;   
        floatingMenu.nextY += stepY;   
        floatingMenu.move();   
    }   
  
    setTimeout('floatingMenu.doFloat()', 20);   
};   
  
// addEvent designed by Aaron Moore   
floatingMenu.addEvent = function(element, listener, handler)   
{   
    if(typeof element[listener] != 'function' ||    
       typeof element[listener + '_num'] == 'undefined')   
    {   
        element[listener + '_num'] = 0;   
        if (typeof element[listener] == 'function')   
        {   
            element[listener + 0] = element[listener];   
            element[listener + '_num']++;   
        }   
        element[listener] = function(e)   
        {   
            var r = true;   
            e = (e) ? e : window.event;   
            for(var i = element[listener + '_num'] -1; i >= 0; i--)   
            {   
                if(element[listener + i](e) == false)   
                    r = false;   
            }   
            return r;   
        }   
    }   
  
    //if handler is not already stored, assign it   
    for(var i = 0; i < element[listener + '_num']; i++)   
        if(element[listener + i] == handler)   
            return;   
    element[listener + element[listener + '_num']] = handler;   
    element[listener + '_num']++;   
};   
  
floatingMenu.init = function()   
{   
    floatingMenu.initSecondary();   
    floatingMenu.doFloat();   
};   
  
// Some browsers init scrollbars only after   
// full document load.   
floatingMenu.initSecondary = function()   
{   
    floatingMenu.computeShifts();   
    floatingMenu.nextX = floatingMenu.calculateCornerX();   
    floatingMenu.nextY = floatingMenu.calculateCornerY();   
    floatingMenu.move();   
}   
  
if (document.layers)   
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);   
else  
{   
    floatingMenu.init();   
    floatingMenu.addEvent(window, 'onload',   
        floatingMenu.initSecondary);   
}