Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1063418

    Hi,
    i found a website, done with enfold. There is an element that i want to use too.
    Please check the website. you can see the “telefone button” on the right. It is positionend in the center-right.
    When i scroll down, the button moves up to the header and is sticky.

    thank you for helping

    #1063540

    And even that page – allthough it is not yours and not under construction is a secret to put it in private content area?

    #1063894

    Hi,

    That is not part of the theme, they probably used a plugin or custom code to create that.

    Best regards,
    Rikard

    #1063943

    Tja – maybe it is something like this: https://webers-testseite.de/sticky-elements/
    or here with sticky sidebar: https://webers-testseite.de/buttons/

    #1064021

    thank you for the links! That Link with the sticky-button is what i am looking for. How is it done?

    • This reply was modified 2 weeks, 1 day ago by  breezemedia.
    • This reply was modified 1 week, 3 days ago by  breezemedia.
    #1064074

    yes – but that is indeed something totaly different. It is a kind of flyout
    look for flyout plugins: https://de.wordpress.org/plugins/tags/flyout/
    i got this – but it is a premium plugin and costs some money: http://demo.bnecreative.com/flyouts/
    if you like the solution with the button on my page – it will be best to have a lifelink from you where you have styled sofar all Elements.
    This sticky technique works with a sticky-wrapper div and a sticky element.

    #1064106

    or we go and have some inspiration:

    just one moment i try to simplify that code a bit. …
    so it might be temporarly not available or not function
    https://webers-testseite.de/impressum/

    maybe you remove the link now ;) on here

    • This reply was modified 2 weeks, 1 day ago by  Guenni007.
    #1064127

    we now have to look for ipad view – because fixed positioning is always a problem on those mobile devices.

    #1064442

    ok here we go:
    ( i styled it here only for my page with ID: 2466 – if you want to have it everywhere – remove the if clause – but don’t forget to delete the last but one closing curly bracket then too!)
    it is recomended to use a child-theme
    both comes to child-theme functions.php

    first : the container itself placement

    add_action('ava_main_header', function() {
    if(is_page(2466)){
    echo '<div class="fixed-tel">
            <a id="klick" class="telephone" href="tel:+492289768293">
                <span class="phone-icon">+49 228 9768293</span>   
            </a>
        </div>';
    }
    });

    Second: the function for animation:

    add_action( 'wp_footer', 'fixed_contact_script' );
    function fixed_contact_script() {
    if(is_page(2466)){
    ?>
    <script type="text/javascript">
    (function($){
        $(function(){
            $('.fixed-tel').data('size','big');
        });
        $(window).scroll(function(){
            if($(document).scrollTop() > 10){
                if($('.fixed-tel').data('size') == 'big')
                {
                    $('.fixed-tel').data('size','small');
                    $('.fixed-tel').stop().animate({
                        top:'42px'
                    },700);
                }
            }
            else{
                if($('.fixed-tel').data('size') == 'small')
                {
                    $('.fixed-tel').data('size','big');
                    $('.fixed-tel').stop().animate({
                        top:'50%'
                    },700);
                }  
            }
        });
    })(jQuery);
    </script>
    <?php
    }
    }

    this comes to quick css:

    .fixed-tel {
        top: 50%;
        right: -165px;
        position: fixed;
        z-index: 10;
        background-color: #1ecaed;
        border: 2px solid #fff;
        border-right: none !important;
    }
    
    #klick { padding: 20px; display: block }
    
    .phone-icon::before {
        content: "\e854";
        font-family: entypo-fontello;
        padding-right: 18px;
        font-size: 30px;
        top: 3px;
        position: relative;
    }
    
    .fixed-tel:hover { right: 0 !important }
    .fixed-tel a:hover { text-decoration: none }
    .telephone { color: #fff !important }
    

    if you don’t like the hidden part of that telephone field – just set the right positioning to 0 – and remove css for fixed-tel:hover)
    if you like to link to your contact page just change href in: echo '<a class="telephone" href="tel:+492289768293"> and adapt the content ( maybe the icon to: \e805 )
    if you like to have that phone field over the slided in hamburger menu – set the z-index to 1000
    some positioning depends on your header height ( and if you have f.e. top bar etc.

    Result as mentioned above see here: https://webers-testseite.de/impressum/

    #1066069

    hey Günni, großartig dass du das so probierst und erarbeitest.

    Das funktioniert perfekt!!!!!!!!!

    • This reply was modified 1 week, 3 days ago by  breezemedia.
    • This reply was modified 1 week, 3 days ago by  breezemedia.
    #1066100

    danke – nimm den link noch hier weg: Referenzseite

    #1066763

    Hi,

    @breezemedia: Glad it worked!

    Thanks @guenni007. Happy Valentine’s Day to you and your wife. :)

    Best regards,
    Ismael

    #1067060

    Thank you – also for the reminder.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.