COMMUNITY FORUM

Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.

k2content Module load action

Start
Prev
1
Next
End

Gregory Spyridis
Topic Author
Offline
New Member

10 years 9 months ago - 10 years 9 months ago #137796 by Gregory Spyridis

k2content Module load action was created by Gregory Spyridis

Portfolio template is displayed when the client scrolls down the page. Can i disable this action without react on animation?
To be understood, the module needs to be loaded after the page is fully downloaded.

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

10 years 9 months ago #137797 by Krikor Boghossian

Replied by Krikor Boghossian on topic k2content Module load action

If I understood correctly you want the module (or entire module position) to be visible only after the page has been fully loaded?

You can use jQuery's load() function. I can assist you in the scriptιng if you send me a link.

FYI. it is possible that the load function will interfere with the minimal scroll spy used for the animations.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Gregory Spyridis
Topic Author
Offline
New Member

10 years 9 months ago - 10 years 8 months ago #137798 by Gregory Spyridis

Replied by Gregory Spyridis on topic k2content Module load action

Exactly! Here is the link http://******.gr/demo/
I will appreciate your help! :)

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

10 years 9 months ago #137799 by Krikor Boghossian

Replied by Krikor Boghossian on topic k2content Module load action

Good Morning Gregory,

Needless to say you made my day with your awesome domain name.

$(window).scroll(function(){

		// Find each animation area
		$('.animArea').each(function(){
			// and do stuff
			if ( $(this).offset().top - $(window).scrollTop() < totalHeight ) {
				$(this).addClass('animatedArea');
			} else {
				//$(animItems).removeClass('animatedArea');
			}
		});

	});

This is the very minimal scrollspy. You will notice that the .animArea class is required.
What you can do is:

Open the index.php file of your template. Then locate the

<section class="row componentArea animArea">

part.

Now come the tricky part.
You need to add a "hidden" class to the module or component which you want to hide while loading and remove the animArea class from the aforementioned section element.

Once you do this you have to use a simple js script to add the animArea class and remove the hidden class from that module/component.

You can use this script snippet to build upon.

// Custom scripts start here
(function($){

	// Remember to replace the class or the id of the module
	$(window).load(function () {
		$('.portfolioItems').removeClass('hidden');
		$('.componentArea').addClass('animArea');
	});

})(jQuery);

Hint: Remember to use the custom.js for any custom js code so you won't lose any changes when you update.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Gregory Spyridis
Topic Author
Offline
New Member

10 years 9 months ago - 10 years 9 months ago #137800 by Gregory Spyridis

Replied by Gregory Spyridis on topic k2content Module load action

Thank you for your response. Please take a look at the picture and tell me where am i wrong. Maybe i didn't understand something right. Load custom.js = YES

This is my root domain. I'm glad you like it!

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

10 years 9 months ago - 10 years 9 months ago #137801 by Krikor Boghossian

Replied by Krikor Boghossian on topic k2content Module load action

You used the hidden class in the componentArea module which hides ALL the content.

You need to use that class on the module, as a module suffix which you already have done.

PS. I can custom.js is loading but it is empty. Mayboe you forgot to paste the snippet.

Hint You can use the module id to have even more control over your elements.

Eg.

$('#moduleId111').removeClass('hidden');

(inside the window load function of course)

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Gregory Spyridis
Topic Author
Offline
New Member

10 years 9 months ago - 10 years 9 months ago #137802 by Gregory Spyridis

Replied by Gregory Spyridis on topic k2content Module load action

I used hidden class only on the module suffix and automatically embeds it at componentArea module.
I removed this line:

$('#moduleId111').removeClass('hidden');

and hidden class was found on #moduleId111

So i thought to try out this without a result:

$('#moduleId111').removeClass('hidden');
$('.componentArea').removeClass('hidden');
$('.componentArea').addClass('animArea');

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

10 years 9 months ago #137803 by Krikor Boghossian

Replied by Krikor Boghossian on topic k2content Module load action

You shouldn't hide your component area.

This will not work. Be wary too that if some element will load eg and image the load funtion will not trigger.

If you want to hide the ENTIRE component area and not some specific module you should look for a custom solution. Eg an entire site preloader (with cookies).

A quick google search led me to this niklausgerber.com/blog/preloadme-a-lightweight-jquery-website-preloader/ which seems very easy to implement.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Start
Prev
1
Next
End