Joomla Templates Club 406,261 posts

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#508020

Hi magneticeye,

You can try to fix this problem by other solution

Open templates/ja_onepage/js/script.js file

From


$(document).ready(function(){
var headHeight = $('#ja-header').outerHeight();
if(headHeight){
$(document.body).attr('data-offset', headHeight).data('offset', headHeight);
}
});

$(window).resize(function(){
$(document.body).scrollspy('refresh');
});


Change to


$(document).ready(function(){
var headHeight = $('#ja-header').outerHeight();
if(headHeight){
$(document.body).attr('data-offset', headHeight).data('offset', headHeight);
var scrollspy = $(document.body).data('scrollspy');
if(scrollspy){
scrollspy.options.offset = headHeight;
scrollspy.refresh();
}
}
});

$(window).load(function(){
$(window).resize(function(){
$(document.body).scrollspy('refresh');
});
});


Hope it helps

Regards

[Mark Kennedy Friend Mark KennedyJoin date: September 2014Posts: 79Downloads:0Uploads:9 Thanks: 27 Thanked: 11 times in 1 posts]

#508437

Hi Ninja Lead,

I tried the code that you gave me and it doesn’t seem to work.

As soon as you go below 768px width it stops working just as before.

I don’t understand what is changing other than the menu. I would have thought that the javascript would have worked the same at desktop size and mobile size.

Is there some sort of conflict with bootstraps javascript?

Also I don’t seem to be getting emails to my subscribed threads. Is there somewhere I can post a support ticket for that?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#508482

I saw http://conen.magneticeye.com.au/templates/ja_onepage/js/script.js doesn’t have my above solution. But I have checked link on your site: http://conen.magneticeye.com.au, it runs well.

I’m confusing about the problem as your request. How can i see this problem on your site?

[Mark Kennedy Friend Mark KennedyJoin date: September 2014Posts: 79Downloads:0Uploads:9 Thanks: 27 Thanked: 11 times in 1 posts]

#513637

This still doesn’t work for me.

Here is another site. I have put your fix in http://www.stompinggroundstudios.com.au/templates/ja_onepage/js/script.js

http://www.stompinggroundstudios.com.au/

When I select a menu item it scrolls the section to the top of the window, not the bottom of the header. There is no header offset, so what happens is the title in about us or contact gets half obscured. I have tried it both on firefox at 320×480 and on my iphone and the same thing happens.

Please help ninja lead!

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#513643

I would need to take a closer look at your site. Please pm me admin login details and FTP account. I shall check it for you.

[Mark Kennedy Friend Mark KennedyJoin date: September 2014Posts: 79Downloads:0Uploads:9 Thanks: 27 Thanked: 11 times in 1 posts]

#514313

Any Luck with looking at scrollSpy?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#514518

<em>@magneticeye 400535 wrote:</em><blockquote>Any Luck with looking at scrollSpy?</blockquote>

:(( many customization on header of your site on this case and it conflicted css and js on JA Onepage Template. I have helped you to change it directly on your site in custom.css file. This is my solution to do that

Open templates/ja_onepage/css/custom.css file

#addressInfo {
position: absolute;
left: 5em;
bottom: -8px; -> change to 3px
z-index: 999;
width: 1000px;
}

Don’t use ja-header class and change it as my red mark

/*.ja-header {
padding-bottom: 10px !important;
min-height: 69px;
} */

Add new .onepage .container class run with mobile layout

@media (max-width: 767px) {
.onepage .container{
padding: 75px 0 !important;
}
}

Please check it again, let me know if it helps

[Mark Kennedy Friend Mark KennedyJoin date: September 2014Posts: 79Downloads:0Uploads:9 Thanks: 27 Thanked: 11 times in 1 posts]

#514748

<blockquote>many customization on header of your site</blockquote>

Well that is really the point of a template is it not? That you customise it?

Yes your css fixes the problem, but it it is a band aid solution. Everytime I create a new site I have to fix this problem.

This is a core problem of the JA-Onepage template. I have shown images in this post before showing it.

What is my goal then. My goal is to have it so that the header can be from 0px to 3000 pixels high, or more, and the menu links will take you to the correct section with the 0 – 3000px offset.

I know it is a bootstrap related problem and it doesn’t work at all on the stock ja-onepage template.

It would be great if this got fixed because the header never stays the same height as the template when I do a new site.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#514899

<em>@magneticeye 401115 wrote:</em><blockquote>Well that is really the point of a template is it not? That you customise it?</blockquote>

Nope, sir. You have changed it before that. You know, they can execute click and focus exactly section on JA Onepage template, they must use css style of header and javascript to do that.

If you change css style from header, you must change synchronous within javascript.

JA Onepage is responsive template if you are trying to change height of header, it will affect both desktop, tablet mobile layout.

[Mark Kennedy Friend Mark KennedyJoin date: September 2014Posts: 79Downloads:0Uploads:9 Thanks: 27 Thanked: 11 times in 1 posts]

#515057

Lets focus on the problem I am trying to point out.

On the demo of JA-Onepage on the joomlart site I change:

<header id="ja-header" class="wrap ja-header navbar-fixed-top navbar-collapse-fixed-top">

to this

<header id="ja-header" class="wrap ja-header navbar-fixed-bottom navbar-collapse-fixed-top">

This moves the header to the bottom of the window so that we can see where the page scrolls to easily.
In Desktop view if you click on a menu item, say portfolio, the page scrolls to the portfolio section with an offset of 60 pixels. As shown in this image from the joomlart demo website

But if we change to mobile size and click a menu item the section scrolls to the top of the window and there is no 60 pixel offset.
As you can see in the image below there is no white space.

Shouldn’t it scroll so that there is a 60 pixel offset just like in desktop size?

---

Attachments:

1. 
2. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#515309

I have raised this problem to Development Team here. They will check it and will be back to when having solution.

[Author]

Posts