Jquery sticky navigation stopping front end images from displaying in Joomla
Hello,
I have tried several forums regarding this issue, including joomla's but no one seems to have an answer. Here is my problem. I have a Joomla site with some custom Jquery which sticks the navigation to the top of the screen and keeps it there when I scroll down the screen. This script originally reduced the logo and navigation as I scrolled down the site, however I changed the script to remain a static size as I scrolled, now it is conflicting with all my images on the front end of my site and stopping them from displaying.
I have re-loaded the original un-edited Jquery script to my sever but the images are still missing. If I scroll over them they are there as my cursor will change but they will not display.
Here is my website url: countryspanishrentals.com
Here is the original code:
I have tried several forums regarding this issue, including joomla's but no one seems to have an answer. Here is my problem. I have a Joomla site with some custom Jquery which sticks the navigation to the top of the screen and keeps it there when I scroll down the screen. This script originally reduced the logo and navigation as I scrolled down the site, however I changed the script to remain a static size as I scrolled, now it is conflicting with all my images on the front end of my site and stopping them from displaying.
I have re-loaded the original un-edited Jquery script to my sever but the images are still missing. If I scroll over them they are there as my cursor will change but they will not display.
Here is my website url: countryspanishrentals.com
Here is the original code:
- // 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' });
}*/
});
});
Here is the edited code with the Parallax scrolling effect removed which stops the images from displaying:
- // 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 I comment out the section of code below then it enables my top slider image to display. However, I cannot get the images on the rest of my page to do the same:
- // 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);
});
}
Topic Participants
simonnorman
jakecigar