Beiträge von Sundream

Sundream

Hallo,

ich habe folgendes Problem und zwar geht meine Seite die ich grade responsiv mache immer wieder nach rechts über den rand raus.. Ich habe html und den header schon auf max-width :100% gesetzt, aber das background-image geht trotzdem immernoch drüber hinaus... Der Code dafür im css ist :

Code

html { background: url(Bilder/Hintergrund.gif) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
max-width:100%;

        }

Hat jemand eine Idee was ich machen könnte damit das am Rand wirklich gesperrt ist und egal bei welcher Fenstergröße nicht drüber raus kann?
Danke schonmal

Liebe Grüße

Sundream

Sundream

Hallo,

ich war mir gestern um die Uhrzeit nicht mehr sicher, ob ich das schon ausprobiert habe, weil ich doch schon einiges versucht habe, bevor ich hier geschrieben habe. Ich hab immer gedacht, dass ich irgendwo anders (in der cycle2 js datei zum Beispiel) nochmal was ändern muss. Und wenn ich nur alle IDs ändere, damit funktioniert es auch nicht...

Mein HTML Code sieht gerade so aus:

HTML

<!DOCTYPE HTML>


<head>
    <title>Zimmerei Kohlhepp</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/cycle2.js"></script>


    <script>
        $(function() {
            var pull         = $('#pull');
                menu         = $('nav ul');
                menuHeight    = menu.height();


            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });


            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
        });
    </script>

<meta charset="UTF-8">
</head>


<body>
<div class="oben">



    <header>
        <img src="Bilder/Logo.jpg">
        <h1>Zimmerei Kohlhepp</h1>
    </header>


    


    <nav class="clearfix">
        <ul class="clearfix">
            <li><a href="Index.html">Start</a></li>
            <li><a href="Ueber_uns.html">Über uns</a></li>
            <li><a href="Leistungen.html"class="active">Leistungen</a></li>
            <li><a href="Kontakt.php">Kontakt</a></li>

        </ul>
        <a href="#" id="pull">Menü</a>
    </nav>


</div>






    <section class="main">


    <div class="braun">




    


        
                <h2 class="Unterseiten">Balkone</h2><section id= "banner">    
        <img class="Banner" src="Bilder/Banner.jpg">
    </section>
<div class="Uns">
    <article>
<p>
Balkone verändern auch aus der Entferung sichtbar die Gesamtoptik Ihres Hauses.<br>
Auch eine Steigerung der Wohnqualität und des Werts Ihrer Immobilie wird durch sie ermöglicht.</p>


<p> 
Besonders wichtig ist es deswegen hierbei Qualität der Materialien, eine kompetente Beratung und die nötige Erfahrung, um Ihren Balkon zu dem perfekten, individuell auf Sie abgestimmten Ort zu machen. </p>


<p> Durch jahrelange Erfahrung ist es uns möglich den Balkon gemeinsam mit Ihnen mit höchster Sorgfalt und Präzision auf genau auf Ihr Haus abzustimmen. </p>










    


<div id="container">
    <div id="slideshow" class="cycle-slideshow" 
    data-cycle-fx = "fade"
    data-cycle-speed = "600"
    data-cycle-timeout = "3000"
    data-cycle-pager = "#pager"
    data-cycle-pager-template = "<a href='#'><img src='{{src}}'height=100 width=150/>"
    data-cycle-next = "#next"
    data-cycle-prev = "#prev"
    data-cycle-manual-fx = "scrollHorz"
    data-cycle-manual-speed = "400"
    data-cycle-pager-fx = "fade">
        <img src="Bilder/Balkon1.jpg" alt="">
        <img src="Bilder/Balkon2.jpg" alt="">

    </div>
    <div id="pager"></div>
    <img id="prev" src="Bilder/prev.svg"/>
    <img id="next" src="Bilder/next.svg"/>
</div>


<div id="container2">
    <div id="slideshow2" class="cycle-slideshow" 
    data-cycle-fx = "fade"
    data-cycle-speed = "600"
    data-cycle-timeout = "3000"
    data-cycle-pager = "#pager"
    data-cycle-pager-template = "<a href='#'><img src='{{src}}'height=100 width=150/>"
    data-cycle-next = "#next"
    data-cycle-prev = "#prev"
    data-cycle-manual-fx = "scrollHorz"
    data-cycle-manual-speed = "400"
    data-cycle-pager-fx = "fade">
        <img src="Bilder/Balkon1.jpg" alt="">
        <img src="Bilder/Balkon2.jpg" alt="">

    </div>
    <div id="pager2"></div>
    <img id="prev2" src="Bilder/prev.svg"/>
    <img id="next2" src="Bilder/next.svg"/>
</div>


<a href="Leistungen.html"class="Back">Zurück</a>


    </article>
</div>

            </div>



        


    


    </div>


        
</section>


<div class="Impressum">

    <footer>
            <ul>
                <li><a href="Impressum.html" >Impressum</a></li>
            </ul>
        </footer>
</div>




</body>


</html>

Alles anzeigen

Auf der Seite sieht das so aus:

der Pager der unteren Slideshow ist leer
Bei der oberen Slideshow sind auch alle Bilder vom unteren Pager mit im oberen Pager.

Allgemein funktioniert die untere Slideshow auch garnicht (ändert zwar das Bild, aber beim Klicken auf prev oder next passiert nichts).
Wenn ich die obere Slideshow anklicke bewegt sich die untere immer mit.

Weiß jemand, was jetzt noch falsch sein könnte?

Liebe Grüße

Sundream

- - - Aktualisiert - - -

Hat sich erledigt, musste das untere noch ändern und jetzt funktionierts !
Vielen vielen Dank !!!!

Sundream

Hallo,
ich weiß, dass das Problem da irgendwo liegt, aber reicht es wenn ich einen zweiten mit exakt demselben Code einfüge und die id beim zweiten einfach in z.b sideshow2 ändere? Nein oder?

Danke schonmal

Sundream

Hallo ihr,

ich habe folgendes Problem: Ich möchte auf einer Seite 2 slideshows mit cycle2 haben, aber sobald ich die zweite einfüge funktioniert nurnoch die 2., bei der 1. reagieren die pfeile zum weiter und zurück klicken nicht mehr. Ich weiß nicht an welcher Stelle im Code ich etwas ändern muss, damit es funktioniert...

Hier mein HTML Code von einer der Seiten:

HTML

<!DOCTYPE HTML>


<head>
    <title>Zimmerei Kohlhepp</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/cycle2.js"></script>


    <script>
        $(function() {
            var pull         = $('#pull');
                menu         = $('nav ul');
                menuHeight    = menu.height();


            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });


            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
        });
    </script>

<meta charset="UTF-8">
</head>


<body>
<div class="oben">



    <header>
        <img src="Bilder/Logo.jpg">
        <h1>Zimmerei Kohlhepp</h1>
    </header>


    


    <nav class="clearfix">
        <ul class="clearfix">
            <li><a href="Index.html">Start</a></li>
            <li><a href="Ueber_uns.html">Über uns</a></li>
            <li><a href="Leistungen.html"class="active">Leistungen</a></li>
            <li><a href="Kontakt.html">Kontakt</a></li>

        </ul>
        <a href="#" id="pull">Menü</a>
    </nav>


</div>






    <section class="main">


    <div class="braun">




    


        
                <h2 class="Unterseiten">Balkone</h2><section id= "banner">    
        <img class="Banner" src="Bilder/Banner.jpg">
    </section>
<div class="Uns">
    <article>
<p>
Balkone verändern auch aus der Entferung sichtbar die Gesamtoptik Ihres Hauses.<br>
Auch eine Steigerung der Wohnqualität und des Werts Ihrer Immobilie wird durch sie ermöglicht.</p>


<p> 
Besonders wichtig ist es deswegen hierbei Qualität der Materialien, eine kompetente Beratung und die nötige Erfahrung, um Ihren Balkon zu dem perfekten, individuell auf Sie abgestimmten Ort zu machen. </p>


<p> Durch jahrelange Erfahrung ist es uns möglich den Balkon gemeinsam mit Ihnen mit höchster Sorgfalt und Präzision auf genau auf Ihr Haus abzustimmen. </p>










    


<div id="container">
    <div id="slideshow" class="cycle-slideshow" 
    data-cycle-fx = "fade"
    data-cycle-speed = "600"
    data-cycle-timeout = "3000"
    data-cycle-pager = "#pager"
    data-cycle-pager-template = "<a href='#'><img src='{{src}}'height=100 width=150/>"
    data-cycle-next = "#next"
    data-cycle-prev = "#prev"
    data-cycle-manual-fx = "scrollHorz"
    data-cycle-manual-speed = "400"
    data-cycle-pager-fx = "fade">
        <img src="Bilder/Balkon1.jpg" alt="">
        <img src="Bilder/Balkon2.jpg" alt="">

    </div>
    <div id="pager"></div>
    <img id="prev" src="Bilder/prev.svg"/>
    <img id="next" src="Bilder/next.svg"/>
</div>


<a href="Leistungen.html"class="Back">Zurück</a>


    </article>
</div>

            </div>



        


    


    </div>


        
</section>


<div class="Impressum">

    <footer>
            <ul>
                <li><a href="Impressum.html" >Impressum</a></li>
            </ul>
        </footer>
</div>




</body>


</html>

Alles anzeigen

hier die CSS für den Bereich :

Code

#container img {
    max-width: 100%;
    margin-top: 0em;
    border: none; 
    display: inline-block;
    text-align: left;
    margin-left: 0em;
    width: 200px;
    height: 120px;
}




#container {
        width: 70%;
        height: auto;
        position: relative;
        overflow: hidden;
        background: #4e3f3a;
        margin-left: 3em;
    }




    #slideshow {
        height: 100%;
        width: 100%;
    }
    #slideshow img {
        height: 100%;
        width: 100%;
    }
    #pager {
        text-align: center;
        height: 100px;
        width: 100%;
        position: absolute;
        bottom: 5%;
        background: rgba(0,0,0,.5);
        z-index: 1000;
        opacity: 0;
        transition: all 0.3s ease-in-out 0s;
    }


    #pager img { margin-left: 0.3em;
        width: 20%;
        height: 95%;}
    #pager:hover {
       opacity: 1;
    }  


 #prev {
        height: 1em;
        width: 1em;
        position: absolute;
        top: 7em;
        bottom: 0;
        left:-60px;
        margin: auto 10px;
        z-index: 1000;
        opacity: 0.7;
    }
     #next {
        height: 0.5em;
        width: 0.5em;
        position: absolute;
        top: 7em;
        bottom: 0;
        right:-60px;
        margin: auto 10px;
        z-index: 1000;
        opacity: 0.7;
    }

Alles anzeigen

und hier der code von cycle2 :

Code

!function(a){"use strict";function b(a){return(a||"").toLowerCase()}var c="2.1.6";a.fn.cycle=function(c){var d;return 0!==this.length||a.isReady?this.each(function(){var d,e,f,g,h=a(this),i=a.fn.cycle.log;if(!h.data("cycle.opts")){(h.data("cycle-log")===!1||c&&c.log===!1||e&&e.log===!1)&&(i=a.noop),i("--c2 init--"),d=h.data();for(var j in d)d.hasOwnProperty(j)&&/^cycle[A-Z]+/.test(j)&&(g=d[j],f=j.match(/^cycle(.*)/)[1].replace(/^[A-Z]/,b),i(f+":",g,"("+typeof g+")"),d[f]=g);e=a.extend({},a.fn.cycle.defaults,d,c||{}),e.timeoutId=0,e.paused=e.paused||!1,e.container=h,e._maxZ=e.maxZ,e.API=a.extend({_container:h},a.fn.cycle.API),e.API.log=i,e.API.trigger=function(a,b){return e.container.trigger(a,b),e.API},h.data("cycle.opts",e),h.data("cycle.API",e.API),e.API.trigger("cycle-bootstrap",[e,e.API]),e.API.addInitialSlides(),e.API.preInitSlideshow(),e.slides.length&&e.API.initSlideshow()}}):(d={s:this.selector,c:this.context},a.fn.cycle.log("requeuing slideshow (dom not ready)"),a(function(){a(d.s,d.c).cycle(c)}),this)},a.fn.cycle.API={opts:function(){return this._container.data("cycle.opts")},addInitialSlides:function(){var b=this.opts(),c=b.slides;b.slideCount=0,b.slides=a(),c=c.jquery?c:b.container.find(c),b.random&&c.sort(function(){return Math.random()-.5}),b.API.add(c)},preInitSlideshow:function(){var b=this.opts();b.API.trigger("cycle-pre-initialize",[b]);var c=a.fn.cycle.transitions[b.fx];c&&a.isFunction(c.preInit)&&c.preInit(b),b._preInitialized=!0},postInitSlideshow:function(){var b=this.opts();b.API.trigger("cycle-post-initialize",[b]);var c=a.fn.cycle.transitions[b.fx];c&&a.isFunction(c.postInit)&&c.postInit(b)},initSlideshow:function(){var b,c=this.opts(),d=c.container;c.API.calcFirstSlide(),"static"==c.container.css("position")&&c.container.css("position","relative"),a(c.slides[c.currSlide]).css({opacity:1,display:"block",visibility:"visible"}),c.API.stackSlides(c.slides[c.currSlide],c.slides[c.nextSlide],!c.reverse),c.pauseOnHover&&(c.pauseOnHover!==!0&&(d=a(c.pauseOnHover)),d.hover(function(){c.API.pause(!0)},function(){c.API.resume(!0)})),c.timeout&&(b=c.API.getSlideOpts(c.currSlide),c.API.queueTransition(b,b.timeout+c.delay)),c._initialized=!0,c.API.updateView(!0),c.API.trigger("cycle-initialized",[c]),c.API.postInitSlideshow()},pause:function(b){var c=this.opts(),d=c.API.getSlideOpts(),e=c.hoverPaused||c.paused;b?c.hoverPaused=!0:c.paused=!0,e||(c.container.addClass("cycle-paused"),c.API.trigger("cycle-paused",[c]).log("cycle-paused"),d.timeout&&(clearTimeout(c.timeoutId),c.timeoutId=0,c._remainingTimeout-=a.now()-c._lastQueue,(c._remainingTimeout<0||isNaN(c._remainingTimeout))&&(c._remainingTimeout=void 0)))},resume:function(a){var b=this.opts(),c=!b.hoverPaused&&!b.paused;a?b.hoverPaused=!1:b.paused=!1,c||(b.container.removeClass("cycle-paused"),0===b.slides.filter(":animated").length&&b.API.queueTransition(b.API.getSlideOpts(),b._remainingTimeout),b.API.trigger("cycle-resumed",[b,b._remainingTimeout]).log("cycle-resumed"))},add:function(b,c){var d,e=this.opts(),f=e.slideCount,g=!1;"string"==a.type(b)&&(b=a.trim(b)),a(b).each(function(){var b,d=a(this);c?e.container.prepend(d):e.container.append(d),e.slideCount++,b=e.API.buildSlideOpts(d),e.slides=c?a(d).add(e.slides):e.slides.add(d),e.API.initSlide(b,d,--e._maxZ),d.data("cycle.opts",b),e.API.trigger("cycle-slide-added",[e,b,d])}),e.API.updateView(!0),g=e._preInitialized&&2>f&&e.slideCount>=1,g&&(e._initialized?e.timeout&&(d=e.slides.length,e.nextSlide=e.reverse?d-1:1,e.timeoutId||e.API.queueTransition(e)):e.API.initSlideshow())},calcFirstSlide:function(){var a,b=this.opts();a=parseInt(b.startingSlide||0,10),(a>=b.slides.length||0>a)&&(a=0),b.currSlide=a,b.reverse?(b.nextSlide=a-1,b.nextSlide<0&&(b.nextSlide=b.slides.length-1)):(b.nextSlide=a+1,b.nextSlide==b.slides.length&&(b.nextSlide=0))},calcNextSlide:function(){var a,b=this.opts();b.reverse?(a=b.nextSlide-1<0,b.nextSlide=a?b.slideCount-1:b.nextSlide-1,b.currSlide=a?0:b.nextSlide+1):(a=b.nextSlide+1==b.slides.length,b.nextSlide=a?0:b.nextSlide+1,b.currSlide=a?b.slides.length-1:b.nextSlide-1)},calcTx:function(b,c){var d,e=b;return e._tempFx?d=a.fn.cycle.transitions[e._tempFx]:c&&e.manualFx&&(d=a.fn.cycle.transitions[e.manualFx]),d||(d=a.fn.cycle.transitions[e.fx]),e._tempFx=null,this.opts()._tempFx=null,d||(d=a.fn.cycle.transitions.fade,e.API.log('Transition "'+e.fx+'" not found.  Using fade.')),d},prepareTx:function(a,b){var c,d,e,f,g,h=this.opts();return h.slideCount<2?void(h.timeoutId=0):(!a||h.busy&&!h.manualTrump||(h.API.stopTransition(),h.busy=!1,clearTimeout(h.timeoutId),h.timeoutId=0),void(h.busy||(0!==h.timeoutId||a)&&(d=h.slides[h.currSlide],e=h.slides[h.nextSlide],f=h.API.getSlideOpts(h.nextSlide),g=h.API.calcTx(f,a),h._tx=g,a&&void 0!==f.manualSpeed&&(f.speed=f.manualSpeed),h.nextSlide!=h.currSlide&&(a||!h.paused&&!h.hoverPaused&&h.timeout)?(h.API.trigger("cycle-before",[f,d,e,b]),g.before&&g.before(f,d,e,b),c=function(){h.busy=!1,h.container.data("cycle.opts")&&(g.after&&g.after(f,d,e,b),h.API.trigger("cycle-after",[f,d,e,b]),h.API.queueTransition(f),h.API.updateView(!0))},h.busy=!0,g.transition?g.transition(f,d,e,b,c):h.API.doTransition(f,d,e,b,c),h.API.calcNextSlide(),h.API.updateView()):h.API.queueTransition(f))))},doTransition:function(b,c,d,e,f){var g=b,h=a(c),i=a(d),j=function(){i.animate(g.animIn||{opacity:1},g.speed,g.easeIn||g.easing,f)};i.css(g.cssBefore||{}),h.animate(g.animOut||{},g.speed,g.easeOut||g.easing,function(){h.css(g.cssAfter||{}),g.sync||j()}),g.sync&&j()},queueTransition:function(b,c){var d=this.opts(),e=void 0!==c?c:b.timeout;return 0===d.nextSlide&&0===--d.loop?(d.API.log("terminating; loop=0"),d.timeout=0,e?setTimeout(function(){d.API.trigger("cycle-finished",[d])},e):d.API.trigger("cycle-finished",[d]),void(d.nextSlide=d.currSlide)):void 0!==d.continueAuto&&(d.continueAuto===!1||a.isFunction(d.continueAuto)&&d.continueAuto()===!1)?(d.API.log("terminating automatic transitions"),d.timeout=0,void(d.timeoutId&&clearTimeout(d.timeoutId))):void(e&&(d._lastQueue=a.now(),void 0===c&&(d._remainingTimeout=b.timeout),d.paused||d.hoverPaused||(d.timeoutId=setTimeout(function(){d.API.prepareTx(!1,!d.reverse)},e))))},stopTransition:function(){var a=this.opts();a.slides.filter(":animated").length&&(a.slides.stop(!1,!0),a.API.trigger("cycle-transition-stopped",[a])),a._tx&&a._tx.stopTransition&&a._tx.stopTransition(a)},advanceSlide:function(a){var b=this.opts();return clearTimeout(b.timeoutId),b.timeoutId=0,b.nextSlide=b.currSlide+a,b.nextSlide<0?b.nextSlide=b.slides.length-1:b.nextSlide>=b.slides.length&&(b.nextSlide=0),b.API.prepareTx(!0,a>=0),!1},buildSlideOpts:function(c){var d,e,f=this.opts(),g=c.data()||{};for(var h in g)g.hasOwnProperty(h)&&/^cycle[A-Z]+/.test(h)&&(d=g[h],e=h.match(/^cycle(.*)/)[1].replace(/^[A-Z]/,b),f.API.log("['+(f.slideCount-1)+']",e+":",d,"("+typeof d+")"),g[e]=d);g=a.extend({},a.fn.cycle.defaults,f,g),g.slideNum=f.slideCount;try{delete g.API,delete g.slideCount,delete g.currSlide,delete g.nextSlide,delete g.slides}catch(i){}return g},getSlideOpts:function(b){var c=this.opts();void 0===b&&(b=c.currSlide);var d=c.slides[b],e=a(d).data("cycle.opts");return a.extend({},c,e)},initSlide:function(b,c,d){var e=this.opts();c.css(b.slideCss||{}),d>0&&c.css("zIndex",d),isNaN(b.speed)&&(b.speed=a.fx.speeds[b.speed]||a.fx.speeds._default),b.sync||(b.speed=b.speed/2),c.addClass(e.slideClass)},updateView:function(a,b){var c=this.opts();if(c._initialized){var d=c.API.getSlideOpts(),e=c.slides[c.currSlide];!a&&b!==!0&&(c.API.trigger("cycle-update-view-before",[c,d,e]),c.updateView<0)||(c.slideActiveClass&&c.slides.removeClass(c.slideActiveClass).eq(c.currSlide).addClass(c.slideActiveClass),a&&c.hideNonActive&&c.slides.filter(":not(."+c.slideActiveClass+")").css("visibility","hidden"),0===c.updateView&&setTimeout(function(){c.API.trigger("cycle-update-view",[c,d,e,a])},d.speed/(c.sync?2:1)),0!==c.updateView&&c.API.trigger("cycle-update-view",[c,d,e,a]),a&&c.API.trigger("cycle-update-view-after",[c,d,e]))}},getComponent:function(b){var c=this.opts(),d=c[b];return"string"==typeof d?/^\s*[\>|\+|~]/.test(d)?c.container.find(d):a(d):d.jquery?d:a(d)},stackSlides:function(b,c,d){var e=this.opts();b||(b=e.slides[e.currSlide],c=e.slides[e.nextSlide],d=!e.reverse),a(b).css("zIndex",e.maxZ);var f,g=e.maxZ-2,h=e.slideCount;if(d){for(f=e.currSlide+1;h>f;f++)a(e.slides[f]).css("zIndex",g--);for(f=0;f<e.currSlide;f++)a(e.slides[f]).css("zIndex",g--)}else{for(f=e.currSlide-1;f>=0;f--)a(e.slides[f]).css("zIndex",g--);for(f=h-1;f>e.currSlide;f--)a(e.slides[f]).css("zIndex",g--)}a(c).css("zIndex",e.maxZ-1)},getSlideIndex:function(a){return this.opts().slides.index(a)}},a.fn.cycle.log=function(){window.console&&console.log&&console.log("[cycle2] "+Array.prototype.join.call(arguments," "))},a.fn.cycle.version=function(){return"Cycle2: "+c},a.fn.cycle.transitions={custom:{},none:{before:function(a,b,c,d){a.API.stackSlides(c,b,d),a.cssBefore={opacity:1,visibility:"visible",display:"block"}}},fade:{before:function(b,c,d,e){var f=b.API.getSlideOpts(b.nextSlide).slideCss||{};b.API.stackSlides(c,d,e),b.cssBefore=a.extend(f,{opacity:0,visibility:"visible",display:"block"}),b.animIn={opacity:1},b.animOut={opacity:0}}},fadeout:{before:function(b,c,d,e){var f=b.API.getSlideOpts(b.nextSlide).slideCss||{};b.API.stackSlides(c,d,e),b.cssBefore=a.extend(f,{opacity:1,visibility:"visible",display:"block"}),b.animOut={opacity:0}}},scrollHorz:{before:function(a,b,c,d){a.API.stackSlides(b,c,d);var e=a.container.css("overflow","hidden").width();a.cssBefore={left:d?e:-e,top:0,opacity:1,visibility:"visible",display:"block"},a.cssAfter={zIndex:a._maxZ-2,left:0},a.animIn={left:0},a.animOut={left:d?-e:e}}}},a.fn.cycle.defaults={allowWrap:!0,autoSelector:".cycle-slideshow[data-cycle-auto-init!=false]",delay:0,easing:null,fx:"fade",hideNonActive:!0,loop:0,manualFx:void 0,manualSpeed:void 0,manualTrump:!0,maxZ:100,pauseOnHover:!1,reverse:!1,slideActiveClass:"cycle-slide-active",slideClass:"cycle-slide",slideCss:{position:"absolute",top:0,left:0},slides:"> img",speed:500,startingSlide:0,sync:!0,timeout:4e3,updateView:0},a(document).ready(function(){a(a.fn.cycle.defaults.autoSelector).cycle()})}(jQuery),/*! Cycle2 autoheight plugin; Copyright (c) M.Alsup, 2012; version: 20130913 */
function(a){"use strict";function b(b,d){var e,f,g,h=d.autoHeight;if("container"==h)f=a(d.slides[d.currSlide]).outerHeight(),d.container.height(f);else if(d._autoHeightRatio)d.container.height(d.container.width()/d._autoHeightRatio);else if("calc"===h||"number"==a.type(h)&&h>=0){if(g="calc"===h?c(b,d):h>=d.slides.length?0:h,g==d._sentinelIndex)return;d._sentinelIndex=g,d._sentinel&&d._sentinel.remove(),e=a(d.slides[g].cloneNode(!0)),e.removeAttr("id name rel").find("[id],[name],[rel]").removeAttr("id name rel"),e.css({position:"static",visibility:"hidden",display:"block"}).prependTo(d.container).addClass("cycle-sentinel cycle-slide").removeClass("cycle-slide-active"),e.find("*").css("visibility","hidden"),d._sentinel=e}}function c(b,c){var d=0,e=-1;return c.slides.each(function(b){var c=a(this).height();c>e&&(e=c,d=b)}),d}function d(b,c,d,e){var f=a(e).outerHeight();c.container.animate({height:f},c.autoHeightSpeed,c.autoHeightEasing)}function e(c,f){f._autoHeightOnResize&&(a(window).off("resize orientationchange",f._autoHeightOnResize),f._autoHeightOnResize=null),f.container.off("cycle-slide-added cycle-slide-removed",b),f.container.off("cycle-destroyed",e),f.container.off("cycle-before",d),f._sentinel&&(f._sentinel.remove(),f._sentinel=null)}a.extend(a.fn.cycle.defaults,{autoHeight:0,autoHeightSpeed:250,autoHeightEasing:null}),a(document).on("cycle-initialized",function(c,f){function g(){b(c,f)}var h,i=f.autoHeight,j=a.type(i),k=null;("string"===j||"number"===j)&&(f.container.on("cycle-slide-added cycle-slide-removed",b),f.container.on("cycle-destroyed",e),"container"==i?f.container.on("cycle-before",d):"string"===j&&/\d+\:\d+/.test(i)&&(h=i.match(/(\d+)\:(\d+)/),h=h[1]/h[2],f._autoHeightRatio=h),"number"!==j&&(f._autoHeightOnResize=function(){clearTimeout(k),k=setTimeout(g,50)},a(window).on("resize orientationchange",f._autoHeightOnResize)),setTimeout(g,30))})}(jQuery),/*! caption plugin for Cycle2;  version: 20130306 */
function(a){"use strict";a.extend(a.fn.cycle.defaults,{caption:"> .cycle-caption",captionTemplate:"{{slideNum}} / {{slideCount}}",overlay:"> .cycle-overlay",overlayTemplate:"<div>{{title}}</div><div>{{desc}}</div>",captionModule:"caption"}),a(document).on("cycle-update-view",function(b,c,d,e){if("caption"===c.captionModule){a.each(['caption','overlay'],function(){var a=this,b=d[a+'Template'],f=c.API.getComponent(a);f.length&&b?(f.html(c.API.tmpl(b,d,c,e)),f.show()):f.hide()})}}),a(document).on("cycle-destroyed",function(b,c){var d;a.each(['caption','overlay'],function(){var a=this,b=c[a+'Template'];c[a]&&b&&(d=c.API.getComponent("caption"),d.empty())})})}(jQuery),/*! command plugin for Cycle2;  version: 20140415 */
function(a){"use strict";var b=a.fn.cycle;a.fn.cycle=function(c){var d,e,f,g=a.makeArray(arguments);return"number"==a.type(c)?this.cycle("goto",c):"string"==a.type(c)?this.each(function(){var h;return d=c,f=a(this).data("cycle.opts"),void 0===f?void b.log('slideshow must be initialized before sending commands; "'+d+'" ignored'):(d="goto"==d?"jump":d,e=f.API[d],a.isFunction(e)?(h=a.makeArray(g),h.shift(),e.apply(f.API,h)):void b.log("unknown command: ",d))}):b.apply(this,arguments)},a.extend(a.fn.cycle,b),a.extend(b.API,{next:function(){var a=this.opts();if(!a.busy||a.manualTrump){var b=a.reverse?-1:1;a.allowWrap===!1&&a.currSlide+b>=a.slideCount||(a.API.advanceSlide(b),a.API.trigger("cycle-next",[a]).log("cycle-next"))}},prev:function(){var a=this.opts();if(!a.busy||a.manualTrump){var b=a.reverse?1:-1;a.allowWrap===!1&&a.currSlide+b<0||(a.API.advanceSlide(b),a.API.trigger("cycle-prev",[a]).log("cycle-prev"))}},destroy:function(){this.stop();var b=this.opts(),c=a.isFunction(a._data)?a._data:a.noop;clearTimeout(b.timeoutId),b.timeoutId=0,b.API.stop(),b.API.trigger("cycle-destroyed",[b]).log("cycle-destroyed"),b.container.removeData(),c(b.container[0],"parsedAttrs",!1),b.retainStylesOnDestroy||(b.container.removeAttr("style"),b.slides.removeAttr("style"),b.slides.removeClass(b.slideActiveClass)),b.slides.each(function(){var d=a(this);d.removeData(),d.removeClass(b.slideClass),c(this,"parsedAttrs",!1)})},jump:function(a,b){var c,d=this.opts();if(!d.busy||d.manualTrump){var e=parseInt(a,10);if(isNaN(e)||0>e||e>=d.slides.length)return void d.API.log("goto: invalid slide index: "+e);if(e==d.currSlide)return void d.API.log("goto: skipping, already on slide",e);d.nextSlide=e,clearTimeout(d.timeoutId),d.timeoutId=0,d.API.log("goto: ",e," (zero-index)"),c=d.currSlide<d.nextSlide,d._tempFx=b,d.API.prepareTx(!0,c)}},stop:function(){var b=this.opts(),c=b.container;clearTimeout(b.timeoutId),b.timeoutId=0,b.API.stopTransition(),b.pauseOnHover&&(b.pauseOnHover!==!0&&(c=a(b.pauseOnHover)),c.off("mouseenter mouseleave")),b.API.trigger("cycle-stopped",[b]).log("cycle-stopped")},reinit:function(){var a=this.opts();a.API.destroy(),a.container.cycle()},remove:function(b){for(var c,d,e=this.opts(),f=[],g=1,h=0;h<e.slides.length;h++)c=e.slides[h],h==b?d=c:(f.push(c),a(c).data("cycle.opts").slideNum=g,g++);d&&(e.slides=a(f),e.slideCount--,a(d).remove(),b==e.currSlide?e.API.advanceSlide(1):b<e.currSlide?e.currSlide--:e.currSlide++,e.API.trigger("cycle-slide-removed",[e,b,d]).log("cycle-slide-removed"),e.API.updateView())}}),a(document).on("click.cycle","[data-cycle-cmd]",function(b){b.preventDefault();var c=a(this),d=c.data("cycle-cmd"),e=c.data("cycle-context")||".cycle-slideshow";a(e).cycle(d,c.data("cycle-arg"))})}(jQuery),/*! hash plugin for Cycle2;  version: 20130905 */
function(a){"use strict";function b(b,c){var d;return b._hashFence?void(b._hashFence=!1):(d=window.location.hash.substring(1),void b.slides.each(function(e){if(a(this).data("cycle-hash")==d){if(c===!0)b.startingSlide=e;else{var f=b.currSlide<e;b.nextSlide=e,b.API.prepareTx(!0,f)}return!1}}))}a(document).on("cycle-pre-initialize",function(c,d){b(d,!0),d._onHashChange=function(){b(d,!1)},a(window).on("hashchange",d._onHashChange)}),a(document).on("cycle-update-view",function(a,b,c){c.hash&&"#"+c.hash!=window.location.hash&&(b._hashFence=!0,window.location.hash=c.hash)}),a(document).on("cycle-destroyed",function(b,c){c._onHashChange&&a(window).off("hashchange",c._onHashChange)})}(jQuery),/*! loader plugin for Cycle2;  version: 20131121 */
function(a){"use strict";a.extend(a.fn.cycle.defaults,{loader:!1}),a(document).on("cycle-bootstrap",function(b,c){function d(b,d){function f(b){var f;"wait"==c.loader?(h.push(b),0===j&&(h.sort(g),e.apply(c.API,[h,d]),c.container.removeClass("cycle-loading"))):(f=a(c.slides[c.currSlide]),e.apply(c.API,[b,d]),f.show(),c.container.removeClass("cycle-loading"))}function g(a,b){return a.data("index")-b.data("index")}var h=[];if("string"==a.type(b))b=a.trim(b);else if("array"===a.type(b))for(var i=0;i<b.length;i++)b[i]=a(b[i])[0];b=a(b);var j=b.length;j&&(b.css("visibility","hidden").appendTo("body").each(function(b){function g(){0===--i&&(--j,f(k))}var i=0,k=a(this),l=k.is("img")?k:k.find("img");return k.data("index",b),l=l.filter(":not(.cycle-loader-ignore)").filter(':not([src=''])'),l.length?(i=l.length,void l.each(function(){this.complete?g():a(this).load(function(){g()}).on("error",function(){0===--i&&(c.API.log("slide skipped; img not loaded:",this.src),0===--j&&"wait"==c.loader&&e.apply(c.API,[h,d]))})})):(--j,void h.push(k))}),j&&c.container.addClass("cycle-loading"))}var e;c.loader&&(e=c.API.add,c.API.add=d)})}(jQuery),/*! pager plugin for Cycle2;  version: 20140415 */
function(a){"use strict";function b(b,c,d){var e,f=b.API.getComponent("pager");f.each(function(){var f=a(this);if(c.pagerTemplate){var g=b.API.tmpl(c.pagerTemplate,c,b,d[0]);e=a(g).appendTo(f)}else e=f.children().eq(b.slideCount-1);e.on(b.pagerEvent,function(a){b.pagerEventBubble||a.preventDefault(),b.API.page(f,a.currentTarget)})})}function c(a,b){var c=this.opts();if(!c.busy||c.manualTrump){var d=a.children().index(b),e=d,f=c.currSlide<e;c.currSlide!=e&&(c.nextSlide=e,c._tempFx=c.pagerFx,c.API.prepareTx(!0,f),c.API.trigger("cycle-pager-activated",[c,a,b]))}}a.extend(a.fn.cycle.defaults,{pager:"> .cycle-pager",pagerActiveClass:"cycle-pager-active",pagerEvent:"click.cycle",pagerEventBubble:void 0,pagerTemplate:"<span>&bull;</span>"}),a(document).on("cycle-bootstrap",function(a,c,d){d.buildPagerLink=b}),a(document).on("cycle-slide-added",function(a,b,d,e){b.pager&&(b.API.buildPagerLink(b,d,e),b.API.page=c)}),a(document).on("cycle-slide-removed",function(b,c,d){if(c.pager){var e=c.API.getComponent("pager");e.each(function(){var b=a(this);a(b.children()[d]).remove()})}}),a(document).on("cycle-update-view",function(b,c){var d;c.pager&&(d=c.API.getComponent("pager"),d.each(function(){a(this).children().removeClass(c.pagerActiveClass).eq(c.currSlide).addClass(c.pagerActiveClass)}))}),a(document).on("cycle-destroyed",function(a,b){var c=b.API.getComponent("pager");c&&(c.children().off(b.pagerEvent),b.pagerTemplate&&c.empty())})}(jQuery),/*! prevnext plugin for Cycle2;  version: 20140408 */
function(a){"use strict";a.extend(a.fn.cycle.defaults,{next:"> .cycle-next",nextEvent:"click.cycle",disabledClass:"disabled",prev:"> .cycle-prev",prevEvent:"click.cycle",swipe:!1}),a(document).on("cycle-initialized",function(a,b){if(b.API.getComponent("next").on(b.nextEvent,function(a){a.preventDefault(),b.API.next()}),b.API.getComponent("prev").on(b.prevEvent,function(a){a.preventDefault(),b.API.prev()}),b.swipe){var c=b.swipeVert?"swipeUp.cycle":"swipeLeft.cycle swipeleft.cycle",d=b.swipeVert?"swipeDown.cycle":"swipeRight.cycle swiperight.cycle";b.container.on(c,function(){b._tempFx=b.swipeFx,b.API.next()}),b.container.on(d,function(){b._tempFx=b.swipeFx,b.API.prev()})}}),a(document).on("cycle-update-view",function(a,b){if(!b.allowWrap){var c=b.disabledClass,d=b.API.getComponent("next"),e=b.API.getComponent("prev"),f=b._prevBoundry||0,g=void 0!==b._nextBoundry?b._nextBoundry:b.slideCount-1;b.currSlide==g?d.addClass(c).prop("disabled",!0):d.removeClass(c).prop("disabled",!1),b.currSlide===f?e.addClass(c).prop("disabled",!0):e.removeClass(c).prop("disabled",!1)}}),a(document).on("cycle-destroyed",function(a,b){b.API.getComponent("prev").off(b.nextEvent),b.API.getComponent("next").off(b.prevEvent),b.container.off("swipeleft.cycle swiperight.cycle swipeLeft.cycle swipeRight.cycle swipeUp.cycle swipeDown.cycle")})}(jQuery),/*! progressive loader plugin for Cycle2;  version: 20130315 */
function(a){"use strict";a.extend(a.fn.cycle.defaults,{progressive:!1}),a(document).on("cycle-pre-initialize",function(b,c){if(c.progressive){var d,e,f=c.API,g=f.next,h=f.prev,i=f.prepareTx,j=a.type(c.progressive);if("array"==j)d=c.progressive;else if(a.isFunction(c.progressive))d=c.progressive(c);else if("string"==j){if(e=a(c.progressive),d=a.trim(e.html()),!d)return;if(/^(\[)/.test(d))try{d=a.parseJSON(d)}catch(k){return void f.log('error parsing progressive slides',k)}else d=d.split(new RegExp(e.data('cycle-split')||'\n')),d[d.length-1]||d.pop()}i&&(f.prepareTx=function(a,b){var e,f;return a||0===d.length?void i.apply(c.API,[a,b]):void(b&&c.currSlide==c.slideCount-1?(f=d[0],d=d.slice(1),c.container.one("cycle-slide-added",function(a,b){setTimeout(function(){b.API.advanceSlide(1)},50)}),c.API.add(f)):b||0!==c.currSlide?i.apply(c.API,[a,b]):(e=d.length-1,f=d[e],d=d.slice(0,e),c.container.one("cycle-slide-added",function(a,b){setTimeout(function(){b.currSlide=1,b.API.advanceSlide(-1)},50)}),c.API.add(f,!0)))}),g&&(f.next=function(){var a=this.opts();if(d.length&&a.currSlide==a.slideCount-1){var b=d[0];d=d.slice(1),a.container.one("cycle-slide-added",function(a,b){g.apply(b.API),b.container.removeClass("cycle-loading")}),a.container.addClass("cycle-loading"),a.API.add(b)}else g.apply(a.API)}),h&&(f.prev=function(){var a=this.opts();if(d.length&&0===a.currSlide){var b=d.length-1,c=d[b];d=d.slice(0,b),a.container.one("cycle-slide-added",function(a,b){b.currSlide=1,b.API.advanceSlide(-1),b.container.removeClass("cycle-loading")}),a.container.addClass("cycle-loading"),a.API.add(c,!0)}else h.apply(a.API)})}})}(jQuery),/*! tmpl plugin for Cycle2;  version: 20121227 */
function(a){"use strict";a.extend(a.fn.cycle.defaults,{tmplRegex:"{{((.)?.*?)}}"}),a.extend(a.fn.cycle.API,{tmpl:function(b,c){var d=new RegExp(c.tmplRegex||a.fn.cycle.defaults.tmplRegex,"g"),e=a.makeArray(arguments);return e.shift(),b.replace(d,function(b,c){var d,f,g,h,i=c.split(".");for(d=0;d<e.length;d++)if(g=e[d]){if(i.length>1)for(h=g,f=0;f<i.length;f++)g=h,h=h[i[f]]||c;else h=g[c];if(a.isFunction(h))return h.apply(g,e);if(void 0!==h&&null!==h&&h!=c)return h}return c})}})}(jQuery);

würde mich wirklich sehr freuen, wenn mir jemand helfen könnte !

Ganz liebe Grüße und danke schonmal !

Sundream

Sundream

Hallo,

an welche Stelle muss denn der Code-Schnipsel?

Gruß Sundream

Sundream

Hallo,

damit funktioniert es leider nicht... Beim Klick passiert nichts...
Welche Infos würdest du denn noch brauchen ?

Liebe Grüße

- - - Aktualisiert - - -

Habe den Fehler gefunden... es haben zwei Klammern gefehlt Danke an alle !!!

Sundream

Hallo,

danke schonmal, aber wäre das schon auf meinen Code bezogen? Ich versteh wie gesagt garnichts von Javascript... Welche Funktionen müsste ich damit ersetzen? Oder wie müsste ich das umschreiben?

Danke !

Liebe Grüße

Sundream

Sundream

Hallo,

dankeschön für die Antwort. Leider kenne ich mich mit JavaScript überhaupt nicht aus... Wie muss ich denn die 6 toggleDiv Funktionen zusammenfassen?

Danke schonmal,

Liebe Grüße !

Sundream

Hallo,

mir ist gerade bei meiner Website folgendes Problem aufgefallen: Ich verwende für die mobile Ansicht eine ausklappbare Navigation, die auf allen Seiten gut funktioniert außer auf einer. Diese Seite hat viel anderen Javascript Code, aber ich versteh trotzdem nicht warum es plötzlich nicht mehr funktionieren sollte..

Hier der head Bereich vom Code:

HTML

<head>
    <title>Parasozial</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <script >
        $(function() {
            var pull         = $('#pull');
                menu         = $('nav ul');
                menuHeight    = menu.height();


            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });


            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });

    </script>
    <script language="JavaScript" type="text/javascript">
<!--
function toggleDiv(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv2(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv3(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv4(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv5(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>


<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv6(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>


</head>

Alles anzeigen

Der Teil der nicht mehr funktioniert ist der erste script tag

HTML

<script >
        $(function() {
            var pull         = $('#pull');
                menu         = $('nav ul');
                menuHeight    = menu.height();


            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });


            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });

    </script>

Alles anzeigen

Wäre wirklich wirklich dankbar, wenn mir jemand helfen könnte !

Liebe Grüße
Sundream

Sundream

Hallo,

ich möchte , dass wenn ich auf ein <a> Element klicke ein div auftaucht und hab im Internet nach einem passendem Code dafür gesucht und bin dabei auf diese Seite gestoßen : http://jsfiddle.net/25YFA/

Habe dann versucht das in meinen Code einzufügen, aber es funktioniert irgendwie nicht.

HTML:

HTML

<!DOCTYPE HTML>


<head>
    <title>Parasozial</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <script>
        $(function() {
            var pull         = $('#pull');
                menu         = $('nav ul');
                menuHeight    = menu.height();


            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });


            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });

    </script>
    <script>
$("#hiddendiv").hide();
$("a").on("click", function(e){
    e.preventDefault();
$("#hiddendiv").toggle();
});


    </script>
</head>
<body>


    
<header>
    <img src="Bilder/Header.jpg">




    <nav class="clearfix">
        <ul class="clearfix">
            <li><a href="Index.html">Startseite</a></li>
            <li><a href="Story.html">Story</a></li>
            <li><a href="Figuren.html" class="active">Figuren</a></li>
            <li><a href="Projekt.html">Projekt</a></li>
            <li><a href="Unterstuetzer.html">Unterstützer</a></li>
            <li><a href="Kontakt.php">Kontakt</a></li>


            
        </ul>


        <a href="#" id="pull">Menü</a>
    </nav>




</header>




<section class="main">


<div class="beige">




<div class="Kuenstler_rechts" >
    <article>




<p>Alter: 28</p>




<a href="#"> Gespielt von: Robin Czerny</a>
    </article>


<div id="hiddendiv"></div>



</div>


















</section>


<div class="Impressum">

    <footer>
            <ul>
                <li><a href="Impressum.html" >Impressum</a></li>
            </ul>
        </footer>
</div>

</body>


</html>

Alles anzeigen

Das ist meine CSS für das div:

Code

#hiddendiv{
    height:120px;
    width:120px;
    background-color:red;
   }

Wär froh,wenn mir jemand helfen kann.
Danke schonmal !

Liebe Grüße

Sundream

Sundream

Hey,

ich habe folgendes Problem: Wenn ich mit einem mit php erstellten Kontaktformular eine Email verschicke, kommt sie so an:

ich hätte aber gerne, dass das alles untereinander stehen wird und zusätzlich äöü richtig dargestellt werden.
Ist das möglich?

So sieht mein Code aus:

PHP

<?php


$notiz = "";


if($_POST['name'] != "" && $_POST['email'] != "" && $_POST['betreff'] != "" && $_POST['nachricht'] != "") {

$sent = mail('Stefanie.Wolf96@gmx.de', 'Parasozial: ' . $_POST['betreff'], 'Name:'. $_POST['name'] .  ' Email: ' . $_POST['email'] . ' Nachricht:  '  . $_POST['nachricht']);


  if($sent == 1){
$notiz = "Ihre Nachricht wurde gesendet.";



  }

} else if ($_POST['formular']=='set'){
  $notiz = "Es wurden nicht alle Felder ausgefüllt.";

}


?>


<html>
  <head>
    <title>Parasozial</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta charset="UTF-8">
  <script>
    $(function() {
      var pull    = $('#pull');
        menu    = $('nav ul');
        menuHeight  = menu.height();


      $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
      });


      $(window).resize(function(){
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) {
              menu.removeAttr('style');
            }
        });
    });
  </script>
  </head>




  <body>


    <header>
  <img src="Bilder/Header.jpg">




  <nav class="clearfix">
    <ul class="clearfix">
      <li><a href="Index.html">Startseite</a></li>
      <li><a href="Story.html">Story</a></li>
      <li><a href="Figuren.html" >Figuren</a></li>
      <li><a href="Projekt.html">Projekt</a></li>
      <li><a href="Unterstuetzer.html">Unterstützer</a></li>
      <li><a href="Kontakt.php"class="active">Kontakt</a></li>


      
    </ul>


    <a href="#" id="pull">Menü</a>
  </nav>




</header>


<section class="main">


<div class="beige">

    <h2>Kontakt-Formular</h2>



    <form action="Kontakt.php" method="post">
      <input type="hidden" value="set" name="formular">
      <input type="text" value="<?php echo $_POST['name']; ?>" placeholder="Name" name="name"><br>
      <input type="text" value="<?php echo $_POST['email']; ?>" placeholder="Email" name="email"><br>
      <input type="text" value="<?php echo $_POST['betreff']; ?>" placeholder="Betreff" name="betreff"><br>

      <textarea name="nachricht" placeholder="Nachricht"><?php echo $_POST['nachricht']; ?></textarea>

      <br><input type="submit" value="Senden">

    </form>


    <h5><?php echo $notiz; ?></h5>
</div>




</section>


<div class="Impressum">

  <footer>
      <ul>
        <li><a href="Impressum.html" >Impressum</a></li>
      </ul>
    </footer>
</div>




  </body>
</html>

Alles anzeigen

Danke schonmal !

Liebe Grüße

Sundream

Sundream

Oh Dankeschön, hat super funktioniert !

Sundream

Hey,
ich erstelle gerade eine Seite mit Kontaktformular und habe dabei ein paar Probleme, hoffe ihr köönt mir helfen..

HTML

<!DOCTYPE HTML>


<head>
    <title>Parasozial</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <script>
        $(function() {
            var pull         = $('#pull');
                menu         = $('nav ul');
                menuHeight    = menu.height();


            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });


            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
        });
    </script>
</head>


<body>


<header>
    <img src="Bilder/Header.jpg">




    <nav class="clearfix">
        <ul class="clearfix">
            <li><a href="Index.html">Startseite</a></li>
            <li><a href="Story.html">Story</a></li>
            <li><a href="Figuren.html">Figuren</a></li>
            <li><a href="Projekt.html">Projekt</a></li>
            <li><a href="Unterstuetzer.html">Unterstützer</a></li>
            <li><a href="Kontakt.html" class="active">Kontakt</a></li>


            
        </ul>


        <a href="#" id="pull">Menü</a>
    </nav>




</header>




<section class="main">


<div class="beige">


<h4> Kontaktieren Sie uns gerne bei Fragen ! </h3>


    <form action="kontakt.php" method="post"><label for="vorname">Vorname:</label>
 <input id="vorname" type="text" name="vorname" />


 <label for="nachname">Nachname:</label>
 <input id="nachname" type="text" name="nachname" />


 <label for="email">Ihre E-Mail-Adresse:</label>
 <input id="email" type="text" name="email" />


 <label id="betreff" for="betreff">Betreff:</label>
 <input id="betreff" type="text" name="betreff" />


 <label for="nachricht">Ihre Nachricht:</label>
 <textarea id="nachricht" name="nachricht"></textarea>


 <input id="submit" type="submit" name="submit" value="Abschicken" />


</div>


</section>


<div class="Impressum">

    <footer>
            <ul>
                <li><a href="Impressum.html" >Impressum</a></li>
            </ul>
        </footer>
</div>

</body>






</html>

Alles anzeigen

Das ist der HTML Coder der Seite , der php Code zu dem das Formular geleitet wird sieht so aus:

PHP

<?php
/* === Daten aus dem Formular auslesen und in Variablen speichern === */
  $vorname = $_POST['vorname'];
  $nachname = $_POST['nachname'];
  $email = $_POST['email'];
  $betreff = $_POST['betreff'];
  $nachricht = $_POST['nachricht'];


  $name = $vorname.' '.$nachname; 


/* === Empfängeradresse und Betreff === */
  $an = 'musteremail@gmx.de'; //Hier Ihre E-Mail-Adresse eintragen
  $betreff = "Parasozial | $betreff | $name ";


/* === Wenn Bedingung erfüllt, dann E-Mail abschicken - andernfalls Fehlermeldung ausgeben === */
    if ((!empty($name))&&(!empty($email))&&(!empty($betreff))&&(!empty($nachricht))) {


      mail($an, $betreff, $nachricht, 'From:' . $email); //Mail versenden


      echo 'Ihre Kontaktnachricht wurde zugestellt. Sie werden bald möglichst eine Antwort erhalten.';
    }
    else {
      echo 'Sie müssen alle Felder ausfüllen. <a href="kontakt.html">Zurück</a>';
    }
?>

Alles anzeigen

Mein Problem ist jetzt folgendes:
Ich möchte, dass die Fehlermeldungen einfach unter oder über dem Formular auftauchen oder wenigstens die selbe Gestaltung wie alle anderen Seiten hat, aber ich werde immer auf eine extra Seite geleitet, die nichtmal UTF 8 hat. Weiß jemand wie ich das ändern kann?

Danke schonmal !

Ganz Liebe Grüße

Sundream

Sundream

Okay, danke
Wäre es denn auch möglich, dass jemand ohne cms die Bilder extern ändern kann?
Muss ich nicht alles mit php schreiben, wenn ich es für ein cms verwenden will?

Sundream

Hallo,

naja mir geht's eigentlich darum, dass diese Seite noch kein php template ist und ich aber gerne eins draus machen möchte. Meine Frage war deswegen, ob man das bei der Seite als völliger Anfänger hinbekommen kann und wenn ja welche Tipps ihr geben würdet, damit ich das gut hinbekomme und wie ich vielleicht einiges von dem schon vorhandenem trotzdem noch verwenden kann?
Die Anforderungen sind einfach Bilder ändern

Liebe Grüße

Sundream

Hallo ,

dann hoffe ich, dass du damit was anfangen kannst.
Habs jetzt kurz hochgeladen. Wars davor nicht, weil sie, wie gesagt, noch nicht 100% fertig ist.

Hier der Link:

http://testseitesun.bplaced.net/Index.html

Liebe Grüße

Sundream

Okay,
hab schon verstanden
Das ist die Website so wie sie jetzt gerade ist, noch nicht vollständig, aber fast fertig, ich hoffe das hilft dir mir helfen zu können

( Ist der Link zu meiner Dropbox, mir ist keine bessere Lösung eingefallen )

https://www.dropbox.com/s/m0lmezpl6jmaukc/Skript.zip?dl=0

Danke!

Sundream

Hey, danke schonmal für deine Antwort

Also es is eine Website für eine Zimmerei, auf jeder Seite sind Bilder und auch verlinkungen auf andere Seiten.
Was für Infos brauchst du noch so?
Danke schonmal

Sundream

Hey,

ich habe eine Website mit Hilfe von HTML und CSS für einen Kunden erstellt.
Dieser will jetzt nachträglich doch noch selber Bilder ändern können.
Die Website hat 4 Seiten, eine davon hat zusätzlich 27 Unterseiten, eine zweite hat 4 Unterseiten.

Ich dachte jetzt ein CMS wäre die Lösung hierfür, da ich die Website jetzt aber schon erstellt habe, möchte ich eigentlich gerne eine Lösung, die von außen genau so aussieht wie das was ich jetzt erstellt habe. Zusätzlich fände ich es schön, wenn es irgendwie eine Möglichkeit gäbe, die die Arbeit von davor nicht komplett umsonst sein lässt.
Wichtig ist vorallem auch, dass die Seite wieder responsiv ist.

Meine Frage ist jetzt, ob es eine Lösung gäbe ein Template selber zu erstellen für ein CMS was für meine Anforderungen gut passt. Wenn ja, was brauch ich dann dafür ? Krieg ich das hin, wenn ich das noch nie gemacht habe und eigentlich nur HTML und CSS schreiben kann?

Danke schonmal !

Liebe Grüße

Sundream

Sundream

Ist das aber dann auch mit HTML und CSS möglich?

- - - Aktualisiert - - -

Okay, aber ist das dann auch mit HTML und CSS möglich?

Beiträge von Sundream

Seite auf Fenstergröße begrenzen

2 Slideshows mit cycle2 auf einer Seite

2 Slideshows mit cycle2 auf einer Seite

2 Slideshows mit cycle2 auf einer Seite

Absatz und UTF 8 bei Email Ausgabe ?

Seite reagiert nicht mehr auf javascript

Seite reagiert nicht mehr auf javascript

Seite reagiert nicht mehr auf javascript

Seite reagiert nicht mehr auf javascript

Div bei Klicken anzeigen - Problem mit Code

Absatz und UTF 8 bei Email Ausgabe ?

Kontaktformular Fehlermeldungen

Kontaktformular Fehlermeldungen

Responsives Template

Responsives Template

Responsives Template

Responsives Template

Responsives Template

Responsives Template

CMS kompatibel mit HTML und CSS ?