/ 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
Skjul/Vis menu: Et lille problem
Fra : Janus Høi


Dato : 05-12-08 04:44

Hej.

Jeg har tyvstjålet og klippet ideen med menuen herfra:
http://www.krakmapapi.dk/samples/oversigtskort.htm

Altså det der med at man kan toggle menuen frem og væk, ved at trykke
på "X".

Det er dette javascript der laver arbejdet:
______________________
<script type="text/javascript">
var isListOfPOIVisible = true;
function toggleListOfPOIsVisibility() {
   if (isListOfPOIVisible==true) {
      var div = document.getElementById
("divListOfPOIsBody").style.visibility = "hidden";
      isListOfPOIVisible = false;
   }
   else {
      var div = document.getElementById
("divListOfPOIsBody").style.visibility = "visible";
      isListOfPOIVisible = true;
   }
}
</script>
______________________

Og her kalder man det:
______________________
<a title="toggle POI visibility"
href="JavaScript:toggleListOfPOIsVisibility()">x</a>
______________________

Her er menuen der bliver styret:
______________________
<div id="divListOfPOIsBody" class="divListOfPOIsBody">
Her er menuen som bliver 'slukket' og 'tændt'
</div>
______________________


Det virker fint, men mit ønske er, at menuen skal være /skjult/, når
man kommer ind på siden og at man skal trykke på "X" for at se den.
Og altså ikke, som nu, hvor det er omvendt.

Jeg håber det er en helt simpel operation, men jeg kan ikke lige
gennemskue, hvor jeg gemmer menuen, når man loader siden.

 
 
Mathias (05-12-2008)
Kommentar
Fra : Mathias


Dato : 05-12-08 12:58

Værsgo:

<script type="text/javascript">
var isListOfPOIVisible = false;
function toggleListOfPOIsVisibility() {
if (isListOfPOIVisible==true) {
var div = document.getElementById
("divListOfPOIsBody").style.visibility = "hidden";
isListOfPOIVisible = false;
}
else {
var div = document.getElementById
("divListOfPOIsBody").style.visibility = "visible";
isListOfPOIVisible = true;
}
}
</script>

<a title="toggle POI visibility"
href="JavaScript:toggleListOfPOIsVisibility()">x</a>

<div id="divListOfPOIsBody" style="visibility:hidden;"
class="divListOfPOIsBody">
Her er menuen som bliver 'slukket' og 'tændt'
</div>


Mvh Mathias


Janus Høi (05-12-2008)
Kommentar
Fra : Janus Høi


Dato : 05-12-08 06:01

On 5 Dec., 12:57, "Mathias" <baggadap_FJERN-DE...@hotmail.com> wrote:
> Værsgo:
>
> <script type="text/javascript">
> var isListOfPOIVisible = false;

Hej Mathias.
Tak for forslaget, men...

Det virker bare ikke. Jeg havde selv prøvet inden spørgsmålet blev
stillet.

Det eneste den gør, er at man til at begynde med, skal trykke to gange
på "X" før der sker noget.

Så på den måde lader det jo til at virke:
Første gang man trykker, kommer menuen frem, anden gang forsvinder
den.
Problemet er jo bare (og det kan scriptet jo ikke se), at menuen
allerede ER fremme.

Så jeg tror, at det er rigtigt, at variablen 'isListOfPOIVisible' skal
være sat til false. Jeg skal bare finde ud af, hvordan menuen er
USYNLIG når siden loades.

Nogen forslag?
--
Janus

Mathias (05-12-2008)
Kommentar
Fra : Mathias


Dato : 05-12-08 15:02

Jamen du skat rette to steder:

var isListOfPOIVisible = false;

og:

<div id="divListOfPOIsBody" style="visibility:hidden;"
class="divListOfPOIsBody">

og det virker. Har selv prøvet.



Janus Høi (05-12-2008)
Kommentar
Fra : Janus Høi


Dato : 05-12-08 06:04

On 5 Dec., 14:01, Janus Høi <newsgr...@hjerteknuser.dk> wrote:
>
> Nogen forslag?

Hmm..

Har lige selv et forslag:

Kan det tænkes, at man kan lave noget javascript onLoad, hvor man
sætter den til at toggle den væk?

Jeg er ikke så stiv i det.
--
Janus

Birger Sørensen (05-12-2008)
Kommentar
Fra : Birger Sørensen


Dato : 05-12-08 14:14

Janus Høi udtrykte præcist:
> On 5 Dec., 14:01, Janus Høi <newsgr...@hjerteknuser.dk> wrote:
>>
>> Nogen forslag?
>
> Hmm..
>
> Har lige selv et forslag:
>
> Kan det tænkes, at man kan lave noget javascript onLoad, hvor man
> sætter den til at toggle den væk?
>
> Jeg er ikke så stiv i det.

Det er det du skal.
Det rigtige er at definere klassen divListOfPOIsBody med visibility:
hidden, i stedet for en inline ændring af noget allerede defineret.
Det kan muligvis løse problemet.

Du kan også prøve at erstatte style.visibility med visibility i js
funktionen.

Det er ikke alle css egenskaber der er direkte tilgængelige fra js -
nogle af dem skal tilgås gennem style-property, og de vil typisk opføre
sig som du beskriver (virker først ved andet forsøg).

Virker intet af det, kan du blot kalde din funktion i onload på body.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Janus Høi (05-12-2008)
Kommentar
Fra : Janus Høi


Dato : 05-12-08 06:34

On 5 Dec., 14:13, Birger Sørensen <s...@bbsorensen.com> wrote:
>
> Virker intet af det, kan du blot kalde din funktion i onload på body.
>

Hej Birger.
Jeg forstod desværre ikke så meget af det du skrev, men se hvad jeg
har prøvet mig frem til..


Jeg laver funktionen

<script type='text/javascript'>
function sidenHentes() {
var div = document.getElementById
("divListOfPOIsBody").style.visibility = "hidden";
}
</script>


som kaldes ved onLoad:

<body onload='sidenHentes();'>


Det virker faktisk.

Men er det "god latin", at gøre det sådan, eller går jeg over åen
efter vand?

Der er faktisk også en lille 'bug' i den løsning, for hvis man
reloader siden (ved eksempelvis F5-tasten) kommer boksen frem. Og så
er "X" igen en bagefter, men bare omvendt af hvad det var til at
begynde med. Ikke det store problem, men alligevel lidt pudsigt.

Er det iorden at gøre det som jeg har fundet på der?
--
Janus

Birger Sørensen (05-12-2008)
Kommentar
Fra : Birger Sørensen


Dato : 05-12-08 18:42

Janus Høi kom med følgende:
> On 5 Dec., 14:13, Birger Sørensen <s...@bbsorensen.com> wrote:
>>
>> Virker intet af det, kan du blot kalde din funktion i onload på body.
>>
>
> Hej Birger.
> Jeg forstod desværre ikke så meget af det du skrev, men se hvad jeg
> har prøvet mig frem til..
>
>
> Jeg laver funktionen
>
> <script type='text/javascript'>
> function sidenHentes() {
> var div = document.getElementById
> ("divListOfPOIsBody").style.visibility = "hidden";
> }
> </script>
>
>
> som kaldes ved onLoad:
>
> <body onload='sidenHentes();'>
>
>
> Det virker faktisk.
>
> Men er det "god latin", at gøre det sådan, eller går jeg over åen
> efter vand?
>
> Der er faktisk også en lille 'bug' i den løsning, for hvis man
> reloader siden (ved eksempelvis F5-tasten) kommer boksen frem. Og så
> er "X" igen en bagefter, men bare omvendt af hvad det var til at
> begynde med. Ikke det store problem, men alligevel lidt pudsigt.
>
> Er det iorden at gøre det som jeg har fundet på der?

<script type='text/javascript'>
function sidenHentes() {
document.getElementById("divListOfPOIsBody").style.visibility =
"hidden";
}
</script>

burde være nok.
Den burde heller ikke vise den ved reload. Men det gjorde din egen
svjks heller ikke.
Det er lidt svært, uden at have det i sammenhæng, og kunne se hvad der
sker.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Jørgen Farum Jensen (05-12-2008)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 05-12-08 15:16

Janus Høi skrev:
> Hej.
>
> Jeg har tyvstjålet og klippet ideen med menuen herfra:
> http://www.krakmapapi.dk/samples/oversigtskort.htm
>
> Altså det der med at man kan toggle menuen frem og væk, ved at trykke
> på "X".
>
> Det er dette javascript der laver arbejdet:
> ______________________
> <script type="text/javascript">
> var isListOfPOIVisible = true;
> function toggleListOfPOIsVisibility() {
>    if (isListOfPOIVisible==true) {
>       var div = document.getElementById
> ("divListOfPOIsBody").style.visibility = "hidden";
>       isListOfPOIVisible = false;
>    }
>    else {
>       var div = document.getElementById
> ("divListOfPOIsBody").style.visibility = "visible";
>       isListOfPOIVisible = true;
>    }
> }
> </script>
> ______________________
>
> Og her kalder man det:
> ______________________
> <a title="toggle POI visibility"
> href="JavaScript:toggleListOfPOIsVisibility()">x</a>
> ______________________
>
> Her er menuen der bliver styret:
> ______________________
> <div id="divListOfPOIsBody" class="divListOfPOIsBody">
> Her er menuen som bliver 'slukket' og 'tændt'
> </div>
> ______________________
>
<script type="text/javascript">
var isListOfPOIVisible = false;
function toggleListOfPOIsVisibility() {
if (isListOfPOIVisible==false) {
var div = document.getElementById
--> ("divListOfPOIsBody").style.visibility = "visible";
isListOfPOIVisible = true;
}
else {
var div = document.getElementById
--> ("divListOfPOIsBody").style.visibility = "hidden";
isListOfPOIVisible = false;
}
}

og
<a tabindex="1" title="toggle POI visibility"
href="toggleListOfPOIsVisibility()">x</a>

Kortere funktions-, klasse- og id-navne ville gøre det meget
mere
overskueligt. javascript-protokollen er unødvendig og
forkert. tabindex-attributten flytter x'et op i
tabuleringsordenen så x'et kan nås og aktiveres med
tastaturet.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Janus Høi (05-12-2008)
Kommentar
Fra : Janus Høi


Dato : 05-12-08 08:50

On 5 Dec., 15:02, "Mathias" <baggadap_FJERN-DE...@hotmail.com> wrote:
> Jamen du skat rette to steder:
>
<SNIP>
>
> og det virker. Har selv prøvet.

Du har helt ret. Det virker. Og er en del nemmere end det jeg ellers
var ude i.
Tak.
--
Janus

Søg
Reklame
Statistik
Spørgsmål : 177458
Tips : 31962
Nyheder : 719565
Indlæg : 6408153
Brugere : 218880

Månedens bedste
Årets bedste
Sidste års bedste