1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

div schließt sich nach öffnen eines anderen Divs

Dieses Thema im Forum "JavaScript" wurde erstellt von Bengman, 9 Januar 2018.

  1. Bengman

    Bengman Mitglied

    Registriert seit:
    12 Februar 2015
    Beiträge:
    49
    Punkte für Erfolge:
    6
    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 (text):
    1.    $(document).ready(function() {
    2.        $('.productbutton').click(function() {
    3.            $('nav').fadeIn('fast');
    4.        });
    5.    });
    6.  
    7.    $(document).ready(function() {
    8.        $('.productbutton').click(function() {
    9.            $('section').fadeOut('fast');
    10.        });
    11.    });
    12.  
    13. /* Produkte Button Ende */
    14.  
    15. /* header */
    16.  
    17.    $(document).ready(function() {
    18.        $('#about-products').click(function() {
    19.            $('.about-products-window').fadeIn('fast');
    20.        });
    21.    });
    22.  
    23.    $(document).ready(function() {
    24.        $('.x-button').click(function() {
    25.            $('.about-products-window').fadeOut('fast');
    26.        });
    27.    });
    28.  
    29.    });
    Wenn ich den Produkt Button klicke, verschwindet about-products-window wieder und lässt sich nicht mehr öffnen. Vorher geht es ganz normal.

    HTML:
    1.     <ul class="header">
    2.         <li><a id="about-products" href="#about-products">Unsere Waren</a></li>
    3.         <li><a id="about-us" href="#about-us">&Uuml;ber Uns</a></li>
    4.     </ul>
    5.     <ul class="footer">
    6.         <li><a id="imprint" href="#imprint">Impressum</a></li>
    7.         <li><a id="data" href="#data">Datenschutz</a></li>
    8.         <li><a id="contact" href="#contact">Kontakt</a></li>
    9.     </ul>
    10.        <center><img id="logo" src="Style/IMG/salevin-logo.png" height="500"></center>
    11.        <center><a class="productbutton" href="#">Produkte ansehen</a></center><noscript>Um unsere Produkte anzusehen, müssen sie Javascript aktivieren</noscript>
    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!
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. basti1012

    basti1012 Mitglied

    Registriert seit:
    26 November 2017
    Beiträge:
    114
    Punkte für Erfolge:
    18
    währe schön wenn du mal den ganzen code posten könntest .also ich persönlich kann bei den code noch nix erkennen
     
  3. Aaron3219

    Aaron3219 Aktives Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    597
    Punkte für Erfolge:
    43
    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 (text):
    1.    $(document).ready(function() {
    2.        $('.productbutton').click(function() {
    3.            $('nav').fadeIn('fast');
    4.        });
    5.    });
    6.  
    7.    $(document).ready(function() {
    8.        $('.productbutton').click(function() {
    9.            $('section').fadeOut('fast');
    10.        });
    11.    });
    12.  
    13. /* Produkte Button Ende */
    14.  
    15. /* header */
    16.  
    17.    $(document).ready(function() {
    18.        $('#about-products').click(function() {
    19.            $('.about-products-window').fadeIn('fast');
    20.        });
    21.    });
    22.  
    23.    $(document).ready(function() {
    24.        $('.x-button').click(function() {
    25.            $('.about-products-window').fadeOut('fast');
    26.        });
    27.    });
    28.  
    29.    });
    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 (text):
    1.  
    2. $('.productbutton').click(function() {
    3.     $('nav').fadeIn('fast');
    4.  });
    5.  
    6. $('.productbutton').click(function() {
    7.    $('section').fadeOut('fast');
    8. });
    9.  
    10. $('#about-products').click(function() {
    11.     $('.about-products-window').fadeIn('fast');
    12. });
    13.  
    14. $('.x-button').click(function() {
    15.     $('.about-products-window').fadeOut('fast');
    16. });
    17.  
    Es geht auch noch kürzer, aber das sind erstmal Grundlagen.
     
    Bengman gefällt das.
  4. basti1012

    basti1012 Mitglied

    Registriert seit:
    26 November 2017
    Beiträge:
    114
    Punkte für Erfolge:
    18
    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
     
  5. Bengman

    Bengman Mitglied

    Registriert seit:
    12 Februar 2015
    Beiträge:
    49
    Punkte für Erfolge:
    6
    @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.
     
  6. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    816
    Punkte für Erfolge:
    43
    Ich kann nirgendwo entdecken, wo nav und .about-products-window definiert sind.
    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.
     
    Bengman gefällt das.
  7. Bengman

    Bengman Mitglied

    Registriert seit:
    12 Februar 2015
    Beiträge:
    49
    Punkte für Erfolge:
    6
    @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?
     
  8. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    816
    Punkte für Erfolge:
    43
    Nein, ich meinte im HTML, denn in dem Abschnitt, den Du gepostet hast, finde ich es nicht.
    Verstehe nicht, wie Du das meinst. Poste doch Mal das betr. HTML.
     
  9. Bengman

    Bengman Mitglied

    Registriert seit:
    12 Februar 2015
    Beiträge:
    49
    Punkte für Erfolge:
    6
    HTML:
    1.     <ul class="header">
    2.         <li><a id="about-products" href="#about-products">Unsere Waren</a></li>
    3.         <li><a id="about-us" href="#about-us">Über Uns</a></li>
    4.     </ul>
    5.     <ul class="footer">
    6.         <li><a id="imprint" href="#imprint">Impressum</a></li>
    7.         <li><a id="data" href="#data">Datenschutz</a></li>
    8.         <li><a id="contact" href="#contact">Kontakt</a></li>
    9.     </ul>
    10.        <center><img id="logo" src="Style/IMG/salevin-logo.png" height="500"></center>
    11.        <center><a class="productbutton" href="#">Produkte ansehen</a></center><noscript>Um unsere Produkte anzusehen, müssen sie Javascript aktivieren</noscript>
    12.        <div class="about-products-window">
    13.            <img class="x-button" src="Style/IMG/x-button.png">
    14.            TEXT
    15.        </div>
    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:
    1. section { margin: auto; width: 1200px; }
    2.  
    3. article { color: #FFFFFF; width: 1200px; position: relative; top: -450px; }
    4. article .about-products-window { display: none; background-color: #5D5D27; padding: 15px; border-radius: 10px; height: 350px; }
    5. .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.
     
  10. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    816
    Punkte für Erfolge:
    43
    Ist die Seite öffentlich? Dann poste doch Mal die URL. Ohne die Grafiken und das drumherum ist es schwierig, eine Testseite zu bauen.
     
  11. Bengman

    Bengman Mitglied

    Registriert seit:
    12 Februar 2015
    Beiträge:
    49
    Punkte für Erfolge:
    6
    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.
     
  12. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    816
    Punkte für Erfolge:
    43
    Da musste ich zwei Mal hinsehen, bis ich es verstanden habe und ohne die Bilder hat es auch nicht funktioniert.
    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.
     
    Bengman gefällt das.
  13. Bengman

    Bengman Mitglied

    Registriert seit:
    12 Februar 2015
    Beiträge:
    49
    Punkte für Erfolge:
    6
    Danke, es funktioniert.