Søg
Avatar billede pnr Nybegynder
13. juli 2004 - 13:54 Der er 19 kommentarer og
1 løsning

Placer et elemen på en fast position i forhold til en knap

Jeg har en knap som når man trykker på den, viser en kalender neden under sig.

onclick="st=document.getElementById('calDiv<%=ClientID%>').style;pos=getPos(this);st.left=pos.x-120+'px';st.top=(pos.y+22)+'px';st.display=(st.display!='block')?'block':'none';"

Nu er mit problem at når man bladre i månederne i kalenderen, reloades siden også står kalenderen lige pludeslig ikkeder hvor den skulle, først hvis jeg trykker på knappen igen ryger den på plads.

Hvordan får jeg den til at stå det rigtige sted heletiden?
Avatar billede Slettet bruger
13. juli 2004 - 20:56 #1
Du skal indsætte dette i body-tagget:

<body ... onload="st=document.getElementById('calDiv<%=ClientID%>').style;pos=getPos(document.getElementById('knapID'));st.left=pos.x-120+'px';st.top=(pos.y+22)+'px';">

Husk at ændre "knapID" til knappens rigtige id.

Derefter kan du forenkle din onclick til dette:

onclick="st.display=(st.display!='block')?'block':'none';"

P.S. Sørg for, at variablen "st" ikke bliver overskrevet af et andet script på siden.
Avatar billede pnr Nybegynder
14. juli 2004 - 08:25 #2
Der er et lille problem i den løsning, Jeg har ikke et body tag.

koden er i en usercontrol i ASP.NET.

Kan man ikke lave det på en anden måde?
Avatar billede Slettet bruger
14. juli 2004 - 10:47 #3
Jo du kan indsætte dette UNDER knappen og div'en med kalenderen i:

<script type="text/javascript">
st = document.getElementById("calDiv<%=ClientID%>").style;
pos = getPos(document.getElementById("knapID"));
st.left = pos.x - 120 + "px";
st.top = (pos.y + 22) + "px";
</script>

Din onclick event handler skal være som i min første kommentar.
Avatar billede pnr Nybegynder
14. juli 2004 - 13:12 #4
Det virker desværre ikke, nu kommer den helt oppe i venstre hjørne.
Avatar billede Slettet bruger
15. juli 2004 - 11:14 #5
Kan du ikke smide et link?
Avatar billede pnr Nybegynder
15. juli 2004 - 12:46 #6
Det ligger lokalt.

Men jeg tror jeg har fundet problemet, det er følgende:

Her er det kode der viser kalenderen:
<a href="#" onclick="st=document.getElementById('calDiv<%=ClientID%>').style;pos=getPos(this);st.left=pos.x-120+'px';st.top=(pos.y+22)+'px';st.display=(st.display!='block')?'block':'none';"><img src="images/VaelgDato.jpg" id="knap" border="0"></a>

Når jeg så kalder dette fra javascriptet:

<script type="text/javascript">
    st = document.getElementById("calDiv<%=ClientID%>").style;
    pos = getPos(document.getElementById("knap"));
    alert(pos.x);
    st.left = pos.x - 120 + "px";
    st.top = (pos.y + 22) + "px";
</script>

Så retunere den alert 0, som om den ikke kan finde den knap, Jeg har også prøvet at palacere en button men det virkede heller ikke
Avatar billede Slettet bruger
15. juli 2004 - 20:43 #7
Du skal sørge for, at din knap har id'en "knap", og at den er placeret over scriptet. Kan du ikke vise hele koden til knappen?
Avatar billede pnr Nybegynder
16. juli 2004 - 06:09 #8
Det er hele koden til min knap. knappen består af et billede med <a href> omkring. men jeg har også prøvet at bruge en rigtig knap istedet, men det virkede heller ikke.
Avatar billede Slettet bruger
16. juli 2004 - 21:20 #9
Må jeg se din getPos-funktion? Prøv evt. at give linket id="knap" i stedet for billedet.
Avatar billede pnr Nybegynder
16. juli 2004 - 22:16 #10
det har jeg også prøvet uden held.

    function getPos(elm) {//jumper
        for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
        return {x:zx,y:zy}
Avatar billede Slettet bruger
17. juli 2004 - 14:18 #11
Jeg går ud fra, funktionen også har en krøllet parantes som afslutning.

Det er ikke så nemt at overskue. Kan du evt. på den færdiggenererede side vælge Vis kilde og så gemme kildekoden som en html-fil og uploade den? Hvis du ikke har mulighed for upload, må du jo poste kildekoden her.

Læg mærke til, at det kun er den færdiggenererede kildekode, der er interessant - altså hvor ASP-koden er blevet fortolket.
Avatar billede pnr Nybegynder
02. august 2004 - 10:47 #12
Undskyld jeg ikke har fået svaret tilbage, men jeg har været på ferie :-)


Her er koden efter den er blevet fortolket af en browser.

<script type="text/javascript">
function getPos(elm) {//jumper
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy}
}
</script>

<table>
    <tr>
        <TD width="40"><input name="dato:dato" type="text" value="02-08-                        2004" id="dato_dato" class="inputText" style="width:80px;" />
                </TD>

        <td width="30">
                    <a href="#" onclick="st=document.getElementById('calDivdato').style;pos=getPos(this);st.left=pos.x-120+'px';st.top=(pos.y+22)+'px';st.display=(st.display!='block')?'block':'none';"><img src="images/VaelgDato.jpg" border="0"></a>
            <div id="calDivdato" style=" Z-INDEX: 1; LEFT: 314px; POSITION: absolute; TOP: 114px; if: none">
                <table id="Calendar" class="brod_txt" cellspacing="0" cellpadding="2" bordercolor="Black" border="0" style="color:#000000;background-color:White;border-color:Black;border-width:1px;border-style:solid;height:60px;width:120px;border-collapse:collapse;">
    <tr><td colspan="7" style="background-color:Navy;"><table class="brod_txt" cellspacing="0" border="0" style="color:White;width:100%;border-collapse:collapse;">
        <tr><td style="color:White;background-color:Navy;width:15%;"><a href="java script:__doPostBack('dato$Calendar','V1674')" style="color:White">&lt;</a></td><td align="Center" style="width:70%;">september 2004</td><td align="Right" style="color:White;background-color:Navy;width:15%;"><a href="java script:__doPostBack('dato$Calendar','V1735')" style="color:White">&gt;</a></td></tr>
    </table></td></tr><tr><td align="Center">ma</td><td align="Center">ti</td><td align="Center">on</td><td align="Center">to</td><td align="Center">fr</td><td align="Center">lø</td><td align="Center">sø</td></tr><tr><td align="Center" style="color:Silver;width:14%;"><a href="java script:__doPostBack('dato$Calendar','1703')" style="color:Silver">30</a></td><td align="Center" style="color:Silver;width:14%;"><a href="java script:__doPostBack('dato$Calendar','1704')" style="color:Silver">31</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1705')" style="color:#000000">1</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1706')" style="color:#000000">2</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1707')" style="color:#000000">3</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1708')" style="color:#000000">4</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1709')" style="color:#000000">5</a></td></tr><tr><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1710')" style="color:#000000">6</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1711')" style="color:#000000">7</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1712')" style="color:#000000">8</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1713')" style="color:#000000">9</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1714')" style="color:#000000">10</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1715')" style="color:#000000">11</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1716')" style="color:#000000">12</a></td></tr><tr><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1717')" style="color:#000000">13</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1718')" style="color:#000000">14</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1719')" style="color:#000000">15</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1720')" style="color:#000000">16</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1721')" style="color:#000000">17</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1722')" style="color:#000000">18</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1723')" style="color:#000000">19</a></td></tr><tr><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1724')" style="color:#000000">20</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1725')" style="color:#000000">21</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1726')" style="color:#000000">22</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1727')" style="color:#000000">23</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1728')" style="color:#000000">24</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1729')" style="color:#000000">25</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1730')" style="color:#000000">26</a></td></tr><tr><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1731')" style="color:#000000">27</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1732')" style="color:#000000">28</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1733')" style="color:#000000">29</a></td><td align="Center" style="width:14%;"><a href="java script:__doPostBack('dato$Calendar','1734')" style="color:#000000">30</a></td><td align="Center" style="color:Silver;width:14%;"><a href="java script:__doPostBack('dato$Calendar','1735')" style="color:Silver">1</a></td><td align="Center" style="color:Silver;width:14%;"><a href="java script:__doPostBack('dato$Calendar','1736')" style="color:Silver">2</a></td><td align="Center" style="color:Silver;width:14%;"><a href="java script:__doPostBack('dato$Calendar','1737')" style="color:Silver">3</a></td></tr><tr><td align="Center" style="color:Silver;width:14%;"><a href="java script:__doPostBack('dato$Calendar','1738')" style="color:Silver">4</a></td><td align="Center" style="color:Silver;width:14%;"><a href="java script:__doPostBack('dato$Calendar','1739')" style="color:Silver">5</a></td><td align="Center" style="color:Silver;width:14%;"><a href="java script:__doPostBack('dato$Calendar','1740')" style="color:Silver">6</a></td><td align="Center" style="color:Silver;width:14%;"><a href="java script:__doPostBack('dato$Calendar','1741')" style="color:Silver">7</a></td><td align="Center" style="color:Silver;width:14%;"><a href="java script:__doPostBack('dato$Calendar','1742')" style="color:Silver">8</a></td><td align="Center" style="color:Silver;width:14%;"><a href="java script:__doPostBack('dato$Calendar','1743')" style="color:Silver">9</a></td><td align="Center" style="color:Silver;width:14%;"><a href="java script:__doPostBack('dato$Calendar','1744')" style="color:Silver">10</a></td></tr>
</table>
            </div>
        </td>
    </tr>
</table>
Avatar billede pnr Nybegynder
02. august 2004 - 10:49 #13
Fra "<table id="Calendar" class="brod_txt"" er genereret af asp.net, ud fra en standard komponent i framesættet, så det burde du bare kunne se bort fra.
Avatar billede Slettet bruger
03. august 2004 - 11:19 #14
Muligvis er problemet, at siden skal være helt loadet, før din getPos-funktion kan give et korrekt resultat. Prøv:

<script type="text/javascript">
function placer() {
  st = document.getElementById("calDiv<%=ClientID%>").style;
  pos = getPos(document.getElementById("knapID"));
  st.left = pos.x - 120 + "px";
  st.top = (pos.y + 22) + "px";
}

window.onload = placer;
</script>
Avatar billede pnr Nybegynder
06. august 2004 - 14:36 #15
Det hjalp desværre heller ikke
Avatar billede Slettet bruger
07. august 2004 - 09:44 #16
Denne linje skal lige rettes:

st.left = (pos.x - 120) + "px";

Men det er næppe dér, problemet ligger.

Har du overhovedet ingen mulighed for at uploade hele siden?
Avatar billede pnr Nybegynder
09. august 2004 - 11:42 #17
Jeg tror jeg har har fået det til at virke som det skal :-) Fejlen var en kombination af java-script og asp.net usercontrol.

phoenixv: Du skal have en stor tak for din tålmodighed og hjælp! Smidt et svar så er der velfortjente point.
Avatar billede Slettet bruger
09. august 2004 - 17:06 #18
Tak, men jeg har vist ikke fortjent dem alle sammen. :)
Avatar billede pnr Nybegynder
11. august 2004 - 11:09 #19
Pjat med dig :-)
Avatar billede Slettet bruger
13. august 2004 - 15:26 #20
Nå, jeg takker, men en anden gang må du gerne behold pointene selv.
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 16:05 Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
08/0812:15 morf bilede Af knuldefar1942 i Fri debat
07/0822:13 Gemme største værdi Af Lemming@privat.dk i Excel
07/0821:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »