div schließt sich nach öffnen eines anderen Divs

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
12 Februar 2015
62
0
6
28
#1
Hallo, habe mit onclick() ein paar "Fenster" eingebaut. Nun habe ich das Problem, dass sich das eine Fenster schließt, wenn ich das andere öffne, was aber nicht so schlimm ist. Viel schlimmer ist, dass sich das Fenster dann nicht mehr öffnen lässt. Hoffe ihr versteht was ich meine.

Code:
   $(document).ready(function() {
       $('.productbutton').click(function() {
           $('nav').fadeIn('fast');
       });
   });

   $(document).ready(function() {
       $('.productbutton').click(function() {
           $('section').fadeOut('fast');
       });
   });

/* Produkte Button Ende */

/* header */

   $(document).ready(function() {
       $('#about-products').click(function() {
           $('.about-products-window').fadeIn('fast');
       });
   });

   $(document).ready(function() {
       $('.x-button').click(function() {
           $('.about-products-window').fadeOut('fast');
       });
   });

   });
Wenn ich den Produkt Button klicke, verschwindet about-products-window wieder und lässt sich nicht mehr öffnen. Vorher geht es ganz normal.

HTML:
<header>
    <ul class="header">
        <li><a id="about-products" href="#about-products">Unsere Waren</a></li>
        <li><a id="about-us" href="#about-us">&Uuml;ber Uns</a></li>
    </ul>
    <ul class="footer">
        <li><a id="imprint" href="#imprint">Impressum</a></li>
        <li><a id="data" href="#data">Datenschutz</a></li>
        <li><a id="contact" href="#contact">Kontakt</a></li>
    </ul>
</header>
<section>
       <center><img id="logo" src="Style/IMG/salevin-logo.png" height="500"></center>
       <center><a class="productbutton" href="#">Produkte ansehen</a></center><noscript>Um unsere Produkte anzusehen, müssen sie Javascript aktivieren</noscript>
</section>
Das ist der HTML Code. Finde einfach keinen Grund, warum die header Buttons nicht mehr gehen, wenn ich auf den "Produkte ansehen" Button klicke.

Vielen Dank für eure Hilfe!
 

Aaron3219

Aktives Mitglied
6 Oktober 2015
863
177
43
17
#3
Also bevor ich das Problem versuche in deinem Code zu finden, solltest du deine Code (sowohl html, als auch JS) einmal grundlegend überarbeiten.

Punkt 1 (HTML):
Verwende bitte aktuelles HTML.
<center>-Tags werden in html5 nicht mal mehr unterstützt. Ich gehe also davon aus, das du auch keinen DOCTYPE declariert hast. Height="..." sind ebenfalls aus dem letzten Jarhundert (und das ist nicht mal gelogen :D). Dafür solltest du CSS benutzen.
Noch ein Tipp was Umlaute angeht:
"&Uuml;ber" uns kannst du dir sparen und einfach "Über uns" schreiben, wenn du dein Dokument, deinen Editor und den meta-Tag im Head des Dokumentes auf charset=utf-8 setzt.

Punkt 2 (JS):
Code:
   $(document).ready(function() {
       $('.productbutton').click(function() {
           $('nav').fadeIn('fast');
       });
   });
 
   $(document).ready(function() {
       $('.productbutton').click(function() {
           $('section').fadeOut('fast');
       });
   });
 
/* Produkte Button Ende */
 
/* header */
 
   $(document).ready(function() {
       $('#about-products').click(function() {
           $('.about-products-window').fadeIn('fast');
       });
   });
 
   $(document).ready(function() {
       $('.x-button').click(function() {
           $('.about-products-window').fadeOut('fast');
       });
   });
 
   });
Erstmal ist unten ein "});" zuviel.
Zweitens kannst du dir alle document.ready-Funktionen sparen, wenn du dein Script am ENDE des bodys einfügst (so wie es sich gehört!!!).
Code:
$('.productbutton').click(function() {
    $('nav').fadeIn('fast');
 }); 

$('.productbutton').click(function() {
   $('section').fadeOut('fast');
});

$('#about-products').click(function() {
    $('.about-products-window').fadeIn('fast');
});
  
$('.x-button').click(function() {
    $('.about-products-window').fadeOut('fast');
});
Es geht auch noch kürzer, aber das sind erstmal Grundlagen.
 
Zustimmungen: Bengman

basti1012

Aktives Mitglied
26 November 2017
623
54
28
37
Minden
chat.sebastian1012.bplaced.net
#4
Zweitens kannst du dir alle document.ready-Funktionen sparen, wenn du dein Script am ENDE des bodys einfügst (so wie es sich gehört!!!).
stimmt.frage mich sowieso warum die leute das überhaupt nutzen. wie du schon sagst man brauch es eigentlich nicht ..ausr vieleicht bei greasemonkey scripte,da könnte man das vieleicht noch einfügen,wo es meiner ansicht auch nur noch sinn macht sonst nicht
 
12 Februar 2015
62
0
6
28
#5
@basti1012
Ist eigentlich der ganze Code, welcher wichtig hierfür ist.


@Aaron3219

Das Center veraltet ist, wusste ich nicht. Habe es eigentlich immer genutzt, weil es teilweise einfach und schneller ist, als die CSS Lösung. Den richtigen <!DOCTYPE html> verwende ich trotzdem.

Das letzte }); ist nicht zu viel, sondern kam einfach mit beim kopieren. Ich habe mein Javascript, so wie es sich gehört in eine javascript.js gepackt, damit alles schön strukturiert und getrennt bleibt. Mein Problem wird dadurch leider nicht gelöst.

Und, stimmt. UTF-8 ist natürlich schlauer. Habe ich über die Zeit hinweg völlig vergessen, dass das geht. Danke.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.149
244
63
65
#6
Ist eigentlich der ganze Code, welcher wichtig hierfür ist.
Ich kann nirgendwo entdecken, wo nav und .about-products-window definiert sind.
Wenn ich den Produkt Button klicke, verschwindet about-products-window wieder und lässt sich nicht mehr öffnen.
Du machst dann pauschal alle section-Elemente unsichtbar. Ich vermute stark, dass .about-products-window in einer section liegt und deshalb unsichtbar wird und sich nicht mehr sichtbar machen lässt.
 
Zustimmungen: Bengman
12 Februar 2015
62
0
6
28
#7
@Sempervivum

Definiert im CSS? Danke, habe den Verursacher des Problems gefunden. about-products-windows ist zwar nicht im section tag, liegt aber auf dem Bildschirm auf derselben Stelle. Deshalb ist es immer verschwunden. Nur jetzt komme ich zur nächsten Frage: Wie löse ich das Problem? Ich kann das Element ja nicht einfach wo anders hinsetzen, es soll schon da bleiben. Ist das eine Art Bug? Wieso geht javascript/JQuery nach der Position des Tags, um da im Umkreis alles zu entfernen, und nicht nach dem Tag selbst?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.149
244
63
65
#8
Ich kann nirgendwo entdecken, wo nav und .about-products-window definiert sind.
Nein, ich meinte im HTML, denn in dem Abschnitt, den Du gepostet hast, finde ich es nicht.
about-products-windows ist zwar nicht im section tag, liegt aber auf dem Bildschirm auf derselben Stelle.
Verstehe nicht, wie Du das meinst. Poste doch Mal das betr. HTML.
 
12 Februar 2015
62
0
6
28
#9
HTML:
<header>
    <ul class="header">
        <li><a id="about-products" href="#about-products">Unsere Waren</a></li>
        <li><a id="about-us" href="#about-us">Über Uns</a></li>
    </ul>
    <ul class="footer">
        <li><a id="imprint" href="#imprint">Impressum</a></li>
        <li><a id="data" href="#data">Datenschutz</a></li>
        <li><a id="contact" href="#contact">Kontakt</a></li>
    </ul>
</header>
<section>
       <center><img id="logo" src="Style/IMG/salevin-logo.png" height="500"></center>
       <center><a class="productbutton" href="#">Produkte ansehen</a></center><noscript>Um unsere Produkte anzusehen, müssen sie Javascript aktivieren</noscript>
</section>
<article>
       <div class="about-products-window">
           <img class="x-button" src="Style/IMG/x-button.png">
           TEXT
       </div>
</article>
Da ist es. Ich meine, dass ich den <article> mit CSS so verschoben habe, dass es genau auf <section> liegt. Das macht ja nichts, da <article> nicht da ist, solange man es nicht aufruft.

HTML:
section { margin: auto; width: 1200px; }

article { color: #FFFFFF; width: 1200px; position: relative; top: -450px; }
article .about-products-window { display: none; background-color: #5D5D27; padding: 15px; border-radius: 10px; height: 350px; }
.x-button { float: right; height: 50px; cursor: pointer; margin-top: -35px; margin-right: -35px; }
das top: -450px; versursacht das Problem. Denn wenn der article nicht mehr in der section liegt, dann verschwindet er auch nicht.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.149
244
63
65
#10
Ist die Seite öffentlich? Dann poste doch Mal die URL. Ohne die Grafiken und das drumherum ist es schwierig, eine Testseite zu bauen.
 
12 Februar 2015
62
0
6
28
#11
Ne, da die Seite noch sehr jung und in einer frühen Phase ist, habe ich sie nicht öffentlich. Habe aber alles in eine Datei gequetscht. es ist jetzt genauso, wie beim Original:
https://workupload.com/file/J8LCjq

PS: werde wohl erst morgen wieder dazu kommen, zu antworten, ist schon spät. Danke Bis jetzt und bis morgen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.149
244
63
65
#12
Da musste ich zwei Mal hinsehen, bis ich es verstanden habe und ohne die Bilder hat es auch nicht funktioniert.
das top: -450px; versursacht das Problem.
Das trifft zu. Wenn Du die section mit dem Link "Produkte ansehen" unsichtbar machst, rutscht das article nach oben, liegt außerhalb des Browserfensters und ist deshalb unsichtbar. Es ist also kein Bug und jQuery macht auch nicht alles im Umkreis unsichtbar, sondern es ist ein Anwendungsfehler.

Beheben kannst Du es, indem Du für das article nicht position:relative sondern position:absolute verwendest und für body position:relative. Dann wird die Position nicht mehr durch andere Elemente beeinflusst.

Außerdem empfehle ich, das ganze Layout zu überdenken. Es auf eine feste Breite von 1200px auszulegen ist in meinen Augen ein nogo. Sehr viele haben den Browser nicht im Vollbild und viele haben noch eine seitliche Lesezeichenleiste und dann wird das Ganze nicht richtig dargestellt.
 
Zustimmungen: Bengman