Javascript - Fade in a widget that slides site content down

Here's What I'm Trying to Accomplish - I have created a horizontal bar at the top of my site where visitors can subscribe to a newsletter. I would like this bar to only show on the homepage, and to fade in a few seconds after the page loads in a manner that pushes the site's content down approx 100px.

Details / Constraints - This bar is a widget area. My site does not use a static page as its homepage.

How can I go about doing this?

  • Adam Czajczyk

    Hello Chris!

    I checked your site and I think this code should help you here:

    <?php 
    
    function wpmu_fade_away_top_bar() {
    
    	// first, hide top bar if it's not homepage
    	if (!is_front_page()) {
    		?>
    		<style>
    			#email_capture {display:none;}
    		</style>
    		<?php
    	}
    	else {
    
    	// second, if it's visible fade it away after 10 seconds
    
    	?>
    
    	<script type="text/javascript">
        jQuery(function($) {
            var task = setInterval(function() {
                $('#email_capture').fadeOut();
    	        clearInterval(task);
            }, 10000);
        });
        </script>
    
    	<?php
    
    	}
    
    }
    add_action('wp_footer','wpmu_fade_away_top_bar');

    To apply it to your site:

    - create an empty file with a ".php" extension (e.g. "fade-away.php")
    - put above code inside
    - access your site via FTP
    - upload the file to the "/wp-content/mu-plugins" folder on your server.

    If there's no "mu-plugins" folder inside "/wp-content", just create it.

    Let me know if it worked for you. In case you'd need further assistance, I'll be happy to help.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Chris!

    I understand that the code worked but instead of hiding top bar from everywhere but the front page and then hiding it from front page after some time as well you need it to be hidden everywhere and then "fade it in" after predefined time. Is that correct?

    Here's adjusted code that should help:

    <?php 
    
    function wpmu_fade_away_top_bar() {
    
    	// first, hide top bar from everywhere
    
    		?>
    		<style>
    			#email_capture {display:none;}
    		</style>
    		<?php
    
    	// second check if it's front page
    	if (!is_front_page()) {
    	// and fade it in after 10 seconds
    
    		?>
    
    		<script type="text/javascript">
    		jQuery(function($) {
    			var task = setInterval(function() {
    				$('#email_capture').fadeIn();
    				clearInterval(task);
    			}, 10000);
    		});
    		</script>
    
    		<?php
    
    	}
    
    }
    add_action('wp_footer','wpmu_fade_away_top_bar');

    Please give it a try instead the one I shared previously. In order to increase/decrease the time after which the bar appears please adjust the value in this line (1000 = 1 second):

    }, 10000);

    Let me know if this works!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.