19 replies to this topic

[jjaenagle]

ok im not sure where or how to really ask this... but you can find an example at http://www.demonoid.com

the ad that is on the right side scrolls with you basically to the bottom of the page. I know they use an iframe but can you show me how that works or what makes it do that?

i tried to copy the source and css but it did not work..


any advice?

[oxida]

2 years ago I was looking for this to but then a friend and I made a script (he knew javascript).

First we made a div box:

<div id="floatdiv" style="   
    position:absolute;   
    width:200px;height:50px;left:0px;top:0px;   
    padding:16px;background:#FFFFFF;   
    border:2px solid #2266AA">   
!!CONENT HERE!!   
</div> 

Then after the div box code:

<script type="text/javascript"><!--   
var floatingMenuId = 'floatdiv';   
var floatingMenu =   
{   
    targetX: -250,   
    targetY: 10,   
  
    hasInner: typeof(window.innerWidth) == 'number',   
    hasElement: document.documentElement   
        && document.documentElement.clientWidth,   
  
    menu:   
        document.getElementById   
        ? document.getElementById(floatingMenuId)   
        : document.all   
          ? document.all[floatingMenuId]   
          : document.layers[floatingMenuId]   
};   
  
floatingMenu.move = function ()   
{   
    if (document.layers)   
    {   
        floatingMenu.menu.left = floatingMenu.nextX;   
        floatingMenu.menu.top = floatingMenu.nextY;   
    }   
    else  
    {   
        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)   
    {   
        if (floatingMenu.hasElement && floatingMenu.hasInner)   
        {   
            // Handle Opera 8 problems   
            floatingMenu.shiftX +=   
                de.clientWidth > window.innerWidth   
                ? window.innerWidth   
                : de.clientWidth   
        }   
        else  
        {   
            floatingMenu.shiftX +=   
                floatingMenu.hasElement   
                ? de.clientWidth   
                : floatingMenu.hasInner   
                  ? window.innerWidth   
                  : 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   
                ? document.documentElement.clientHeight   
                : floatingMenu.hasInner   
                  ? window.innerHeight   
                  : document.body.clientHeight;   
        }   
    }   
}   
  
floatingMenu.doFloat = function()   
{   
    var stepX, stepY;   
  
    floatingMenu.computeShifts();   
  
    stepX = (floatingMenu.shiftX +    
        floatingMenu.targetX - floatingMenu.nextX) * .07;   
    if (Math.abs(stepX) < .5)   
    {   
        stepX = floatingMenu.shiftX +   
            floatingMenu.targetX - floatingMenu.nextX;   
    }   
  
    stepY = (floatingMenu.shiftY +    
        floatingMenu.targetY - floatingMenu.nextY) * .07;   
    if (Math.abs(stepY) < .5)   
    {   
        stepY = floatingMenu.shiftY +    
            floatingMenu.targetY - 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.shiftX +   
        floatingMenu.targetX;   
    floatingMenu.nextY = floatingMenu.shiftY +   
        floatingMenu.targetY;   
    floatingMenu.move();   
}   
  
if (document.layers)   
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);   
else  
{   
    floatingMenu.init();   
    floatingMenu.addEvent(window, 'onload',   
        floatingMenu.initSecondary);   
}   
  
//--></script>  

The target_x and target_y variables represent the desired distance from the top left corner of the menu to the window borders.
Positive values mean distance from left and top border and negative - from right and bottom.

I hope this is wat you where looking fore.


Some parts of the code where note made by me or my friend, those where code snippets found on the web.

[jjaenagle]

oh wow... that may be it. i dont know anything about javascript so it may take me a while to try and get it up, but i will let you know how it goes! thanks!

[oxida]

No problem, It is copy & paste ready, you only have to put in some content in the div box.

[etycto]

funny LOL i'm actualy doing this same thing for a website.

an easy way to do is is using fixed positioning
this the HTML code

<div id="nomove" >stay where you at</div> <div id="other">this moves balsjshs hskhgdgd dghjdhg hgdghdghdgdhgd dhgdhgd dh</div>

this is the CSS and lets keep #nomove to left foreever and 50px from top

#nomove { position:fixed;  left:0; top:50px;


}

[jjaenagle]

hey etycto... i will try that as well...

I have a test one that im trying... http://www.theidoctor.org/test1.html


this is the test of oxida's script... the idea is exactly what i need but it does not work like it should.
http://www.theidoctor.org/test2.html

any suggestions?

Edited by jjaenagle, 18 June 2008 - 09:07 PM.

[oxida]

hmm thats weard, because I used the same way you are yousing it,
But give me some time and i will look for a fix

[Archangel_Baw]

thanx etycto that was very helpful.

[oxida]

http://www.dynamicdr.../staticmenu.htm

look at this site, there is an easy code that whill do the trick i think.

[jjaenagle]

Thats Awesome! Thanks for that!