Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1012894

    dependencies.
    i got a customer of mine who likes to have on top his full-width logo.
    so i setup enfold to have logo on top and navigation underneath.
    First i thought it might be easy to have the logo stretched to full width but if i got that done the height of header stayes the same and on having small screens the navigation has allways that padding-top.

    So we can have instead in this av-logo-container a background-image – and that image will determine the dimension of the div.
    Thats easy:

    .container.av-logo-container {
        background-image: url( /wp-content/logo.jpg );
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 0 !important;
        padding-top: 23%;  
    }

    and padding-top depends on ratio of the background-image

    so i got now my “logo” automatic dimensions when resizing the screen-width. Nice.
    When hamburger is active i setup a different background-image and the real logo comes to foreground ( height is now not Zero )

    and now my troubles:
    i would like to have on screens bigger than 768px that the whole av-logo-container is clickable with home link and under 768px not
    So my trial was:

    function transfer_link_to_logo_container(){
    ?>
    <script type="text/javascript">
    (function($) {
    	$(window).on('load resize', function () {
              if ($(window).width() > 767) {
              		var theLink = $('.logo a').attr("href");
              		$(".av-logo-container").addClass("clickme");
              		$(".av-logo-container").on("click", function(){
    		                window.location.href = theLink;
    		        });
               };
            }).trigger('resize');
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'transfer_link_to_logo_container');

    it seems to work as expected – but we can see that resizeing the screen to small screens the first opening of the hamburger closed directly the menu. – i think because hamburger click activates the av-logo-container link and opens the home page.
    see private content for link

    by the way – i think Enfold must have debounce and throttle functions included – how to use them?

    #1013234

    i tried wiht var theLink outside the if clause and onload – no way
    i tried different codes like:

    function transfer_link_to_logo_container(){
    ?>
    <script type="text/javascript">
    (function($) {
        $(".av-logo-container").addClass("clickme");
    	$(window).on('load resize', function() {
    		if ($(window).width() > 767) {
    			$('.av-logo-container').click(function(){
    					window.location=$(this).find('.logo a').attr('href'); 
    					return false;
    			});
    		};
      	});
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'transfer_link_to_logo_container');


    it works on load but on resize the event which is set on wider screens does not go away on resize.

    #1013296

    ok i put in the off (‘click’) :

    ( The smartresize is a debounce function i created for not always fireing)

    by the way : there must be an included debounce or throttle function on Enfold – how could we use it – for example with that function here?
    is it that on avia.js ? : $(window).on( 'debouncedresize', function (e) {

    function transfer_link_to_logo_container(){
    ?>
    <script type="text/javascript">
    (function($) {
    	var theLink = $('.logo a').attr("href");
    	$(window).smartresize(function () {
              if ($(window).width() > 767) {
    			$(".av-logo-container").addClass("clickme");
              		$(".av-logo-container").on("click", function(){
    		                window.location.href = theLink;
    		        });
               }
               else {
    			$(".av-logo-container").removeClass("clickme");
    			$(".av-logo-container").off('click');
    			}
            }).resize();
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'transfer_link_to_logo_container');

    ___________________________

    to whom it may be interesting – this is my little debounce function:
    Credits goes to : Paul Irish

    function add_debounce_function(){
    ?>
    <script>
    (function($,sr){
        var debounce = function (func, threshold, execAsap) {
            var timeout;
            return function debounced () {
                var obj = this, args = arguments;
                function delayed () {
                    if (!execAsap)
                        func.apply(obj, args);
                    timeout = null;
                };
                if (timeout)
                    clearTimeout(timeout);
                else if (execAsap)
                    func.apply(obj, args);
                timeout = setTimeout(delayed, threshold || 250);
            };
        }
        jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
    })(jQuery,'smartresize');
    </script>
    <?php
    }
    add_action('wp_footer', 'add_debounce_function');
    #1013536

    Hi,

    Thanks a lot for sharing @Guenni007 :)

    Best regards,
    Yigit

    #1013577

    yes – Yigit
    can you tell me the mentioned above:

    by the way : there must be an included debounce or throttle function on Enfold – how could we use it – for example with that function here?
    is it that on avia.js ? : $(window).on( ‘debouncedresize’, function (e) {

    #1013619

    Hi,

    Yes the debouncedresize event is included in enfold/js/shortcodes.js:

    
    
    // window resize script
    var $event = $.event, $special, resizeTimeout;
    
    $special = $event.special.debouncedresize = {
    	setup: function() {
    		$( this ).on( "resize", $special.handler );
    	},
    	teardown: function() {
    		$( this ).off( "resize", $special.handler );
    	},
    	handler: function( event, execAsap ) {
    		// Save the context
    		var context = this,
    			args = arguments,
    			dispatch = function() {
    				// set correct event type
    				event.type = "debouncedresize";
    				$event.dispatch.apply( context, args );
    			};
    
    		if ( resizeTimeout ) {
    			clearTimeout( resizeTimeout );
    		}
    
    		execAsap ?
    			dispatch() :
    			resizeTimeout = setTimeout( dispatch, $special.threshold );
    	},
    	threshold: 150
    };
    

    Best regards,
    Peter

    #1013746

    thanks – can be closed.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘concerning to resize functions and fullwidth logo’ is closed to new replies.