Text appear in banner when page is not fully loaded

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to control (show/hide) html elements while page load

Solution:
It is not really possible for Layouts to anticipate everything that any other plugin or theme might do to dictate what loads when.

You could add some custom JS to your which does something like set the opacity on the to 0 while the page loads and then uses an onload or document ready event to switch the opacity to 1 to reveal the page. (You couldn't set the opacity to 0 via CSS and then use JS to set it to 1 in case JS is disabled or unavailable for some reason.)

So I would suggest you should try to add your code to section.

You can find proposed solution with the following reply:
https://toolset.com/forums/topic/text-appear-in-banner-when-page-is-not-fully-loaded/#post-401050

Relevant Documentation:

This support ticket is created 7 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	10:00 – 13:00	10:00 – 13:00	10:00 – 13:00	10:00 – 13:00	10:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Kolkata (GMT+05:30)

Tagged: Company site reference, Customizing Toolset Starter, Front-end display, Layouts plugin, Reference sites, Toolset Starter Theme

This topic contains 9 replies, has 2 voices.

Last updated by adrianT-6 7 years, 11 months ago.

Assisted by: Minesh.

Author

Posts

May 23, 2016 at 12:19 pm #400844

adrianT-6

I have encountered frequent issue whereby my section title text will appear in the banner before the page is fully loaded.

I have attached 2 screenshots.
1.png shows the issue when the page is not fully loaded.
2.png is the correct output when the page is fully loaded.

Please advise how should I go about resolving this issue as this introduce poor user experience.
If you require my site URL for troubleshooting, please assist to set the next reply to private or let me know if I can send you via private message because my website is still not officially live yet.

Thanks.

May 24, 2016 at 5:50 am #401050

Minesh

Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Actually - this issue is related to the order in which page is loaded. I suggest you may use some CSS gray out overlay trick to hide the page or display the div after the page is loaded.

For example:
hidden link
http://stackoverflow.com/questions/18540948/how-to-create-an-overlay-to-automatically-load-on-page-load

May 24, 2016 at 3:03 pm #401235

adrianT-6

Hi Minesh,

I am actually using the Toolset reference site themes with Toolset Layout enabled.

Please advise where should I insert all these codes? Is it in Header Footer layout?

Thanks.

May 25, 2016 at 6:24 am #401423

Minesh

Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

It is not really possible for Layouts to anticipate everything that any other plugin or theme might do to dictate what loads when.

You could add some custom JS to your <HEAD> which does something like set the opacity on the <BODY> to 0 while the page loads and then uses an onload or document ready event to switch the opacity to 1 to reveal the page. (You couldn't set the opacity to 0 via CSS and then use JS to set it to 1 in case JS is disabled or unavailable for some reason.)

So I would suggest you should try to add your code to <HEAD> section.

May 25, 2016 at 4:13 pm #401654

adrianT-6

Can you advise what is the best practice to add the code into <HEAD>?

I went to Appearance > Editor > Toolset Starter theme > Theme Header (header.php) and add the code there but somehow it does not reflected in the frontend.

Therefore, I went to install "Insert Headers and Footers" plugin and insert the code to <head> tag using the plugin.

I tried to enter the code below and it does not have any effect.
I put in some alert for troubleshooting, only alert('1)' is firing.

Please advise.

<script>
alert('1');
$(document).load(function () {
alert('2');
    $('body').css('opacity', '0');
});

$(document).ready(function() {
alert('3');
    $('body').css('opacity', '1');
});
alert('4');
</script>

May 26, 2016 at 3:23 am #401769

adrianT-6

Back to the initial question, i realized that if i disabled my browser JavaScript, the Section title will stuck in the banner area even when the page is fully loaded.

Please advise how can i troubleshoot further to resolve this issue?

May 26, 2016 at 10:18 am #401866

Minesh

Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

I do not understand why you want to disable your Browser javascript?

Toolset plugins need Javascript in order to run plugins smoothly.

May 26, 2016 at 3:23 pm #401958

adrianT-6

I meant if I disable JavaScript, the problem will exist before and after page load completed.
If I enable JavaScript, the problem will only exist before page load.

I am not disabling Javascript, but can you advise what's wrong with my code on https://toolset.com/forums/topic/text-appear-in-banner-when-page-is-not-fully-loaded/#post-401654 ?

May 27, 2016 at 1:18 pm #402230

Minesh

Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Could you please try to use following code:

<script>
alert('1');
jQuery(document).load(function ($) {
alert('2');
    $('body').css('opacity', '0');
});
 
jQuery(document).ready(function($) {
alert('3');
    $('body').css('opacity', '1');
});
alert('4');
</script>

Here are more examples:
http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load
hidden link

Please feel free to contact our certified partners as well:
https://toolset.com/consultant/

May 28, 2016 at 4:50 am #402363

adrianT-6

The script is working now but it does not resolve my issue.
I have managed to resolve by removing one of the CSS attribute from a class.

Thanks for your help anyway.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.