Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

one-pager navigation out of sync...

Hey,

My website is based on Kyte theme and I've noticed that the last 3 page position (PHOTOGRAPHY > NEWS > CONTACT) are not synced with the navigation button.

Any ideas ?

cheers,

avihay

User Gravatar

avihay69

Posted Nov 7 2013 3:42 UTC

$10


  • wordpress
  • 3314 Views

17 Replies


Hi, it seems to be properly synced here:

http://prntscr.com/22hqlq

Can you explain more what do you mean by not synced? and probably with the information on what browser and device you accessed the site.

User Gravatar

ayublin

Posted Nov 7 2013 4:08 UTC

If you will start at PHOTOGRAPHY and scroll down you'll see that the NEWS button changes quickly before its actually reaching the page. For that matter if you click NEWS it will show the CONTACT button as active.

User Gravatar

avihay69

Posted Nov 7 2013 4:33 UTC

Ah it's caused by dynamically added element inside the PHOTOGRAPHY section, so initially the javascript has calculated the height of that section, but then some other scripts finished processing and add new content inside the section, that is causing outdated calculation. It's can be fixed by adding code to do a re-calculation:

jQuery('[data-spy="scroll"]').each(function () {
  var $spy = jQuery(this).scrollspy('refresh')
});

I will try to find a way where you can add the code, please give me a moment.

User Gravatar

ayublin

Posted Nov 7 2013 4:56 UTC

Please try to find a file named function.php under your theme directory, and please add this code:

function scrollspy_refresh_script() {
    ?>
    <script type="text/javascript">
        jQuery(window).load(function() {
            jQuery('[data-spy="scroll"]').each(function () {
              var $spy = jQuery(this).scrollspy('refresh')
            });
        });
    </script>
    <?php
}
add_action( 'wp_footer', 'scrollspy_refresh_script' );

You can add this code in the end of the file.

User Gravatar

ayublin

Posted Nov 7 2013 5:11 UTC

tried it in "functions.php" and it took the site down : ) i also have "theme_functions.php" & "aqpb_functions.php".

what do i need to be looking for in the right file ?

User Gravatar

avihay69

Posted Nov 7 2013 5:28 UTC

Ohh wow, did you remember the error messages that caused the down?

I made a little plugin to apply the code, therefore you won't be required to edit any code, and the fix will stay even if you updated the theme :)

https://dl.dropboxusercontent.com/u/34487766/ksp-nav-fix.zip

User Gravatar

ayublin

Posted Nov 7 2013 6:17 UTC

firstly thanx, i get a popup when entering the site that says "test" and now the navigation doesn't have any "active" state...

User Gravatar

avihay69

Posted Nov 7 2013 12:27 UTC

ouch, sorry, I forgot to remove that line, please re-download and re-install the plugin, it won't alert anything now, and please let me see how the site is while the plugin is active. thanks!

User Gravatar

ayublin

Posted Nov 7 2013 19:37 UTC

hey, the plugin is installed and online...missing the "active" state that needed to be synced with the page position.

User Gravatar

avihay69

Posted Nov 7 2013 21:35 UTC

Sorry, seems like the plugin printed out the code earlier than your theme's script and causing it not to work, I have just modified to plugin, please re-download and re-install it, thanks.

User Gravatar

ayublin

Posted Nov 9 2013 12:17 UTC

hi, it is updated and online but with no effect, thanx...

User Gravatar

avihay69

Posted Nov 9 2013 22:02 UTC

Oh wow, just updated the plugin again, sorry to keep you doing this, I wish there is an easier way for me to try debugging the problem :(

If you're using google chrome and press f12, and in the console tab, paste and enter those codes:

jQuery('[data-spy="scroll"]').each(function () {
  var $spy = jQuery(this).scrollspy('refresh')
});

You should see the nav issue should be fixed, so I think it's a matter of finding the right place to get the code executed. Thanks.

User Gravatar

ayublin

Posted Nov 9 2013 22:21 UTC

Firstly you are the one helping me and for that thanx!

YES it does work that way...(chrome>console) !!

User Gravatar

avihay69

Posted Nov 9 2013 22:27 UTC

You're welcome :)

Yes it works, but finding how to make it executed in the right time is harder. Btw, please update the plugin, I would like to see how it does this time :)

User Gravatar

ayublin

Posted Nov 9 2013 22:52 UTC

the plugin is updated to the latest one! appreciate the effort...

User Gravatar

avihay69

Posted Nov 9 2013 23:17 UTC

i was pointed by the theme author to the file called "scripts.js":

/-----------------------------------------------------------------------------------/ /* PORTFOLIO ARCHIVE ISOTOPE /-----------------------------------------------------------------------------------/ jQuery(document).ready(function ($) { var $container = $('#portfolio-archive .items'); $container.imagesLoaded(function () { $container.isotope({ itemSelector: '#portfolio-archive .item', layoutMode: 'fitRows' }); });

$('#portfolio-archive .filter li a').click(function () {

    $('#portfolio-archive .filter li a').removeClass('active');
    $(this).addClass('active');

    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: '.logo'
    });

    return false;
});

});

/-----------------------------------------------------------------------------------/ /* NAVIGATION REWRITE /-----------------------------------------------------------------------------------/ jQuery(document).ready(function ($) {

$('.page-template-page_home-php #main_menu li a').not('.page-template-page_home-php #main_menu li.external a').each(function(){
    var pathArray = window.location.href.split( '/' );
    var protocol = pathArray[0];
    var host = pathArray[2];
    var homeUrl = protocol + '//' + host + '/';
    var url = $(this).attr('href');
    if( $(this).parent().hasClass('home') || homeUrl == url ){
        $(this).attr('href', '#home');
    } else {
        var splitUrl = url.split('/');
        var lastEl = splitUrl[splitUrl.length-2];
        $(this).attr('href', '#'+lastEl );
    }
});

$(window).trigger('scroll');

}); /-----------------------------------------------------------------------------------/ /* ANCHOR SCROLL /-----------------------------------------------------------------------------------/ /** * jQuery.LocalScroll - Animated scrolling navigation, using anchors. * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com * Dual licensed under MIT and GPL. * Date: 3/11/2009 * @author Ariel Flesler * @version 1.2.7 / (function($){var l=location.href.replace(/#.*/,'');var g=$.localScroll=function(a){$('body').localScroll(a)};g.defaults={duration:1e3,axis:'y',event:'click',stop:true,target:window,reset:true};g.hash=function(a){if(location.hash){a=$.extend({},g.defaults,a);a.hash=false;if(a.reset){var e=a.duration;delete a.duration;$(a.target).scrollTo(0,a);a.duration=e}i(0,location,a)}};$.fn.localScroll=function(b){b=$.extend({},g.defaults,b);return b.lazy?this.bind(b.event,function(a){var e=$([a.target,a.target.parentNode]).filter(d)[0];if(e)i(a,e,b)}):this.find('a,area').filter(d).bind(b.event,function(a){i(a,this,b)}).end().end();function d(){return!!this.href&&!!this.hash&&this.href.replace(this.hash,'')==l&&(!b.filter||$(this).is(b.filter))}};function i(a,e,b){var d=e.hash.slice(1),f=document.getElementById(d)||document.getElementsByName(d)[0];if(!f)return;if(a)a.preventDefault();var h=$(b.target);if(b.lock&&h.is(':animated')||b.onBefore&&b.onBefore.call(b,a,f,h)===false)return;if(b.stop)h.stop(true);if(b.hash){var j=f.id==d?'id':'name',k=$(' ').attr(j,d).css({position:'absolute',top:$(window).scrollTop(),left:$(window).scrollLeft()});f[j]='';$('body').prepend(k);location=e.hash;k.remove();f[j]=d}h.scrollTo(f,b).trigger('notify.serialScroll',[f])}})(jQuery); / * Copyright (c) 2007-2012 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com * Dual licensed under MIT and GPL. * @author Ariel Flesler * @version 1.4.5 BETA */ ;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?d+(.d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targa=='x'?'width':'height'*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,e,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)c.toLowerCase();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery); jQuery(document).ready(function($){ $('.scroll,.nav-collapse .nav').localScroll({ offset: {top:-90, left:0} }); $('.nav-collapse .nav a').click(function () { $(".nav-collapse").collapse("hide") }); }); /-----------------------------------------------------------------------------------/ /* FORM /-----------------------------------------------------------------------------------/ jQuery(document).ready(function ($) { $('.forms').dcSlickForms(); }); jQuery(document).ready(function ($) { $('.comment-form input[title], .comment-form textarea').each(function () { if ($(this).val() === '') { $(this).val($(this).attr('title')); }

    $(this).focus(function () {
        if ($(this).val() == $(this).attr('title')) {
            $(this).val('').addClass('focused');
        }
    });
    $(this).blur(function () {
        if ($(this).val() === '') {
            $(this).val($(this).attr('title')).removeClass('focused');
        }
    });
});

}); /-----------------------------------------------------------------------------------/ /* GRID BLOG /-----------------------------------------------------------------------------------/ jQuery(document).ready(function ($) { var $container = $('.grid-blog'); $container.imagesLoaded(function () { $container.isotope({ itemSelector: '.post' }); }); $(window).on('resize', function(){ $('.grid-blog').isotope('reLayout') }); }); /-----------------------------------------------------------------------------------/ /* CALL PORTFOLIO SCRIPTS /-----------------------------------------------------------------------------------/ function callPortfolioScripts() {

jQuery('.player').fitVids();

jQuery('.portfolio-banner').revolution({
    delay: 9000,
    startheight: 600,
    startwidth: 1170,
    hideThumbs: 200,
    navigationType: "bullet",
    // bullet, thumb, none
    navigationArrows: "verticalcentered",
    // nexttobullets, solo (old name verticalcentered), none
    navigationStyle: "round",
    // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
    navigationHAlign: "center",
    // Vertical Align top,center,bottom
    navigationVAlign: "bottom",
    // Horizontal Align left,center,right
    navigationHOffset: 0,
    navigationVOffset: 20,
    soloArrowLeftHalign: "left",
    soloArrowLeftValign: "center",
    soloArrowLeftHOffset: 20,
    soloArrowLeftVOffset: 0,
    soloArrowRightHalign: "right",
    soloArrowRightValign: "center",
    soloArrowRightHOffset: 20,
    soloArrowRightVOffset: 0,
    touchenabled: "on",
    // Enable Swipe Function : on/off
    onHoverStop: "on",
    // Stop Banner Timet at Hover on Slide on/off
    stopAtSlide: -1,
    // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
    stopAfterLoops: -1,
    // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
    hideCaptionAtLimit: 0,
    // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
    hideAllCaptionAtLilmit: 0,
    // Hide all The Captions if Width of Browser is less then this value
    hideSliderAtLimit: 0,
    // Hide the whole slider, and stop also functions if Width of Browser is less than this value
    shadow: 0,
    //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows  (No Shadow in Fullwidth Version !)
    fullWidth: "off" // Turns On or Off the Fullwidth Image Centering in FullWidth Modus
}); 

}; /-----------------------------------------------------------------------------------/ /* PORTFOLIO SLIDER /-----------------------------------------------------------------------------------/ jQuery(document).ready(function($) { if ($.fn.cssOriginal != undefined) $.fn.css = $.fn.cssOriginal; $('.portfolio-banner').revolution({ delay: 9000, startheight: 600, startwidth: 1170, hideThumbs: 200, navigationType: "bullet", // bullet, thumb, none navigationArrows: "verticalcentered", // nexttobullets, solo (old name verticalcentered), none navigationStyle: "round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom navigationHAlign: "center", // Vertical Align top,center,bottom navigationVAlign: "bottom", // Horizontal Align left,center,right navigationHOffset: 0, navigationVOffset: 20, soloArrowLeftHalign: "left", soloArrowLeftValign: "center", soloArrowLeftHOffset: 20, soloArrowLeftVOffset: 0, soloArrowRightHalign: "right", soloArrowRightValign: "center", soloArrowRightHOffset: 20, soloArrowRightVOffset: 0, touchenabled: "on", // Enable Swipe Function : on/off onHoverStop: "on", // Stop Banner Timet at Hover on Slide on/off stopAtSlide: -1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case. stopAfterLoops: -1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic hideCaptionAtLimit: 0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser) hideAllCaptionAtLilmit: 0, // Hide all The Captions if Width of Browser is less then this value hideSliderAtLimit: 0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value shadow: 0, //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows (No Shadow in Fullwidth Version !) fullWidth: "on" // Turns On or Off the Fullwidth Image Centering in FullWidth Modus }); }); /-----------------------------------------------------------------------------------/ /* IMAGE HOVER /-----------------------------------------------------------------------------------/
jQuery(document).ready(function($) { $('.overlay a').prepend(''); }); /-----------------------------------------------------------------------------------/ /* MENU /-----------------------------------------------------------------------------------/ jQuery(document).ready(function($) { jQuery('.js-activated').dropdownHover().dropdown(); jQuery('.player').fitVids(); jQuery('p:empty').remove(); }); /-----------------------------------------------------------------------------------/ /* PAGINATION /-----------------------------------------------------------------------------------/ jQuery(document).ready(function($) {

function getPathFromUrl(url) {
  return url.split("?")[0];
}

  $('body').on('click', '.pagination a', function(){

    $('html,body').animate({scrollTop: $('.grid-blog').offset().top - 240},400);

    $('.grid-blog').prepend('<div class="grid-loader"></div>');

    //CAPTURE HREF
    url = $(this).attr('href');

    //REMOVE OLD POSTS
    var $removeItem = $( '.grid-blog .post' );
    $($removeItem).fadeOut(200);

    $('.pagination').fadeOut(200).delay(200).remove();

    //GET NEW POSTS
    $.get(url, function(data){
        var filtered = jQuery(data).find('.grid-blog .post');
        $('.overlay a', filtered).prepend('<span class="more"></span>');
        $(filtered).imagesLoaded(function(){
            $('.grid-blog').isotope('insert', filtered, function(){
                $('.grid-blog').isotope('reLayout');
                $('.grid-blog').isotope( 'remove',  $removeItem );
                $('.grid-blog .grid-loader').fadeOut(200, function(){
                    $(this).remove();
                });
            });
        });
    });

    //GET NEW PAGINATION
    $.get(url, function(data){
        var pagination = jQuery(data).find('.pagination');
        $('a', pagination).each(function(){
            var stripUrl = $(this).attr('href');
            var stripped = getPathFromUrl(stripUrl);
            $(this).attr('href', stripped);
        });
        if( $('body').hasClass('home') ){
            $(pagination).appendTo('.row:has(.grid-blog) .span12');
        } else {
            $(pagination).insertAfter('.grid-blog');
        }
    });

    //PREVENT WINDOW CHANGE
    return false;
  });

}); /-----------------------------------------------------------------------------------/ /* PRETTIFY /-----------------------------------------------------------------------------------/ jQuery(document).ready(function () { window.prettyPrint && prettyPrint() }); /-----------------------------------------------------------------------------------/ /* PARALLAX MOBILE /-----------------------------------------------------------------------------------/ jQuery(document).ready(function($) { if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)|| navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i)){ $('.parallax').addClass('mobile'); } }); /-----------------------------------------------------------------------------------/ /* DATA REL /-----------------------------------------------------------------------------------/ jQuery('a[data-rel]').each(function() { jQuery(this).attr('rel', jQuery(this).data('rel')); });

User Gravatar

avihay69

Posted Nov 10 2013 2:42 UTC

Hi Avihay,

The script I gave via the plugin should have been executed but somehow it doesn't fix it, I think I would need an access to do debugging to the site, since it's kinda hard for me to figure out the problem without access, sorry :(

User Gravatar

ayublin

Posted Nov 15 2013 7:59 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions