Beiträge von Mel

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

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ß

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

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

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

Beiträge von Mel

Zwei Javascripts ...

Zwei Javascripts ...

Zwei Javascripts ...

Zwei Javascripts ...

Zwei Javascripts ...