Ankündigung

Einklappen
Keine Ankündigung bisher.

DIV Position ändern

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • DIV Position ändern

    Hallo zusammen!

    Ich übe einmal wieder an einem vermutlich kleinem Problem.
    Das Footer-DIV soll nicht innerhalb "content" sein, sondern eben ausserhalb dieses DIV's:

    HTML wird zur Zeit so ausgegeben:

    Code:
    <body>
    <div class="content">
    <div class="content_inner">
    <div class="page">
    <div class="sp-wrap" style="display: inline-block;">
    <div class="sp-large">
    <a class="sp-current-big" href="1 - 0001.jpg"><img alt="" src="1 - 0001_small.jpg"></a>
    </div>
    <div class="sp-thumbs sp-tb-active">
    <a class="sp-current" href="1 - 0001.jpg"><img alt="" src="1 - 0001_small.jpg"></a><a href="1 - 0002.jpg"><img alt="" src="1 - 0002_small.jpg"></a><a href="1 - 0003.jpg"><img alt="" src="1 - 0003_small.jpg"></a><a href="1 - 0004.jpg"><img alt="" src="1 - 0004_small.jpg"></a>
    </div>
    </div>
    </div>
    </div>
    </div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js" type="text/javascript"></script>
    <script src="js/smoothproducts.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    			/* wait for images to load */
    			$(window).load( function() {
    				$('.sp-wrap').smoothproducts();
    			});
     </script>
    
    </body>
    sollte aber so ausgegeben werden:

    Code:
    <body>
    <div class="content">
    <div class="content_inner">
    <div class="page">
    <div class="sp-wrap" style="display: inline-block;">
    <div class="sp-large"><a class="sp-current-big" href="1 - 0001.jpg"><img alt="" src="1 - 0001_small.jpg"></a>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="sp-thumbs sp-tb-active">
    <a class="sp-current" href="1 - 0001.jpg"><img alt="" src="1 - 0001_small.jpg"></a><a href="1 - 0002.jpg"><img alt="" src="1 - 0002_small.jpg"></a><a href="1 - 0003.jpg"><img alt="" src="1 - 0003_small.jpg"></a><a href="1 - 0004.jpg"><img alt="" src="1 - 0004_small.jpg"></a>
    </div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js" type="text/javascript"></script>
    <script src="js/smoothproducts.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    			/* wait for images to load */
    			$(window).load( function() {
    				$('.sp-wrap').smoothproducts();
    			});
     </script>
    
    </body>
    Problem am Ganzen: Die HTML-Datei wird mit Hilfe von JavaScript befüllt.


    Die Datei "smoothproducts.js":

    Code:
    /*
     * Smoothproducts
     * http://kthornbloom.com/smoothproducts.php
     *
     * Copyright 2013, Kevin Thornbloom
     * Free to use and abuse under the MIT license.
     * http://www.opensource.org/licenses/mit-license.php
     */
    
    (function($) {
        $.fn.extend({
            smoothproducts: function() {
    
    
                var slideTiming = 300
    
                // Add some markup & set some CSS
                $('.sp-wrap').append('<div class="sp-large"></div><div class="sp-thumbs sp-tb-active"></div>');
    
                $('.sp-wrap').each(function() {
                    $('a', this).appendTo($('.sp-thumbs', this));
                    $('.sp-thumbs a:first', this).addClass('sp-current').clone().removeClass('sp-current').appendTo($('.sp-large', this)).addClass('sp-current-big');
                    $('.sp-wrap').css({
                        display: 'inline-block'
                    });
                });
    
                // Prevent clicking while things are happening
                $(document.body).on('click', '.sp-thumbs', function(event) {
                    event.preventDefault();
                });
    
                // Clicking a thumbnail
                $(document.body).on('click', '.sp-tb-active a', function(event) {
                    $(this).parent().find('.sp-current').removeClass();
                    $(this).parent().parent().find('.sp-thumbs').removeClass('sp-tb-active');
                    $(this).parent().parent().find('.sp-zoom').remove();
                    $(this).parent().parent().find('.sp-full-screen').fadeOut(function() {
                        $(this).remove();
                    });
    
                    var currentHeight = $(this).parent().parent().find('.sp-large').height(),
                        currentWidth = $(this).parent().parent().find('.sp-large').width();
                    $(this).parent().parent().find('.sp-large').css({
                        overflow: 'hidden',
                        height: currentHeight + 'px',
                        width: currentWidth + 'px'
                    });
    
                    $(this).parent().parent().find('.sp-large a').remove();
                    $(this).addClass('sp-current').clone().hide().removeClass('sp-current').appendTo($(this).parent().parent().find('.sp-large')).addClass('sp-current-big').fadeIn(slideTiming, function() {
    
                        var autoHeight = $(this).parent().parent().find('.sp-large img').height();
    
                        $(this).parent().parent().find('.sp-large').animate({
                            height: autoHeight
                        }, 'fast', function() {
                            $('.sp-large').css({
                                height: 'auto',
                                width: 'auto'
                            });
                        });
    
                        $(this).parent().parent().find('.sp-thumbs').addClass('sp-tb-active');
                    });
                    event.preventDefault();
                });
    
                // Zoom In
                $(document.body).on('click', '.sp-large a', function(event) {
                    var largeUrl = $(this).attr('href');
                    $(this).parent().parent().find('.sp-large').append('<div class="sp-zoom"><img src="' + largeUrl + '"/></div>');
                    $(this).parent().parent().find('.sp-zoom').fadeIn();
                    $(this).parent().parent().find(".sp-zoom").draggable();
                    $(this).parent().parent().prepend('<div class="sp-full-screen"><a href="#">↕</a></div>');
                    event.preventDefault();
                });
    
                // Open in Lightbox
    
                $(document.body).on('click', '.sp-full-screen', function(event) {
                    var currentImg = $(this).parent().find('.sp-large .sp-zoom').html();
                    $('body').append("<div class='sp-lightbox'>"+currentImg+"</div>");
                    $('.sp-lightbox').fadeIn();
                });
    
                // Close Lightbox
    
                $(document.body).on('click', '.sp-lightbox', function(event) {
                    $(this).fadeOut(function(){
                        $(this).remove();
                    })
                });
    
                $(document).keydown(function(e){
                    if (e.keyCode == 27) { 
                        $('.sp-lightbox').fadeOut(function(){
                            $(this).remove();
                        })
                        return false;
                    }
                });
    
    
                // Panning zoomed PC
    
                $('.sp-large').mousemove(function(e) {
                    var viewWidth = $(this).width(),
                        viewHeight = $(this).height(),
                        largeWidth = $(this).find('.sp-zoom').width(),
                        largeHeight = $(this).find('.sp-zoom').height(),
                        parentOffset = $(this).parent().offset(),
                        relativeXPosition = (e.pageX - parentOffset.left),
                        relativeYPosition = (e.pageY - parentOffset.top),
                        moveX = Math.floor((relativeXPosition * (viewWidth - largeWidth) / viewWidth)),
                        moveY = Math.floor((relativeYPosition * (viewHeight - largeHeight) / viewHeight));
    
                    $(this).find('.sp-zoom').css({
                        left: moveX,
                        top: moveY
                    });
    
                }).mouseout(function() {
                    // Pause Panning
                });
    
                // Panning zoomed Mobile - inspired by http://popdevelop.com/2010/08/touching-the-web/
    
                $.fn.draggable = function() {
                    var offset = null;
                    var start = function(e) {
                        var orig = e.originalEvent;
                        var pos = $(this).position();
                        offset = {
                            x: orig.changedTouches[0].pageX - pos.left,
                            y: orig.changedTouches[0].pageY - pos.top
                        };
                    };
                    var moveMe = function(e) {
                        e.preventDefault();
                        var orig = e.originalEvent,
                            newY = orig.changedTouches[0].pageY - offset.y,
                            newX = orig.changedTouches[0].pageX - offset.x,
                            maxY = (($('.sp-zoom').height()) - ($('.sp-large').height())) * -1,
                            maxX = (($('.sp-zoom').width()) - ($('.sp-large').width())) * -1;
                        if (newY > maxY && 0 > newY) {
                            $(this).css({
                                top: newY
                            });
                        }
                        if (newX > maxX && 0 > newX) {
                            $(this).css({
                                left: newX
                            });
                        }
                    };
                    this.bind("touchstart", start);
                    this.bind("touchmove", moveMe);
                };
    
                // Zoom Out
                $(document.body).on('click', '.sp-zoom', function(event) {
                    $(this).parent().parent().find('.sp-full-screen').fadeOut(function() {
                        $(this).remove();
                    });
                    $(this).fadeOut(function() {
                        $(this).remove();
                    });
                });
    
            }
        });
    })(jQuery);
    Und die Datei "smoothproducts.min.js":

    Code:
    !function(a){a.fn.extend({smoothproducts:function(){var b=300;a(".sp-wrap").append('<div class="sp-large"></div><div class="sp-thumbs sp-tb-active"></div>'),a(".sp-wrap").each(function(){a("a",this).appendTo(a(".sp-thumbs",this)),a(".sp-thumbs a:first",this).addClass("sp-current").clone().removeClass("sp-current").appendTo(a(".sp-large",this)).addClass("sp-current-big"),a(".sp-wrap").css({display:"inline-block"})}),a(document.body).on("click",".sp-thumbs",function(a){a.preventDefault()}),a(document.body).on("click",".sp-tb-active a",function(c){a(this).parent().find(".sp-current").removeClass(),a(this).parent().parent().find(".sp-thumbs").removeClass("sp-tb-active"),a(this).parent().parent().find(".sp-zoom").remove(),a(this).parent().parent().find(".sp-full-screen").fadeOut(function(){a(this).remove()});var d=a(this).parent().parent().find(".sp-large").height(),e=a(this).parent().parent().find(".sp-large").width();a(this).parent().parent().find(".sp-large").css({overflow:"hidden",height:d+"px",width:e+"px"}),a(this).parent().parent().find(".sp-large a").remove(),a(this).addClass("sp-current").clone().hide().removeClass("sp-current").appendTo(a(this).parent().parent().find(".sp-large")).addClass("sp-current-big").fadeIn(b,function(){var b=a(this).parent().parent().find(".sp-large img").height();a(this).parent().parent().find(".sp-large").animate({height:b},"fast",function(){a(".sp-large").css({height:"100%",width:"auto"})}),a(this).parent().parent().find(".sp-thumbs").addClass("sp-tb-active")}),c.preventDefault()}),a(document.body).on("click",".sp-large a",function(b){var c=a(this).attr("href");a(this).parent().parent().find(".sp-large").append('<div class="sp-zoom"><img src="'+c+'" style="height: 100%"/></div>'),a(this).parent().parent().find(".sp-zoom").fadeIn(),a(this).parent().parent().find(".sp-zoom").draggable(),/*a(this).parent().parent().prepend('<div class="sp-full-screen"><a href="#">\u2195</a></div>'),*/b.preventDefault()}),a(document.body).on("click",".sp-full-screen",function(){var c=a(this).parent().find(".sp-large .sp-zoom").html();a("body").append("<div class='sp-lightbox'>"+c+"</div>"),a(".sp-lightbox").fadeIn()}),a(document.body).on("click",".sp-lightbox",function(){a(this).fadeOut(function(){a(this).remove()})}),a(document).keydown(function(b){return 27==b.keyCode?(a(".sp-lightbox").fadeOut(function(){a(this).remove()}),!1):void 0}),a(".sp-large").mousemove(function(b){var c=a(this).width(),d=a(this).height(),e=a(this).find(".sp-zoom").width(),f=a(this).find(".sp-zoom").height(),g=a(this).parent().offset(),h=b.pageX-g.left,i=b.pageY-g.top,j=Math.floor(h*(c-e)/c),k=Math.floor(i*(d-f)/d);a(this).find(".sp-zoom").css({left:j,top:k})}).mouseout(function(){}),a.fn.draggable=function(){var b=null,c=function(c){var d=c.originalEvent,e=a(this).position();b={x:d.changedTouches[0].pageX-e.left,y:d.changedTouches[0].pageY-e.top}},d=function(c){c.preventDefault();var d=c.originalEvent,e=d.changedTouches[0].pageY-b.y,f=d.changedTouches[0].pageX-b.x,g=-1*(a(".sp-zoom").height()-a(".sp-large").height()),h=-1*(a(".sp-zoom").width()-a(".sp-large").width());e>g&&0>e&&a(this).css({top:e}),f>h&&0>f&&a(this).css({left:f})};this.bind("touchstart",c),this.bind("touchmove",d)},a(document.body).on("click",".sp-zoom",function(){a(this).parent().parent().find(".sp-full-screen").fadeOut(function(){a(this).remove()}),a(this).fadeOut(function(){a(this).remove()})})}})}(jQuery);
    Und noch ein CSS-Datei-Ausschnitt:

    Code:
        text-align: center;
        border-top: 2px solid #FF0000;
        position: absolute;
        bottom: 0px;
        left: 0px;
        background: url(../hg.png);
        width: 100%;
        height: 110px;
    Entschuldigt, dass das ganze so gross wurde.
    Ich hoffe, mir kann trotzdem jemand helfen!

    Danke und Gruss,

    swissPHP


  • #2
    Niemand?

    Hintergrund:

    Wenn ich den footer bzw. das DIV "sp-thumbs" als position: fixed definiere, funktioniert das zwar in den Desktop-Browsern. Dies funktioniert jedoch auf mobilen Endgeräten nicht, da diese automatisch skalieren.

    Danke für eure Zeit und Hilfe!

    Gruss,

    SwissPHP

    Kommentar


    • #3
      Guten Abend

      Gib mir bitte mal deinen nicht ausgegebenen HTML code.

      Danke

      Kommentar


      • #4
        Hallo zusammen

        Ich habe nun einen Testlink gebaut:

        http://oldtimer.pf-control.de/berichte/

        Mit dem Button oben lässt sich mein Problem verdeutlichen.
        Schön wäre, wenn das DIV "sp-thumbs" als fixed wäre, also am unteren Bildrand angeheftet.
        Die Positionierung "fixed" wurd von Smartphones aber nicht unterstützt, also müsste das DIV "sp-thumbs" direkt dem body unterliegen.

        Gruss,

        swissPHP

        Kommentar


        • #5
          Verwende doch eine Frontend-Bibliothek: http://getbootstrap.com
          Dort hast du auch genügend Beispiele für dein vorhaben!

          Kommentar


          • #6
            Hallo zusammen

            Ich habe das Problem mittlerweile beheben können.
            Ich löschte die beiden DIV's "content" und ".content-inner".
            Somit unterliegt das DIV "page" direkt dem body!

            Danke trotzdem für eure Hilfe!

            Gruss,

            swissPHP

            Kommentar

            Lädt...
            X