div schließt sich nach öffnen eines anderen Divs

[Bengman]

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.

   $(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.

<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!

 

[basti1012]

währe schön wenn du mal den ganzen code posten könntest .also ich persönlich kann bei den code noch nix erkennen

 

[Aaron3219]

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 ). 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):

   $(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!!!).

$('.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.

 

[basti1012]

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

 

[Bengman]

@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.

 

[Bengman]

@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?

 

[Bengman]

<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.

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.

 

[Bengman]

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.

 

[Bengman]

Danke, es funktioniert.