Avatar billede thoko Nybegynder
25. august 2007 - 21:27 Der er 2 kommentarer og
1 løsning

Flydende 'til toppen' og flydende tekstsøgning på 'denne side'.

Jeg har i lang tid anvendt et script til flydende 'til toppen af siden.
Jeg har nu installeret et andet script til flydende tekstsøgning på siden.
'Til toppen'-knappen forbliver nu i toppositionen uden at flyde.

Funktionen floatbutton i de 2 scripts er så ens, at jeg antager, de har samme oprindelse. For at adskille dem har jeg navneændret med 'soeg' i søgescriptet.

Hvad har jeg overset i adskillelse af de 2 scripts???

En anden løsning kunne være at samle dem til et script!!!



<script language=JavaScript type="text/javascript">
<!--
function floatButton () {
if (document.all) {
document.all.topButton.style.pixelTop = document.body.scrollTop;
}
else if (document.layers) {
document.topButton.top = window.pageYOffset;
}
else if (document.getElementById) {
document.getElementById('topButton').style.top = window.pageYOffset + 'px';
  }
}
if (document.all)
window.onscroll = floatButton;
else
setInterval ('floatButton()', 100);
function initButton () {
if (document.all) {
document.all.topButton.style.pixelLeft = document.body.clientWidth - document.all.topButton.offsetWidth;
document.all.topButton.style.visibility = 'visible';
}
else if (document.layers) {
document.topButton.left = window.innerWidth - document.topButton.clip.width - 15;
document.topButton.visibility = 'show';
}
else if (document.getElementById) {
document.getElementById('topButton').style.left = (window.innerWidth - 35) + 'px';
document.getElementById('topButton').style.visibility = 'visible';
  }
}
//-->
</script>

<script language=JavaScript type="text/javascript">
<!--
topposSoeg=45;    // top position of find button
var TRange=null;
function findString(str) {
  if (navigator.appName.indexOf("Microsoft")!=-1) {    // EXPLORER-SPECIFIC CODE
        if(str==''&& str!=null){alert('Enter a term to search for');return}
        if (TRange!=null) {  //processes remainder of finds after first find (below)
            TRange.collapse(false);
            strFound=TRange.findText(str);
            if(strFound)TRange.select();
            else {
                alert("Search for '"+str+"' completed.");
                TRange=null;
                f1.t1.value='';
                return;
            }
        }
        if (TRange==null || strFound==0) {  //processes first find
            TRange=document.body.createTextRange();
            strFound=TRange.findText(str);
            if (strFound) TRange.select();
        }
        if (!strFound) {
            alert ('"'+str+'" not found!');
            TRange=null;
            return;
        }
  }
}
-->

function floatbuttonSoeg () {
if (document.all) {
document.all.topButtonSoeg.style.pixelTop = document.body.scrollTop + topposSoeg;
}
else if (document.layers) {
document.topButtonSoeg.top = window.pageYOffset + topposSoeg + 'px';  // +'px' needed? (not tested)
}
else if (document.getElementById) {
document.getElementById('topbuttonSoeg').style.top = window.pageYOffset + topposSoeg + 'px';
  }
}
if (document.all)
window.onscroll = floatbuttonSoeg;
else
setInterval ('floatbuttonSoeg()', 100);
function initButtonSoeg () {
if (document.all) {
document.all.topButtonSoeg.style.pixelLeft = document.body.clientWidth - document.all.topButtonSoeg.offsetWidth;
document.all.topButtonSoeg.style.visibility = 'visible';
}
else if (document.layers) {
document.topButtonSoeg.left = window.innerWidth - document.topButtonSoeg.clip.width - 15;
document.topButtonSoeg.visibility = 'show';
}
else if (document.getElementById) {
document.getElementById('topButtonSoeg').style.left = (window.innerWidth - 250) + 'px';
document.getElementById('topButtonSoeg').style.visibility = 'visible';
  }
}
//  End of Floater code
//-->
</script>

</head>

<body onLoad="initButton();initButtonSoeg()" onResize="initButton();initButtonSoeg()">

<span id="topButton" style="position: absolute; visibility: hidden; top: 0px;">
<a href="java script: window.scrollTo(0, 0); void 0" onMouseOver="window.status = 'top'; return true;" onMouseOut="window.status = ''; return true;"><img class="border0" src="../dok/A_up.gif" alt="x" /></a>
</span>


<span ID="topButtonSoeg" STYLE="position: absolute; visibility: hidden; top: 40px;">
<script>document.getElementById('topButtonSoeg').style.top=topposSoeg+'px'</script>
<table width="235">
  <tr>
      <td align=right>
        <form id="f1" name="f1" action=null onSubmit="if(this.t1.value!=null && this.t1.value!='')findString(this.t1.value);return false">
            <script>
              if(document.all) document.write('<font size=3><input type="text" id="t1" name="t1" value="" size=14></font><br><input type="submit" id="b1" name="b1" value="Find på denne side" style="width:120">');
              else document.write('<input type="button" id="b1" name="b1" value="Find på denne side" style="width:120"; onclick="find()">');
            </script>
        </form>
      </td>
  </tr>
</table>
</span>
<p><br /><br /><br /><br /><br />a<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />ab<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />bc<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />cd<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />e<br /></p>
Avatar billede crazysnap Seniormester
26. august 2007 - 12:52 #1
Hej thoko,


Jeg har nu kigget dit script igennem og rettet en del små-fejl. Scriptet fejlede helt til at starte med fordi der var "<!--" og "-->" proppet ind rundt omkring som ikke passede sammen (dem har jeg fjernet).
Den egentlige årsag til at scriptet ikke kørte som forventet var at du sætter window.onscroll to gange i javascript. Du kan kun sætte denne event én gang (ellers er det kun den sidste som er gældende). Det betød at det kun var dit søgefelt og søgeknappen som rykkede sig med ned når man scrollede ("til toppen af siden"-billedet blev dermed hængende i toppen af siden).

Jeg har derfor:

1) Fjernet "<!--" og "-->".
2) Samlet dit script.
3) Fixet onscroll event'en til at køre både "floatbuttonSoeg()" og "floatButton()".
4) Ændret <span> til <div> (da man ikke må have tables inde i et <span>).
5) Ændret document.body.scrollTop til document.documentElement.scrollTop de nødvendige steder.
6) Flyttet onresize event'en fra body'en til window.onresize i javascript.


Prøv det modificerede script nedenfor og se om jeg har fået det hele med: :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/TR/html401">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <script type="text/javascript">
       
        topposSoeg=45;    // top position of find button
        var TRange=null;

        function floatButton()
        {
            if (document.all)
            {
                if (document.documentElement && document.documentElement.scrollTop)
                    document.all.topButton.style.pixelTop = document.documentElement.scrollTop;
                else                   
                    document.all.topButton.style.pixelTop = document.body.scrollTop;
            }
            else if (document.layers)
            {
                document.topButton.top = window.pageYOffset;
            }
            else if (document.getElementById)
            {
                document.getElementById('topButton').style.top = window.pageYOffset + 'px';
            }
        }
             
        function initButton()
        {
            if (document.all)
            {
                document.all.topButton.style.pixelLeft = document.body.clientWidth - document.all.topButton.offsetWidth;
                document.all.topButton.style.visibility = 'visible';
            }
            else if (document.layers)
            {
                document.topButton.left = window.innerWidth - document.topButton.clip.width - 15;
                document.topButton.visibility = 'show';
            }
            else if (document.getElementById)
            {
                document.getElementById('topButton').style.left = (window.innerWidth - 35) + 'px';
                document.getElementById('topButton').style.visibility = 'visible';
               
            }
        }       
       
        function findString(str)
        {
          if (navigator.appName.indexOf("Microsoft")!=-1) // EXPLORER-SPECIFIC CODE
          {   
                if(str==''&& str!=null)
                {
                    alert('Enter a term to search for');
                    return;
                }
               
                if (TRange!=null) //processes remainder of finds after first find (below)
                { 
                 
                    TRange.collapse(false);
                    strFound=TRange.findText(str);
                    if(strFound)TRange.select();
                    else
                    {
                        alert("Search for '"+str+"' completed.");
                        TRange=null;
                        f1.t1.value='';
                        return;
                    }
                }
               
                if (TRange==null || strFound==0)
                {  //processes first find
                    TRange=document.body.createTextRange();
                    strFound=TRange.findText(str);
                    if (strFound)
                        TRange.select();
                }
               
                if (!strFound)
                {
                    alert ('"'+str+'" not found!');
                    TRange=null;
                    return;
                }
          }
        }

        function floatbuttonSoeg ()
        {
            if (document.all)
            {
                if (document.documentElement && document.documentElement.scrollTop)
                    document.all.topButtonSoeg.style.pixelTop = document.documentElement.scrollTop + topposSoeg;
                else
                    document.all.topButtonSoeg.style.pixelTop = document.body.scrollTop + topposSoeg;
            }
            else if (document.layers)
            {
                document.topButtonSoeg.top = window.pageYOffset + topposSoeg + 'px';  // +'px' needed? (not tested)
            }
            else if (document.getElementById)
            {
                document.getElementById('topButtonSoeg').style.top = window.pageYOffset + topposSoeg + 'px';
            }
        }
           
        function initButtonSoeg()
        {
            if (document.all)
            {
                document.all.topButtonSoeg.style.pixelLeft = document.body.clientWidth - document.all.topButtonSoeg.offsetWidth;
                document.all.topButtonSoeg.style.visibility = 'visible';
            }
            else if (document.layers)
            {
                document.topButtonSoeg.left = window.innerWidth - document.topButtonSoeg.clip.width - 15;
                document.topButtonSoeg.visibility = 'show';
            }
            else if (document.getElementById)
            {
                document.getElementById('topButtonSoeg').style.left = (window.innerWidth - 250) + 'px';
                document.getElementById('topButtonSoeg').style.visibility = 'visible';
            }
        }
       
        window.onscroll = function() { floatbuttonSoeg(); floatButton();  };
        window.onresize = function() { initButton(); initButtonSoeg(); };

        </script>
    </head>
    <body onload="initButton(); initButtonSoeg();">

        <div id="topButton" style="position: absolute; visibility: hidden; top: 0px;">
            <a href="java script: window.scrollTo(0, 0); void 0" onmouseover="window.status = 'top'; return true;" onmouseout="window.status = ''; return true;"><img class="border0" src="../dok/A_up.gif" alt="x" /></a>
        </div>


        <div ID="topButtonSoeg" style="position: absolute; visibility: hidden; top: 40px;">
            <script type="text/javascript">
                document.getElementById('topButtonSoeg').style.top=topposSoeg+'px';
            </script>
       
            <table width="235">
              <tr>
                  <td align="right">
                    <form id="f1" action="null" onsubmit="if(this.t1.value!=null && this.t1.value!='')findString(this.t1.value);return false">
                        <script type="text/javascript">
                          if(document.all)
                            document.write('<font size=3><input type="text" id="t1" name="t1" value="" size=14></font><br><input type="submit" id="b1" name="b1" value="Find på denne side" style="width:120">');
                          else
                            document.write('<input type="button" id="b1" name="b1" value="Find på denne side" style="width:120"; onclick="find()">');
                        </script>
                    </form>
                  </td>
              </tr>
            </table>
        </div>
        <p><br /><br /><br /><br /><br />a<br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br />ab<br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br />bc<br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />cd<br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />e<br /></p>
       
    </body>
</html>



Mvh.

- Snap :)
Avatar billede thoko Nybegynder
26. august 2007 - 22:09 #2
Sådan har det nemt ved at gå, når man som jeg kun kan lave lidt usikker klippe/klistre.
Nu funker det. Tusind tak.
Avatar billede crazysnap Seniormester
26. august 2007 - 22:34 #3
Det er jeg glad for at høre og det var så lidt. :)

Skriv endelig hvis der opstår andre problemer og tak for pointene.


Held og lykke med det! :)


Mvh.

- Snap :)
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