[JS] Div niet zichtbaar maken wanneer focus is verloren*

[Verwijderd]

Hallo allemaal,

Ik ben bezig met een navigatie menu, en nu zit ik met een probleem.
Heb nu zo'n beetje het hele tweakers forum afgezocht, en een aantal dagdelen ge-googled, maar nog krijg ik niet het resultaat wat ik wil.

Wat ik precies wil is:
Als ik op een link/menu-item klik, opent er een div met daar in wat items, welke items doen er niet toe.
Op het moment dat ik buiten die div die opent klik, moet het divje wat open is gegaan weer dicht gaan.

Heel simpel, maar krijg het maar niet voor elkaar!

Als iemand dit toevallig al gemaakt heeft, of mij een simpele oplossing kan geven scheeld dit mij een hoop ellende.

Dit heb ik nu in de code (wel samen gevat, om code mooi klein te maken, en gebruik verder ook Prototype)

JavaScript:

<script type="text/javascript">
    var box = {
        
        open : function (element) {
            var element = document.getElementById(element);
            
            if ( element.style.display == 'none' ) {
                element.style.display = 'block';
            } else {
                element.style.display = 'none';
            }
        }
        
    }
</script>

<a href="javascript:void(0);" onclick="box.open('divje');">open/dicht</a>

<div id="divje" style="display: none; border: 1px solid blue; padding: 15px;">
    en dit is dan de content
</div>

p.s. let niet op de spelfout in de titel.

b.v.d.

Michel.

[BtM909]

Werkt onblur niet?

Werkt onclick op je body en een check op bubbling ook niet?

Ik mis dus eigenlijk wat je zelf hebt uitgezocht, waar en wat er niet toereikend was?

Handige link als je voor de bubbling optie gaat: http://www.quirksmode.org/js/introevents.html

[Verwijderd]

Je kan ook onmouseout gebruiken in combinatie met setTimeOut om je div te verbergen. Werkt eigenlijk altijd prettig.

Alleen werkt het sluiten dan niet door buiten je menu te klikken, maar nadat je cursor een tijdje niet meer op je menu heeft gestaan.

[ Voor 36% gewijzigd door Verwijderd op 24-07-2007 16:45 ]

[Fuzzillogic]

Je gebruikt element als variabele om de naam van de div door te geven, en als variabele om het element in box::open in op te slaan. Ik gok dat daar al iets misgaat.

edit: misschien moet ik ook eens verder lezen. Je zult ergens moeten opslaan of, en zo ja welke div er momenteel geopend is/zijn. Met een onclick op de body kun je die dan weer slutien.

[ Voor 37% gewijzigd door Fuzzillogic op 24-07-2007 16:48 ]

[glashio]

HTML:

<script type="text/javascript">
    var box = {
        id : 'divje',
        targetNode : null,
        triggerNode : null,
        restoreHandler : null,
        Initialize : function() {
            if (!box.targetNode)
                box.targetNode = document.getElementById(box.id);
        },
        Open : function () { box.Display(true); },
        Close : function () { box.Display(false); },
        ToggleByNode : function(node) {
            this.triggerNode = node;
            box.Display()
        },
        isBlur : function(e) {
            e = e || window.event;
            var target = e.target || e.srcElement, found;
            // Bubble up
            if (target !== box.triggerNode) {
                while(target.parentNode) {
                    if (target === box.targetNode) {
                        found = true;
                        break;
                    }
                    target = target.parentNode;
                }
                if (!found)
                    box.Close();
            }
            return box.restoreHandler ? box.restoreHandler(e) : true;
        },
        Display : function(show) {
            box.Initialize();
            if (show === undefined)
                show = box.targetNode.style.display == 'none';
            box.targetNode.style.display = show ? 'block' : 'none';
            if (show)
                box.restoreHandler = typeof document.onclick == 'function' ? document.onclick : null;
            document.onclick = show ? box.isBlur : box.restoreHandler;
        }
    }
    
    // Testing
    var cnt = 0;
    document.onclick = function() { document.body.appendChild(document.createTextNode(' ' + cnt++)) };
</script>

<a href="javascript:void(0);" onclick="box.ToggleByNode(this);">open/dicht</a>

<div id="divje" style="display: none; border: 1px solid blue; padding: 15px;">
    <p>en dit is dan de content<p>
    <ul>
        <li>Lijstje
        <li>met items
    </ul>
    <input type="button" value="Sluit" onClick="box.Close()">
</div>

Met dit script zou het aardig moeten lukken, rekening houdend met nested elementen in je box.
Maak er een klasse van en je kan hem op meerdere box-jes gebruiken

[Kiphaas7]

@TS

Ik moet ook zeggen dat goede ajax tutorials slecht te vinden zijn. Ben nu ook al een poosje bezig gefrustreerd te zoeken naar iets...

Overigens, aangezien je zegt dat je prototype gebruikt waarom gebruik je

JavaScript:

document.getElementById(element)

als hier een handige functie voor is in prototype:

JavaScript:

$('element')

Overigens is het niet zo fijn om met javascript style attributen te veranderen; daar is css voor. Je kan beter de css class veranderen, of een css class toevoegen (ja meerdere classes zijn mogelijk)

In het geval van prototype:

niet:

JavaScript:

element.style.display = 'none';

wel:

JavaScript:

$('element').addClassName('je_css_klasse')

of wat precies hetzelfde is, maar anders geschreven:

Element.toggleClassName(element', 'je_css_klasse')

Dat is wat ik tot nu toe heb opgepikt. (dus niet verder vragen ). Overigens heb ik ook opgepikt dat javascript triggers meegeven in links (dus je onclick="box.open('divje') ) ook niet zo fijn is om de 3 layers (html, css, javascript) gescheiden te houden. Hoe je dit dan precies in javascript afhandelt, daar ben ik zelf nog naar op zoek.

Ik neem aan dat je inline css gebruikt alleen voor dit voorbeeld? Want ook dat moet je gescheiden houden.

[ Voor 55% gewijzigd door Kiphaas7 op 24-07-2007 20:46 ]

[Fuzzillogic]

Zelf gebruik ik regelmatig het JS behaviour script. Hiermee kun je je HTML clean houden. Het lijkt op de behaviours die IE aan CSS toevoegt, maar dan gewoon cross-browser en zonder dat je je CSS besmeurt met javascriptcode. Erg elegant.

[funkwurm]

KipHaas, het is heel mooi dat je mensen wil helpen en dat juich ik toe, maar er is wel veel mis met je post. Je begint over AJAX terwijl dat helemaal niet aan de orde is. Dan geef je dit alternatief:

Kiphaas7 schreef op dinsdag 24 juli 2007 @ 19:59:
Overigens, aangezien je zegt dat je prototype gebruikt waarom gebruik je

JavaScript:

document.getElementById(element)

als hier een handige functie voor is in prototype:

JavaScript:

$('element')

Nu ken ik Prototype niet, maar ik kan me niet voorstellen dat je de naam van een variabele tussen aanhalingstekens moet meegeven, dus het lijkt me dat je nu naar en element met id 'element' zoekt ipv een element met als id het zelfde als de waarde van de var element.

Tot slot drukt de kekke GoT highlighter je op een typfout in je laatste stukje code, maar ondanks dat je je post bewerkt hebt, heb je die laten staan...

Je mag hier natuurlijk fouten maken en ik wil je ook niet de mond snoeren ofzo, maar dit viel me wel heel erg op.

@TS: je zult bij elk click event moeten kijken of er binnen of buiten de div geklikt wordt en aan de hand daarvan de div laten zien of verbergen. Dat heet eventbubbling zoals BtM909 al aangaf.

[Kiphaas7]

funkwurm schreef op dinsdag 24 juli 2007 @ 20:38:
KipHaas, het is heel mooi dat je mensen wil helpen en dat juich ik toe, maar er is wel veel mis met je post. Je begint over AJAX terwijl dat helemaal niet aan de orde is. Dan geef je dit alternatief:

Excuses, aangezien de prototype library meestal wordt gebruikt voor AJAX, heb ik die twee omgedraaid. Ik bedoelde goede prototype tutorials.

funkwurm schreef op dinsdag 24 juli 2007 @ 20:38:
Nu ken ik Prototype niet, maar ik kan me niet voorstellen dat je de naam van een variabele tussen aanhalingstekens moet meegeven, dus het lijkt me dat je nu naar en element met id 'element' zoekt ipv een element met als id het zelfde als de waarde van de var element.

Volgens mij heb ik het toch bij het rechte eind in het voorbeeld wat jij hebt gequoted van mij:
http://www.prototypejs.org/learn/extensions
http://www.prototypejs.org/api/element
http://www.prototypejs.org/api/element/addClassName

Edit: Of bedoel je toch iets anders?

funkwurm schreef op dinsdag 24 juli 2007 @ 20:38:
Tot slot drukt de kekke GoT highlighter je op een typfout in je laatste stukje code, maar ondanks dat je je post bewerkt hebt, heb je die laten staan...

huh? Je bedoelt onclick="box.open('divje')? Die had ik zelf bold gemaakt, anders weet ik niet wat je bedoelt met een kekke got highlighter. Dat zou trouwens een regelrechte copy paste moeten zijn van de topic-start....Overigens heb ik de bold tags nu verwijderd.
Ik heb mijn post inderdaad bewerkt omdat ik vaak per abuis op verstuur bericht klik ipv bekijk bericht (net als nu trouwens).

funkwurm schreef op dinsdag 24 juli 2007 @ 20:38:
Je mag hier natuurlijk fouten maken en ik wil je ook niet de mond snoeren ofzo, maar dit viel me wel heel erg op.

Geen probleem mee, ik weet zelf dat ik nog volop aan het leren ben wat betreft javascript (dus ook syntax), en als je nog andere dingen ziet die volgens jou niet kloppen hoor ik het graag.

[ Voor 5% gewijzigd door Kiphaas7 op 24-07-2007 21:04 ]

[funkwurm]

Kiphaas7 schreef op dinsdag 24 juli 2007 @ 20:56:
Volgens mij heb ik het toch bij het rechte eind in het voorbeeld wat jij hebt gequoted van mij:

Laat ik de code spreken:

JavaScript:

// <div id="mijndiv"></div>
var mijnVar='mijndiv';

// normaal:
document.getElementById('mijndiv'); // of
document.getElementById(mijnVar);

// prototype:
$('mijndiv'); // of
$(mijnVar);

// Jij doet nu:
$('mijnVar');

Kiphaas7 schreef op dinsdag 24 juli 2007 @ 20:56:
huh? Je bedoelt onclick="box.open('divje')?

Nee ik bedoel de aanhalingstekens hier:

JavaScript:

Element.toggleClassName(element', 'je_css_klasse');

Maar laten we Xitpo niet teveel opzadelen met deze spoedcursus Javascript

[Verwijderd]

funkwurm schreef op woensdag 25 juli 2007 @ 11:12:
[...]

Laat ik de code spreken:

JavaScript:

// <div id="mijndiv"></div>
var mijnVar='mijndiv';

// normaal:
document.getElementById('mijndiv'); // of
document.getElementById(mijnVar);

// prototype:
$('mijndiv'); // of
$(mijnVar);

// Jij doet nu:
$('mijnVar');

[...]

Nee ik bedoel de aanhalingstekens hier:

JavaScript:

Element.toggleClassName(element', 'je_css_klasse');

Maar laten we Xitpo niet teveel opzadelen met deze spoedcursus Javascript

Haha, ik heb enkel voor dit voorbeeld juist niet prototype gebruikt, dat heb ik er allemaal uit gestript. Zo'n noob in javascript ben ik nou ook weer niet hoor

[Kiphaas7]

funkwurm schreef op woensdag 25 juli 2007 @ 11:12:
[...]

Laat ik de code spreken:

JavaScript:

// <div id="mijndiv"></div>
var mijnVar='mijndiv';

// normaal:
document.getElementById('mijndiv'); // of
document.getElementById(mijnVar);

// prototype:
$('mijndiv'); // of
$(mijnVar);

// Jij doet nu:
$('mijnVar');

[...]

Nee ik bedoel de aanhalingstekens hier:

JavaScript:

Element.toggleClassName(element', 'je_css_klasse');

Maar laten we Xitpo niet teveel opzadelen met deze spoedcursus Javascript

Grove nalatigheid van mijn kant.

[funkwurm]

Verwijderd schreef op woensdag 25 juli 2007 @ 14:08:
Haha, ik heb enkel voor dit voorbeeld juist niet prototype gebruikt, dat heb ik er allemaal uit gestript. Zo'n noob in javascript ben ik nou ook weer niet hoor

Het was ook meer aan Kiphaas gericht, voordat jij aan hem een verkeerd voorbeeld zou nemen

En zo te lezen is hij het er zelf ook mee eens. Mijn punt was meer dat ik liever niet jou topic teveel volspam met de discussie tussen Kiphaas en mijzelve