[GELÖST] DIV nach Klick anzeigen

NaN · 23. Juni 2012 23:12

Die Ajax-Methode lässt mein DIV auch nicht erscheinen...

Schau Dir nochmal mein Beispiel an.
Dort habe ich allen Links die Klasse "ajax_link" gegeben wink

brandy · 23. Juni 2012 23:22

Die 1. Variante funktioniert jetzt - jedoch wird das DIV gleich beim Aufrufen der Seite angezeigt - auch klar, weil es ja beim laden von "window" aufgerufen wird.
Kann ich den Aufruf nicht bei den Inhalten einbauen. Dann würde es ja geladen und angezeigt, sobald der Inhalt geladen wird, oder?

Beitrag geändert von brandy (23. Juni 2012 23:34)

NaN · 23. Juni 2012 23:33

auch klar, weil es ja beim laden von "window" aufgerufen wird.

Später geht nicht.
Bei $(document).ready() wäre das gleiche Problem.
Du könntest evtl. noch mit einem Timeout spielen, aber die 1. Variante ist im Prinzip nicht ganz so elegant, weil Du nie weißt, wann genau der ein oder andere Event eintreffen wird.

brandy · 23. Juni 2012 23:51

Aber könnte man es nicht so lösen, dass er mir die Funktion einmal nicht aufruft - also das 1. Mal?
Er könnte das DIV das erste Mal ja auch ausserhalb des sichtbaren Bereichs platzieren...

Beitrag geändert von brandy (23. Juni 2012 00:26)

brandy · 24. Juni 2012 12:42

Jetzt habe ich schon mehrere Lösungen ausprobiert, doch es scheitert immer an einer von zwei Sachen:
Entweder wird mir das DIV beim ersten Aufruf angezeigt, was ich nicht haben möchte oder
das DIV wird mir erst nach Klick angezeigt, jedoch wird mir dann nicht der Inhalt angezeigt, weil der Link ja mit der Javascriptfunktion belegt ist.
Vielleicht hat jemand noch einen Tipp! Vielen Dank!

NaN · 24. Juni 2012 13:10

Ich kann Dein Problem leider nicht nachvollziehen.
Mein AJAX Beispiel funktioniert.
Alles andere halte ich für weniger zielführend.

Es würde vielleicht helfen, wenn man die gesamte Situation kennen würde.
D.h. ein Link, wo man sich das ganze mal in Aktion anschauen kann.
Dann wüsste man 1. was Du eigentlich willst, 2. warum diese oder jene Lösung nicht funktioniert und 3. was evtl. die tatsächliche Lösung sein könnte.

brandy · 24. Juni 2012 13:30

So ich hab jetzt eine Seite vorgeschalten:
Hier der Link - http://www.magu.co.at/index.php
Die Quadrate sollte in Zukunft das Menü sein (Ausrichtung nicht beachten!). Wenn man auf einen diesen Link klickt sollte das DIV über diesem Menü erscheinen. Eigentlich wie ein Fenster am Desktop, dass dann wieder geschlossen werden kann.

Vielen Dank!

NaN · 24. Juni 2012 13:33

Problem Nr.1: jquery konnte nicht geladen werden.

brandy · 24. Juni 2012 13:40

Sorry - schon da...

NaN · 24. Juni 2012 13:43

Und wo liegt jetzt das Problem?

brandy · 24. Juni 2012 13:55

Dass ich wenn ich die Seite aufrufe ich das DIV nicht angezeigt bekommen möchte...
Erst nachdem ich einen Link betätige...

NaN · 24. Juni 2012 14:18

Dann gib doch dem div im Stylesheet display:none.
Noch besser: Gib ihm die Klasse "no-js". Und im Javascript entfernst Du diese Klasse beim Laden wieder (ist wichtig, damit der Inhalt auch ohne Javascript angezeigt werden kann).
Bsp.:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript">
{literal}
    $(document).ready(function(){
        ... bisheriges Script ...
        $("no-js").removeClass("no-js");
    });
{/literal}
</script>

und im Stylesheet:

Hier klicken, um den Code zum Kopieren zu markieren

#hiddendiv {
    display:none;
}
div#hiddendiv.no-js {
    display:block;
}

Da die Seite beim Klick auf die Links ja nicht neu geladen wird, musst Du da auch nicht weiter rumtricksen.

Was Du jetzt evtl. noch brauchst, wäre eine Funktion zum Schließen des DIVs (wenn Du das willst). Das Javascript habe ich im Moment so geschrieben, dass der angeklickte Link keine Funktion hat. Das sieht man hier:

Hier klicken, um den Code zum Kopieren zu markieren

$(".loading")
    .unbind("click")
    .click(function(){
        return false;
    })
    .removeClass("loading")
    .addClass("current")
;

D.h. anstelle von

Hier klicken, um den Code zum Kopieren zu markieren

    .click(function(){
        return false;
    })

könnte man an dieser Stelle auch das hiddendiv wieder ausblenden:

Hier klicken, um den Code zum Kopieren zu markieren

    .click(function(){
        $("#hiddendiv").slideUp();
        bindEvent();
        return false;
    })

Um sich ein wenig Requests zu sparen könnte man an der Stelle, wo der Inhalt zum Link geladen wird, vorher noch prüfen, ob der Inhalt schon geladen wurde und das Div einfach nur einblenden ohne irgendwas zu laden.

Hier klicken, um den Code zum Kopieren zu markieren

                function bindEvent() {
                    $ajaxLinks
                        .unbind("click")
                        .click(function(){
                            $ajaxLinks
                                .removeClass("loading")
                                .unbind("click")
                                .click(function(){
                                    return false;
                                })
                            ;
                            var $a = $(this);
                            if($a.hasClass("current"))
                                $("#hiddendiv").slideDown();
                            else {
                                $a.addClass("loading");
                                loadContent(this.href);
                            }
                            return false;
                        })
                    ;
                    return false;
                }

brandy · 24. Juni 2012 14:28

Wow vielen Dank!
Das display: none; hab ich gerade vorher zum Test noch rausgenommen - danke dir...

Beitrag geändert von brandy (24. Juni 2012 14:40)

brandy · 24. Juni 2012 14:43

Bez. des Schließens - erweitere ich die bestehende Funktion des Öffnens um diese des Schließens?
Ich werde unterhalb einen Link einbauen, der dies ermöglicht...

NaN · 24. Juni 2012 14:59

Also entweder Du erweiterst die Funktionen so, wie ich schrieb - dann brauchst Du keinen zusätzlichen Link - oder Du schreibst eine weitere Funktion zum Schließen für die zusätzlichen Links. Du könntest dem Link zum Schließen eine Klasse oder eine ID geben (z.B. "close") und darüber dann die Funktion an den Link binden:

Hier klicken, um den Code zum Kopieren zu markieren

<script>
$(document).ready(function(){
    ...
    $("#close").click(function(){
        $("#hiddendiv").slideUp();
        bindEvent();
        return false;
    });
});
</script>

<a href="javascript:void(0)" id="close">Close</a>

brandy · 24. Juni 2012 15:47

Ich wollte jetzt das hiddendiv mit zwei weiteren divs befüllen - einen Header, wo der Link zum Schließen drin ist und den Bereich für den Content. Aber die zeigt er mir nicht an - gibts dafür eine Erklärung?

NaN · 24. Juni 2012 16:04

Weil der Inhalt des hiddendiv mit dem Inhalt der Seite ersetzt wird.
Du brauchst an dieser Stelle mehrere Divs:

Hier klicken, um den Code zum Kopieren zu markieren

<div id="hiddendiv">
    <div id="header">...</div>
    <div id="content">{content}</div>
</div>

Und dann musst Du dem Javascript sagen, dass es den Inhalt nicht ins hiddendiv laden soll, sondern in "content".
Schau Dir dazu die Funktion loadContent() und die Variable $container an.

Beitrag geändert von NaN (24. Juni 2012 16:09)

brandy · 24. Juni 2012 20:05

Ja das mit den Divs hab ich schon gemacht gehabt - das mit dem Inhalt hat noch nicht funktioniert!
Jetzt schaut es so aus:

Hier klicken, um den Code zum Kopieren zu markieren

            <div id="hiddendiv">
            <div id="header_content"><a href="javascript:void(0)" id="close">Schließen</a></div>
            <div id="inhalt">{content}</div>
            </div>

Jetzt funktionieren die Links nicht - Ich kann klicken, er zeigt mir den Pfad an aber es öffnet sich nichts...

NaN · 24. Juni 2012 20:12

Denk doch bitte mal logisch.
Du kannst nicht einfach im Javascript für ALLE Funktionen 'hiddendiv' auf 'inhalt' ändern.
Du sollst lediglich den Inhalt in das Div mit der ID 'inhalt' laden.
Aber das slideDown() bzw. slideUp() muss logischerweise weiterhin auf 'hiddendiv' angewendet werden. Füg doch einfach eine zweite Variable für das Inhalts-Div hinzu. Und dann wende .load() auf das Inhalts-Div und die slide-Funktionen weiterhin auf $container an.

brandy · 24. Juni 2012 20:37

Danke funktioniert!

brandy · 24. Juni 2012 20:46

Den Gallery-Tag ignoriert er mir im Content jetzt aber.

NaN · 24. Juni 2012 20:55

Nein. Es fehlen lediglich Stylesheet und Javascript der Gallery. Was ebenfalls logisch ist, wenn nur der Inhalt und nicht die komplette Seite und somit alles ohne Seiten-Template geladen wird. Dadurch kann das Gallery-Modul seine Scripts etc. nirgends einfügen.
Die müsstest Du bereits ins Seitentemplate schreiben.

brandy · 24. Juni 2012 21:24

Ok schon klar - Die Fancybox öffnet er mir aber trotzdem nicht? Wenn du mir das noch sagen kannst, geb ich Ruhe...
Danke!

NaN · 25. Juni 2012 22:16

1. Mach mal aus "bindFunction()" "bindEvent()" (Mein Fehler).

2. Du lädst jQuery jetzt zweimal. Nimm das aus dem Gallery-Javascript-Template raus.

3. Was Fancybox angeht, das ist das gleiche Problem wie das hier. D.h., wenn mich nicht alles täuscht, müsstest Du Dein Gallery Javascript so abändern (hab's nicht getestet):

Hier klicken, um den Code zum Kopieren zu markieren

$('a.group').live('click', function() {
    $.fancybox({
        'speedIn': 300,
        'speedOut': 300,
        'overlayColor': '#000',
        'overlayOpacity': 0.7,
        href: this.href
    });
    return false;
});

brandy · 25. Juni 2012 23:14

Punkt 1 und 2 hab ich abgeändert, Punkt 3 hab ich auch eingebaut...

Forum für CMS/made simple

#26 23. Juni 2012 23:12

Re: [GELÖST] DIV nach Klick anzeigen

#27 23. Juni 2012 23:22

Re: [GELÖST] DIV nach Klick anzeigen

#28 23. Juni 2012 23:33

Re: [GELÖST] DIV nach Klick anzeigen

#29 23. Juni 2012 23:51

Re: [GELÖST] DIV nach Klick anzeigen

#30 24. Juni 2012 12:42

Re: [GELÖST] DIV nach Klick anzeigen

#31 24. Juni 2012 13:10

Re: [GELÖST] DIV nach Klick anzeigen

#32 24. Juni 2012 13:30

Re: [GELÖST] DIV nach Klick anzeigen

#33 24. Juni 2012 13:33

Re: [GELÖST] DIV nach Klick anzeigen

#34 24. Juni 2012 13:40

Re: [GELÖST] DIV nach Klick anzeigen

#35 24. Juni 2012 13:43

Re: [GELÖST] DIV nach Klick anzeigen

#36 24. Juni 2012 13:55

Re: [GELÖST] DIV nach Klick anzeigen

#37 24. Juni 2012 14:18

Re: [GELÖST] DIV nach Klick anzeigen

#38 24. Juni 2012 14:28

Re: [GELÖST] DIV nach Klick anzeigen

#39 24. Juni 2012 14:43

Re: [GELÖST] DIV nach Klick anzeigen

#40 24. Juni 2012 14:59

Re: [GELÖST] DIV nach Klick anzeigen

#41 24. Juni 2012 15:47

Re: [GELÖST] DIV nach Klick anzeigen

#42 24. Juni 2012 16:04

Re: [GELÖST] DIV nach Klick anzeigen

#43 24. Juni 2012 20:05

Re: [GELÖST] DIV nach Klick anzeigen

#44 24. Juni 2012 20:12

Re: [GELÖST] DIV nach Klick anzeigen

#45 24. Juni 2012 20:37

Re: [GELÖST] DIV nach Klick anzeigen

#46 24. Juni 2012 20:46

Re: [GELÖST] DIV nach Klick anzeigen

#47 24. Juni 2012 20:55

Re: [GELÖST] DIV nach Klick anzeigen

#48 24. Juni 2012 21:24

Re: [GELÖST] DIV nach Klick anzeigen

#49 25. Juni 2012 22:16

Re: [GELÖST] DIV nach Klick anzeigen

#50 25. Juni 2012 23:14

Re: [GELÖST] DIV nach Klick anzeigen

Fußzeile des Forums