coding help -- text that appears after x seconds

hi,

i am a total hack regarding this kind of stuff, so please pardon my moronosity...

here's a link that describes how to make text appear after x seconds:

http://stackoverflow.com/questions/14636362/show-div-after-2-seconds-of-page-load

the gist of the code is:

<script type = "text/javascript">
$(window).load(function() {
    setTimeout(function() {
        $("#contentPost").show('fadeIn', {}, 500)
    }, 2000);
});
</script>
html/css

<style>
.contentPost { display:none;}
</style>

<div class="contentPost">
 <h2>Hi there</h2>
</div>

and someone added:

$(document).ready(function() {
    $(".contentPost").delay(2000).fadeIn(500);
});

later.

now...i guess i need to add the js "properly," and while it may be unnecessary for most readers here, here are some resources for doing so:

http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/
http://www.sitepoint.com/including-javascript-in-plugins-or-themes/
http://code.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins--wp-24321
http://codex.wordpress.org/Function_Reference/wp_enqueue_script

well, i tried to add the js to my functions.php file, and it busted my site -- WSOD

probably missing a comma -- add to that, knowing what you want does not always mean you know what you are doing.

i went ahead and just tried to add the script in a page:

Ad And Interaction Based Membership Welcome Page

Video Intro

[raw]

<script type = "text/javascript">
$(window).load(function() {
    setTimeout(function() {
        $("#contentPost").show('fadeIn', {}, 500)
    }, 2000);
});
</script>

[/raw] 

<style>
.contentPost { display:none;}
</style>

<div class="contentPost">
 <h2>Hi there</h2>
</div>

and i tried to copy either variation of the script...

anyway -- can i get a hand w getting this scripty to woik?

best,
dainis

  • Kasia Swiderska

    Hello dainis,

    OK, first things first - you can't add JS code to functions.php, because it will break your site - like you said WSOD :slight_smile:.
    For php files you can add php code.
    You have 3 different languages there - every one of them have to be inserted in different places.

    First, we will add your JS script and styles to the footer of your page. Add this code to the functions.php

    add_filter( 'wp_footer', 'wp_footer_cb' );
    function wp_footer_cb() {
    	?>
    	<style>
    		.contentPost { display:none;}
    	</style>
    
    <script type = "text/javascript">
    $(document).ready(function() {
        $(".contentPost").delay(2000).fadeIn(500);
    });
    </script>
    
    	<?php
    }

    Please, not that I wrapped code in php function wp_footer_cb() - this way, your site will not crash.

    Last part is text you will show. This you need to put in the page or post where you want to display it.

    <div class="contentPost">
     <h2>Hi there</h2>
    </div>

    you can add it in this form it to the WordPress editor, it should not cut any part of it.

    This is quick way for doing that.

    Not so quick, but more proper way would be to use wp_enqueue_script function http://codex.wordpress.org/Function_Reference/wp_enqueue_script and wp_enqueue_style.
    This way you have split code into separate js file, css file and add them using functions above.
    But for testing purposes you can first try the quicker way.

    If this will not work, please share link to your site and I will take a look.

    Kind regards,
    Kasia

  • dainis
    <?php
    add_action( 'wp_footer', 'wp_footer_cb_child' );
    function wp_footer_cb_child() {
    ?>
    <style>
    .contentPost { display:none;}
    </style>
    
    <script type = "text/javascript">
    jQuery(document).ready(function($) {
    $(".contentPost").delay(70000).fadeIn(5000);
    });
    </script>
    
    <?php
    }

    appears to work -- i have it in functions.php of my child theme, and this is the code for the text:

    <div class="contentPost">
     <h2>Hi there</h2>
    </div>

    now, just for fun, i might want to make a plugin out of this little tidbit of code, allowing users to determine the variables -- and that would be just for me to get some experience -- however -- the real goal of my process here is to create an

    Interaction and Advertisement Based Membership Level for http://www.curetinnitus.org

    It means this -- you are required to watch 30-90 seconds of advertisments into order to use the site -- likely per day -- or per login -- or something like that.

    You are also "required" to make comments, but that may just be a reminder and not really a "requirement."

    The main goal is to route people to a required advertisement, like forbes.com does (for example).

    best,
    dainis

  • Kasia Swiderska

    Hello dainis,

    Did you check if there is similar plugin to one you want to write? Because if there is you could save bit of time :slight_smile:.
    But if you want to learn to write plugins with settings for users you should check this page https://codex.wordpress.org/Settings_API about Settings API for plugins and this https://codex.wordpress.org/Creating_Options_Pages
    I think for your usage jQuery plugin for cookies will be useful http://www.sitepoint.com/eat-those-cookies-with-jquery/ - with cookies you will handle showing/not showing elements for users.
    User get to page, watches video, you create cookie for 24h, and while cookie exists your user can see your content and not be disturbed by any videos. After cookie expires videos are show again to user.

    Kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.