-
AuthorPosts
-
September 21, 2018 at 8:11 pm #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 linkby the way – i think Enfold must have debounce and throttle functions included – how to use them?
September 23, 2018 at 8:39 am #1013234i 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.September 23, 2018 at 12:10 pm #1013296ok 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 Irishfunction 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');
September 24, 2018 at 10:07 am #1013536September 24, 2018 at 12:49 pm #1013577yes – 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) {September 24, 2018 at 2:06 pm #1013619Hi,
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,
PeterSeptember 24, 2018 at 6:41 pm #1013746thanks – can be closed.
-
AuthorPosts
- The topic ‘concerning to resize functions and fullwidth logo’ is closed to new replies.