Avatar billede nimrod1 Nybegynder
10. juli 2002 - 11:07 Der er 26 kommentarer og
2 løsninger

Hvordan får man et stylesheet til at få effekt i et javascript?

Jeg har et javascript (fremstillet via sothink), der genererer et sæt menu-knapper. Jeg vil gerne have, at et stylesheet, som jeg bruger til at gøre andre dele af dokumentet usynligt med, kan gøre disse knapper usynlige.

Den relevante del af style-sheet'et:

    visibility:hidden;
    position:absolute;
    top:0px;
    left:0px;

Kan det lade sig gøre? I givet fald hvordan? Eller er det nødvendigt at redigere i selve javascriptet? Og i givet fald forslag?

Det bedste samlede forslag får 50 point.

På forhånd tak.

/NimRod
Avatar billede -master-d- Nybegynder
10. juli 2002 - 11:08 #1
kan vi se javascriptet???
Avatar billede -master-d- Nybegynder
10. juli 2002 - 11:09 #2
Det hedder formentlig nok bare noget med
document.all[knappensnavn].style.visibility='hidden';
Avatar billede nimrod1 Nybegynder
10. juli 2002 - 11:55 #3
Hele scriptet fylder ca. 1500 linier, så det vil nok være svært at gå ind i det, og sætte fingeren på det sted, der kan ændres lige på en studs.

Jeg har overvejet, at sætte hele scriptet ind i en if-else-struktur:

If ("statement")
{script}
else ("NOT statement")
{andet script}

Jeg hælder mest til den løsning, men det vil kræve omkodning længere oppe, så min primære interesse er den skitserede løsning med et stylesheet.
Avatar billede =maddog= Nybegynder
10. juli 2002 - 12:25 #4
hvis du sætter
top:100px;
i et stylesheet
er
objekt.style.top == ""
stadigvæk. man skal altså fra start bestemme sig for om man vil lave sit layout i stylesheets eller via javascripts. hvis man udvikler til NS4 har man ikke noget valg. der er kun CSS.
Avatar billede helle_fred Nybegynder
10. juli 2002 - 13:56 #5
Det, der skrives ved hjælp af et javascript på websiden, kan godt kontrolleres af det generelle stylesheet. Så du skal vel bare finde ud af, hvilke tags dine menuknapper bruger - er det links, vil det f.eks. være hensigtsmæssigt at rette i javascriptet, så de har en særlig klasse, du kan manipulere på i stylesheetet
Avatar billede nimrod1 Nybegynder
10. juli 2002 - 14:00 #6
Helle: Det lyder interessant. Har du et konkret eksempel?
Avatar billede helle_fred Nybegynder
10. juli 2002 - 14:15 #7
Det konkrete eksempel har du. Det er svært at vide hvad dit script laver og hvad dit stylesheet laver uden at se den konkrete kode.
Avatar billede nimrod1 Nybegynder
10. juli 2002 - 14:33 #8
Klart nok. Jeg tror selv, jeg kan finde resten af vejen, så jeg giver Helle Fred de 50 point. Jeg lukker spørgsmålet nu. Også tak til "Mad dog" og "Master-d" for responsen.

/NimRod
Avatar billede =maddog= Nybegynder
10. juli 2002 - 14:34 #9
jeg tror nu det ville være rart med et lille eksempel. javascript og stylesheet virker meget dårligt sammen.
Avatar billede nimrod1 Nybegynder
10. juli 2002 - 14:37 #10
Du mener?
Avatar billede nimrod1 Nybegynder
10. juli 2002 - 15:02 #11
Jeg kan ikke lukke spørgsmålet af tekniske grunde:

Helle Fred's svar var en "kommentar".

Men ved nærmere eftertanke, er jeg enig med "Maddog" i, at det kunne være rart med et konkret eksempel.

Spørgsmålet er altså ikke lukket helt endnu.

Jeg vil gerne af med de 50 point, men jeg foretrækker at se et kort konkret eksempel, baseret på en javascript-class som manipuleres af et stylesheet. Evt. i form af et link til et site.

Og af tekniske grunde... Marker "svar" over til venstre. :o)

Ellers kan jeg ikke komme af med pointene. :o)

/NimRod
Avatar billede nimrod1 Nybegynder
10. juli 2002 - 15:05 #12
Yderligere kommentar:

Jeg kan selvfølgelig stille javascriptet, stylesheet'et samt html-koden til rådighed, hvis ønsket, men der er som nævnt tale om ca. 1500 linjer.

/NimRod
Avatar billede helle_fred Nybegynder
10. juli 2002 - 15:12 #13
Her er først et script, som genererer et menupunkt i form af et link. Menupunktet gives stylesheetklassen 'menupunkt', som bagefter defineres i et stylesheet. Det er altså ikke "en javascript-class, som manipuleres af et stylesheet"!

<script>
document.write("<a class='menupunkt' href='punkt1.htm'>Punkt1</a>")
</script>


<style>
.menupunkt{ color:red}
</style>
Avatar billede helle_fred Nybegynder
10. juli 2002 - 15:14 #14
- du kunne lægge din kode på webben, så vi kan se den dér
Avatar billede =maddog= Nybegynder
10. juli 2002 - 15:15 #15
altså du kan fint ændre klassen dynamisk, hvis det er det vi fisker efter
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Untitled - XHTML 1.0</title>
  <style type="text/css">
    /* STYLESHEET */
    .blue {background:blue;}
    .red {background:red;}
  </style>
</head><body>
  <div class="blue" onclick="this.className='red';"> blå der bliver rød. tryk for sjov! </div>
</body>
</html>
Avatar billede nimrod1 Nybegynder
10. juli 2002 - 15:29 #16
De nævnte filer ligger på følgende adresse:

http://www.caspersen.org/comitmen/comitmen1.htm
http://www.caspersen.org/comitmen/stm31.js
http://www.caspersen.org/comitmen/print.css

Dokumentet anvender også:

http://www.caspersen.org/comitmen/backgroundimage.css

... men det er ikke relevant i denne situation. Det konkrete problem er, at man ved udskrift af dokumentet stadigvæk får knapperne med.
Avatar billede =maddog= Nybegynder
10. juli 2002 - 15:37 #17
hvilke knapper? mener du din menu? jeg ser ingen <input type="button"> nogen steds
Avatar billede helle_fred Nybegynder
10. juli 2002 - 15:38 #18
Hvad er det for en menu du vil have skjult ved print - er det topmenuen eller menuen til højre?
Avatar billede helle_fred Nybegynder
10. juli 2002 - 15:40 #19
- topmenuen selvfølgelig, det kan jeg se når jeg printer ud...
Avatar billede =maddog= Nybegynder
10. juli 2002 - 15:44 #20
du laver en klasse der hedder void
.void [display:none;}
i dit stylesheet. og kalder din div det her  <div id="printfreemenu" class="hide">
og så tilføjer du til printikonet.
<a href="" onclick="document.getElementById('printfreemenu').className='void';window.print();return false;"><img src="images/print_ikon.gif" width="20" height="16" align="absmiddle" border="0" class="hide"></a>
Avatar billede nimrod1 Nybegynder
10. juli 2002 - 15:45 #21
Helle: Korrekt. Det er topmenuen, der driller.
Avatar billede =maddog= Nybegynder
10. juli 2002 - 15:46 #22
void [display:none;} --> void {display:none;}
og selvfølgelig skal menuen vende tilbage
onclick="document.getElementById('printfreemenu').className='void';window.print();document.getElementById('printfreemenu').className='hide';return false;"
Avatar billede nimrod1 Nybegynder
10. juli 2002 - 16:00 #23
Maddog: Ser brugbart ud. Er ved at checke op på det.
Avatar billede helle_fred Nybegynder
10. juli 2002 - 16:04 #24
eller tilføj til stylesheetet:

div{
    visibility:hidden;
    position:absolute;
    top:0px;
    left:0px;   
}

- men det giver problemer, hvis du på nogle af dine sider har div-tags. Ellers må man ind i javascriptet, som ser pebret ud!, og tilføje en stylesheetklasse.
Avatar billede helle_fred Nybegynder
10. juli 2002 - 16:15 #25
Metoden for at indføre en stylesheetklasse:

find funktionen endSTM() i javasciptet

erstat i funktionen alle forekomster af "<td" med "<td class='XX'"

Tilføj til print.css:

.XX{
    visibility:hidden;
    position:absolute;
    top:0px;
    left:0px;   
}
Avatar billede nimrod1 Nybegynder
10. juli 2002 - 16:58 #26
Maddog og Helle: I har begge givet nogle gode forslag. Jeg vil tillade mig, at vente til i morgen med at give de 50 point, for jeg er lidt i tvivl om hvilken ide, der er den bedste. Så jeg skal først lige køre nogle tests. :o)

I får besked i morgen eftermiddag.

/NimRod
Avatar billede =maddog= Nybegynder
10. juli 2002 - 17:43 #27
du kan for min skyld dele de 50 points.
husk at passe på hvilke styles der nedarves. du kan let komme i problemer. jeg formoder at lave en ny klasse er det sikreste (ingen styles overskrives) og nemmeste vedligeholde. At jeg har valgt display:none og at sætte klassen på den omkransende div skyldes at det er hammer meget lettere i mine øjne.
Avatar billede nimrod1 Nybegynder
11. juli 2002 - 11:01 #28
Maddog og Helle: Tak for jeres assistance. Jeg vælger at følge Maddog's råd og splitte pointene. I skal have mange tak for hjælpen. :o)

Hermed lukker jeg spørgsmålet.

/NimRod
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