---

Hej javascript-eksperter.


Jeg har fumlet lidt med et meget simpelt script, der viser og skjuler en
liste med links. Listen ligger i en standard <ul><li></li></ul> struktur.
Både før og efter listen er der almindelige <p></p> elementer, der skal
rykke med ned under listen, når den bliver vist.
Scriptet jeg har lavet kan der ses et primitivt eksempel på her:
http://www.many.dk/BlogList.asp
Tryk henholdvis på 'Vis liste' og 'Fjern liste' for at teste
funktionaliteten.

Mit problem er: Jeg er meget grøn i javascript. Dette er, vist nok, min
første hjemmeskrevne funktion. Jeg er derfor bekymret for, om funktionen
virker i størstedelen af de browsere, der er tilgængelige. Jeg har testet i
Internet Explorer 6, Mozilla 1.4 og Opera 7.20. Der virker scriptet, men
hvad med f.eks. Internet Explorer 5.5, browsere til Mac, osv., osv... Kan
nogen se, om dette script burde give problemer nogle steder:
<script type="text/javascript">
var d=document;
function showlist(){
d.getElementById('ShowList').style.display='none';
d.getElementById('LinkList').style.display='block';
d.getElementById('HideList').style.display='block';
}
function hidelist(){
d.getElementById('ShowList').style.display='block';
d.getElementById('LinkList').style.display='none';
d.getElementById('HideList').style.display='none';
}
</script>

.......

<p id="ShowList"><a href="javascript:showlist()">Vis liste</a></p>
<p id="HideList"><a href="javascript:hidelist()">Fjern</a></p>

Desuden vil jeg gerne have lidt kommentarer til funktionerne. Er det en
fjollet måde de er skrevet på eller kunne det gøres nemmere på en anden
måde?



Tak for jeres hjælp.

Mh. Thomas.

---

> Mit problem er: Jeg er meget grøn i javascript. Dette er, vist nok, min
> første hjemmeskrevne funktion. Jeg er derfor bekymret for, om funktionen
> virker i størstedelen af de browsere, der er tilgængelige. Jeg har testet i
> Internet Explorer 6, Mozilla 1.4 og Opera 7.20. Der virker scriptet, men
> hvad med f.eks. Internet Explorer 5.5, browsere til Mac, osv., osv... Kan
> nogen se, om dette script burde give problemer nogle steder:

Det burde virke i alle browsere. MEn det kommer jo selvfølgelig an på om
brugeren har JavaScript slået til..


--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Thomas Voller wrote:

[snip]

>
> Desuden vil jeg gerne have lidt kommentarer til funktionerne. Er det en
> fjollet måde de er skrevet på eller kunne det gøres nemmere på en anden
> måde?
>

Jeg ved ikke om det er nemmere, men jeg ville lave det på følgende måde:
http://users.cybercity.dk/~dsl58854/testcenter/js/showhidelist/index.html

Fordelen ved dette script er at de 2 link "Vis liste" og "Fjern" ikke
ses af browsere som har slået CSS fra. Med andre ord de bør kun være der
når browseren understøtter javascript.


<script type="text/javascript">
function init() {
if (   (document.getElementById) &&
   (document.createElement) &&
   (document.appendChild)) {
/*Tjecker om metoderne til dette script virker i browseren */


var oLinkList = document.getElementById("LinkList")
if (oLinkList) {
/*Finder target som er "LinkList", hvis den findes fortsætter vi*/


btn = document.createElement('button');
txt = document.createTextNode('Vis liste');
btn.appendChild(txt);
/*Opretter en knap med teksten "Vis liste" */


btn.onclick = function () {
/*På klistre eventen onclick, som henholdsvis skjuler og viser listen */


if (oLinkList.style.display == "none") {
oLinkList.style.display = "block";
txt.nodeValue = "Skjul liste";
}else {
oLinkList.style.display = "none";
txt.nodeValue = "Vis liste";
}
}

         oLinkList.parentNode.insertBefore(btn,oLinkList);
oLinkList.style.display = "none";
/* Indsætter knap'en og skjuler target */

}
}
}
window.onload = init;
/* Køre init når siden er loadet */
</script>


Hintzmann c",)

---

"Martin Hintzmann Andersen" <user@domain.invalid> skrev
> Jeg ved ikke om det er nemmere, men jeg ville lave det på følgende måde:
> http://users.cybercity.dk/~dsl58854/testcenter/js/showhidelist/index.html

Det ser spændende ud... Tak for det.
Jeg har bare et lille aber-dabei. I stedet for en button, kan man så ikke
oprette et ganske almindeligt hyperlink med href="javascript:minfunction"?
Sådan en button passer ikke så godt ind i designet, selv om man kan style
det værste væk med CSS.



Mvh. Thomas.

---

Thomas Voller wrote:

> "Martin Hintzmann Andersen" <user@domain.invalid> skrev
>
>>Jeg ved ikke om det er nemmere, men jeg ville lave det på følgende måde:
>>http://users.cybercity.dk/~dsl58854/testcenter/js/showhidelist/index.html
>
>
> Det ser spændende ud... Tak for det.
> Jeg har bare et lille aber-dabei. I stedet for en button, kan man så ikke
> oprette et ganske almindeligt hyperlink med href="javascript:minfunction"?
> Sådan en button passer ikke så godt ind i designet, selv om man kan style
> det værste væk med CSS.
>
>

Det er muligt det ikke passer ind i dit design, men almindelige brugere
forventer normalt at links går til en ny side, mens at en knap udfører
en funktion (submit'e en form, lave en beregning eller vise en liste)

Men det må du selv om, du kan i stedet for
document.createElement('button') bare create et anker, altså
document.createElement('a').

Hintzmann c",)

---

"Thomas Voller" <voller@voller.dk> writes:

> I stedet for en button, kan man så ikke oprette et ganske
> almindeligt hyperlink med href="javascript:minfunction"?

Hvis man laver et submit-link, så brug i det mindste onclick-attributten
i stedet for en javascript:-URL.
<URL:http://jibbering.com/faq/#FAQ4_24>

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

---

"Lasse Reichstein Nielsen" <lrn@hotpop.com> skrev
> Hvis man laver et submit-link, så brug i det mindste onclick-attributten
> i stedet for en javascript:-URL.
> <URL:http://jibbering.com/faq/#FAQ4_24>

Tak for jeres svar, begge to.

Nu sidder jeg og kæmper lidt med at oprette et a-element i stedet for en
button. Jeg kan bare ikke få det til at virke. Selve linket dukker godt nok
op, men ved onclick bliver jeg sendt hen til til den side, som jeg angiver i
mylink.href (showlist.html). Altså er det som om return false i onclick
atributten ikke virker. Scriptet ser nu sådan ud:

<!-- Start -->
function showlist(){
if (oLinkList.style.display == "none"){
oLinkList.style.display = "block";
txt.nodeValue = "Skjul liste";
} else {
oLinkList.style.display = "none";
txt.nodeValue = "Vis liste";
}
}

function init(){
if ((document.getElementById) && (document.createElement) &&
(document.appendChild)){
var oLinkList = document.getElementById("LinkList")
if (oLinkList){
txt = document.createTextNode('Vis liste');
mylink = document.createElement('a');
mylink.href = "showlist.html";
mylink.onclick = "showlist();return false"; //Et eller andet kikser
her omkring denne linie.
mylink.appendChild(txt);
oLinkList.parentNode.insertBefore(mylink,oLinkList);
oLinkList.style.display = "none";
}
}
}

window.onload = init;
<!-- Slut -->

Kan nogen se, hvorfor return false ikke virker ved onclick? Eller måske...
Hvorfor hele onclick-eventen ikke virker?



Mvh. Thomas.

---

Thomas Voller wrote:
>
> Nu sidder jeg og kæmper lidt med at oprette et a-element i stedet for en
> button. Jeg kan bare ikke få det til at virke. Selve linket dukker godt nok
> op, men ved onclick bliver jeg sendt hen til til den side, som jeg angiver i
> mylink.href (showlist.html). Altså er det som om return false i onclick
> atributten ikke virker. Scriptet ser nu sådan ud:
>

[snip kode]

>
> Kan nogen se, hvorfor return false ikke virker ved onclick? Eller måske...
> Hvorfor hele onclick-eventen ikke virker?
>
>

mylink.onclick = "showlist();return false";

skal ændres til

mylink.onclick = function() {
showlist();
return false;
}

Hintzmann

---

"Thomas Voller" <voller@voller.dk> writes:

> mylink.onclick = "showlist();return false"; //Et eller andet kikser
> her omkring denne linie.

> Kan nogen se, hvorfor return false ikke virker ved onclick? Eller måske...
> Hvorfor hele onclick-eventen ikke virker?

I HTML skriver man handlerne som attributter, så det bliver tekst.
I Javascript skal det være funktioner, så prøv:

mylink.onclick = function(){showlist();return false;};

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'