Avatar billede d.kryger Praktikant
12. april 2011 - 10:10 Der er 4 kommentarer og
1 løsning

Div som skal scrolle med ned - problem med koden

Hej eksperter.

Jeg har på min side en reklamekasse (den blå) som sidder i en div. Den vil jeg meget gerne have til at scrolle med ned på siden. Og det virker også, men den sidder forkert... Kan nogen hjælpe mig?

Side hvor den scroller med ned: http://test.kryger.name/index.html
Side hvor den er placeret rigtig, men ikke scroller med ned: http://test.kryger.name/index1.html

Jeg ved godt at jeg bare kunne skrive det rigtig targetX, men det skal jo gerne virke på alle skærmstørrelser...

Min script kode ser sådan ud:
<script type="text/javascript">
<!--
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
    targetX: -350,
    targetY: 175,

    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>
Avatar billede Slettet bruger
12. april 2011 - 12:07 #1
Et godt eksempel på en situation, hvor tabel-layout gør det hele meget enklere
- selvom det nærmest er helligbrøde at nævne det ?
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Less is more</title><style type="text/css">
html    {width:100%; margin:0;}
body    {width:100%; margin:0; overflow:auto;}
.tekst    {border-style:solid; border-width:0 2px;}
#box    {background-color:blue; width:200px; height:200px; margin-top:50px; color:#FFF;}
td    {vertical-align:top;padding:6px;}
</style><script>

window.onscroll = function()
    {
    document.getElementById("box").style.marginTop =
        (document.documentElement.scrollTop + document.body.scrollTop + 50) + "px"
    }

</script></head><body>

<table width="100%" border="0" cellspacing="0"><tr>
    <td width="10%">
        Margin
    </td>

    <td width="70%" class="tekst">
        Lorem ipsum..
    </td>

    <td width="20%">
        <div id="box" style="">reklamer</div>
    </td>

</tr></table>
   
</body></html>
Avatar billede d.kryger Praktikant
27. april 2011 - 23:14 #2
Lukker spm.
Som du selv skriver, så er tabel-layout måske meget enklere, men det kunne jeg bare ikke lige bruge i dette tilfælde...
Avatar billede Slettet bruger
28. april 2011 - 08:04 #3
Hvorfor ikke ?
- min kode løste problemet - enkelt og robust ?!?
Avatar billede d.kryger Praktikant
28. april 2011 - 21:11 #4
Som jeg skrev i går, så kunne jeg ikke bruge tabel layout i dette tilfælde, men jeg vil gerne give dig point, hvis du ønsker det - også selvom jeg ikke kunne bruge dit svar (i mit tilfælde)...
Avatar billede Slettet bruger
28. april 2011 - 22:34 #5
Pyt med point'ene, jeg undrede mig bare, hvorfor ikke ?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester