/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Pæn nedgradering af vis/skjul-script
Fra : Jens Gyldenkærne Cla~


Dato : 17-07-03 22:39

Jeg har en form hvor to checkbokse åbner og lukker hver deres
underafsnit. Det virker fint i nyere browsere (Mozilla, Opera 7, IE
6) - men giver problemer i bl.a. Opera 6 og Netscape 4.

Jeg vil gerne lave en pæn nedgradering, således at brugere med
ældre browsere bare får en udvidet side fra starten - men hvordan
skal det gøres.

En testside kan ses her:
<http://medlem.musikinfo.dk/annoncer/opret.html> (klik på
webbillede hhv. grafisk annonce)


--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

 
 
Lasse Reichstein Nie~ (18-07-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 18-07-03 03:08

"Jens Gyldenkærne Clausen" <jens@gyros.invalid> writes:

> Jeg har en form hvor to checkbokse åbner og lukker hver deres
> underafsnit. Det virker fint i nyere browsere (Mozilla, Opera 7, IE
> 6) - men giver problemer i bl.a. Opera 6 og Netscape 4.

Problemet, antager jeg, er at man ikke kan ændre display:none til
display:block (eller omvendt) i disse browsere.

(Efter at have tjekket kan jeg se at du bruger "display:table-row".
Det virker vist ikke i IE?)

Et alternativ man kan bruger i ældre browsere (ok, i hvert fald O6,
har ikke testet NS4) er simulere display:none med visibility:hidden og
height:0px (det virker med display:block, men måske ikke så godt med
table-row).

> Jeg vil gerne lave en pæn nedgradering, således at brugere med
> ældre browsere bare får en udvidet side fra starten - men hvordan
> skal det gøres.

Det umiddelbare svar er at display *skal* være block (eller i hvert
fald synlig) fra start. Altså start med blokkene synlige. Så kan du
bruge javascript til at fjerne dem igen efter siden er loadet.

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

Jens Gyldenkærne Cla~ (18-07-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 18-07-03 11:35

Lasse Reichstein Nielsen skrev:

> Problemet, antager jeg, er at man ikke kan ændre display:none
> til display:block (eller omvendt) i disse browsere.

Præcis. Jeg vidste egentlig godt at Opera 6 havde problemer med det
- den kan godt lave vis/skjul-gymnastik hvis det bare ikke skal
ændre på sidelayoutet (altså hidden/block skulle være o.k. mens
none/block ikke er det).


> (Efter at have tjekket kan jeg se at du bruger
> "display:table-row". Det virker vist ikke i IE?)

Nej, og øv! For block virker ikke efter hensigten i Mozilla og
Opera (se <http://medlem.musikinfo.dk/annoncer/mozilla.jpg> samt
svar til Chrisser), mens table-row slet ikke virker i IE.


> Det umiddelbare svar er at display *skal* være block (eller i
> hvert fald synlig) fra start. Altså start med blokkene
> synlige. Så kan du bruge javascript til at fjerne dem igen
> efter siden er loadet.

To spørgsmål:

A) Kan jeg lave en "removeStyle" eller "resetStyle" på de skjulte
elementer? På den måde kunne man måske få IE til at vælge block og
Opera/Mozilla til at vælge table-row.

B) Hvis jeg først skjuler rækkerne ved body onload, vil det så
kunne ses i browseren? Kan det evt. undgås ved serverside
browsersnif?
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Lasse Reichstein Nie~ (18-07-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 18-07-03 12:13

Jens Gyldenkærne Clausen <jens@gyros.invalid> writes:

> To spørgsmål:
>
> A) Kan jeg lave en "removeStyle" eller "resetStyle" på de skjulte
> elementer? På den måde kunne man måske få IE til at vælge block og
> Opera/Mozilla til at vælge table-row.

Hvad mener du?
Hvis du kan genkende IE (hvilket ikke er saa svært igen), så kan
du selvfølgelig lave en funktion der bruger "block" hvis det er IE
og "table-row" hvis det ikke er. Det hjælper stadig ikke O6 og NS4.

> B) Hvis jeg først skjuler rækkerne ved body onload, vil det så
> kunne ses i browseren? Kan det evt. undgås ved serverside
> browsersnif?

De vil kunne ses indtil de bliver fjernet. Hvor længe det varer
afhænger af hvor lang tid det tager at læse resten af siden, så folk
med modem vil se det længere end folk med hurtigere forbindelser.

Det er *ikke* argument nok for at lade dem starte usynlige. Der er
en del mennesker der browser uden javascript, og derfor bør hele siden
være tilgængelig fra start.

Du kan bruge javascript tidligere end "onload" til at skjule elementer,
hvis det er for længe at vente, eller du kan bruge javascript til at
lave en "wrapper" der skjuler:

<script type="text/javscript">
document.write("<div id='wrapper1' style='display:none'>")
</script>
blah blah blah
<script type="text/javscript">
document.write("<\/div>");
</script>

Så er indholdet kun skjult hvis javascript er slået til.


Jeg kan ikke få tabellinjer til at forsvinde helt med
visibility:hidden. De reagerer ikke på "height='0px'" og selv
"line-height='0px'" fjerner dem ikke helt. Bummer!

Det virker sandsynligvis ikke i NS4 alligevel. Det er ikke alle
elementer man kan få fat i.


Det at Moz+Opera viser hele elementet i første søjle hvis du bruger
"display:block" er desværre korrekt opførsel. De ser et element i en
tabel der ikke er en "table-row" eller "table-cell", men "block", så
de pakker det pænt ind i "<tr><td>...</td></tr>".

Jeg tror det bedste gæt er browsersniffing. Det er IE, så det er nemt:


<script type="text/javascript">
var rowType = "table-row";
....
blah.style.display = rowType;
....
</script>
<!--[if IE]>
<script type="text/javascript">
rowType = "block";
</script>
<![end if]-->


Det, og så starte elementerne synlige.
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Jens Gyldenkærne Cla~ (18-07-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 18-07-03 13:01

Lasse Reichstein Nielsen skrev:

>> A) Kan jeg lave en "removeStyle" eller "resetStyle" på de
>> skjulte elementer? På den måde kunne man måske få IE til at
>> vælge block og Opera/Mozilla til at vælge table-row.
>
> Hvad mener du?

Jeg tænkte at der måske var en metode hvor man kunne gå fra <div
style="diverse-css-koder"> til <div> - altså fjerne de css-regler
man har sat for et element i stedet for at erstatte dem med noget
andet.

> Det er *ikke* argument nok for at lade dem starte usynlige.
> Der er en del mennesker der browser uden javascript, og derfor
> bør hele siden være tilgængelig fra start.

Det har du ret i.

> Du kan bruge javascript tidligere end "onload" til at skjule
> elementer, hvis det er for længe at vente,

Hvor og hvordan gøres det?

> eller du kan bruge
> javascript til at lave en "wrapper" der skjuler:

Det ser enkelt ud.


> Det at Moz+Opera viser hele elementet i første søjle hvis du
> bruger "display:block" er desværre korrekt opførsel.

- det forventede jeg såmænd også.


> Jeg tror det bedste gæt er browsersniffing. Det er IE, så det
> er nemt:

> <!--[if IE]>

- det er desværre ikke helt godt nok. Mac-IE'er forstår ikke
conditional comments. Jeg vil generelt ikke udelukke Mac-brugere,
og specielt i tilfældet her, hvor siden er rettet mod musikere.
Andelen af Macbrugere er sandsynligvis højere end normalt.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Lasse Reichstein Nie~ (18-07-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 18-07-03 13:54

Jens Gyldenkærne Clausen <jens@gyros.invalid> writes:

> Hvor og hvordan gøres det?

Indsæt
<script type="text/javascript">
document.getElementById("whatever").style.display="none";
</script>
lige efter elementet "whatever". Man skulle kunne finde elementet i
DOM'en lige så snart det er færdigt.

> - det er desværre ikke helt godt nok. Mac-IE'er forstår ikke
> conditional comments. Jeg vil generelt ikke udelukke Mac-brugere,
> og specielt i tilfældet her, hvor siden er rettet mod musikere.
> Andelen af Macbrugere er sandsynligvis højere end normalt.

Jeg havde håbet IE-Mac forstod table-row, men det kan jeg ikke finde
noget der siger.

Du kan måske bruge et CSS-hack:
<URL:http://archivist.incutio.com/viewlist/css-discuss/27827>
(jeg bryder mig ikke om den slags, men det kan være det virker)

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

Jens Gyldenkærne Cla~ (18-07-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 18-07-03 14:30

Lasse Reichstein Nielsen skrev:

> Indsæt
> <script type="text/javascript">
> document.getElementById("whatever").style.display="none";
> </script>
> lige efter elementet "whatever".

Tak - det vil jeg prøve.


> Du kan måske bruge et CSS-hack:
> <URL:http://archivist.incutio.com/viewlist/css-discuss/27827>

Det ser helt rigtigt ud. Nu skal jeg bare finde ud af hvordan jeg
sætter hhv. fjerner den regel - det er jo hele css-regler i stedet
for inline-style. Umiddelbart vil jeg tro at det er lettest at
lægge hacket (begge regler) i en klasse og så tildele eller fjerne
klassen fra det element hvor den skal virke - men kan man det?
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Jens Gyldenkærne Cla~ (18-07-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 18-07-03 15:01

Jens Gyldenkærne Clausen skrev:

> Det ser helt rigtigt ud. Nu skal jeg bare finde ud af hvordan
> jeg sætter hhv. fjerner den regel - det er jo hele css-regler

Øv igen. Fandt siden her -
<http://www.xs4all.nl/~ppk/js/w3c_css.html#change> - der viser
browserunderstøttelsen af javascriptmanipulation med css-regler.
Hvordan kan det være at Opera 7 kun forstår x.style - altså inline
style på et element.

Hverken cssRules[], styleSheets[], deleteRule[], insertRule[],
cssText, disabled eller selectorText - for at nævne nogle af dem
jeg gerne ville have brugt.

Det er sørme ikke nemt at tage hensyn til flere browsere.

--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Jens Gyldenkærne Cla~ (18-07-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 18-07-03 15:18

Jens Gyldenkærne Clausen skrev:

> Øv igen. Fandt siden her -
> <http://www.xs4all.nl/~ppk/js/w3c_css.html#change> - der viser
> browserunderstøttelsen af javascriptmanipulation med
> css-regler. Hvordan kan det være at Opera 7 kun forstår
> x.style - altså inline style på et element.

Hurra - Opera forstår obj.className - sammen med mange andre
browsere. På med css-hacket, så virker det.

Tak for hjælpen indtil videre.

--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Chrisser (18-07-2003)
Kommentar
Fra : Chrisser


Dato : 18-07-03 07:09

Jens Gyldenkærne Clausen wrote:
> Jeg har en form hvor to checkbokse åbner og lukker hver deres
> underafsnit. Det virker fint i nyere browsere (Mozilla, Opera 7, IE
> 6) - men giver problemer i bl.a. Opera 6 og Netscape 4.
>
> Jeg vil gerne lave en pæn nedgradering, således at brugere med
> ældre browsere bare får en udvidet side fra starten - men hvordan
> skal det gøres.
>
> En testside kan ses her:
> <http://medlem.musikinfo.dk/annoncer/opret.html> (klik på
> webbillede hhv. grafisk annonce)

Nu ved jeg jo ikke om du har lavet noget om på siden i løbet af natten
Men min IE6 giver fejl når jeg sætter flue i de to chechbokse ( eller
klikker på teksten ):
"Egenskaben display kunne ikke hentes. Argumentet er ugyldigt."

Mvh
Chrisser



Jens Gyldenkærne Cla~ (18-07-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 18-07-03 11:28

Chrisser skrev:

> Nu ved jeg jo ikke om du har lavet noget om på siden i løbet
> af natten Men min IE6 giver fejl når jeg sætter flue i de
> to chechbokse ( eller klikker på teksten ):
> "Egenskaben display kunne ikke hentes. Argumentet er
> ugyldigt."

Suk - jeg har ikke lavet noget om i nat, men jeg rettede til efter
at have testet i IE.

Det viser sig at IE (som Lasse også har skrevet) ikke forstår
display: table-row. Skriver jeg display: block; virker det fint i
IE - men ikke i Mozilla og Opera. Det vil sige - rækken vises og
skjules fint nok, men hele rækken vises indeholdt i første kolonne
af resten af tabellen (se skærmdump her:
<http://medlem.musikinfo.dk/annoncer/mozilla.jpg>)

Hvad nu? Umiddelbart kan jeg se følgende veje til at komme videre:

1) Browsersnif - evt. conditional comments, men det vil give
problemer med Mac-IE'er.

2) Arbejde med højden af rækken i stedet for display-parameteren
(bliver en 0px-højde overholdt når der er indhold i rækken? - og
for hvilke browsere?)

3) Splitte tabellen op i flere - pakket ind i div'er hvor jeg kan
veksle mellem block og none i display.

4) Andet?

Hvad vil I foreslå?
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Chrisser (18-07-2003)
Kommentar
Fra : Chrisser


Dato : 18-07-03 11:42

Jens Gyldenkærne Clausen wrote:
> Hvad nu? Umiddelbart kan jeg se følgende veje til at komme videre:
>
> 1) Browsersnif - evt. conditional comments, men det vil give
> problemer med Mac-IE'er.
>
> 2) Arbejde med højden af rækken i stedet for display-parameteren
> (bliver en 0px-højde overholdt når der er indhold i rækken? - og
> for hvilke browsere?)
>
> 3) Splitte tabellen op i flere - pakket ind i div'er hvor jeg kan
> veksle mellem block og none i display.
>
> 4) Andet?

Jeg ville vælge at prøve løsning 3, som du selv skriver kan løsning 1 blive
besværlig, og jeg har ikke prøvet at lege med højder på tabelrækker men jeg
vil skyde på at det ikke vil virke ens i alle browsere....hvis det
overhovedet vil virke.

Desværre kan jeg ikke bidrage med nye forslag da jeg endnu ikke er særlig
hård udi DHTML


Chrisser



Jens Gyldenkærne Cla~ (18-07-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 18-07-03 13:03

Chrisser skrev:

>> 3) Splitte tabellen op i flere - pakket ind i div'er hvor jeg
>> kan veksle mellem block og none i display.

> Jeg ville vælge at prøve løsning 3,

Det virker, men ikke uden problemer. Kolonnejusteringen forsvinder
jo når tabellerne splittes op. Jeg kan sætte en eksplicit bredde på
venstrekolonnen, men helt godt bliver det ikke.

Indtil videre er det dog stadig bedste bud.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste