0

I'd like to have the logo shrink when the page scrolls down and expand to original when the page scrolls to the top. Except for the preloader with rotating icon, my code prevents the page from loading at all.

The Joomla version is 3.8.2. The template is based on Helix 3 and I'm using the Helix 3 Custom Code form for Javascript to insert the JS.

I tried adapting a script on this page: Jquery image height change on scroll

Here's my version:

var imageHeight = 113,
stopHeight= 90,
PaddingHeight = 148,
stopPadding= 3;

$(window).scroll(function(e) {
    var windowScroll = $(window).scrollTop(),
    newPadding = PaddingHeight - windowScroll,
    newHeight = imageHeight - windowScroll;
    if(newHeight>=stopHeight){
        $('.sp-default-logo').css("height", newHeight);
        $('.logo').css("padding-top", newPadding);
    }
    else{
        $('.sp-default-logo').css("height", stopHeight);//if it scroll more set to stopHeight
        set $('.logo').css("padding-top", stopPadding);
    }
};

This is the HTML:

<div class="logo">
    <a href="/"><img class="sp-default-logo" src="/images/logos/logo.jpg"></a>
</div>

Edit: Here's some additional info based on my answer to the comment from @jamesgarett.

"Joomla uses jquery in safe mode so you should switch all those "$" to "jQuery"". I tried both $ and jquery. Both create the same error.

The error in the console is:

JQMIGRATE: Migrate is installed, version 1.4.1 - jquery-migrate.min.js?ada38a6f4381020b76588ff4bab21f69:2

Uncaught SyntaxError: Unexpected identifier - (index):222

Edit: I moved the question to the Jquery forum: https://stackoverflow.com/questions/47778085/animated-change-logo-size-on-scroll-script-creates-a-library-conflict-or-some-ot

  • Do you mean that you have a white screen with no html loaded? Which would mean that you have a 500 error and you should turn errors on to see what the problem is. Or did you forget to add script tags around your code in the template settings? Or are you getting a javascript console error that explains the problem? Also, Joomla uses jquery in safe mode so you should switch all those "$" to "jQuery". – jamesgarrett Dec 2 '17 at 0:57
  • @jamesgarret - The code is in a form field designated for JS. Adding script tag creates this error: Uncaught SyntaxError: Unexpected token < It's not quite a white screen. The preloader with rotating icon loads. I tried both $ and jquery. Both create the same error. The error in the console is: JQMIGRATE: Migrate is installed, version 1.4.1 - jquery-migrate.min.js?ada38a6f4381020b76588ff4bab21f69:2 Uncaught SyntaxError: Unexpected identifier - (index):222 – steveorg Dec 11 '17 at 15:54
  • @isherwood - The environment is Joomla and the javascript is being inserted by a Joomla form. Doesn't that make this forum the most appropriate? Thanks. – steveorg Dec 11 '17 at 15:59
  • @isherwood - I made the suggested changes. I'm not really sure why the title is inaccurate. I added "creates jquery error" to the end. Does that deal with your issue? – steveorg Dec 11 '17 at 16:45
  • The crux of the problem is that you have a library conflict or some other loading issue. It has nothing to do with your script, which could be anything. Therefore, the title is misleading. I don't mean to bust your chops. Just trying to get you the best help. – isherwood Dec 11 '17 at 16:47

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.