Avatar billede larsbaun Nybegynder
08. juli 2003 - 14:52 Der er 13 kommentarer og
1 løsning

Ændreing af anchor dynamisk i en tabel

Der er sikker mange måder at løse dette problem på, så hvis i har en anden løsningsmodel er dette også o.k

Jeg er ved at lave en hjælpe side hvor brugeren guides igennem forskellige steps. Brugen skal kunne hoppe 1 step frem og tilbage af gangen.


På skærmen er der en tabel med 3 felter.

Felt 1 : pil til venstre

Felt 2 : link med følgende kode :
        <a href="#" onmouseover="java script:document.getElementById('menu').style.visibility='visible'">Skriv dit søgeord i url feltet</a>

Felt 3 : pil til højre


Det ser nogle lunde sådan ud.



<-  Skriv dit søgeord i url feltet  ->


Hvis brugeren flytte sin mus over teksten i midten for han fortalt hvad han skal gøre og det virker fint.



Nu til det store problem.

Hvordan ændre jeg teksten ( linket i midten ) ved at trykke på pil frem og tilbage

Men hvis han trykker på pil til venstre eller højre skal han hoppe et step frem eller tilbage.

dvs. at står han på step 1 kan han ikke trykke på venstre pil , kun på højre hvor kan så hopper til step 2 så har en ny besked til ham.

<-  Tryk på "søg" knappen  ->


Lars
Avatar billede roenving Novice
08. juli 2003 - 15:24 #1
Hvordan styrer du dine steps ?-)

Jeg ville selv have en række divs, som jeg styrede med display: og/eller visibility: men din måde ?o]

For hvis du har fat i en ny udgave af siden for hver gang er løsningen på dit problem aldeles anderledes ...

-- og så forstod jeg ikke at du brugte et <a>-tag til mouse-overen, du risikerer bare at folk trykker på det og så reloader siden -- tag en <span> i stedet (OG fjern så den java script: -pseudo-protokol fra ALLE javascript-event-handlere):
<span onmouseover="document.getElementById('menu').style.visibility='visible'">Skriv dit søgeord i url feltet</span>
Avatar billede larsbaun Nybegynder
08. juli 2003 - 15:36 #2
Så dit forslag er at laver en tæller der registrerer hvilken celle man er i og hidder alle andre ?
Avatar billede larsbaun Nybegynder
08. juli 2003 - 15:36 #3
god pointe mht. linket - <A> tag`en ..
Avatar billede roenving Novice
08. juli 2003 - 15:53 #4
Ja, i princippet ,-)

-- jeg skulle lige se, om jeg kunne finde referencen til et spm jeg havde fat i for en måneds tid siden, den havde jeg desværre ikke gemt, men her et eksempel på de frem-tilbage-knapper, som tager fat i en funktion, som skjuler/viser nogle divs (--lavet til en spørgsmåls-serie med 7 forskellige divs):

<DIV ID="buttonBack" STYLE="visibility:hidden"><INPUT TYPE="button" ONCLICK="switchDiv('back');" VALUE="tilbage"></DIV>
<DIV ID="buttonNext" STYLE="visibility:visible"><INPUT TYPE="button" ONCLICK="switchDiv('next');" VALUE="næste"></DIV>

-- der kunne man jo så placere din a/span-ting inde imellem ...

Bemærk, at der er to begreber med at vise: visibility, som kontrollerer om et element vises frem, men stadig lader elementets plads være elementets og display, som så at sige kan fjerne elementet fuldstændigt ...
Avatar billede larsbaun Nybegynder
08. juli 2003 - 16:05 #5
Er det i tabels eller med layers det skal gøres: for jeg arbejder i forvejen med layers ... kan der så ikke gå ged idet ?

Det kan være at det er lettere at forstå hvis du ser min kode :

<html>
<head>
<title>Widex Intershop Support</title>
<STYLE TYPE="text/css">
<!--
#parent1Div {position:absolute; left:0; top:0; width:1260; height:879; clip:rect(0,1260,879,0); background-color:#9D9D9F; layer-background-color:#E2E2E2;overflow-y:hidden}
#child1Div {STYLE="z-index:1"; position:absolute; left:50; top:50; width:1260; height:779; clip:rect(0,1260,779,0); background-color:#9D9D9F; layer-background-color:#E2E2E2;overflow-y:hidden}
#child2Div {STYLE="z-index:2"; position:absolute; left:0; top:864; width:1260; height:13; clip:rect(0,1260,864,0); background-color:#E2E2E2;overflow-y:hidden}
#child3Div {STYLE="z-index:3"; position:absolute; left:0; top:777; width:1260; height:100; clip:rect(0,1260,777,0); background-color:#E2E2E2;overflow-y:hidden}
#child4Div {STYLE="z-index:4"; position:absolute; left:0; top:0; width:1260; height:779; clip:rect(0,1260,779,0);overflow-y:hidden}


#menu {position:absolute;
      left:245px;
      top:230px;
      width:370px;
      height:30px;
      visibility:hidden;
      border:3px solid #ff0000;
      z-index:0;
}

-->
</STYLE>

<script type="text/javascript" language="JavaScript">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
********************************************************************************/
//Default browsercheck, added to all scripts!
function checkBrowser(){
    this.ver=navigator.appVersion
    this.dom=document.getElementById?1:0
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
    this.ie4=(document.all && !this.dom)?1:0;
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
    return this
}
bw=new checkBrowser()
//With nested layers for netscape, this function hides the layer if it's visible and visa versa
function showHide(div,nest){
    obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
    if(obj.visibility=='visible' || obj.visibility=='show') obj.visibility='hidden'
    else obj.visibility='visible'
}
//Shows the div
function show(div,nest){
    obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
    obj.visibility='visible'
}
//Hides the div
function hide(div,nest){
    obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
    obj.visibility='hidden'
}

</script>

</HEAD>

<body>

<DIV ID="parent1Div">

<DIV ID="child1Div" z-index:1>
<iframe src="http://www.google.com"
    id="content"
    name="content"
    width="800"
    height="600"
        scrolling="auto"
        frameborder="1">
</iframe>
</div>


<!-- ----------------------------------------------------------------------- DIV 2 --------------------------------------------------------- -->
<DIV ID="child2Div" z-index:2>
  <a href="#" onclick="show('child3Div')">
  <img src="bund1.gif" border="0">
  </A>
</DIV>   


<!-- ----------------------------------------------------------------------- DIV 3 --------------------------------------------------------- -->
<DIV ID="child3Div" z-index:3>
  <a href="#" onclick="hide('child3Div')">
  <img src="bund1.gif" border="0">
  </A>
<span onmouseover="document.getElementById('menu').style.visibility='visible'">Skriv dit søgeord i url feltet</span>


</DIV>   

<!-- ----------------------------------------------------------------------- DIV 4 --------------------------------------------------------- -->


<DIV ID="child4Div" z-index:4>
<br>
<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TEST LAYER
</DIV>

</DIV>

<!-- ----------------------------------------------------------------------- menu --------------------------------------------------------- -->


<div id="menu" onmouseenter="document.getElementById('menu').style.visibility='hidden'">
&nbsp;<B>URL FELT</B>
</div>






</BODY>
</HTML>
Avatar billede roenving Novice
08. juli 2003 - 16:24 #6
Den forvirrede mig godt nok -- af to grunde:
- google (men den er vel kun et eksempel !-)
- og så at du har en div med et søgefelt, som gemmer sig selv, nå man kommer i nærheden ?-)

Jeg kiggede lige efter igen, men det eksempel jeg har liggende er en første alpha, så det hjælper ikke noget noget ...

Men princippet i det jeg tænker på, er at der er en sekvens i det som skal vises, så når man viser noget, så¨overtager det den plads den forrige layer i sekvensen havde:
Layer1 <-- vises fra start
Layer2 <-- er skjult fra start
Layer3 <-- er skjult fra start
Layer4 <-- er skjult fra start

Når noget så skjules, så er det der slet ikke (display:none), så den samme plads bruges igen og igen ...

Hvis det du har brug for er anderledes, så sig til !-)
Avatar billede larsbaun Nybegynder
09. juli 2003 - 22:53 #7
Efter at have været i tænkebox en dags tid, er jeg nået frem til at layers ikke er en mulighed. Jeg har istedet for fundet en scroll bar, som jeg heller ikke er tilfreds med. Det bedste ville være at man kan trykke sig frem og tilbage via steps som jeg skrev i oplæget.

Det kunne være en mulighed at programmerer et table via DOM, som så tænder og slukker for td`erne. Problem er bare at det skal være utrolig dynamisk ellers bliver det hurtigt for omfattende.

Pointene er der stadigvæk hvis der er en der kan hjælpe med denne eller en anden løsning på mit problem.
Avatar billede roenving Novice
09. juli 2003 - 22:59 #8
Jeg har ikke prøvet det, men jeg ville da så forsøge at sætte de der display:none/table-row på mine tr'er ...
-- der er faktisk en speciel property: display:table-row men jeg ved ikke hvordan den funger ...
Avatar billede roenving Novice
09. juli 2003 - 23:03 #9
Ifølge w3c skulle den få et element til at opføre sig som en table-row, men da jeg ikke endnu har haft fat i den ved jeg ikke hvordan den fungerer, men i første omgang ville jeg prøve at skjule/vise en <tr> med display:none;/display:block;
Avatar billede roenving Novice
09. juli 2003 - 23:21 #10
Ændring af display for tablerows fungerede umiddelbart uden problemer, når man brugte style.display -- men nu har jeg kun lige prøvet med et simpelt eksempel ...

de interessante dele:

<TABLE BORDER="1" WIDTH="100%" STYLE="border-collapse:collapse;">
    <tr id="row1" STYLE="display:block;">
        <TD>Række 1&nbsp;</TD><TD>&nbsp;</TD>
    <TR>
    <tr id="row2" STYLE="display:none;">
        <TD>Række 2&nbsp;</TD><TD>&nbsp;</TD>
    <TR>
    <tr id="row3" STYLE="display:none;">
        <TD>Række 3&nbsp;</TD><TD>&nbsp;</TD>
    <TR>
</TABLE>
<button name="button1" id="button1" onclick="document.getElementById('row2').style.display='block';document.getElementById('row1').style.display='none';">Mus over og tryk!</button>

Frem- og tilbage-knapper skal selvfølgelig fungere dynamisk, men dette bare til eksempel ...

-- forøvrigt er det også ret tydeligt, at man skal være forsigtig med at sætte border på ,-)
Avatar billede larsbaun Nybegynder
10. juli 2003 - 09:39 #11
Det virker rigtigt godt , men når man trykker på knappen tager man focus væk fra "Google" siden og dermed kan man ikke skrive noget i søge feltet.

Hvordan løses det når siden er opbyggen med DIV tags ?

Ligger du lige et svar så du kan få dine point

Tak for hjælpen - Lars Baun
Avatar billede roenving Novice
10. juli 2003 - 13:02 #12
Man burde i princippet kunne overføre focus() til alle elementer, som man kan skrive i eller trykke på eller som kan rumme indhold, som kan påvirkes (og i IE til stort set alt andet også !-)

-- er du da tilfreds med løsningsmulighederne ?-)
'-)
Avatar billede larsbaun Nybegynder
10. juli 2003 - 13:38 #13
Jeg mente også at det hed noget med "focus" , nu skal jeg bare lige finde ud af hvordan og hvorledes, men tusinde tak for hjælpen !
Avatar billede roenving Novice
10. juli 2003 - 13:47 #14
Velbekomme -- og tak for points ;~}
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