Avatar billede simsen Mester
28. marts 2007 - 14:34 Der er 6 kommentarer og
1 løsning

rullegardin, der ikke skubber ned

Hej,

Jeg har fundet et rullegardin her på Eksperten (kan ikke huske reference nummeret), som rulle ned.....Problemet er bare, at den skubber hele siden....Jeg ønsker mig et rullegardin, der ligesom lægger sig over den eksisterende side i x antal sekunder....

Og inden nogen for et føl........det er IKKE til reklame....men et administrationsmodul, hvor når brugeren går ind, skal den vises, sålænge de ikke har udfyldt alt det de skal - med en meddelelse om, hvad og hvor de mangler at udfylde nogle ting....

Koden er:

<script type="text/javascript" language="JavaScript1.2">
            a = eval((document.body.clientWidth-760)/2)+135;
            document.write ('<div id=scrolldownbanner STYLE="top:-154px;left:'+a+'px;clip:rect(250px auto auto auto);position:absolute; width:490px; height:250px;">');
        </script>
                                       
        <a href="../moduler/banner.asp?Banner=Move&amp;ID=208" target="_blank"><img src="../billed.asp?Banner=208" style="border: none 0;" width="490" height="250" alt="Banner" /></a>
        <br />
        <a onclick="scrollBannerDown();" href="#"><img alt="" src="../images/trans.gif" height="1" width="427" style="border: none 0;" /><img alt="" style="border: none 0;" src="../Images/Scrolldown_annonce.gif" width="62" height="14" /></a>
        </div>
        <script type="text/javascript" language="Javascript">
            yspan = 250;
            function scrollBannerDown()
            {
                if(yspan > 0)
                {
                    yspan = yspan - 35;
                    if(yspan <= 0)
                    {
                        yspan = 0;
                        document.getElementById('scrolldownbanner').style.top = 97
                    };
                                           
                    document.getElementById('scrolldownbanner').style.clip = 'rect(' + yspan + ' auto auto auto)';
                    if(yspan > 0)
                    {
                        document.getElementById('scrolldownbanner').style.top = parseInt(document.getElementById('scrolldownbanner').style.top)+35;
                    };
                    setTimeout("scrollBannerDown()",100);
                };
                else
                {   
                    setTimeout("scrollBannerUp()",3000);
                };
            };
                                       
            function scrollBannerUp()
            {
                if(yspan < 250)
                {
                    yspan = yspan + 35 ;
                    if(yspan >= 250)
                    {
                        yspan = 250;
                        document.getElementById('scrolldownbanner').style.top = -154};
                        document.getElementById('scrolldownbanner').style.clip = 'rect(' + yspan + ' auto auto auto)';
                        if(yspan < 250)
                        {
                            document.getElementById('scrolldownbanner').style.top = parseInt(document.getElementById('scrolldownbanner').style.top)-35;
                        };
                        setTimeout("scrollBannerUp()",50)
                    };
                else
                {
                    mayclick = 1;
                };
            };
        </script>
        <script type="text/javascript" language="Javascript">   
            document.onload = setTimeout("scrollBannerDown()",2500);
        </script>

mvh
simsen :-)
Avatar billede simsen Mester
28. marts 2007 - 14:36 #1
Hov glemte at spørge pænt......

Nogen der ved, hvordan jeg får den til at lægge sig over den eksisterende side istedet for at skubbe?
Avatar billede crazysnap Seniormester
29. marts 2007 - 10:52 #2
Hej simsen,

Det script du har fundet der må jeg nok indrømme ikke er særlig godt struktureret og svært at indstille på. Jeg har derfor omskrevet det en del så det er muligt at bestemme præcis hvor rullegardinet skal være på siden, hvor meget af det der skal titte frem fra start af og om det skal centreres horizontalt. Det nye script er også browser-uafhængigt hvilket det du har ovenover absolut ikke er.  :)

Prøv at kopierer nedenståen script ind i en ny html fil og prøv ad. :)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <script type="text/javascript">
            var incre = 20;
            var scroll;
            var endHeight;
            var curHeight;
            var endPos;
           
            //Hvis denne her er true bliver den centreret i midten af siden (men kan centreret på x-aksen).
            //Det betyder at startX bliver ignoreret når denne er true.
            var CenterX = false;
           
            //Bestemmer dens position på siden i px
            var startX = 100;
            var startY = 0;
           
            //Bestemmer hvor meget af den der skal være synlig fra start af
            var footOffset = 20;         

            function scrollBannerDown()
            {
                if(curHeight < endHeight)
                {
                    curHeight += incre;
                   
                    if(curHeight > endHeight)
                    {
                        curHeight = endHeight;
                        scroll.style.clip = 'rect(' + 0 + 'px auto auto auto)';
                    }
                    else                   
                        scroll.style.clip = 'rect(' + (endHeight - curHeight).toString() + 'px auto auto auto)';
                       
                    scroll.style.top = curHeight + 'px';
                   
                    setTimeout("scrollBannerDown()",70);
                }
                else                                         
                    setTimeout("scrollBannerUp()",3000);
            }
                                       
            function scrollBannerUp()
            {
                if(curHeight > startY)
                {
                    curHeight -= incre;
                   
                    if(curHeight < startY)
                    {
                        curHeight = startY;
                        scroll.style.clip = 'rect(' + endPos.toString() + 'px auto auto auto)';
                    }
                    else                 
                        scroll.style.clip = 'rect(' + (endHeight - curHeight).toString() + 'px auto auto auto)';
                       
                    scroll.style.top = curHeight + 'px';
                   
                    setTimeout("scrollBannerUp()",50);
                }
                else
                {                   
                    var mayclick = 1;
                }
            }
           
            function init()
            {
                var intBannerWidth = parseInt(document.getElementById("scrolldownbanner").style.width);
                var intBannerHeight = parseInt(document.getElementById("scrolldownbanner").style.height);
           
                scroll = document.getElementById("scrolldownbanner");
               
                endHeight = startY;
                endPos = intBannerHeight-footOffset;
                startY += -(intBannerHeight-footOffset);
                curHeight = startY;

                if(CenterX)
                {
                    startX = (parseInt(document.body.offsetWidth)/2) - (intBannerWidth / 2);
                    startX = (100/parseInt(document.body.offsetWidth)) * startX ;
                    scroll.style.left = startX + '%';
                }
                else
                    scroll.style.left = startX + 'px';
                   
                scroll.style.top = (startY).toString() + 'px';
                scroll.style.clip = 'rect(' + endPos.toString() + 'px auto auto auto)';
            }
         
            window.onload = function() { init(); setTimeout("scrollBannerDown()",2500); };
        </script>
       
    </head>
    <body >
      <table width="100%" style="border: solid 1px gray; background-color: Blue;">
        <tr >
            <td>Hej med dig</td>
        </tr>
        <tr>
            <td>jijoioj</td>
        </tr>
        <tr>
            <td>jijoioj</td>
        </tr>
        <tr>
            <td>jijoioj</td>
        </tr>
        <tr>
            <td>jijoioj</td>
        </tr>
      </table>
        <div id="scrolldownbanner" style="position: absolute; width:490px; height:250px; border: solid 1px gray; background-color: Window;">                             
            <table width="100%" style="height: 100%;" cellpadding="0" cellspacing="0">
                <tr style="background-color: Window;">
                    <td>
                        <table width="100%">
                            <tr>
                                <td align="center">Dette er overskriften til reklamen</td>
                            </tr>
                            <tr>
                                <td align="center"><a href="#">Et lille link</a></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="bottom">
                        <table width="100%" border="0" style="background-color: Gray; height: 18px;">
                            <tr>
                                <td style="width: 90%; font-size: x-small;">bla bla bla jojiojæuh g uygfj tfjyfj </td>
                                <td><a onclick="scrollBannerDown();" href="#"><img alt="" style="border: none 0;" src="pic1.jpg" width="50" height="14" /></a></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>


Mvh.

- Snap :)
Avatar billede simsen Mester
30. marts 2007 - 08:07 #3
Hej crazysnap,

Den er der næsten........ Det eneste er at den skal slet ikke være synlig fra start af - altså være fra start 0 px højt.....

Jeg troede det var nok at slette:

<tr>
                    <td valign="bottom">
                        <table width="100%" border="0" style="background-color: Gray; height: 18px;">
                            <tr>
                                <td style="width: 90%; font-size: x-small;">bla bla bla jojiojæuh g uygfj tfjyfj </td>
                                <td><a onclick="scrollBannerDown();" href="#"><img alt="" style="border: none 0;" src="pic1.jpg" width="50" height="14" /></a></td>
                            </tr>
                        </table>
                    </td>
                </tr>

Men var det ikke?

mvh
simsen :-)
Avatar billede simsen Mester
30. marts 2007 - 08:10 #4
Hov .......hvis jeg nu gad at læse din kode.......OG ikke mindst dine kommentarer *mega flov*

Det er bare kanont - det virker perfekt....... Smid et svar og få dine velfortjente points.

mvh
simsen :-)
Avatar billede crazysnap Seniormester
30. marts 2007 - 09:14 #5
Hej simsen,


Glad for at høre den er lige i øjet, og ja du kan bare ved at indstille footOffset bestemme hvor meget af rullegardinet der skal være synlig fra start af (som du også selv fandt ud af). :)


Mvh.

- Snap :)
Avatar billede crazysnap Seniormester
30. marts 2007 - 12:04 #6
Og tak for pointene!


Held og lykke med det! :)


Mvh.

- Snap
Avatar billede simsen Mester
30. marts 2007 - 19:15 #7
Jeg siger tak for hjælpen :-)

Mvh
simsen :-)
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