Ask your WordPress questions! Pay money and get answers fast! (more info)

Timeline JS CSS/JS issue, cannot scroll WordPress

  • SOLVED

Hi all,

I have an issue with timeline js (http://timeline.knightlab.com) on wordpress, it was working fine until my webmaster added a fix/responsive header image function.

I can't scroll through the page:

http://www.nidobcn.com/maria-montessoris-timeline/

The main page works fine:

www.nidobcn.com

the blog page does not seem to work either:

http://www.nidobcn.com/category/blog/

My webmaster believes it's a css or javascript issue, anyone knows a fix?


All help appreciated!

Thanks

Answers (2)

2015-05-26

Jayaram Y answers:

Hi,

I see that its because of the height of the content...

For timeline page i dont see any issue.. i am able to scroll.. For blog page the issue is there is only one post.. If you add another post the issue will be solved as the page height increases... To avoid this please give the below code in your custom/style css file



.container #content{
min-heigh:600px;
}



Orelse you need to reduce the height of the header.


Jayaram Y comments:

Hi artaudlemomo,

I have given the same code as well.. Hope that worked.. But the issue with blog post tiltle hiding is, the header is getting fixed at the top, so them main content section is moving to top..

What can be done is.. on mouse scroll, we need to add class to Main content section and give margin-top to it..


artaudlemomo comments:

Thanks Jayaram I saw you helped too,

How to do I do the mouse scroll bit?


Cheers,


Jayaram Y comments:

Hi artaudlemomo,

Please place the code in footer.php file.. just before

<?php wp_footer(); ?>
</body>

This adds a class to the main section.. Let me know once the class is added so that i can give the css to finish this.



<script>
jQuery(function(){
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop()>=100){
jQuery("#main").addClass("main_info");
}
else {
jQuery("#main").removeClass("main_info");
}
});
});
</script>


artaudlemomo comments:

Great I have done it, hopefully properly!

Thanks for you help!


Jayaram Y comments:

to get the blog title below header, you need to add the below script in footer.php and css in custom/style css.


<script>
jQuery(document).ready(function($) {
var scrolltop = 100;
$(window).scroll(function () {
if ($(window).scrollTop() > scrolltop ) {
$('#main').addClass('main_info');
}
else{
$('#main').removeClass('main_info');
}
});
});
</script>


.main_info{ margin-top:180px}
header.shrink{top:0;}


and for header.shrink you need to remove height and max-height.. No need of that.

Hope this helps..


artaudlemomo comments:

Thanks for you help, it worked.

But there is two new issues now, first there is two gray squares on each side of the main menu items, see picture.

The second problem is that my footer is gone completely... I used to have a sentence and some social links button like in the top right corner.

Cheers!