[GELÖST] DIV nach Klick anzeigen

brandy · 18. Juni 2012 12:35

Hallo!

Wie der Titel sagt, möchte ich ein Div erst nach einen Klick auf auf einen Link anzeigen. Dass heißt ich habe verschiedene Bilder, die als Link dienen auf der Seite und bei Klick darauf, wird mir das Content-Div erst angezeigt. Am besten über der Navigation drüber.
Wie stelle ich so etwas am besten dar?

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

serialpark · 18. Juni 2012 13:49

via javascript / jquery

Beispiel

brandy · 18. Juni 2012 13:50

Genau das suchte ich - Vielen Dank!

brandy · 21. Juni 2012 19:36

Ich habs gerade eingebaut und leider etwas festgestellt - konntest du aber nicht wissen:
Ich möchte in diesem DIV meinen Content ausgeben. Im Link wird aber jetzt ja nicht mehr die Seite mitgegeben. Kann man das so umbauen, damit ich dort meinen Inhalt angezeigt bekomme?

Vielen Dank!

NaN · 21. Juni 2012 20:02

Mal so als Ansatz:

Hier klicken, um den Code zum Kopieren zu markieren

<a href="{cms_selflink ... }" class="className">Link</a>
<div id="hiddendiv"></div>

<script link to jQuery></script>
<script>
$("#hiddendiv").hide();
$("a.className").preventDefault().click(function(e){
    $("#hiddendiv").toggle();
    return false;
});
</script>

brandy · 21. Juni 2012 21:02

Ich hab auch mal einen Vorschlag - er hat einen kleine Haken, funktioniert aber grundsätzlich:

Ich hab zum einen meine Links:

Hier klicken, um den Code zum Kopieren zu markieren

<a href="http://...." class="a1" onClick="anzeigen();">

Dann hab ich eine Javascript-Funktion:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript">
{literal}
function anzeigen() {
document.getElementById('hiddendiv').style.visibility = 'visible';
}{literal}

Im CSS ist die visibility auf hidden gestellt.
Ich schätze IHR werdet die Problematik an diesem Code schon sehen - hier aber das Problem:
Ich klicke auf den Link, er zeigt mir das DIV mit dem richtigen Inhalt an, leider aber lädt er noch und wenn er fertig geladen hat, ist mein Div wieder weg.

NaN · 21. Juni 2012 21:17

Dein onclick-Event gibt nichts zurück.
Der muss false zurückgeben, damit der Browser dem Link nicht folgt:

Hier klicken, um den Code zum Kopieren zu markieren

<a href="http://...." class="a1" onClick="anzeigen();return false;">

brandy · 21. Juni 2012 21:38

Jetzt öffnet er mir den Link aber nicht mehr... Er lädt immer die Seite, die eh schon in der Adresszeile steht.

NaN · 21. Juni 2012 21:43

Häh, was?
Sorry, ich check nicht was Du vorhast.

brandy · 21. Juni 2012 21:51

Naja das Div sollte mit dem passenden Inhalt on click angezeigt werden.
Zuerst hat ers immer nur während dem Laden angezeigt und jetzt lädt er gar nicht mehr...

NaN · 21. Juni 2012 21:54

Sorry, ich check's immer noch nicht.
Du hast ein Div.
In dem steht etwas drin.
Und dieses Div mit seinem Inhalt soll erst angezeigt werden, wenn man auf einen Link klickt.
Aber dieser Link soll gleichzeitig auch noch eine Seite laden?

Was fällt dir auf?

brandy · 21. Juni 2012 21:58

Grundsätzlich ist es ja so, dass wenn man einen Link anklickt der Inhalt im {Content} angezeigt wird. Der Content-Tag befindet sich jetzt aber in einem DIV, dass erst angezeigt wird, wenn man auf den Link klickt...
Ich hoffe es ist so verständlich...

NaN · 22. Juni 2012 22:00

Hä?!?

Ich schwöre, es war nur Kaffee, Tee und Karottensaft heute!

Also nochmal langsam:

Du hast eine Seite.
Dort ist ein Div mit dem {content}.
Wenn die Seite geladen wird, ist dieses Div (noch) nicht sichtbar.

Du hast einen Link.
Der führt normalerweise zu einer Seite.
Und wenn Du da draufklickst, soll dieses Div mit Hilfe von Javascript angezeigt werden.
Aber gleichzeitig, soll die zugehörige Seite geladen werden.

Wenn die Seite aber geladen wird, ist dieses Div logischerweise wieder (noch) nicht sichtbar.
Weil das ja erst sichtbar wird, wenn man auf den Link klickt.
Wenn man aber auf den Link klickt, wird ja gleichzeitig die Seite wieder geladen ...

Merkst Du jetzt was?
Deine Anforderung ist mit den gegebenen Informationen schlichtweg nicht lösbar.

brandy · 22. Juni 2012 22:33

Ja ok schon klar...
Ich könnte einen Cookie setzen... Bei Klick wird eine Variable mit dem Wert 1 abgelegt. Ist dieser beim Neuladen "1" zeigt er das DIV an, ansonsten nicht...

NaN · 22. Juni 2012 22:39

Sorry, aber entweder bin ich heute voll durch den Wind, oder wir reden einfach komplett aneinander vorbei.
Du hast ein Div. Und dort ist der {content} bereits drin. Nur wird er noch nicht angezeigt.
Wozu jetzt die Seite laden, wenn der Inhalt bereits da ist und nur sichtbar gemacht werden soll?
Ich verstehe die Situation einfach nicht.

brandy · 22. Juni 2012 22:46

Naja ich mache einen Refresh, er zeigt den Inhalt und das DIV an (so wie es sein sollte), lädt jedoch die Seite weiter und neu, so dass das DIV inklusive Inhalt wieder weg ist...

NaN · 22. Juni 2012 22:58

Sag mal, machst Du das eigentlich gerade mit Absicht?
Ich schwöre hoch und heilig, dass ich mir echt Mühe gebe, Dein Problem zu verstehen um Dir zu helfen, eine Lösung zu finden, aber der Satz will einfach keinen Sinn ergeben.

Naja ich mache einen Refresh,

Einen was?
D.h. Du drückst F5 bzw. klickst beim Browser auf "Neu laden"?

er zeigt den Inhalt und das DIV an (so wie es sein sollte) [...]

Schön.
So weit so gut.
Also ist das Div doch nicht von Haus aus "hidden"?

[...] lädt jedoch die Seite weiter und neu

Äh ... und ab hier steig ich wieder aus.
Sorry, soll sich morgen jemand ausgeschlafeneres damit befassen.
Ich komm einfach nicht mit.
(Letzte Hoffnung: Hast Du vielleicht mal einen Link?)

brandy · 22. Juni 2012 06:52

Nein ich erklär dir eh genau, was passiert...
Du verstehst es doch eh richtig. Es funktioniert wie jede Seite - Man klickt auf einen Link und der Inhalt wird in einem DIV, das den Content-Tag enthält angzeigt - klar oder?
Normalerweise ist das DIV immer sichtbar - in meinem Fall soll es aber erst sichtbar werden, nach dem man auf einen Link klickt, also wenn der Inhalt im DIV angzeigt wird...

Hier mal mein Template:

Hier klicken, um den Code zum Kopieren zu markieren

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
<!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
{cms_stylesheet}
<script type="text/javascript">
{literal}
function anzeigen() {
document.getElementById('hiddendiv').style.visibility = 'visible';
}
function nicht_anzeigen() {
document.getElementById('hiddendiv').style.visibility = 'hidden';
}
{/literal}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header_text"><img src="/uploads/images/text_magu.jpg">
<span id="header_links">&raquo;Start &nbsp;&nbsp;&raquo;Kontakt</span>
</div>
<div id="header_magu"><img src="/uploads/images/magu.co.at.png"></div>
</div>
<div id="hiddendiv">{content}</div>
<div id="left">
<div class="b1"><a href="http://www.link.atindex.php?page=vws" class="a1" onClick="anzeigen();">VWS</a><a href="http://www.link.atindex.php?page=innenputz" class="a2" onClick="anzeigen();return false;">Innenputz</a></div><div class="b2"><a href="http://www.link.atindex.php?page=aussenputz" class="a3" onClick="anzeigen();">Aussenputz</a><a href="http://www.link.atindex.php?page=sanieren" class="a4" onClick="anzeigen();">Sanieren</a></div><div class="b3"><a href="http://www.link.atindex.php?page=bilder" class="a5" onClick="anzeigen();">Bilder</a><a href="http://www.link.atindex.php?page=bilder" class="a6" onClick="anzeigen();">Bilder</a></div><div class="b4"><a href="http://www.link.atindex.php?page=bilder" class="a7" onClick="anzeigen();">Bilder</a></div>
</div>
</div>
</body>
</html>

NaN · 22. Juni 2012 10:08

Aha.
Na das ist doch etwas völlig anderes als einfach nur ein Div ein-/auszublenden.
Du hast den anzuzeigenden Inhalt noch garnicht.
Der muss also erst geladen werden.
Und anschließend soll der Inhalt in diesem DIV angezeigt werden.
Da gäbe es zwei Möglichkeiten.

1. Du gibst dem DIV im Stylesheet display:none und erst, wenn alles geladen ist, wird der Inhalt eingeblendet:

Hier klicken, um den Code zum Kopieren zu markieren

<script language="javascript" type="text/javascript" src=".../jquery.js"></script>
<script type="text/javascript">
{literal}
	$(window).onload(function(){
		$("#hiddendiv").slideDown();
	});
{/literal}
</script>

2. Du verwendest AJAX:

Hier klicken, um den Code zum Kopieren zu markieren

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
        <title>{sitename} - {title}</title>
        {metadata}
        <!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
        {cms_stylesheet}
        <script language="javascript" type="text/javascript" src=".../jquery.js"></script>
        <script type="text/javascript">
        {literal}
            $(document).ready(function(){
                
                var $ajaxLinks = $(".ajax_link");
                var $container = $("#hiddendiv");
                
                function bindEvent() {
                    $ajaxLinks
                        .unbind("click")
                        .click(function(){
                            $ajaxLinks
                                .removeClass("loading")
                                .unbind("click")
                                .click(function(){
                                    return false;
                                })
                            ;
                            $(this).addClass("loading");
                            loadContent(this.href);
                            return false;
                        })
                    ;
                    return false;
                }
                
                function loadContent(url) {
                    $container
                        .load(url + "&showtemplate=false", function(){
                            $container
                                .slideDown()
                            ;
                            bindEvent();
                            $(".current")
                                .removeClass("current")
                            ;
                            $(".loading")
                                .unbind("click")
                                .click(function(){
                                    return false;
                                })
                                .removeClass("loading")
                                .addClass("current")
                            ;
                        })
                    ;
                    return false;
                }
                bindEvent();
                
            });
        {/literal}
        </script>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <div id="header_text">
                    <img src="/uploads/images/text_magu.jpg">
                    <span id="header_links">&raquo;Start &nbsp;&nbsp;&raquo;Kontakt</span>
                </div>
                <div id="header_magu"><img src="/uploads/images/magu.co.at.png"></div>
            </div>
            <div id="hiddendiv">{content}</div>
            <div id="left">
                <div class="b1">
                    <a href="http://www.link.atindex.php?page=vws" class="a1 ajax_link">VWS</a>
                    <a href="http://www.link.atindex.php?page=innenputz" class="a2 ajax_link">Innenputz</a>
                </div>
                <div class="b2">
                    <a href="http://www.link.atindex.php?page=aussenputz" class="a3 ajax_link">Aussenputz</a>
                    <a href="http://www.link.atindex.php?page=sanieren" class="a4 ajax_link">Sanieren</a>
                </div>
                <div class="b3">
                    <a href="http://www.link.atindex.php?page=bilder" class="a5 ajax_link">Bilder</a>
                    <a href="http://www.link.atindex.php?page=bilder" class="a6 ajax_link">Bilder</a>
                </div>
                <div class="b4">
                    <a href="http://www.link.atindex.php?page=bilder" class="a7 ajax_link">Bilder</a>
                </div>
            </div>
        </div>
    </body>
</html>

brandy · 22. Juni 2012 10:47

Danke, werds am Nachmittag ausprobieren.
Stimmt, das der Inhalt erst geladen werden muss, wäre ein Hinweis gewesen - sorry...

brandy · 23. Juni 2012 22:41

Gut ich hab jetzt Variante 1 eingebaut.
Muss ich meinen Code dann noch drinnen lassen?
Ich hab ihn schon rausgenommen und drinnengelassen - beides funktioniert nicht...
Muss ich was spezielles beachten?

NaN · 23. Juni 2012 22:50

Deinen Code kannst Du dann weglassen.
Wenn 1. nicht funktioniert (was genau funktioniert denn nicht? du brauchst jquery dazu.), probier mal 2.
Das hat bei mir mit einer Testinstallation ganz gut geklappt.
Aber vielleicht kenn ich auch wieder nicht alle Details wink

*...schlaaaaand!!!* lol

brandy · 23. Juni 2012 23:03

Hier wieder mal das Template:

Hier klicken, um den Code zum Kopieren zu markieren

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
<!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
{cms_stylesheet}
<script language="javascript" type="text/javascript" src="uploads/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
{literal}
	$(window).onload(function(){
		$("#hiddendiv").slideDown();
	});
{/literal}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header_text"><img src="/uploads/images/text_magu.jpg">
<span id="header_links">&raquo;Start &nbsp;&nbsp;&raquo;Kontakt</span>
</div>
<div id="header_magu"><img src="/uploads/images/magu.co.at.png"></div>
</div>
<div id="hiddendiv">{content}</div>
<div id="left">
<div class="b1"><a href="http://www.magu.co.at/index.php?page=vws" class="a1">VWS</a><a href="http://www.magu.co.at/index.php?page=innenputz" class="a2" onClick="anzeigen();">Innenputz</a></div><div class="b2"><a href="http://www.magu.co.at/index.php?page=aussenputz" class="a3">Aussenputz</a><a href="http://www.magu.co.at/index.php?page=sanieren" class="a4">Sanieren</a></div><div class="b3"><a href="http://www.magu.co.at/index.php?page=bilder" class="a5">Bilder</a><a href="http://www.magu.co.at/index.php?page=bilder" class="a6">Bilder</a></div><div class="b4"><a href="#" class="a7">Bilder</a></div>
</div>
</div>
</body>
</html>

Das hiddendiv ist im CSS auf display: none; gestellt - wo wird dem div gesagt, dass es wieder angezeigt wird? Macht das alles die jquery? Diese wird übrigens perfekt geladen...
Ich teste jetzt gleich mal die AJAX-Methode...

brandy · 23. Juni 2012 23:09

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

NaN · 23. Juni 2012 23:11

wo wird dem div gesagt, dass es wieder angezeigt wird?

Ooops.
Tippfehler.
Eigentlich damit:

Hier klicken, um den Code zum Kopieren zu markieren

$(window).load(function(){
	$("#hiddendiv").slideDown();
});

Forum für CMS/made simple

#1 18. Juni 2012 12:35

[GELÖST] DIV nach Klick anzeigen

#2 18. Juni 2012 13:49

Re: [GELÖST] DIV nach Klick anzeigen

#3 18. Juni 2012 13:50

Re: [GELÖST] DIV nach Klick anzeigen

#4 21. Juni 2012 19:36

Re: [GELÖST] DIV nach Klick anzeigen

#5 21. Juni 2012 20:02

Re: [GELÖST] DIV nach Klick anzeigen

#6 21. Juni 2012 21:02

Re: [GELÖST] DIV nach Klick anzeigen

#7 21. Juni 2012 21:17

Re: [GELÖST] DIV nach Klick anzeigen

#8 21. Juni 2012 21:38

Re: [GELÖST] DIV nach Klick anzeigen

#9 21. Juni 2012 21:43

Re: [GELÖST] DIV nach Klick anzeigen

#10 21. Juni 2012 21:51

Re: [GELÖST] DIV nach Klick anzeigen

#11 21. Juni 2012 21:54

Re: [GELÖST] DIV nach Klick anzeigen

#12 21. Juni 2012 21:58

Re: [GELÖST] DIV nach Klick anzeigen

#13 22. Juni 2012 22:00

Re: [GELÖST] DIV nach Klick anzeigen

#14 22. Juni 2012 22:33

Re: [GELÖST] DIV nach Klick anzeigen

#15 22. Juni 2012 22:39

Re: [GELÖST] DIV nach Klick anzeigen

#16 22. Juni 2012 22:46

Re: [GELÖST] DIV nach Klick anzeigen

#17 22. Juni 2012 22:58

Re: [GELÖST] DIV nach Klick anzeigen

#18 22. Juni 2012 06:52

Re: [GELÖST] DIV nach Klick anzeigen

#19 22. Juni 2012 10:08

Re: [GELÖST] DIV nach Klick anzeigen

#20 22. Juni 2012 10:47

Re: [GELÖST] DIV nach Klick anzeigen

#21 23. Juni 2012 22:41

Re: [GELÖST] DIV nach Klick anzeigen

#22 23. Juni 2012 22:50

Re: [GELÖST] DIV nach Klick anzeigen

#23 23. Juni 2012 23:03

Re: [GELÖST] DIV nach Klick anzeigen

#24 23. Juni 2012 23:09

Re: [GELÖST] DIV nach Klick anzeigen

#25 23. Juni 2012 23:11

Re: [GELÖST] DIV nach Klick anzeigen

Fußzeile des Forums