-1

I have a problem with my joomla site. I have edited some custom jScript which reduces the navigation section in size when I scroll down the screen. I have edited so that the navigation does not reduce in size but remains static but still sticks to the top of the page. However, now all my front end images don't show. I have tried uploading the old Jscript before I edited it but the frontend images still will not show.

Original code - pre-formated:

// Sticky Navigation
   jQuery(document).ready(function () {
    if (jQuery().sticky) {
        jQuery(".navigation").sticky({
    topSpacing: 0,
        });;
    }
});

function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
}

// Nicescroll
/*jQuery(document).ready(function() {
    jQuery("html").niceScroll();
});*/

// Waypoints
jQuery(document).ready(function () {
    //if present, set slideshow height first
    if (jQuery('.home .t3-sl-1').length > 0) {
        jQuery('.home .t3-sl-1').css('height',34/100*(jQuery('.home .t3-sl-1').width())+2);
        jQuery( window ).resize(function() {
            jQuery('.home .t3-sl-1').css('height',34/100*(jQuery('.home .t3-sl-1').width())+2);
        });
    }

//set waypoints
if (addon_animations_enable)
    {
    if (jQuery().waypoint) {
        jQuery('.appear').waypoint(function () {

            var t = jQuery(this);

            if (jQuery(window).width() < 767) {
                t.delay(jQuery(this).data(1));
                t.toggleClass(jQuery(this).data("animated") + " animated").removeClass('appear');
            } else {
                t.delay(jQuery(this).data("start")).queue(function () {
                    t.toggleClass(jQuery(this).data("animated") + " animated").removeClass('appear');
                });
            }
        }, {
            offset: '85%',
            triggerOnce: true,
        });
    }
}
});


//------------------------------
// Parallax scrolling effect
//------------------------------
jQuery(document).ready(function(jQuery){
    var jQueryscrollTop;
/*var jQueryheaderheight;
var jQuerycameracaptiontop;

jQueryheaderheight = jQuery('.home .t3-sl-1').height();
jQuerycameracaptiontop = parseInt(jQuery('.camera_caption').css('top'));*/

jQuery(window).scroll(function(){
    var jQueryiw = jQuery('body').innerWidth();
    jQueryscrollTop = jQuery(window).scrollTop();
    minheight = 110-(jQueryscrollTop/4);

    if (minheight > 52) {
        jQuery('.navigation').css({'min-height' : minheight +'px'});
        jQuery('.t3-mainnav').css({'top' : 30-(jQueryscrollTop/8) +'px'});
        jQuery('.logo-img').css({'width': 169 - (jQueryscrollTop/3.5) +'px'});
    }
    else {
        jQuery('.navigation').css({'min-height' : '52px'});
        jQuery('.t3-mainnav').css({'top' : 0});
        jQuery('.logo-img').css({'width': '100px'});
    }

        /*if (jQuerycameracaptiontop) {
            jQuery('.camera_wrap').css({'height': ((- jQueryscrollTop / 2)+ jQueryheaderheight) + 'px' });
            jQuery('.home .t3-sl-1').css({'height': (parseInt(jQuery('.camera_wrap').css('height'))+2)  + 'px' })
            jQuery('.camera_caption').css({'top': jQueryscrollTop/3 + jQuerycameracaptiontop + 'px' });
        }*/
    });
});

Formatted code with Parallax scrolling effect removed: (causes front end images to disappear)

// Sticky Navigation
   jQuery(document).ready(function () {
    if (jQuery().sticky) {
        jQuery(".navigation").sticky({
    topSpacing: 0,
        });;
    }
});

function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
}

// Nicescroll
/*jQuery(document).ready(function() {
    jQuery("html").niceScroll();
});*/

// Waypoints
jQuery(document).ready(function () {
    //if present, set slideshow height first
    if (jQuery('.home .t3-sl-1').length > 0) {
        jQuery('.home .t3-sl-1').css('height',34/100*(jQuery('.home .t3-sl-1').width())+2);
        jQuery( window ).resize(function() {
            jQuery('.home .t3-sl-1').css('height',34/100*(jQuery('.home .t3-sl-1').width())+2);
        });
    }

    //set waypoints
    if (addon_animations_enable)
        {
        if (jQuery().waypoint) {
            jQuery('.appear').waypoint(function () {

                var t = jQuery(this);

                if (jQuery(window).width() < 767) {
                    t.delay(jQuery(this).data(1));
                    t.toggleClass(jQuery(this).data("animated") + " animated").removeClass('appear');
                } else {
                    t.delay(jQuery(this).data("start")).queue(function () {
                        t.toggleClass(jQuery(this).data("animated") + " animated").removeClass('appear');
                    });
                }
            }, {
                offset: '85%',
                triggerOnce: true,
            });
        }
    }
});

If anyone has a suggestion as to why the images do not show that would be great.

  • Welcome to JSE. Unfortunately providing 140+ lines of code and asking us to debug and figure out why something within it is causing something on your site (which we cannot see) is not the type of question that should be asked here. You say you tried uploading the old JS file but did you clear the browser and Joomla cache before viewing the changes? Are you sure it's something within this JS file that is causing the problem? Have you tried using your browser web toold to figure out what is being applied to the images? Can you provide a link to your site? – Lodder Oct 23 '14 at 19:25
  • Hello, yes I cleared the browser cache. I know it is the code because it was working finr before I edited it. Here is my site - countryspanishrentals.com – simon Oct 23 '14 at 20:11
2

Having looked at your source code, it appears addon_animations_enable is not defined. This can be found on line 30 of your custom.js file.

Due to this, the class appear is not being removed from the elements that contain the image. In your template.css file on line 2590, you will see the following:

.appear {
    opacity: 0;
}

which is making all elements with this class invisible.

You can either try to figure out why addon_animations_enable is not defined, or remove the above CSS code.

Hope this helps

1

You're using jomres and are likely importing the jr_leotian theme into a page that is not included by jomres.php.

The value is set in several places in jomres and jr_leotian, but I can't see exactly 'why' without further digging. The variable appears to have impact to radio buttons on a custom page I built that pulls in all the scripts for jomres functionality but is not included directly by jomres.

Here is what my grep from the site root directory looks like:

grep -R 'addon_animations_enable' .
./administrator/templates/isis/jomres.php: var addon_animations_enable = false;
./templates/jr_leotian/templateDetails.xml: <field name="addon_animations_enable" type="radio" default="1"
./templates/jr_leotian/tpls/blocks/head.php: if ($this->getParam('addon_animations_enable',1)) :
./templates/jr_leotian/tpls/blocks/head.php: var addon_animations_enable = true;
./templates/jr_leotian/tpls/blocks/head.php: var addon_animations_enable = false;
./templates/jr_leotian/js/custom.js: if (addon_animations_enable)
./templates/jr_leotian/jomres.php: var addon_animations_enable = false;
./templates/jr_leotian/html/com_jomres/custom_code/j99994jr_leotian_javascript.class.php: if (addon_animations_enable) {
./templates/hot_rain/jomres.php: var addon_animations_enable = false;
./jomres/libraries/fullscreen_view/jomres.php: var addon_animations_enable = false;

For my custom coded pages, I simply place the following in the top of the head:

<script>var addon_animations_enable = false;</script>

I have tried true and false with no noticeable or functional difference to user experience in fullscreen or mobile views.

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.