Fixed "Curtain" Footer

but there has to be in the function an option for window resize – because footer height changes with content. On small screens we got a growing footer height (with socket too- but not so often)

It has to proof in time (dynamically) the height of socket and footer – how can we do that?
The code above works if we actualize the window but does not react on window-resize

• This reply was modified 8 years, 1 month ago by Guenni007.

and perhaps we should take instead of .height( ) the .outerHeight( )

see Result here: Link

btw: the footer background-color is a gradient – just a test – nothing i will realy work with.
And diagonal backgrounds are just to see what happens realy ( landing page )

• This reply was modified 8 years, 1 month ago by Guenni007.

ok i see it works good but this is not the thing which you are looking for.
the footer and socket should be on bottom at the end of the scroll.

i’m not shure if this is what you try to get:

http://webers-testseite.de/elegant/

i don’t like the way it removes on scrolling back it would be nice to have here a animation of footer gone.

ohha – this is what i got ( i set the footer to a given height – because otherwise the effect is not so clear)
if you like it – i will share it – but without a child-theme footer.php it does not work. The thing is to get the socket out of main – not so hard to make but that makes things a lot easier.
http://webers-testseite.de/huth/

Lass uns mal gerade deutsch hier miteinander reden.

In dem Beispiel oben (nicht Enfold) ist es aber wohl schon so wie jetzt bei mir im Beispiel.

Wie gesagt die Sache wird einfacher, wenn man die footer.php dahingehend bearbeitet, dass die interessierenden Container ( in deinem Fall nun beide) nicht mehr in Main liegen. Die bearbeitete footer.php landet dann halt in child-theme folder.

Das ist der momentane Code (wobei ich wirklich kein Profi bin, was die php und jquery Sachen betrifft – ich denke da ließe sich einiges abändern):

add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
    $(document).ready(function(){
        $(document).scroll(function(){

		    var socketh = $('#socket').outerHeight(),
			footerh = $('#footer').outerHeight(),
			spacerh = $('#socket').outerHeight() + $('#footer').outerHeight();

                    if( $(window).scrollTop() >= $(document).height() - $(window).height() - socketh )
                    {   
                        $('#socket').css('position', 'fixed' );
			$('#main').css('padding-bottom', socketh );
                    }
                    else {
                        $('#socket').css('position', 'relative' );
			$('#main').css('padding-bottom', 0 );
                    }
        });
    });
})(jQuery);
</script>
<?php
}

weiß nicht ob ich die document ready funktion wirklich brauche. Die scroll funktion gibt mir zurück, ob ich den Bottom erreicht habe.
Wenn das so ist wechsel ich ein paar css Anweisungen.

Ich glaube ich muss mich jetzt endlich mal in jquery einarbeiten – scheint ja viele möglich zu sein.
Ich versuche mal die Seite oben umzustricken.

PS : die outerHeight nahm ich damit ich margins und borders gleich mitberücksichtige.

• This reply was modified 8 years, 1 month ago by Guenni007.

ps im zip da muss es im php natürlich bei beiden abfragen:
spacerh = socketh + footerh - 3 ;

sein – sorry – flüchtigkeit

sorry in meinem zip war noch eine etwas ältere css
du hast ausschließlich container – kaum color-section genutzt. Ich hatte auf meiner Testseite nur Color-sections
Wie gesagt der Footer und Socket sind quasi immer da müssen aber durch z-index und hintergrundfarbe überdeckt sein

wenn du das ergänzt muss es nun gehen: (immer wenn die durchscheinen musst du schauen welche container deklaration du hast.
.container_wrap konnte ich nicht nehmen, da footer und socket die auch haben

.avia-section, .av-layout-grid-container, .main_color {
    z-index: 3 !important;
}

ich denke dann sind alle main container mit abgedeckt

PS : solange footer und socket in main liegen wird es schwierig das zu realisieren. Ich hab das echt versucht. So ist es leichter.
Was dagegen spricht die eigentlich per default draußen zu haben ? klar ist wenn du auf boxed design umstellst mußt du footer und socket so setzen wie container_wrap
könnte man übrigens im php mit einbauen – versuch das gleich mal. denn die Abfrage $(‘body’).outerWidth() sollte es geben.

• This reply was modified 8 years, 1 month ago by Guenni007.

wenn du das als funktion nimmst musst du bei boxed nicht mehr aufpassen wegen der footer weite:

add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {

    $(document).ready(function(){

                    var bodyw = $('body').width();
  
                        $('#footer').css('max-width', bodyw );
                        $('#socket').css('max-width', bodyw );

    });

    $(window).load(function() {
            var socketh = $('#socket').outerHeight(),
            footerh = $('#footer').outerHeight(),
            spacerh = socketh + footerh - 3 ;
  
            $('#abstand').css('height', spacerh );

    });

    $(window).resize(function() {
            var socketh = $('#socket').outerHeight(),
            footerh = $('#footer').outerHeight(),
            spacerh = socketh + footerh - 3  ;
  
            $('#abstand').css('height', spacerh );

    });

})(jQuery);
</script>
<?php
}

So noch eines – bei fixed Frame funktioniert das auch, du musst nur die Werte anpassen. Je nachdem was da als frame eingestellt ist