Scroll down and loyal team images issues

Hello,
I have installed the 3.x quickstart package of John but I noticed these two little issues..

In the Header, the Scroll down is below the text "I'm a multidisciplined ... "
and in the Loyal team, the title is below the pictures and the pictures are not positioned like the demo, but they seems to be a bit lower, above the map module. (images attached).

How to solve this?

Thanks

Hello,

Are you sure that you didn't resaved these modules content with the WYSIWYG content editor?

Scroll Down shifted exactly because of WYSIWYG. just checked.In the case of the first picture: in the demo module appears similar.

Please open file templates/gk_john_s/js/gk.script.js and find this line :

Code: Select all

map.parent('.box').css('overflow', 'hidden');

then replace it with :

Code: Select all

map.closest('.box').css('overflow', 'hidden');

this should resolved problem.

Hello,

Are you sure that you didn't resaved these modules content with the WYSIWYG content editor?

yes, I wanted to modify the text and picture and I used the WYSIWYG editor. I didn't know it was not correct.
I have then pasted the code from the http://demo.gavick.com/joomla25/john/in ... umentation page but it is still shifted and not in the center. How to solve it?

Thanks

@redpas - you have to disable the WYSIWYG editor in the user settings and then paste the code into the module and save it.

Please open file templates/gk_john_s/js/gk.script.js and find this line :

Code: Select all

map.parent('.box').css('overflow', 'hidden');

then replace it with :

Code: Select all

map.closest('.box').css('overflow', 'hidden');

this should resolved problem.

Thanks! That solved the issue! How to avoid the overlapping of the photo on the "LOYAL TEAM" title?

@redpas - you have to disable the WYSIWYG editor in the user settings and then paste the code into the module and save it.

Ok, great, I will try now!

Please open file templates/gk_john_s/js/gk.script.js and find this line :

Code: Select all

map.parent('.box').css('overflow', 'hidden');

then replace it with :

Code: Select all

map.closest('.box').css('overflow', 'hidden');

this should resolved problem.

After this change the map image is not loaded, gkheader 1 does not work, the menu has disappeared? I returned to the old settings (map.parent) again but no change. Before this all worked as it should, except MY LOYAL TEAM.

Could you provide me access to your website so I'll be able to check this issue? Please use PM and remember to include link to this forum topic.

Could you provide me access to your website so I'll be able to check this issue? Please use PM and remember to include link to this forum topic.

I 've solved this by replacing new file with old one from quickstart. But problem is still there with google map and ML TEAM. I send you website data on PM. Tnx

hello, I have the same problem with the first issue (scroll down) - http://www.speak-performance.de I did what you wrote - chanced the code (it was right) and I stopped the WSYWIG editor - but it doesn't help... can you give me another advice?

thanks a lot, Sandra

I've visited your site and don't see any problems with scrolling to proper template part, which menu items is not working properly?

at the homeside the scroll down-dart is in the left lines betwenn and the second thing is at the team at the first side... look here picture 2.. thanks for your help...

I see that the HTML structure in default template and your installation in header area is different. Please look at this screenshot from your website and original structure » screenshot

As you can see there is additional P (paragraph) element around the scroll down button. Please open module configuration and remove this elements, it was probably added by your WYSIWYG editor.

Hi,
even if this topic is not so recent, I'm writing here because don't find that the trouble with the Loyal team title has been fixed.
I still have the same problem even if I use only 2 lines and see also in your demo version that still remain. Can you please tell me if there is the possibility to have it like My Works (where remains only last line when over images)?
Thank you.
ps: if you need to see my website is www.lodicitta.it/nitrofilm

You want to totally remove this scroll down effect from this module? I'm asking because right now on your website it is working exactly like on our demo website.

no, I don't want to remove the croll down effect. What I would like to do, if possible, is to adjust the title of LOYAL TEAM (LO STAFF in my case) because the image goes over it. The best is to have it like MY WORKS which remains only last word (3rd line), but let me know what is possible to do.

has someone found out a solution?

I just can't duplicate this issue on our demo server? Do you have the same problem? It looks like somewhere in this custom HTML modules you use WYSIWYG editor and some margin or padding is added but I'm unable to find out which module cause this problem…

I use WYSIWYG editor and within the module the code regards only the pictures:
<div class="gkTeam" data-cols="4" data-pages="1"><div class="active">
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/staff/carola_taroni.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.1s"><h3>Carola Taroni</h3><small>Webmaster, Project Manager</small></figcaption></figure>
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.2s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_2.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.3s"><h3>Massimiliano Cavanna</h3><small>Video Maker, Editing</small></figcaption></figure>
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_1.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.1s"><h3>Claudio Gusmaroli</h3><small>Photographer</small></figcaption></figure>
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.2s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_2.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.3s"><h3>Mauro Salvaderi</h3><small>Video Maker</small></figcaption></figure>
</div>
</div>

I have noticed that it has some settings on H3 style which maybe are causing this overlap. You can have a look at this screenshot to better understand what I mean:

crew.jpg

Could you restore original code for this area for test? Please just duplicate module and use original module content available here » http://www.gavick.com/documentation/wp-content/templates-config/John/modules/bottom4/Custom-HTML-718-html-content.txt?TB_iframe=true

done. you can see it now.

Did you make any custom changes in template? I'm asking because I see that padding in main header is different than the original one. Did you add some margin/padding?

no. I just copied your original content as you suggest me.

Probably the only way is to modify scroll area in script. Please open [url]root/Templates/gk_creativity/js/gk.scripts.js[/url] file and find this line :

Code: Select all

menu_activators.ranges[i] = document.id(id).getPosition().y;

then replace it with :

Code: Select all

menu_activators.ranges[i] = document.id(id).getPosition().y-40;

I'm sorry but I don't find that code line you wrote. The only similar one is this:

menu_activators.ranges[i] = jQuery('#'+id).offset().top;

Sorry, I've just paste code for Joomla! 2.5 and you use 3.x. This is correct line so please try to modify this line to :

Code: Select all

menu_activators.ranges[i] = jQuery('#'+id).offset().top-40;

Hi, I changed the code but nothing happened...

Could you provide me details to your administrator area via PM ? Please remember to include link to this forum thread in message.

Could you provide me details to your administrator area via PM ? Please remember to include link to this forum thread in message.

Hi, I have the same problem with this too, please let me know how I can solve it.
I have been tried to change
menu_activators.ranges[i] = document.id(id).getPosition().y-40;
but nothing happened.
Thanks,

Calvin Yee