Zwei Javascripts ...

Mel · 31. Dezember 2018

Guten Morgen,

wahrscheinlich wurde die frage schon tauschend mal gestellt, aber ich kann mir nicht helfen, ich habe zwei ganz einfache Funktionen und es funktioniert leider immer nur einer.

Was mach ich falsch??

Zitat

$("a[href^='#']").click(function(e) {

e.preventDefault();

var position = $($(this).attr("href")).offset().top;

$("body, html").animate({

scrollTop: position

});

});

$(document).ready(function(){

$('.menubutton').click(function(){

$('nav').slideToggle('slow');

});

});

Alles anzeigen

Lieben Gruß und Guten Rutsch

basti1012 · 31. Dezember 2018

Am besten wäre wenn du alles posten würdest, also Css und Html dazu dann kann man sich das besser vorstellen.

Bei meinen Test , so wie ich mir das denke was der Code hier machen soll habe ich diese Zeile

Code

var position = $($(this).attr("href")).offset().top;

in das geändert

Code

var position = $(this).offset().top;

Dann hatte mein versuch geklappt.

Doch ohne deinen ganzen Code zu kennen fällt mir das gerade etwas schwer zu sagen ob es das auch wirklich wahr.

Vieleicht hat wer anders noch einen besseren durchblick , ansonsten wäre ein Link zur Seite oder der vollständige Code hilfreicher

Mel · 31. Dezember 2018

Hallo und danke für deine Mühe, leider klappt es bei mir nicht.

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Fortjetzt - Reisebüro</title>
<link href="layout/Unbenannt-2.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans" rel="stylesheet">
<meta name="viewport" content="width-device-width, initial-scale-1.0, maximum-scale-1.0, user-scalable-no">    
<script src="js/menu.js"></script>
</head>

<body>
    <section id="login">
        <img class="logo" src="images/Logo_RGB.png" alt="Logo Fortjetzt">
        <div class="login">
            <form action="#" method="post">
                <input name="kundennummer" type="text" value="Kundennummer">
                <input name="passwort" type="text" value="Passwort">
                <button class="button">login</button>
                </form>
            <ul>
                <li><a class="menubutton" href="#menu"><img src="images/menu.png" alt ="menubutton"></a></li>
            </ul>
            <nav>
                <ul>
                    <li><a href="#" class="activ">Wir</a></li>
                    <li><a href="pages/highlight_trips.html"><span>Highlight-Trips</span></a></li>
                    <li><a href="#">Tickets</a></li>
                    <li><a href="#">Impressionen</a></li>
                    <li><a href="#">Anfahrt</a></li>
                </ul>
            </nav>
        </div>    
        <div class="hr"></div>
    </section>
    <header>
        <h1>Reisen zu fesselnden Zielen</h1>
            <slider>
                <slide></slide>
                <slide></slide>
                <slide></slide>
                <slide></slide>
            </slider>
    </header>
    <section id="main">
        <article id="einleitung">
            <p>Unser Team von Fortjetzt bietet Ihnen einen breiten Service rund um den Urlaub. Wir sind für Sie da, wenn im Sommer eine Familienreise an die Ostsee ansteht.</p>
            <p>Wir haben aber ebenso ganz neue und überraschende Reiseziele für Sie in unserem Sortiment – weltweit.</p>
            <p>Außerdem können Sie über uns frühzeitig internationale sowie regionale Veranstaltungen online buchen.</p>
            <figure><a href="#"><img src="images/wir/tickets.png" alt="Hier Tickets buchen!"></a></figure>
        </article>
        <article id="aktuell">
            <div class="ht">
                <div class="htbg"></div>
                <a href="#info"><h2>Highlight-Trips</h2></a>
            </div>
            <div class="news">
                <div class="newsbg"></div>
                <a href="#news"><h2>News</h2></a>
            </div>
        </article>
        <article id="info">
            <h3>Bitte beachten Sie: Ab 1. Januar 2019 haben wir ein neues Domizil in der Torstraße 7a.</h3>
            <img src="images/wir/karte.jpg" alt="Karte Halle">
        </article>
        <article id="ht">
            <h3>Highlight-Trips</h3>
            <p>Sie beauftragen uns, Tickets zu nationalen und internationalen Highlights zu besorgen und für Sie ein Sorglos-Paket zu packen für Fahrt und Hotel, mit Informationen zu weiteren Events am Zielort.</p>
            <div class="links">
                <p><a href="#">Hier geht's zu den Event-Reisen</a></p>
                <p><a href="#einleitung">Zurück</a></p>
            </div>
        </article>
        <article id="news">
            <h3>News</h3>
            <h4>Multimedia-Vortrag</h4> 
            <p>„Istanbul und Meer"</p>
            <p>Donnerstag, 11. April 2019, 19 Uhr</p>
            <p>So haben Sie die türkische Metropole noch nie gesehen. Ronald Richardson, langjähriger Reiseleiter und Abenteurer, präsentiert in seinem Multimedia-Vortrag Istanbul aus einer ganz besonderen Perspektive. Folgen Sie ihm auf Fähren, im Kreuzfahrtschiff und im Segelboot durch die faszinierende Wasserlandschaft, aus der die Stadt erwächst: durch Mittelmeer, Bosporus und Schwarzes Meer.</p>
            <p>Nach dem Input von Ronald Richardson stehen unsere Mitarbeiter/innen Ihnen für eine konkrete Beratung zur Verfügung:</p>
            <p>Wie soll Ihre individuelle Eventreise nach Istanbul genau aussehen?</p>
            <div class="links">
                <p><a href="#einleitung">Zurück</a></p>
            </div>
        </article>
    </section>
    <footer>
        <nav class="subnav">
            <ul>
                <li><a href="#">Datenschutz</a></li>
                <li><a href="#">Impressum</a></li>
            </ul>
        </nav>
    </footer>
    
<script src="js/jquery.js"></script>
<script src="js/scrolldown.js"></script>
</body>
</html>

Alles anzeigen

Mel · 31. Dezember 2018

CSS

@media screen and (max-width: 900px){
    body{
        font-size: 90%;
    }
}
@media screen and (min-width: 600px){
    nav{
        display: block !important;
    }
}
@media screen and (max-width: 600px){
    nav{
        display: none;
        font-size: 80%;
    }
    form{
        display: none;
    }
    .menubutton{
        display: block;
    }
    .menubutton img{
        width: 50%;
    }
    #login img.logo {
        width: 15%
    }
    nav .subnav{
        display: inline-block;
    }
    /*Wir*/
    #einleitung p{
        width: 80%;
        font-size: 100%;
        text-align: justify;
    }
    #einleitung a img{
        position: relative;
        left: 25%;
        width: 40%;
        height: auto;
    }
    #aktuell .ht{
        display: block;
        width: 100%;
        margin-bottom: 2em;
    }
    #aktuell .news{
        display: block;
        position: relative;
        width: 100%;
    }

/*Highlight-Trips*/
#main h3{
    font-size: 95%
}
#kategorie{
    position: relative;
    width: 100%;
    height: auto;
}
#kategorie .sport{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 2em;
}
#kategorie .musik{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 2em;
}
#kategorie .kunst{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 2em;
}
#kategorie .region{
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 2em;
}
#sport{
    position: relative;
    width: 100%;
}
#sport .angebotsport, #sport .beispielsport{
    display: block;
    width: 100%;
}
#musik{
    position: relative;
    width: 100%;
}
#musik .angebotmusik, #musik .beispielmusik{
    display: block;
    width: 100%;
}
#kunst{
    position: relative;
    width: 100%;
}
#kunst .angebotkunst, #kunst .beispielkunst{
    display: block;
    width: 100%;
}
#region{
    position: relative;
    width: 100%;
}
#region .angebotregion, #region .beispielregion{
    display: block;
    width: 100%;
    }
/*Footer*/
footer{
    font-size: 80%;
    }
}
@media screen and (max-width:360px){
    body{
        font-size: 80%
    }
    header h1{
        font-size: 150%
    }
}

Alles anzeigen

Ziel ist es das ich auf den menubutton klicke und es sich dann öffnen, ab einer bestimmten Größe und das eine scrolldown animation immer Vorhanden ist

basti1012 · 31. Dezember 2018

Kannst du mal erklären was der Code machen soll oder was du vor hast . Mit den offset top willst du ja den Abstand von oben haben. Aber der Button den du klickst ist ja schon oben.irgendwie ergibt mir das gerade kein sinn. Ein Button der nur oben ist ,soll den Abstand für die scroll animation rausfinden. Da man den nur oben anklicken kann hat das scrollen ja kein sinn

Erklär mal kurz was du vor hast damit ich hier nich ganz so dumm da stehe und nicht dumm in das neue Jahr muß

Mel · 31. Dezember 2018

Hi Basti,

#info und #news sind Buttons bzw links die zu einer Beschreibung im unteren Teil leiten sollen. und zwar mit einer scrolldown Animation.

Code

$("a[href^='#']").click(function(e) {
    e.preventDefault();
    
    var position = $($(this).attr("href")).offset().top;

    $("body, html").animate({
        scrollTop: position
    });
});

dann ist das Bild ".menubutton" erst ab einen Viewport von 600px sichtbar, in dem Moment verschwindet die "richtige" Navigation.

Ab 600px soll, wenn man den .menubutton klickt, die Navigationsleiste aufgehen.

Code

$(document).ready(function(){
    $('.menubutton').click(function(){
        $('nav').slideToggle('slow');
    });
});

Folgendes habe ich versucht.

ich habe die Scripte im Head sowie im Bodybereich eingebunden, jeweils als externe Datei, im Code direkt und beide Codes in eine extra datei.

Das problem ist, wenn ich nur den Scrolldown Script einfüge funktioniert alles wunderbar, genauso auch wenn nur das Menüskript eingebunden ist. Sind beide zusammen eingebunden funktioniert nur der der an oberer (erster) stelle steht.

ich hoffe ich konnte mich so einigermassen erklären.

Lieben Gruß

basti1012 · 31. Dezember 2018

Jo so ungefähr hatte ich mir das gedacht.

Dann ändere dein Js Script mal so.

Code

$(document).ready(function(){
   $('li .menubutton').click(function(){
      $('nav').slideToggle('slow');
   });
   $("article a[href^='#']").click(function(e) {
       e.preventDefault();
       var position = $($(this).attr("href")).offset().top;
       $("body, html").animate({
            scrollTop: position
       });
    });
});

Alles anzeigen

Weil dieser schnipsel a[href^='#'] passt auf dein menubutton und deine verlinkungen.

Wenn man das im Script noch genauer angibt dann klappt es.

Wenn deine Verlinkungen auch in ein <li> wären ,hätte man notfalls noch weiter zurück gehen können oder halt dein Html anders machen.

Ach was rede ich ,meine Erklärungen verstehe ich nicht mal selber richtig

Aber vieleicht reicht es und du hast es doch verstanden wie ich es meine .

Guten rutsch

Mel · 31. Dezember 2018

omg Basti das klappt tatsächlich der letzte Mann der mich dieses Jahr glücklich gemacht hat :D:D ich danke dir.

ich wollte nun nicht mehr nerven wegen einer Erklärung, aber ich verstehe deine Erklärung

nächstem weiß ich bescheid

danke dir auch nen Guten Rutsch

Zwei Javascripts ...

Jetzt mitmachen!

Teilen