1

I created a module position at my template where I load a custom module which is a menu bar.

with the next script I change its position to fixed if someone scrolls more than 200px so that the bar will always be on top.

jQuery(window).scroll(function(e){ 
  var jQueryel = jQuery('.fixedElement'); 
  var isPositionFixed = (jQueryel.css('position') == 'fixed');
  if (jQuery(this).scrollTop() > 200 && !isPositionFixed){ 
    jQuery('.fixedElement').css({'position': 'fixed', 'top': '0px'}); 
    jQuery('.fixedElement').addClass("bgNormal");

  }
  if (jQuery(this).scrollTop() < 200 && isPositionFixed)
  {
    jQuery('.fixedElement').css({'position': 'absolute', 'top': '0px'}); 
    jQuery('.fixedElement').removeClass("bgNormal");
  } 
});

I added this script inside the head of template. It runs smoothly in every page except of the views of a custom component I made.

Console doesn't output any error and inspecting the source code I can find that the script is loaded correctly. For some reason it just wont run.

jQuery is correctly loaded and I cant think of anything that would affect the view to run the js.

I uploaded another component and I found that it wouldn't run the script either.

Is this a common issue ? Do I have to do something in order to load scripts from template to view ? Or it's a development problem ?

  • Is this a common issue? Do I have to do something in order to load scripts from template to view? - Not a common issue - and it doesn't require anything special, by the moment has been attached successfully to the document. So my guess is that it is something with the js itself in relation with the html. – FFrewin Dec 26 '15 at 7:17
0

For some custom components I found I had to add a "wrapper" feature to the js in the views to get them to work correctly.

Since you are only having trouble with the script in the custom components section it may be a conflict in the way the component is loading scripts, as opposed to the way Joomla core handles scripts.

<script type="text/javascript">
    (function ($) {
        $(document).ready(function () {
            $(window).scroll(function(e){ 
                var jQueryel = jQuery('.fixedElement'); 
                var isPositionFixed = (jQueryel.css('position') == 'fixed');
                if ($(this).scrollTop() > 200 && !isPositionFixed){ 
                    $('.fixedElement').css({'position': 'fixed', 'top': '0px'}); 
                    $('.fixedElement').addClass("bgNormal");

                }
                if ($(this).scrollTop() < 200 && isPositionFixed)
                {
                    $('.fixedElement').css({'position': 'absolute', 'top': '0px'}); 
                    $('.fixedElement').removeClass("bgNormal");
                } 
            });
        });

    })(jQuery);
</script>
  • this is throwing an error "expecting expression" – IseNgaRt Dec 28 '15 at 7:50
0

Ok after alot of searching i find out that this was a mainly css issue.

$(window).scroll() wouldn't trigger because the #content div was getting a random rule that wouldn't let it overflow.

So $(window) wouldn't scroll no matter what.

Fixing that, made it work like a charm!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.