Version 3.14: Wrong scrolling up to top of page

Hi there,
in the recently updated version 3.14 of John template when you click on one of the pictures in "Check out my hot works" you see two yellow arrows above the picture. When you click them, the page scrolls up to the top header.
In version 3.13 it remains at the same screen position. It works when I reinstall version 3.13.
Could you fix it please?

Thank you,
Roland

Right now you have 3.13 or 3.14 on your site?

Right now I work with 3.13 on my test website http://j3.mediaventa.de.
Please let me know if you would like to see 3.14

Roland

Hi Roland,

seams to be a bug in 3.14. It is located in the /templates/gk_john_s/js/gk.scripts.js

@Cyberek: Could you please check this with the development? Thanks.

Original code of line 19 to 33 is:

Code: Select all

        if(this.hash !== '' && this.href.replace(this.hash, '') == window.location.href.replace(window.location.hash, '')) {
            var target = jQuery(this.hash);

            if(target.length) {
                jQuery('html, body').stop().animate({
                    'scrollTop': target.offset().top
                }, 1000, 'swing', function () {
                    window.location.hash = target.selector;
                });
            } else {
                window.location = jQuery(this).attr('href');
            }
        } else {
            window.location = jQuery(this).attr('href');
        }

line 19 should look like this:

Code: Select all

        if(this.hash != '' && this.href.replace(this.hash, '') == window.location.href.replace(window.location.hash, '')) {


and I think if we don't have a named anchor we want to stay where we are, so line 32 makes no sense for me at the moment.
You can change it to:

Code: Select all

            //window.location = jQuery(this).attr('href');


Best,
Dirk

@Roland if you could post 3.14 version somewhere else (as a backup for example)... I think the problem is not within template itself but with NSP also. I have checked quickstart with 3.14 version of template and NSP module (1.4.2) and it works fine.
Also maybe not all files was updated correctly.

@Cyberek: I checked it again and in Joomla 2.5 it is working correctly. In Joomla 3.3 the behavior is as I described above. Implementation of "smooth anchor scolling" is different.

QuickStart with J3.x downloaded from our site works fine. Yellow arrows work as a slide changer and they doesn't scroll back to top, so it might be standalone template issue or something wrong with user installation itself.

@mediaventa - please post a copy of your site with not working template and I'll try to verify what's the problem.


@Banana7777, there is no much difference between:

Code: Select all

var a = 'a';
var b = 'b';
if ( a != b ) {}


and

Code: Select all

var a = 'a';
var b = 'b';
if ( a !== b ) {}


and in most cases they give exact same result. The second one is more accurate.
You can fond out more about comparison operators here:
http://stackoverflow.com/questions/3594 ... omparisons

If a developer is using jsHint or jsLint - its one of the basic suggestion to use more accurate operators.

Good morning Cyberek,

I activated version 3.14 on http://j3.mediaventa.de by changing directory names of both template versions.
You should be able to reproduce the behaviour of scrolling up to top of the page now. On my website the sector has the headline "Meine Projekte".

I did the same minor changes in both templates versions e.g. font-size and color for font .gk-header1 in template.css and gk_stuff.css but I did not change other files and I think that I uploaded all files of the template via ftp. I get the same behaviour on my local webserver.

Please let me know if there is anything else that you need for testing.
Roland

Please PM me with your email address, I'll send you different package for testing.

Or even better, please edit this file:
templates/gk_john_s/js/gk.scripts.js
and change this section:

Code: Select all

   jQuery('a[href*="#"]').on('click', function (e) {
        e.preventDefault();

        if(this.hash !== '' && this.href.replace(this.hash, '') == window.location.href.replace(window.location.hash, '')) {
            var target = jQuery(this.hash);

            if(target.length) {
                jQuery('html, body').stop().animate({
                    'scrollTop': target.offset().top
                }, 1000, 'swing', function () {
                    window.location.hash = target.selector;
                });
            } else {
                window.location = jQuery(this).attr('href');
            }
        } else {
            window.location = jQuery(this).attr('href');
        }
    });


with:

Code: Select all

   jQuery('a[href^="#"]').on('click',function (e) {
      e.preventDefault();

      var target = this.hash,
      target = jQuery(target);
      if(this.hash !== '') {
         jQuery('html, body').stop().animate({
            'scrollTop': target.offset().top
         }, 1000, 'swing', function () {
            window.location.hash = target.selector;
         });
      }
   });


and let me know if it fixes the problem for the time being.

Thank you,
I changed the code and it works. Version 4.14 is active on my website.
Roland

Ok. I have reported that issue to our devteam with proposed changes / found problems. Hopefully it will be soon released as an update.

Code: Select all

    // smooth anchor scrolling
    jQuery('a[href*="#"]').on('click', function (e) {
        e.preventDefault();
        if(this.hash !== '') {
            if(this.hash !== '' && this.href.replace(this.hash, '') == window.location.href.replace(window.location.hash, '')) {
                var target = jQuery(this.hash);
                if(target.length && this.hash !== '#') {
                    jQuery('html, body').stop().animate({
                        'scrollTop': target.offset().top
                    }, 1000, 'swing', function () {
                        if(this.hash !== '#') {
                            window.location.hash = target.selector;
                        }
                    });
                } else {
                    if(this.hash !== '#') {
                        window.location = jQuery(this).attr('href');
                    }
                }
            } else {
                if(this.hash !== '#') {
                    window.location = jQuery(this).attr('href');
                }
            }
        }
    });


Above code was proposed by our devteam and will be included in next template release.

Thank you,
I replaced the code in gk.scripts.js and it works fine.
Roland

Thanks for the info.
Please let me know if you would have any additional questions regarding this topic.