Hjælp til mit JavaScript søges

Det er aldrig smart at arbejde i class-skift on-the-fly, så du skal i stedet skifte display, hvilket jo heller ikke er svært, gør f.eks. sådan:

function swap(num){
  var elm = document.getElementById('menuSub' + num).style;
  elm.display = elm.display != 'block' ? 'block' : 'none';
}

-- og grunden til at det ikke er smart at skifte class er, at browseren ikke kan være sikker på, om denne klasseændring måske har dybtgående betydning for en hel masse elementer, hvorfor den simpelthen smider hele sit DOM-træ med oplysninger om de enkelte elementers regler i havet, og starter forfra som om dokumentet lige var loadet ...

-- og det kan jo, hvis dokumentet er kompliceret komme til at tage op til flere sekunder, hvilket absolut ikke er hurtigt nok !-)

-- og specielt menuer, som måske skal bruges mange steder er det helt håbløst at bygge op på den måde ...

-- du skal iøvrigt bemærke tricket med at teste negativt, for det giver dig mulighed for at sætte en standardværdi for display i et stylesheet !o]

Uha Uha...
Sider og får sved på pandend her ??
tror jeg fårstår ca 25%
Måske 50 point er alt for lidt her ??

>>du skal iøvrigt bemærke tricket med at teste negativt, for det giver dig mulighed for at sætte en standardværdi for display i et stylesheet

Henter lige min latinordbog
Hvad mener du med at teste negativt ????

Lad mig lige starte med et let spørgsmål...Først er det menu eller menu1 scriptet jeg bør arbejde vidre på ???

Forstår ikke helt meningen med dit script.... vil det ikke får diven til as forsvinde helt ???....det skal den jo ikke....blot ændre størelse...

Jeg var inde omkring menu-scriptet, som jeg, som du også selv antyder, finder overflødigt (iøvrigt også med en del fejl !-), når du alligevel ikke har html-koden til at dække det, og da getElementById virker i IE5+ må det være godt nok med menu1-koden ...

Kig f.eks. i http://www.eksperten.dk/spm/528645, hvor jeg har vist grundstrukturen i en simpel menu, som du bør bygge med forskellige elementer til punkt og underpunkter !o]

At teste negativt er det jeg gør i den ternære operator: elm.display != 'block' (vis den hvis den ikke er vist !-)

-- og grunden er, at en style-property, som ikke er sat direkte på elementet (via inline style eller programmatisk !-) ikke kan aflæses fra javascript ...

-- elm.display = elm.display != 'block' ? 'block' : 'none'; kan også skrives sådan:

if(elm.display != 'block')
  elm.display = 'block';
else
  elm.display = 'none';

>>"a getElementById virker i IE5+ må det være godt nok med menu1-koden ..."
Også mine tanker....og egenligt også det jeg havde regnet med...sigter ikke eftr ældre browsere, men da jeg er ret JavaNewbee så Startede jeg ud fra div tut ol jeg har fundet...*S* ...så det kom med i den første udgave

Tænker så det knager her...*G*


DVS. at i
  var elm = document.getElementById('menuSub' + num).style;
  elm.display = elm.display != 'block' ? 'block' : 'none';

skal jeg skifte elm.dispaly ud med elm.height  ?? som er det der skal ændres i stilen på diven ??
Så det bliver noget ala
  var elm = document.getElementById('menuSub' + num).style;
  elm.height = elm.height != 'højde 1' ? 'højde1' : 'højde 2';
eller ???
Jeg har intet imod at lave om i det jeg har lavet....vil bare gerne vide hvad jeg laver...*G*
Jeg forstår detsvære ikke helt din forklaring.... men jeg tror jeg har en ide om hvad og hvor du vil have mig hen ad
Det du siger er hvis jeg forstår dig ret (og kan forklare mig tydeligt *G*)
at hvis jeg ikke har sat stylen direkte på det element ( <div style="...) så skal jeg ikke ændre den ved at give den et nyt navn... men ændre selve den stil den har ved at ændre i selve atributen ??? (årsag. da den ikke omskriver documentet kan den ikke læse ændring ??)

Jeg håber ikke jeg gør det mere krølled end det er

hvis jeg forstår dig korekt slår jeg mine to styles der styre divsne åben og lukket
.menuopen                    { height: auto; width: 100%; visibility: visible; overflow: hidden }
.menuclosed                    { height: 16px; width: 100%; visibility: visible; overflow: hidden }
til noget ala
.menuen                    { height: 16px; width: 100%; visibility: visible; overflow: hidden }
og så ændre heghten med scriptet ???

Hvis du ikke har stylen direkte i elementet ( <div style="...), kan du ikke aflæse den, så du ved, hvad du skal gøre !-)

Se f.eks. denne:

<script type="text/javascript">
function swap(num){
  var elm = document.getElementById('menuSub' + num).style;
  elm.display = elm.display != 'block' ? 'block' : 'none';
}
</script>
<style type="text/css">
.underpunkt{display:none;}
</style>

<div onclick="swap(1)">Menupunkt 1</div>
<div id="menuSub1" class="underpunkt">
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 1-1</a><br>
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 1-2</a><br>
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 1-3</a><br>
</div>

<div onclick="swap(2)">Menupunkt 2</div>
<div id="menuSub2" class="underpunkt">
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 2-1</a><br>
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 2-2</a><br>
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 2-3</a><br>
</div>

<div onclick="swap(3)">Menupunkt 3</div>
<div id="menuSub3" class="underpunkt">
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 3-1</a><br>
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 3-2</a><br>
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 3-3</a><br>
</div>

-- og jeg fremturer med at bruge selvstændige elementer fordi den så også virker, hvis du lige pludseligt ikke kan skabe mening med et menupunkt på kun een linje !-)

-- og man skulle nok tilføje noget style til diven, man klikker på, så der er en pointer:

.menupunkt{cursor:pointer;}

-- fremturingen skyldes også: ... eller med en browser, hvor brugeren har aktiveret meget store bogstaver !-)

fremturing ???

Jeg kan se ideen med det du laver...der er dog ET men som jeg ikke bryder mig om
hvor min menu består af en div pr menu...har din en div med en div inden i.... dette har jeg forsøgt at ungå med min opsætning, da jeg syntes det virke langt mere overskueligt både mht html og css



-- og man skulle nok tilføje noget style til diven, man klikker på, så der er en pointer:
.menupunkt{cursor:pointer;}

Jeg får da en pointer på mit ???

hovedmenupunktet skal være et link (ikke nok det er klikbart)...skal virke som alm link hvis javascript er slået fra... (Lyder dumt...men der er en årsag...)

Vil :
  var elm = document.getElementById('mmenu' + num).style;
  elm.height = elm.height != '16px' ? '16px' : 'auto';
også virke ????
Altså rette skytsets mod andre atrbutter i stylesheete end display ???

Kan være, at det er mere kompliceret i html-koden og css-koden, men det har den store fordel, at det virker uanset opsætningen på den computer, der bruges (bortset fra javascript-delen !-)

-- hvis det er et must, at det skal virke med et kald til noget server-side, hvis javascript er disablet, er der nok flere veje, den simpleste ser nok sådan ud:

<a href="dinSide.php?menu=1" onclick="swap(1);return false">Menupunkt 1</a><br>
<div id="menuSub1" class="underpunkt">
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 1-1</a><br>
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 1-2</a><br>
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 1-3</a><br>
</div>

-- og en anden mere script-tung ting: http://www.eksperten.dk/spm/485556#rid4489881 !o]

Ja, du kan godt gøre det med andre attributter, men jeg vil ikke anbefale den der, for hvis folk f.eks. ændrer bogstavstørrelsen lokalt, vil dine 16px være for lidt !-)

Kunne man ikke bare gøre lidt ala

<div onclick="swap(1)"><a href="...">Menupunkt 1</a></div>
<div id="menuSub1" class="underpunkt">
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 1-1</a><br>
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 1-2</a><br>
  <a href="#" onclick="event.cancelBubble=true;">Underpunkt 1-3</a><br>
</div>
(Selve hovedlinket skal kun bruges til anchors... da nogle sider har flere hovedmenuer... (Ja...lyder rodet...men vil virke logisk)

Ved godt det med at hvis folk ændre skriftstørelse med +- så gå det i fisk...
Men det vil din nu også gøre på mit layout ;-)
bagrundsbilldet på hovedpunktet er nemlig 16px... så enhver forøgelse vil smadre den del... submenuen klare det nu omend grimt så uden at ødelægge setupet... har også overvejet at lave hovedmenuen som image link for at sikre denne

Det du med et problem hvis submenuerne har forskellig længde (http://www.eksperten.dk/spm/485556#rid4489881)  har jeg overhovedt ikke stødt på... er det noget der sker pga  den måde du laver det på ???

*S*

Herligt....fået din metode til at virke..... næsten...
den virker kun hvis jeg statre med åbne menuer ????

elm.height = elm.height != '16px' ? '16px' : 'auto';
og
.mainmenu                    { height: auto;

Hvorfor vil den dog ikke omvendt ???

http://www.jart.dk/jgom/donweb/menu1.html

elm.height = elm.height != 'auto' ? 'auto' : '16px';

-- du skal bemærke det, jeg skrev om aflæsning !-)

-- derfor skal du teste negativt for den tilstand, du selv kan sætte ...

*S*... jo jo...læsr skam.... og forsøger efter bedste evne at forstå...*S*
Men
elm.height = elm.height != 'auto' ? 'auto' : '16px';
virker ikke  for mig
hverken med
.mainmenu  { height: 16px;
eller
.mainmenu  { height: auto;

Forsøger lige igen efter en frisk kop kaffe...*S*

Lad mig lige se om jeg forstår != '16px' ? '16px' : 'auto'; rigtigt
!= betyder 'hvis forskellig fra' ...
? betyder *så*
: er 'ellers'
Ikk ??

(Havde engang et link til en side hvor man kunne sende en virtuel øl.... ku ha været på sin plads nu for din tålmodighed *S*)

Ahhh...kan se mit problem nu...*S*

    var elm = document.getElementById('mmenu'+nr).style;
    elm.height = elm.height != '16px' ? '16px' : 'auto';

ændre jo elementet ID style (mmenu) ikke classen
Hmmm...tilbage til tegnebrædtet...*S*

Jepz til forståelsen af den ternære operator !-)

-- når du sætter en værdi i dit stylesheet vil en javascript forespørgsel til den returnere ingenting ...

En simpel test:

<style type="text/css">
.test{color:orange;}
</style>

<script type="text/javascript">
function alertNSet(elm){
  st = elm.style;
  txt = "Elementets styles:";
  txt += "\nbackground-color:\t" + st.backgroundColor;
  txt += "\ncolor:\t\t" + st.color;
  alert(txt);
  st.color = st.color ? 'red' : orange;
  st.backgroundColor = st.backgroundColor != "#ddd" ? "#ddd" : "#a0a0a0";
}
</script>

<div style="background:#a0a0a0;" onclick="alertNSet(this)">Prøv at trykke her<br>-- og prøv så igen !-)</div>

-- bemærk at den første gang skifter tekst-farven fordi det er ellers-værdien, altså evalueres st.color til false (hvilket også gælder 0, undefinet eller null !-)

>> Jepz til forståelsen af den ternære operator !-)

Klapper mig selv på hovedet....dytig dreng....jeg skal nok blive til  noget endag...*S*

er somsagt temlig grøn i JavaScript... så din hjælp, forslag og forklaringe er megeværdsat... omend jeg må indrømme at det nok ikke er sivet helt ind enu tror jeg du allerede har hjulpet mig en god del vidre.... men øvelse gør jo mester... så jeg må jo bare træne

forsøger lige at få menuen til at funger med dit script, og min nu bedre forståelse *G*...og håber så du vil kaste et blik på det igen lidt senere???...

Du kan jo prøve om jeg er her på lige det tidspunkt !-)

*S*...

Jamen grundlæggende er det jo meget let.... (når man bare har forstået lidt af tekniken)...*G*
og det er ikke så svært at bruge dit script...
flyttede højden fra classen til IDen i css'en...og så virkede det...
Det vil sige...det virker med åbne menuer der åbnes og lukkes...starter de lukked kan jeg ikke få det til at virke i IE på macen, men det virker fint i resten... Jeg kan ikke se hvad der gør det ikke virker i IE hvi menuerne er lukket

Virker i IE ---> http://www.jart.dk/jgom/donweb/menu1.html
Virker ikke i IE---> http://www.jart.dk/jgom/donweb/menu1.html

Hov... http://www.jart.dk/jgom/donweb/menu2.html virker ikke

IE/Mac ???

-- hvad dælen bruger du den til ?-)

Det eneste som den kan bruges til...laveste fællesnævner....
(IEmac er "detsvære" et krav til siden)

Hvis du tester med en browser, som kun bruges af webudviklere til at teste, får du et forkert billede af virkeligheden ...

IE/Mac er nogenlunde lige så ens med IE/Win som en hestevogn svarer til en 50 personers luksusbus !-)

-- og de virker ganske udmærket i alle mine browsere !o]

IE findes ikke på nogen mac'er, som er bare nogenlunde nye/opdaterede, så det ville jeg simpelthen ikke acceptere som krav ...

Detsvære findes den på OS9 *SG* som en del af siten også vil komme til at henvende sig til

og nej...er nu heller ikke den der er den vigtigste.... (langt fra)...
Men lige denne funktion bør da virke både den ene og den ande vej ??? SÅ tossed kan IE da heller ikke være ???
Sider her og er sikker på det er mig der laver kluder....men ?

Jeg vil helst at menuerne er lukket fra start.... og så kan jeg evnt. lave en onload funtion til at åbne den eller de der skal være åben på diverse sider.... Jeg kan selvf gøre det omvendt...altså lukke dem onload...men det virker lidt dumt

Hvordan virker mit eksempel fra 08/10-2005 18:15:31 ?-)

det virker så langt som at jeg få bagrundsfarven at vid...og så en scriptfejl...*S*
oragen is undefind

Hov ...

  st.color = st.color ? 'red' : 'orange';

-- troede jeg havde fået rettet den her også !-)

*S*...hjælpe med '' om farven...
Ja...den sender hele tiden samme resultat ud...

det forstår jeg sådan set godt

(hmmm ....... kan jeg så holde fingren fra send knappen før jeg har skrevet færdig....FY)


Hvad jeg ikke forstår er:
Hvorfor virker mit ikke hvis jeg har menuen lukket fra starten... men virker omvendt ??
det må da være så simpelt som at bytte værdierne om i både script og css ???

Prøv at alerte højde-værdien !-)

Følgende virker på IEmac

Script:
    var elm = document.getElementById('mmenu'+nr).style;
    elm.height = elm.height != '16px' ? '16px' : 'auto';
CSS:
#mmenu100    { height: auto;
HTML:
<div id="mmenu101"

men dette virker ikke

Script:
    var elm = document.getElementById('mmenu'+nr).style;
    elm.height = elm.height != 'auto' ? 'auto' : '16px';
CSS:
#mmenu100    { height: 16px;
HTML:
<div id="mmenu101"

hvilket ifølge min naive barnetro burde virke ???

det er da #mmenu101 jeg ville ha skrevet under CSS
(Den fejl er altså ikke påpå siden *S*)

Prøv at alerte den værdi, højden har i funktionen !-)

Vil jeg prøve...

Tage lige ca 2x3kvarters pause...*SG*

Så...1-0 ....ok...


Oki....alert viser hvad den burde....så hvid jeg kan se...
(Har lavet en menu3 og 4 med alert)

Hele IE mac afæren ligge i at den ikke vil opaftte at hvis værdien er ubekendt så er den forskellig fra auto

Har sat alert(elm.height) før og efter
elm.height = elm.height != ...........
i begge versioner
og i alle browsere får jeg samme resultat
første klik på et menufelt...
---> alert =
---> menuen åbner /lukker
---> allert = auto/16px
ved klik derefter
---> allert = auto/16px
---> menuen lukker/åbner
---> allert = 16px/auto

Det er kun i IEmac at menuen ikke vil åbne sig, og KUN hvis den starter med at være lukket...
Klikker man 3 gange åbner den sig...

Problemet må altså ligge i IE  ved første klik gang
enten mener den nuværende højde må være = auto
ellerat de 16px fra stylen er lig med autohøjden og  ikke er indholdet af elementet
hvad det så end er må det være IE der er gal på den ??? for det burde da virke....?
Spørgsmålet er så blot...hvordan fixer jeg den..??

Jeg må vel på en eller anden måde angive overfor IEmac (og det skader vel ikke de andre?) hvad elm.hight er hvis den er tom
Grin nu ikke for højt .... *S*.....men noget ala
if (elm.height=='') elm.height='16px';
Mellem de to linier???

Tåbelig browser !-)

Prøv:

elm.height = elm.height != '16px' || elm.height == '' ? '16px' : 'auto';

Meget tåbelig...*S*

(Måske derfor jeg finder den erotisk ??? ...... minder om min X..... hun var også uforståelig)

Tester lige den du kom med....

SÅ....

Nu virker det i alle de browser jeg har...
Din løsning nr2 funger også fint...
men uanset hvad så vil IEmac altså have if (elm.height=='') elm.height='16px'; med, før det virker i den.
http://www.jart.dk/jgom/donweb/menu4.html
Så med den på...og selvf væk med alert er den vist ved at være der ? eller ??
(ja...havde set bedre ud uden *S* )

Virker det ikke med:

function MenuControler(nr){
    var elm = document.getElementById('mmenu'+nr).style;
    elm.height = elm.height != '16px' || elm.height == '' ? '16px' : 'auto';
}

?-)

(Smiler lidt selvstolt....Øj...fandt Næsten selv en løsning  *GGG*....enda være den havde virket på mit oprindelige script også..)

Nope... IEmac fatter ikke hvad igenting er...den tror åbenbart igenting er = auto  ... og derfor vil det selvf. ikke virker hvis den skal være forskellig fra auto for at åbne menue.... men virker fint omvendt...da 16px hvertfald ikke er = auto

tydeligvis en bug

Altså....virker med både
elm.height = elm.height != 'auto' ? 'auto' : '16px';
og
elm.height = elm.height != '16px' || elm.height == '' ? '16px' : 'auto';

Men IEmac kræver altså min linie for at virke fra starten

function MenuControler(nr){
var elm = document.getElementById('mmenu'+nr).style;
if (elm.height=='') elm.height='16px';
elm.height = elm.height != 'auto' ? 'auto' : '16px';
}

Er det så rigtigt skrevet ...eller er jeg bare heldig ??

Tjah, det er tåbelig programmering, da du jo så skal skrive det samme endnu flere steder, men det virker altså nærmere som om den ikke forstår den ternære operator ?-)

-- så måske vil dette virke:

if(elm.height == "" || elm.height != "16px")
  elm.height = "16px";
else
  elm.height = "auto";

Forstår ikke helt hvad du mener med jeg skal angive det flere steder ???
Det er det eneste jeg sætter ind....har ikke angivet noget andet noget steds for at få det til at virke med den ???

Tanken hos mig hvar følgende...
når alerten ved første klik er helt blank  (Hvilket den hvar i alle browsere) så må værdien af elm.heght altså være ingenting
Rigtig ??
og det er her IE mac ikke kan følge med...så jeg tænkte...jamen så må jeg jo fortælle den at hvis der igen værdi er...så er den 16px...
og det ser da ud til at virke


Dit nye foreslag gør at alt virker ens i både NN FF og IE....men nu har alle problemet med at først åbne efter 3ed klik ?

noget helt andet jeg slet ikke har haft med i overvejelsen

script og stylesheet bliver begge external....Men det har Forhåbenligt ikke indflydelse på funktionen ?.... (Kryders ben og øre)
Det vil det jo vise sig..*G*...

roenving >>
Medmindre der er en smarter måde at lave følgende på
function MenuControler(nr){
var elm = document.getElementById('mmenu'+nr).style;
if (elm.height=='') elm.height='16px';
elm.height = elm.height != 'auto' ? 'auto' : '16px';
}
Som også virker i IEmac...
Så tror jeg jeg bliver nød til at beholde indtil IEmac ikke længere er et krav....(Hvilket forhåbenligt er snart *G*)
Og så vil if (elm.height=='') elm.height='16px'; linien jo være lige til at fjerne

Det er måske verken pænt eller specielt smart med den linie i scriptet... men hvis det er det der skal til for at få det til at virke i IE kan man så ikke godtage en sådan linie, med netop den begrundelse ??

Men det virker i en ægte IE !-)

-- men åbenbart ikke i det crap, de har smidt i næsen på mac-brugere ,-(

-- og der burde ikke være den fjerneste forskel på om scripts og stylesheets ligger internt eller eksternt !o]

Foresten har al din hjælp da allerede langt overstege din 50 point tror jeg...*G* ... alene for din tålmodighed med min langtsomt arbsoberende hjernemasse bør give point ....*S* .... så husk lige at smide et svar på et eller andet tidspunkt når du mener vi er så tæt på en god løsning som muligt .... eller du har fået nok af at høre på mine spørgsmål og problemer med IEmac ...*S*
(Da var da en god ting du "vandt" 50 fra mig tidligere...) *G*

C,")

Jeg må heller sætte pointne op næste gang jeg vil have noget til at virke i noget så slem som IE mac...*S*
(Man kan jo kalde det strafpoint til mig...*G*)

Ja...IE mac er en spøjs fætter.....på nogen område er den faktisk bedre en win versionen.... men hold op hvor kan den også gå galt i byen..*S*

-- problematikken med at få ting til at virke i IE/mac er _meget_ omfattende, faktisk i en sådan grad, at du til bare en anelse mere komplicerede opgaver simpelthen er nødt til at sørge for et helt andet script til det f********* misfoster ...

-- els velbekomme '-)

;O)

>problematikken med at få ting til at virke i IE/mac er _meget_ omfattende

Ak ja....ved det detsvære af erfaring....

Gruer også for nogle af de funktioner der skal være på siden...Nogle af dem må jeg simpelthen nægte at gøre tror jeg.... men visse ting (så som menuen virker) bør jeg kunne søger virker...så kan man da læse og navigere på siten...*G*

Er faktisk 3 gang jeg skal sikre så langt bagud....
sidste gang var kravet dog ikke mac...men IE5 på en,,,ja ....hold fast..... win 98 .... =8-O
(Længere historie hvorfor...men kort fortalt...Ham der betalte bestemte)

Så medmindre altså den er helt gal kommer mit script til ar se således ud til jeg kan slippe for IEmac eller finder på noget bedre...

var elm = document.getElementById('mmenu'+nr).style;  // Read menustatus to open or closed
if (elm.height=='') elm.height='16px';                                      // IEmac bug fix
elm.height = elm.height != 'auto' ? 'auto' : '16px';                  // Set menustatus to open or closed

Igen ...mange tak for hjælpen.... og for at tage dig god tid til at forklare

Nu kan jeg så hygge mig lidt med at style menuerne pænt og ordenligt...*S*... (mon ikke det nok skal medføre lidt IEmac relatered spørgsmål i CSS delen af eksperten ??...*G*)

Sikkert !-)

-- og tak for point ;~}

PS. Så er der i et åbent spørgsmål under Funktioner oppe til venstre en punkt, der hedder 'Afsæt flere point' ...

AHA...der...det eneste sted jeg ikke har set efter-...*G*
Det må jeg huske til en anden gang.... Har så tilgengæld sendt en flok KarmaCowboys din vej...*S*
Man sætter jo ofte points efter hvad man tror problemt beretiger.... men sker jo det bliver mere kompliceret end man troede